โปรแกรมประยุกต์แบบหน้าเดียว
โปรแกรมประยุกต์แบบหน้าเดียว (single-page application, ตัวย่อ: SPA) เป็นรูปแบบของโปรแกรมประยุกต์บนเว็บหรือเว็บไซต์ ที่โต้ตอบกับผู้ใช้โดยการเขียนหน้าปัจจุบันใหม่แบบพลวัต แทนที่จะโหลดหน้าใหม่ทั้งหมดจากเซิร์ฟเวอร์แบบเว็บไซต์ดั้งเดิม วิธีการนี้จะช่วยหลีกเลี่ยงการรบกวนประสบการณ์ผู้ใช้ ด้วยการสลับระหว่างหน้าต่าง ๆ ทำให้เป็นเหมือนโปรแกรมประยุกต์บนเดสก์ท็อป
ในแอปพลิเคชันแบบหน้าเดียว โค้ดที่จำเป็นทั้งหมด (ประกอบไปด้วย HTML, JavaScript และ CSS) จะถูกเรียกค้นโดยการโหลดหน้าเดียว[1] หรือทรัพยากรที่เหมาะสมจะถูกเพิ่มลงในเพจตามความต้องการ (โดยปกติจะตอบสนองต่อการกระทำของผู้ใช้) แม้ว่าการแฮชตำแหน่ง หรือ API ประวัติ HTML5 สามารถนำมาใช้เพื่อสร้างการรับรู้และการนำทางของเพจเฉพาะที่ที่แยกจากกันภายในโปรแกรมประยุกต์ ตัวหน้าจะไม่โหลดซ้ำ ณ จุดใด ๆ ในกระบวนการ และจะไม่ถ่ายโอนการควบคุมไปยังหน้าอื่น ๆ[2] การโต้ตอบกับโปรแกรมประยุกต์แบบหน้าเดียวมักอาศัยการสื่อสารแบบพลวัตกับส่วนหลังของเว็บเซิร์ฟเวอร์
ประวัติศาสตร์
[แก้]แม้ว่าแนวคิดนี้จะมีการพูดคุยกันตั้งแต่ต้นปี 2003 แล้ว แต่ที่มาของคำว่า single-page application ก็ยังไม่เป็นที่ชัดเจน[3] สตูอาร์ต มอร์ริส(Stuart Morris) นักศึกษาด้านเขียนโปรแกรมที่มหาวิทยาลัยคาร์ดิฟได้เขียนเว็บไซต์ของตัวเอง slashdotslash.com ขึ้นในเดือนเมษายน 2002 โดยมีเป้าหมายและฟังก์ชันการทำงานในแบบดังกล่าว[4] ต่อมาในปีนั้นได้มีการเขียนบทความกล่าวถึงโดย ลูคัส บีร์โด (Lucas Birdeau), เควิน ฮักมัน (Kevin Hakman), ไมเคิล พีเชย์ (Michael Peachey) และ เอวาน เย่ (Evan Yeh)[5]
สามารถอาศัยจาวาสคริปต์ในเว็บเบราว์เซอร์เพื่อแสดงส่วนต่อประสานกับผู้ใช้ (UI) เรียกใช้งานโปรแกรม และสื่อสารกับเว็บเซิร์ฟเวอร์ ปัจจุบันมีไลบรารีโอเพนซอร์สที่ถูกพัฒนามาอย่างดีซึ่งช่วยให้สามารถสร้างโปรแกรมประยุกต์แบบหน้าเดียวได้ ช่วยลดปริมาณโค้ดจาวาสคริปต์ที่นักพัฒนาต้องเขียนทำให้เขียนได้ง่าย
ความคิดริเริ่มด้านเทคโนโลยี
[แก้]ปัจจุบันมีเทคโนโลยีต่าง ๆ มากมายที่ทำให้เว็บเบราว์เซอร์ทำงานอยู่ภายในหน้าเดียว ในขณะเดียวกันก็อนุญาตให้ตัวโปรแกรมสามารถสื่อสารกับเซิร์ฟเวอร์ไปด้วยได้
เฟรมเวิร์กจาวาสคริปต์
[แก้]เฟรมเวิร์กจาวาสคริปต์ เช่น AngularJS, Ember.js, Meteor.js, ExtJS, React และ Vue.js เป็นต้น ได้นำหลักการโปรแกรมประยุกต์แบบหน้าเดียวมาใช้
Ajax
[แก้]มีการใช้เทคโนโลยี Ajax อย่างกว้างขวาง โดยมากใช้อ็อบเจ็กต์ XMLHttpRequest / ActiveX (เลิกใช้แล้ว) ของจาวาสคริหต์ วิธี Ajax อื่น ๆ รวมถึงการใช้ IFRAME หรือองค์ประกอบ script HTML ไลบรารียอดนิยม เช่น jQuery สามารถสร้างมาตรฐาน Ajax สำหรับเบราว์เซอร์จากผู้ทำการค้าหลายราย และทำให้เทคโนโลยี Ajax เป็นที่นิยมยิ่งขึ้น
WebSocket
[แก้]WebSocket เป็นเทคโนโลยีการสื่อสารไคลเอ็นต์-เซิร์ฟเวอร์แบบเวลาจริงสองทิศทางในข้อกำหนด HTML5 ซึ่งเหนือกว่า Ajax ในแง่ของประสิทธิภาพและความเรียบง่าย[6]
อ้างอิง
[แก้]- ↑ Flanagan, David, "JavaScript - The Definitive Guide", 5th ed., O'Reilly, Sebastopol, CA, 2006, p.497
- ↑ "Fixing the Back Button: SPA Behavior using Location Hash" (ภาษาอังกฤษแบบอเมริกัน). คลังข้อมูลเก่าเก็บจากแหล่งเดิมเมื่อ 2016-02-13. สืบค้นเมื่อ 2016-01-18.
- ↑ "Inner-Browsing: Extending Web Browsing the Navigation Paradigm". คลังข้อมูลเก่าเก็บจากแหล่งเดิมเมื่อ 2014-03-27. สืบค้นเมื่อ 2011-02-03.
- ↑ "Slashdotslash.com: A self contained website using DHTML". สืบค้นเมื่อ 2012-07-06.
- ↑ "US patent 8,136,109". คลังข้อมูลเก่าเก็บจากแหล่งเดิมเมื่อ 2017-08-15. สืบค้นเมื่อ 2002-04-12.
- ↑ "Real-Time Monitoring using AJAX and WebSockets". คลังข้อมูลเก่าเก็บจากแหล่งเดิมเมื่อ 2018-11-30. สืบค้นเมื่อ 2016-06-01.