โปรแกรมประย กต แบบหน าเด ยว single page application ต วย อ SPA เป นร ปแบบของโปรแกรมประย กต บนเว บหร อเว บไซต ท โต ตอบก บ

โปรแกรมประยุกต์แบบหน้าเดียว (single-page application, ตัวย่อ: SPA) เป็นรูปแบบของโปรแกรมประยุกต์บนเว็บหรือเว็บไซต์ ที่โต้ตอบกับผู้ใช้โดยการเขียนหน้าปัจจุบันใหม่แบบพลวัต แทนที่จะโหลดหน้าใหม่ทั้งหมดจากเซิร์ฟเวอร์แบบเว็บไซต์ดั้งเดิม วิธีการนี้จะช่วยหลีกเลี่ยงการรบกวน ด้วยการสลับระหว่างหน้าต่าง ๆ ทำให้เป็นเหมือนโปรแกรมประยุกต์บนเดสก์ท็อป

ในแอปพลิเคชันแบบหน้าเดียว โค้ดที่จำเป็นทั้งหมด (ประกอบไปด้วย HTML, JavaScript และ CSS) จะถูกเรียกค้นโดยการโหลดหน้าเดียว หรือทรัพยากรที่เหมาะสมจะถูกเพิ่มลงในเพจตามความต้องการ (โดยปกติจะตอบสนองต่อการกระทำของผู้ใช้) แม้ว่าการแฮชตำแหน่ง หรือ API ประวัติ HTML5 สามารถนำมาใช้เพื่อสร้างการรับรู้และการนำทางของเพจเฉพาะที่ที่แยกจากกันภายในโปรแกรมประยุกต์ ตัวหน้าจะไม่โหลดซ้ำ ณ จุดใด ๆ ในกระบวนการ และจะไม่ถ่ายโอนการควบคุมไปยังหน้าอื่น ๆ การโต้ตอบกับโปรแกรมประยุกต์แบบหน้าเดียวมักอาศัยการสื่อสารแบบพลวัตกับส่วนหลังของเว็บเซิร์ฟเวอร์

ประวัติศาสตร์

แม้ว่าแนวคิดนี้จะมีการพูดคุยกันตั้งแต่ต้นปี 2003 แล้ว แต่ที่มาของคำว่า single-page application ก็ยังไม่เป็นที่ชัดเจน สตูอาร์ต มอร์ริส(Stuart Morris) นักศึกษาด้านเขียนโปรแกรมที่ได้เขียนเว็บไซต์ของตัวเอง slashdotslash.com ขึ้นในเดือนเมษายน 2002 โดยมีเป้าหมายและฟังก์ชันการทำงานในแบบดังกล่าว ต่อมาในปีนั้นได้มีการเขียนบทความกล่าวถึงโดย ลูคัส บีร์โด (Lucas Birdeau), เควิน ฮักมัน (Kevin Hakman), ไมเคิล พีเชย์ (Michael Peachey) และ เอวาน เย่ (Evan Yeh)

สามารถอาศัยจาวาสคริปต์ในเว็บเบราว์เซอร์เพื่อแสดงส่วนต่อประสานกับผู้ใช้ (UI) เรียกใช้งานโปรแกรม และสื่อสารกับเว็บเซิร์ฟเวอร์ ปัจจุบันมีไลบรารีโอเพนซอร์สที่ถูกพัฒนามาอย่างดีซึ่งช่วยให้สามารถสร้างโปรแกรมประยุกต์แบบหน้าเดียวได้ ช่วยลดปริมาณโค้ดจาวาสคริปต์ที่นักพัฒนาต้องเขียนทำให้เขียนได้ง่าย

ความคิดริเริ่มด้านเทคโนโลยี

ปัจจุบันมีเทคโนโลยีต่าง ๆ มากมายที่ทำให้เว็บเบราว์เซอร์ทำงานอยู่ภายในหน้าเดียว ในขณะเดียวกันก็อนุญาตให้ตัวโปรแกรมสามารถสื่อสารกับเซิร์ฟเวอร์ไปด้วยได้

เฟรมเวิร์กจาวาสคริปต์

เฟรมเวิร์กจาวาสคริปต์ เช่น , , , , และ เป็นต้น ได้นำหลักการโปรแกรมประยุกต์แบบหน้าเดียวมาใช้

Ajax

มีการใช้เทคโนโลยี Ajax อย่างกว้างขวาง โดยมากใช้อ็อบเจ็กต์ XMLHttpRequest / ActiveX (เลิกใช้แล้ว) ของจาวาสคริหต์ วิธี Ajax อื่น ๆ รวมถึงการใช้ IFRAME หรือองค์ประกอบ script HTML ไลบรารียอดนิยม เช่น jQuery สามารถสร้างมาตรฐาน Ajax สำหรับเบราว์เซอร์จากผู้ทำการค้าหลายราย และทำให้เทคโนโลยี Ajax เป็นที่นิยมยิ่งขึ้น

WebSocket

เป็นเทคโนโลยีการสื่อสารไคลเอ็นต์-เซิร์ฟเวอร์แบบเวลาจริงสองทิศทางในข้อกำหนด HTML5 ซึ่งเหนือกว่า Ajax ในแง่ของประสิทธิภาพและความเรียบง่าย

อ้างอิง

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.

[Flanagan2006-1] Flanagan, David, "JavaScript - The Definitive Guide", 5th ed., O'Reilly, Sebastopol, CA, 2006, p.497

[2] "Fixing the Back Button: SPA Behavior using Location Hash" (ภาษาอังกฤษแบบอเมริกัน). คลังข้อมูลเก่าเก็บจากแหล่งเดิมเมื่อ 2016-02-13. สืบค้นเมื่อ 2016-01-18.

[3] "Inner-Browsing: Extending Web Browsing the Navigation Paradigm". คลังข้อมูลเก่าเก็บจากแหล่งเดิมเมื่อ 2014-03-27. สืบค้นเมื่อ 2011-02-03.

[4] "Slashdotslash.com: A self contained website using DHTML". สืบค้นเมื่อ 2012-07-06.

[5] "US patent 8,136,109". คลังข้อมูลเก่าเก็บจากแหล่งเดิมเมื่อ 2017-08-15. สืบค้นเมื่อ 2002-04-12.

[6] "Real-Time Monitoring using AJAX and WebSockets". คลังข้อมูลเก่าเก็บจากแหล่งเดิมเมื่อ 2018-11-30. สืบค้นเมื่อ 2016-06-01.