Single-Page Application (SPA)

เรียกว่าเป็น Trend การพัฒนาเว็บที่มาแรงที่สุดของปี 2016 เลยก็ว่าได้ และคิดว่าปีหน้าก็คงเป็นปีที่คนทำเว็บต้องหันมาศึกษากันคึกคักแน่นอน นั่นคือ Single-Page Application ต่อไปนี้ผมเรียกย่อๆ ว่า SPA (คนละสปาที่ไปนวดตัวนะครับ อันนั้นตัวหอมเลยทีเดียว)

SPA คืออะไร?

มันคือการเขียนเว็บโดยใช้ html แค่หน้าเดียว หลังจากโหลดหน้าเว็บเสร็จแล้วจะไม่มีการ refresh browser เพื่อเปิดหน้าใหม่ ขอยกตัวอย่างเช่นหน้าแรกของ facebook.com ที่เราสามารถทำอะไรได้หลายๆ อย่างในหน้าเดียวเช่น โพสต์ status หรือดู notification ว่ามีใครมาเม้นต์หรือไลค์ข้อความใหนบ้าง หรือ follow/unfollow ซ่อนโพสต์ที่ไม่ชอบก็ได้ในหน้าเดียว

แต่ทว่า facebook.com ก็ยังไม่ใช่ single-page สังเกตุได้จากเมื่อเราคลิกเข้าไปดู profile ตัวเอง มันมีการ refresh browser เพื่อเข้าไปดูนั่นเอง

การทำงาน

พระเอกของเราคงหนีไม่พ้น Javascript แน่นอนครับ และฝั่ง server ก็ต้องรองรับด้วย เช่นการเปิด rest api รองรับด้วย โดยงานหลักๆ จะอยู่ที่ฝั่ง browser ประมาณนี้

  • ติดต่อ server ผ่าน ajax
  • สื่อสารแบบ realtime ด้วย websocket
  • update หน้าจอด้วย javascript
  • ความลื่นไหลของหน้าจอและเป็น responsive ด้วย html5
  • และอีกสารพัดเทคนิคที่ผมก็ยังไม่เคยใช้

จะเห็นว่าถ้าเราทำเองก็คงจะลำบาก สู้ไปใช้ framework/library ของชาวบ้านดีกว่า ซึ่งที่กำลังฮิตๆ กันก็มีหลายเจ้า ที่ผมรู้ก็มี

  • AngularJS ของทาง Google (ตอน Angular 2 ออกมาเขาให้เรียกแบบไม่มี JS ต่อท้าย)
  • ReactJS ของทาง Facebook
  • VueJS
  • EmberJS

 

ข้อดีของ SPA

ผมขอยกจากที่เคยอ่านจากทาง facebook engineer เลยครับ นั่นคือเขาต้องการให้ผู้ใช้อยู่บนหน้าเว็บนานๆ  ซึ่งเมื่ออยู่นานเข้าผู้ใช้ก็จะมีโอกาสทำอย่างอื่นมากขึ้น ซึ่งเขาจะได้แสดงโฆษณาได้นานขึ้น แล้วเขาก็ได้ตังก์จากตรงนี้แหละ

อีกกรณีหนึ่งคือทำให้ผู้ใช้งานรู้สึกใช้เว็บแล้วลื่นไหลไม่มีสะดุด เช่นไม่ต้องรอโหลดหน้าเว็บเป็นต้น

ข้อเสียของ SPA

  • Security เนื่องจากการทำ SPA เป็นการทำงานบนหน้า html เพียงหน้าเดียว เราจะต้องคุม Security เองให้ดี ซึ่งไม่เหมือนกับการเขียนเว็บปกติที่เราสามารถพึ่งพา server ได้เต็มที่ หนึ่งในเรื่องนี้ก็แก้ได้โดยการใช้พวก token เช่น https://jwt.io/ เป็นต้น
  • Bookmark เนื่องจากเรามีแค่หน้าจอเดียวแต่ทำงานได้หลากหลาย ทำให้การตั้ง bookmark จึงทำได้แค่เพียงหน้าเว็บแรกเท่านั้น ไม่สามารถ bookmark การทำงานในหน้าจอที่ต้องการได้
  • SEO เนื่องจากการทำงานเป็นการใช้ javascript render ทำให้ bot ของ search engine ไม่สามารถอ่านเนื้อหาข้างในได้ (แว่วๆ มาว่าพวก framework เขากำลังแก้เรื่องนี้กันอยู่)
  • ไม่ support browser รุ่นเก่า สาเหตุที่ SPA ไม่ค่อยดังเนื่องจากปัญหา cross browser นี่หล่ะครับ บางคนก็ยังจำเป็นต้องใช้ browser เก่าถึงแม้ว่าจะมีการผลักดันจากเว็บใหญ่ๆ ให้ไปใช้ browser รุ่นใหม่ แต่ก็ยังไม่สามารถทำได้เนื่องจากมี web ที่ต้องใช้งานในองค์กรแล้วไม่ support browser รุ่นใหม่ๆ เป็นต้น

ทิ้งท้าย

ก่อนจะพัฒนา SPA คงต้องยอมรับข้อเสียให้ได้ก่อน โดยเฉพาะเรื่อง browser ซึ่งหากเราใช้ framework ตอนนี้เขาบังคับให้เราต้องใช้ IE9 เป็นอย่างน้อย ไม่งั้นเราต้องเขียนเองโดยใช้พวก jQuery, Bootstrap เป็นต้น

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s