รู้หรือไม่ ?! นอกจาก 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
同時也有10000部Youtube影片,追蹤數超過2,910的網紅コバにゃんチャンネル,也在其Youtube影片中提到,...
「javascript interface」的推薦目錄:
- 關於javascript interface 在 BorntoDev Facebook 的精選貼文
- 關於javascript interface 在 BorntoDev Facebook 的最佳解答
- 關於javascript interface 在 BorntoDev Facebook 的最佳貼文
- 關於javascript interface 在 コバにゃんチャンネル Youtube 的最讚貼文
- 關於javascript interface 在 大象中醫 Youtube 的最佳貼文
- 關於javascript interface 在 大象中醫 Youtube 的最佳解答
- 關於javascript interface 在 Does JavaScript have the interface type (such as Java's ... 的評價
- 關於javascript interface 在 TypeScript Interface 介面 - Elaine's Blog 的評價
- 關於javascript interface 在 Simple interface implementation on JavaScript - gists · GitHub 的評價
- 關於javascript interface 在 TypeScript Interfaces - YouTube 的評價
javascript interface 在 BorntoDev Facebook 的最佳解答
💡 เมื่อเราได้เรียนรู้วิธีการเขียนเว็บมาสักพักแล้ว ไม่ว่าจะเป็นพื้นฐานที่สำคัญ เช่น HTML, CSS และ JavaScript แล้วเราอยากจะอยากไปลองใช้ Library หรือ Framework เจ๋ง ๆ ที่ช่วยในการเขียนเว็บ อย่าง React ต้องรู้อะไรบ้าง ??
.
👉 ซึ่งไอเจ้า React เนี่ยมันมีพื้นฐานจาก JavaScript นั่นเอง เราจึงจำเป็นต้องรู้ Concept ที่สำคัญ ๆ ก่อนจะไปใช้งานเจ้า React นั่นเอง
.
มีอะไรบ้าง?? ไปดูกันเลยจ้า 🔥
.
⚙️ Basic Data Structure
Data Structure เป็นหัวใจหลักในการเขียนโปรแกรม ดังนั้นเราต้องเรียนรู้ Data Structure ประเภทต่าง ๆ ให้เข้าใจก่อน ตัวอย่างเช่น การรับ-ส่ง Request จาก API มายัง JS เราก็ต้องมีวิธีที่จะจัดการกับโครงสร้างของข้อมูลที่ดึงมาจาก API เพื่อให้เราสามารถนำข้อมูลนั้นไปใช้ได้ตามต้องการ
.
🌟 DOM
DOM หรือ Document Object Model เป็นการปรับเปลี่ยนโครงสร้าง HTML ให้เป็นแบบ Object โดยให้ JavaScript สามารถจัดการกับ HTML ผ่านโครงสร้างของ DOM ได้นั่นเอง ซึ่งเจ้า React จะใช้โครงสร้าง DOM เป็นหลัก เพื่อสร้างการโต้ตอบบนหน้าเว็บที่สะดวกยิ่งขึ้น ตัวอย่างเช่น เมื่อคลิกปุ่มสามารถแสดงข้อความ หรือเปลี่ยนสีของข้อความนั่นเอง
.
🚚 API
API ย่อมาจาก Application Program Interface ซึ่งเราต้องมีพื้นฐานการใช้งาน API เพื่อนำข้อมูลมาใช้บนหน้าเว็บนั่นเอง อาจจะไม่ต้องถึงกับสร้าง API ใช้ก็ได้นะ เพียงแค่รู้โครงสร้าง และวิธีการดึงมาใช้งานพื้นฐานก็พอแล้ว !!
.
🔧 Axios / Fetch
เครื่องมือสำคัญที่ช่วยให้เราดึง API ต่าง ๆ มาใช้งานได้ง่ายมากขึ้นนั่นเอง !! ซึ่งเป็นสิ่งสำคัญมาก ๆ ในการพัฒนาหน้าเว็บ เพราะมันจะช่วยให้เราสามารถรับ-ส่งข้อมูลแบบไดมามิก และเชื่อมต่อระหว่าง Back-end ได้ง่าย
.
📚 ES6+
สิ่งสำคัญคือเราต้องเรียนรู้วิธีเขียน JavaScript มาตรฐานใหม่ ซึ่งจะช่วยให้โค้ดของเรามีรูปแบบที่อ่านง่ายมากขึ้น !! ซึ่งใน React ที่จะนิยมใช้ ได้แก่ Template Literals, Arrow Functions, Promise, Async / Await, const & let vs var และ Spread Operator นั่นเอง
.
🗂️ JS Array Methods
เมื่อเราสามารถดึงข้อมูลจาก API มาใช้ได้แล้วนั้น เราก็ต้องรู้จักวิธีจัดการกับข้อมูลนั้น ๆ ด้วยนะ ซึ่งมันจะง่ายขึ้นถ้าเรารู้จักใช้ความสามารถของ Array Methods ต่าง ๆ ซึ่งที่นิยมใช้กัน ได้แก่ map(), forEach(), find(), และ filter() เป็นต้น บอกเลยว่าถ้าใช้พวกนี้เป็น ทำให้ชีวิตง่ายขึ้นแน่นอน!! 5555
.
อะทั้งหมดนี้คือ Concept JavaScript พื้นฐานที่สำคัญที่คนเขียน React ต้องมีนะ หวังว่าเพื่อน ๆ จะชอบกันน้าาาา ใครมีอะไรเพิ่มเติมคอมเมนต์ไว้ได้เลย 🥰
.
📑 Source : https://lorenzejay.hashnode.dev/javascript-concepts-you-should-know-before-jumping-into-react-or-any-other-frontend-framework
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
javascript interface 在 BorntoDev Facebook 的最佳貼文
😍 สวัสดีทุกคนนน วันนี้แอดจะมาเปรียบเทียบ front-end framework ที่นิยมในปัจจุบันระหว่าง React.js และ Angular เพื่อให้เพื่อนๆ นำข้อมูลเหล่านี้ไปตัดสินใจในการเลือกใช้ front-end Framework ให้เหมาะสมกับโปรเจกต์ของเพื่อนๆ ถ้าพร้อมแล้วมาเริ่มกันเลยย !!
.
🧡 เริ่มจาก Angular ก่อนละกันนะ
.
👉 Angular ใช้การเขียนโปรแกรมแบบ OOP (Object Oriented Programming)
👉 ปัจจุบันใช้ภาษา Typescript
👉 ผู้เขียนจำเป็นต้องมีความรู้เกี่ยวกับ RxJS
👉 มีความซับซ้อนในการเขียนโปรแกรมมากกว่า
.
✨ จุดเด่น
พัฒนาด้วย Google ทำให้มีความน่าเชื่อถือ
ส่วนใหญ่จะใช้เพื่อพัฒนาโปรแกรมในองค์กรใหญ่ๆ เช่น Youtube, Paypal, Google
ฟีเจอร์มากมายจาก Angular CLI ให้เลือกใช้ได้เลย และมีการอัปเดตอยู่เป็นประจำ
.
อาจจะมีข้อจำกัดเล็กน้อยคือ มี Learning Curve อาจจะเรียนรู้ยากสำหรับมือใหม่สักหน่อยนะ
.
💚 มาที่ React.js กันบ้าง
.
👉 React.js เป็นไลบารีของ JS ซึ่งจะแตกต่างกับ Angular ที่เรียกตัวเองว่า Framework
👉 สามารถให้ผู้พัฒนาเลือกใช้ library ต่างๆ ได้อย่างอิสระ
👉 รองรับการเขียนด้วย JSX (JavaScript syntax extension)
👉 มีรู้พื้นฐาน Javascript,HTML และ CSS ก็สามารถเขียนได้เลย easy สุดๆ 555
.
✨ จุดเด่น
มีโครงสร้างที่ง่ายต่อการเรียนรู้
ทำงานได้รวดเร็วและมีประสิทธิภาพกว่าเพราะใช้ Virual DOM
มี Interface ที่ใช้งานง่าย
.
💥 อ่านมาถึงตรงนี้แล้วเพื่อนๆ คนไหนอยากเริ่มเรียน Angular และ React.js แอดก็มาจะมาบอกต่อคอร์สเรียนฟรี ไม่เสียค่าใช้จ่ายใดๆ !! มีเนื้อหาครบถ้วน สอนตั้งแต่พื้นฐานจนเขียนเป็นเลยนะ ใครที่สนใจสามารถกดเข้าไปเรียนได้เลยจ้าา
.
Angular >> https://www.youtube.com/watch?v=xGpHfFf18Ns
React.js >> https://www.youtube.com/watch?v=w7ejDZ8SWv8
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
javascript interface 在 コバにゃんチャンネル Youtube 的最讚貼文
javascript interface 在 大象中醫 Youtube 的最佳貼文
javascript interface 在 大象中醫 Youtube 的最佳解答
javascript interface 在 TypeScript Interface 介面 - Elaine's Blog 的推薦與評價
JavaScript TypeScript. TypeScript 的核心原則之一是對值所具有的結構進行類型檢查,它有時被稱做「鴨式辨型法」或「結構性子類型化」 ... ... <看更多>
javascript interface 在 Simple interface implementation on JavaScript - gists · GitHub 的推薦與評價
Simple interface implementation on JavaScript. GitHub Gist: instantly share code, notes, and snippets. ... <看更多>
javascript interface 在 Does JavaScript have the interface type (such as Java's ... 的推薦與評價
... <看更多>
相關內容