Please enable JavaScript.
Coggle requires JavaScript to display documents.
Assignment 1 [SPA & JS Framework, Resful API], ข้อดี, ข้อเสีย, ข้อดี,…
Assignment 1 [SPA & JS Framework, Resful API]
Single page application (SPA)
ความหมาย
คือ web application ที่จะโหลด html เพียงตัวเดียว แต่สามารถตอบสนองการใช้งานของผู้ใช้ โดยจะสามารถเรียกใช้ html ตัวอื่นๆ แบบ dynamic ได้. สิ่งที่แตกต่างอย่างชัดเจนระหว่างเวปไซต์ทั่วไปและ SPA คือการลดจำนวนการรีเฟรชหน้าเวป. SPA ใช้ AJAX และ HTML5 ในการติดต่อไปที่ back-end servers เพื่อไปเอาข้อมูลมาแสดงผลที่หน้าเวป โดยที่ไม่ต้องทำการรีเฟรชเวปทั้งหมด ซึ่งกระบวนการในการ render เวปเพจ จะเกิดขึ้นที่ฝั่ง client เกือบทั้งหมด
Framework
ReactJS
EmberJS
AngularJS
Backbone.js
Meteor.js
6.Vue.js
Server side rendering (SSR)
ความหมาย
เมื่อมีการเรียกเว็บ NextJS เซิร์ฟเวอร์จะเรียกใช้ฟังก์ชั่น getServerSideProps เพื่อดึงข้อมูลต่างๆ ให้ React Component นำไปประกอบ จากนั้นจะส่ง HTML กลับไปยังบราวเซอร์
ภาษาที่ใช้
1.PHP
2.ASP.NET (C# OR Visual Basic)
3.C++
4.Java and JSP
5.Python
6.Ruby on Rails and so on.
SPA กับ SSR แตกต่างกันอย่างไร
SPA
มี User Experience ที่ดีกว่า
การตอบสนองของ website มีความรวดเร็ว
สามารถพัฒนาฟีเจอร์ได้หลากหลาย เพราะการจัดการของข้อมูลเรียกใช้งานด้วย API ที่แยกออกจากตัวแสดงผล
ใช้ bandwidth น้อย เพราะ ทำการเรียก API เพื่อให้ได้ผลลัพธ์ที่เพียงพอต่อการแสดงผลบนหน้าเว็บ
Security เนื่องจากการทำ SPA เป็นการทำงานบนหน้า html เพียงหน้าเดียว เราจะต้องคุม Security เองให้ดี ซึ่งไม่เหมือนกับการเขียนเว็บปกติที่เราสามารถพึ่งพา server ได้เต็มที่ หนึ่งในเรื่องนี้ก็แก้ได้โดยการใช้พวก token เช่น
https://jwt.io/
เป็นต้น
Bookmark เนื่องจากเรามีแค่หน้าจอเดียวแต่ทำงานได้หลากหลาย ทำให้การตั้ง bookmark จึงทำได้แค่เพียงหน้าเว็บแรกเท่านั้น ไม่สามารถ bookmark การทำงานในหน้าจอที่ต้องการได้
SSR
บราวเซอร์มีเนื้อหาครบตั้งแต่ Request แรก
บราวเซอร์ไม่จำเป็นต้องดึงข้อมูลอื่นๆ อีก ทำให้ประหยัด Request
ดีสำหรับ SEO เป็นมิตรกับ Search Engine เนื่องจากได้รับข้อมูล HTML ที่มีเนื้อหาไปเลย
เสียทรัพยากรบนเซิร์ฟเวอร์เยอะกว่า เนื่องจากต้อง Render HTML บนเซิร์ฟเวอร์ และแอปพลิเคชั่นจำเป็นต้องรันตลอดเวลาเพื่อรับ Request
ใช้กับ UI Library/Framework บางตัวไม่ได้ เนื่องจากไม่มี window และ document ให้เรียกใช้โดยตรง
SPA สามารถทำ SEO ได้ไหม ถ้าได้มีวิธีการคร่าวๆ อย่างไร ถ้าไม่ได้เพราะอะไร ?
สามารถทำได้แต่ สำหรับการทำ SEO กับ Single page application (SPA) นั้น เราอาจยังคงจะต้องทำ Server Side Rendering (SSR) อยู่ ถึงแม้ว่าปัจจุบัน Bot Google จะสามารถอ่าน Javascrit ได้แล้วก็ตาม แต่การใช้งานเช่น Share Web ไปยัง Facebook โดยการอ้างถึง Opengraph Meta Tag ต่างๆ ยังคงใช้งานไม่ได้ เราจึงต้องหวังพึ่งการทำ Server Side Rendering (SSR)
Resful API & API Guideline
RESTful API
RESTful หรือ REST คือ
Representational state transfer หรือ REST คือ การสร้าง Webservice ชนิดหนึ่งที่ใช้สื่อสารกันบน Internet ใช้หลักการแบบ stateless คือไม่มี session ซึ่งต่างจาก webservice แบบอื่นเช่น WSDL และ SOAP การทำงานของ RESTful Webservice จะอาศัย URI/URL ของ request เพื่อค้นหาและประมวลผลแล้วตอบกลับไปในรูป XML, HTML, JSON โดย response ที่ตอบกลับจะเป็นการยืนยันผลของคำสั่งที่ส่งมา และสามารถพัฒนาด้วยภาษา programming ได้หลากหลาย คำสั่งก็จะมีตาม HTTP verbs
HTTP verbs คือคำาสั่ง
1.GET ทำกการดึงข้อมูลภายใน URI ที่กำหนด
2.POST สำหรับสร้างข้อมูล
3.PUT ใช้แก้ไขข้อมูลหรืออัพเดทข้อมูล
4.DELETE สำหรับลบข้อมูล
API Guideline
คือการออกแบบ RESTful API เพื่อคนในทีม ส่วนมากจะเป็น Concept หรือแนวทางการปฎิบัติ การออกแบบ API ก็เป็นเพียงแค่แนวทางในการปฎิบัติ เพื่อให้ทีมเป็นไปในแนวทางเดียวกันเท่านั้น
ข้อดี
ข้อเสีย
ข้อดี
ข้อเสีย