關於 angular spa ，我們在網路上蒐集到這些相關的討論、資訊與評價

🔥 หากใครกำลังสงสัยว่า Client-Side Rendering และ Server-Side Rendering มันแตกต่างกันยังไง? เหมาะกับการใช้งานแบบไหน วันนี้แอดสรุปมาให้เพื่อนๆ แล้วจ้า ไปอ่านไปเลย!!
.
✨ Client-Side Rendering (CSR) - การแสดงผลฝั่ง Client
การทำงานของมันคือเมื่อเราสร้างเว็บด้วย React, Angular, หรือ Vue จะมีการทำงานแบบ SPA (Single Page Application) คือในช่วงแรกที่ผู้ใช้เปิดเว็บมา มันจะมีแค่คำสั่ง HTML พื้นฐาน หรือแสดงแค่ Template การแสดงผลเนื้อหาเบราว์เซอร์จะทำการส่ง Request ให้ Server ก่อน จากนั้นจะดึง Code JavaScript ออกมา และแสดงผลเนื้อหาต่างๆ ให้กับผู้ใช้ได้เห็นนั่นเอง
.
👍 ข้อดี
ง่ายต่อการเขียน Code
แสดงผลอย่างรวดเร็ว (ยกเว้นการ Request ครั้งแรก)
เป็นการทำงานแบบแยกส่วน
.
👎 ข้อจำกัด
ไม่ค่อยรองรับ SEO
มีความซับซ้อน
.
🙋 เหมาะกับ: เว็บไซต์ที่ต้องการโต้ตอบกับผู้ใช้อยู่บ่อยครั้ง และมีการเข้าใช้งานแบบนานๆ
.
✨ Server-Side Rendering (SSR) - การแสดงผลฝั่งเซิร์ฟเวอร์
การแสดงผลฝั่งเซิร์ฟเวอร์จะแสดงผลทุกครั้งที่มีการ Request ซึ่งเซิร์ฟเวอร์จะทำการรวบรวมข้อมูลที่อยู่ในฐานข้อมูลและส่งข้อมูลที่ได้ไป Render เป็น HTML Template จากนั้นจะถูกส่งไปยังเบราว์เซอร์เพื่อแสดงผลให้ผู้ใช้เห็น
.
👍 ข้อดี
รองรับ SEO
ง่ายต่อการเขียน Code
ทำงานแบบแยกส่วน
.
👎 ข้อจำกัด
มีความซับซ้อน
.
🙋 เหมาะกับ : เว็บไซต์ที่แสดงผลเนื้อหา โดยที่ไม่มีการโต้ตอบกับผู้ใช้
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน

🔥 ใครมาสาย JavaScript แล้วยังเลือก Framework / Libs ไม่ได้ซักกะที มาโพสต์นี้ได้เลยย !!
.
กับ 5 Javascript Framework / Libs ที่ฮิตที่สุดในปี 2020 - 2021 ที่ทุกคนห้ามพลาดด <3
.
✅ Angular
.
Angular สร้างและพัฒนาโดย Google เป็น JavaScript framework สำหรับการพัฒนา Front-end ที่เป็นที่นิยมมากเป็นอันดับต้นๆ ด้วยการทำงานแบบ component ทำให้โค้ดที่เขียนออกมาสามารถ reuse ได้ง่ายและเหมาะสมในการทำ SPA ที่สำคัญยังเป็น open-source ด้วยนะ
.
อ่านเพิ่มเติม หรือ เริ่มใช้งานได้ที่นี่ : https://angular.io/
.
✅ React
.
React เป็น open-source JavaScript Library สำหรับการเขียน Front-end ที่เกินขีดความเป็น Library ไปแล้ว React พัฒนาโดย Facebook เหมาะสมในการทำ SPA(single page application) เป็นอย่างยิ่งด้วยการเขียนแบบ Component ที่มีการเก็บแคชในตัวทำให้มีการตอบสนองต่อผู้ใช้ได้อย่างรวดเร็ว
.
อ่านเพิ่มเติม หรือ เริ่มใช้งานได้ที่นี่ : https://reactjs.org/
.
✅ Vue.js
.
Vue (อ่านว่า วิว) เป็นอีกหนึ่ง open-source Library สำหรับสาย Front-end ที่เน้นไปที่การพัฒนา View layer ในโมเดล MVC มีน้ำหนักที่เบา แต่ในด้านความสามารถนั้นนับได้ว่าไม่เบาเลย สามารถใช้ทำ SPA ได้ และที่สำคัญใช้งานง่ายบอกเลยว่าลองใช้แล้วจะติดใจ
.
อ่านเพิ่มเติม หรือ เริ่มใช้งานได้ที่นี่ : https://vuejs.org/
.
✅ Google Closure Library
.
Library ที่เกิดขึ้นมาจากเวลาว่างของพนักงาน Google แต่ความเจ๋งของมันนั้นบอกเลยว่ายอดเยี่ยม Library ตัวนี้ได้รวบรวม UI ต่างๆ และความสามารถอีกเพียบ ถ้าอยากรู้ว่าใครใช้ Library นี้บ้าง? ก็คือแอพของ Google นั่นเอง Maps, Docs และ Search ที่เราใช้กันอยู่บ่อยๆ ก็สร้างโดย Library ที่เป็นพื้นฐานของ Library ตัวนี้
.
อ่านเพิ่มเติม หรือ เริ่มใช้งานได้ที่นี่ : https://developers.google.com/closure/library
.
✅ VanillaJS
.
ชื่อของมันอาจจะดูน่ากิน แต่ที่จริงมันไม่ใช่ Framework หรอกนะ VanillaJS หมายถึงการใช้ JavaScript เพียวๆ ในการเขียน บางครั้งเวลาเราเจอปัญหาเราอาจไม่ต้องใช้ Framework อะไรในการแก้ปัญหา หรือบางทีการเชี่ยวชาญในพื้นฐานก็ทำให้เราสามารถใช้ Framework ได้ดีขึ้นด้วยนะ
.
อ่านเพิ่มเติม หรือ เริ่มใช้งานได้ที่นี่ : http://vanilla-js.com/✅
.
"เป็นยังไงกันบ้าง ? ใครใช้ตัวไหน อยู่ทีมไหน มาแสดงตัวกันใต้โพสต์หน่อยเร็วว ^_^"
.
#borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน

--課程已於 2020 年 8 月更新--

由 udemy 熱門課程講師 Maximilian Schwarzmülle ( http://bit.ly/2R4tRGD )所主講

Vue JS是一個非常棒的 JavaScript 框架，用於建構前端應用程式！ VueJS 混合了 Angular + React 的優點！

從這 21.5 小時的課程，你會學到

1. 構建驚豔的 Vue.js 應用程式 - 從小和簡單到企業等級程式

2. 理解 Vue.js 背後的理論，並在真實的專案中使用它

3. 在多頁和單頁應用（MAP和SPA）中使用 Vue.js

#vuejs

https://softnshare.com/vuejs-completeguide-vuerouter-vuex/