รู้หรือไม่ ?! นอกจาก MEAN Stack และ MERN Stack แล้วนั้น ยังมี Stack ในการพัฒนาเว็บอีกรูปแบบหนึ่งที่กำลังเป็นที่นิยมของชาวเว็บเดฟ...นั่นคือ JAMstack
.
แล้วมันคืออะไร ? มีหลักการทำงานยังไง ? วันนี้แอดจะพาทุกคนไปรู้จักเจ้า JAMstack ไปพร้อม ๆ กัน หากพร้อมแล้วไปอ่านกันเลย !!
.
🌟 JAMstack - เป็นสถาปัตยกรรมสำหรับการพัฒนาเว็บบนพื้นฐานของ JavaSctipt, APIs, และ Markup ออกแบบมาเพื่อให้ผู้พัฒนาสามารถสร้างเว็บเร็ว ปลอดภัย และสามารถปรับขนาดได้ง่ายมากขึ้น
.
✏️ โดย JAM ย่อมาจาก
.
🔸 JavaScript - เป็นภาษาโปรแกรมมิ่งที่ใช้ในการพัฒนา Front-end หรือรวมไปถึง JavaSctipt Framework หรือ Library อื่น ๆ ที่ใช้ในการพัฒนาเว็บไซต์แบบไดนามิกบนฝั่ง Client
.
🔸 APIs (Application Programming Interface) - คือวิธีร้องขอข้อมูลที่ต้องการจากโปรแกรมหรือแอปพลิเคชันจากปลายทาง โดยจะเชื่อมต่อกับฝั่ง JavaScript ผ่าน HTTP Protocol
.
🔸 Markup - เป็นรูปแบบ Template ที่ใช้ในการแสดงและจัดรูปแบบหน้าเว็บ
.
⚙️ หลักการทำงาน
.
การสร้างเว็บแบบเดิมจะทำงานในส่วนเซิร์ฟเวอร์เป็นหลัก อย่างเช่น ถ้าเราอยากสร้างเว็บไซต์ที่ต้องดึงข้อมูลจาก API ออกมาแสดงผลแบบเรียลไทม์ ก็จะต้องเขียนแอปฝั่ง Back-End เพื่อดึงข้อมูลออกมาอย่างต่อเนื่อง และสิ่งเหล่านี้จะทำงานบนเซิร์ฟเวอร์ เมื่อผู้ใช้เปิดเว็บก็จะสร้างหน้า HTML เพื่อแสดงคะแนนเหล่านั้นให้กับผู้ใช้ ซึ่งถ้ารีเฟรชหน้าก็จะต้องทำขึ้นตอนเหล่านี้ใหม่เรื่อย ๆ ทำให้ใช้เวลานาน และหากมีผู้เข้าใช้จำนวนมากอาจจะทำให้เว็บไซต์ล่มได้นั่นเอง
.
แต่ JAMstack จะแยกส่วนการทำงานทั้งหมด เชื่อมต่อระบบต่าง ๆ ด้วย API และใช้ CDN เป็นตัวกลางในการเชื่อมต่อ เมื่อเราสร้าง Template (ด้วย Framework จาก JavaSctipt เช่น Gastby, Next, Nuxt, Jekyll) ก็จะถูกเก็บไว้ใน CDN เป็น Static File เมื่อผู้ใช้เปิดเว็บ CDN ก็จะส่งเป็น Static File ออกมาแสดง จากนั้นเว็บก็จะไปทำการเรียก API เพื่อดึงข้อมูลมาแสดงตาม Template ที่มีการเรียกใช้ไว้แล้ว ซึ่งจะทำให้เว็บโหลดได้เร็วมากขึ้น คือแสดงผลได้เลยไม่ต้องรอนาน และเราก็ไม่ต้องยุ่งยากในการเขียนโค้ดทางฝั่ง Back-End และเซิร์ฟเวอร์ก็ไม่ต้องรับภาระหนักอีกต่อไป
✨ ประโยชน์
.
ความรวดเร็ว - การสร้างเว็บด้วย JAMStack สามารถแสดงข้อมูลเพราะไฟล์ต่าง ๆ ถูกสร้างไว้ล่วงหน้าแล้วเพื่อรอให้ CDN เรียกใช้เมื่อผู้ใช้เปิดเว็บก็จะแสดงได้อย่างรวดเร็ว โดยไม่ต้องเซิร์ฟเวอร์ Request และ Response นั่นเอง
.
ให้ประสบการณ์ที่ดีกับนักพัฒนา - สามารถสร้างด้วยเครื่องมือที่หลากหลาย ไม่ขึ้นกับเทคโนโลยีใดเทคโนโลยีหนึ่ง สร้างเว็บได้ง่ายโดยสามารถใช้เครื่องมือที่เหล่าเดฟถนัดอยู่แล้วมาพัฒนาได้
.
บำรุงรักษาได้ง่าย - เพราะมีการทำงานแบบแยกส่วนกัน การแก้ไขหรืออัปเดตแต่ละส่วนได้ง่ายโดยไม่ต้องกระทบกัน
.
.
📑 อ่านข้อมูลเพิ่มเติมที่นี่ : https://www.cloudflare.com/learning/performance/what-is-jamstack/ , https://jamstack.org/what-is-jamstack/
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
#JAMstack #webdelopment #BorntoDev
「javascript apis」的推薦目錄:
- 關於javascript apis 在 BorntoDev Facebook 的最讚貼文
- 關於javascript apis 在 軟體開發學習資訊分享 Facebook 的最佳解答
- 關於javascript apis 在 軟體開發學習資訊分享 Facebook 的精選貼文
- 關於javascript apis 在 javascript-使用api串接公開第三方資源 的評價
- 關於javascript apis 在 Google API Client Library for JavaScript - GitHub 的評價
- 關於javascript apis 在 Graph API Request - JavaScript SDK - Facebook for Developers 的評價
- 關於javascript apis 在 Where is the JavaScript DOM API documented? - Stack Overflow 的評價
javascript apis 在 軟體開發學習資訊分享 Facebook 的最佳解答
🔥課程特價中
從這 32 小時的課程,你會學到
1 20 個專案,包括純 JavaScript、HTML5、CSS3 以及所有提供的程式碼
2 從一個初學者到一個自信的 JavaScript 開發者
3 學習 UI/UX 實踐來建構響應式和行動優先的 Web 應用程式
非同步程式設計與 AJAX、Fetch (獲取) API、Promises (承諾)和非同步 + 等待
4 編寫乾淨、可維護和高效的 Javascript 程式碼
5 運用 Web APIs (localStorage,DOM,+ 更多)
6 現代 HTML5(畫布,影片,音訊 + 更多)
現代 CSS3(動畫,過渡,變數 + 更多)
7 避免其他 Javascript 程式設計師和初學者常犯的錯誤
構建 20 個漂亮的、客製化的、真實世界的前端應用程式
https://softnshare.com/javascript-web-projects-to-build-your-portfolio-resume/
javascript apis 在 軟體開發學習資訊分享 Facebook 的精選貼文
NT 430 特價中
WebRTC – Web 即時通訊是一個帶有 javascript APIS 的多媒體引擎,支援影片、語音和一般資料在對等體之間傳送,允許開發者建立強大的語音和影片通訊解決方案。
WebRTC 不僅用於語音或影片通話,它是相當強大和通用的,你可以用它來建立一個群組通話服務,新增錄音或只用它來傳輸資料。
在本課程中,你將從頭開始深入學習 WebRTC,並知道如何在應用程式中使用 WebRTC。所以基本上你會在實踐中學習。你將透過建立一個 WebRTC 應用程式來學習 WebRTC,在那裡你將學習如何串流媒體影片,如何建立訊號伺服器,如何與其他使用者連線,如何呼叫並接受或接收這些呼叫。如何切換影片或音訊的開關,如何透過 WebRTC 資料通道傳送資料,還可以學習如何錄製影片和下載影片。如何即時共享螢幕,最後你將學習如何建立一個群組視訊通話應用程式。不僅僅是應用程式,你還將學習支援 WebRTC 應用程式的基礎技術。
https://softnshare.com/the-webrtc-bootcamp-2021/
javascript apis 在 Google API Client Library for JavaScript - GitHub 的推薦與評價
Google APIs Client Library for browser JavaScript, aka gapi. - GitHub - google/google-api-javascript-client: Google APIs Client Library for browser ... ... <看更多>
javascript apis 在 Graph API Request - JavaScript SDK - Facebook for Developers 的推薦與評價
The response object available to this function contains the API result. Examples. Example: Read the JavaScript Facebook Page: FB. ... <看更多>
javascript apis 在 javascript-使用api串接公開第三方資源 的推薦與評價
API (Application Program Interface)意即應用程式的接口,用於定義軟體與軟體之間銜接所需的溝通方法。換句話說,API是讓軟體與軟體互相串接溝通橋樑 ... ... <看更多>