รู้หรือไม่ ?! นอกจาก 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

✨ มาดูอีกหนึ่งอาชีพสำคัญสำหรับเราชาวเดฟ ที่น้อง ๆ หรือใครหลายฝันอยากจะเป็น...นั่นคือ Full Stack Developer
.
🌈 แล้วถ้าอยากทำอาชีพนี้ต้องเริ่มยังไง ต้องรู้อะไรบ้าง ? วันนี้แอดจะมาสรุปคร่าว ๆ ให้ดูกัน ซึ่งมันอาจจะมีสกิลที่ต้องใช้น้อยหรือมากกว่านี้ ขึ้นอยู่กับบริษัทนะ...หากพี่ ๆ คนไหนอยากจะเสริมสามารถคอมเมนต์ไว้ได้เลยนะคะ เอาล่ะ อย่ารอช้า...หากพร้อมแล้วไปดูกันเลย !!
.
👉 ก่อนอื่นเรามารู้จักอาชีพนี้กันก่อนว่าคืออะไร…
.
🌟 Full Stack Developer เป็นอาชีพที่สามารถทำได้ทั้ง Front-end และ Back-end นั่นเอง
.
สิ่งสำคัญที่คนอยากทำงานสายนี้ต้องรู้ มีดังนี้ !!
.
📝 พื้นฐานคือสิ่งสำคัญ !
.
สิ่งสำคัญที่ขาดไม่ได้คือพื้นฐาน HTML, CSS และ JavaScript นั่นเอง ไม่ว่าจะเป็น front หรือ back ก็ต้องรู้พื้นฐานนี้กันทั้งนั้น เมื่อพื้นฐานแน่นแล้วเราก็สามารถเลือกใช้ Framework หรือ Tools ต่าง ๆ เช่น React หรือ NodeJS เพื่อต่อยอดสกิลของเราให่เทพมากขึ้นนั่นเอง !
.
✨ ทักษะการออกแบบ
.
ปฏิเสธไม่ได้เลยว่าอีกหนึ่งทักษะที่สำคัญนั่นคือการออกแบบ...ไม่ว่าจะทำเว็บหรือแอปพลิเคชัน สกิลที่ควรมีติดไว้ คือ การใช้งาน AdobeXD และ Figma หลาย ๆ คนอาจจะสงสัยว่างานด้านนี้ Full Stack Dev ต้องทำด้วยหรอ...อันนี้มันก็แล้วแต่บริษัทนะว่าเขามีคนออกแบบแยกรึป่าว แต่แอดว่าสกิลนี้มีติดไว้ก็ดี เพราะชื่อของเราก็บอกอยู่ว่า Full Stack ก็ต้องมีสกิลหลาย ๆ ด้านยังไงล่ะ !!
.
🗂️ ฐานข้อมูล...ก็ห้ามขาด !
.
ไม่ว่าจะเป็น SQL หรือ NoSQL เป็นสิ่งสำคัญมาก ๆ ในการออกแบบแอปพลิเคชันทั้งเว็บและมือถือ เพื่อการเชื่อมต่อกับ Back-end ซึ่งฐานข้อมูลที่คนส่วนใหญ่เขาฮิตกัน...ก็มี MySQL, Oracle, และ MongoDB เป็นต้น
.
เลือก Framework หรือ Stack ที่โดนใจคุณ ❤️
.
เมื่อเราเรียนรู้พื้นฐานที่สำคัญจนครบถ้วนแล้ว ในขั้นถัดไปเราก็จะมาต่อยอดสกิลพื้นฐานนี้ โดยการเลือก Framework หรือ Tools ต่าง ๆ ที่ช่วยให้เราทำงานง่ายมากขึ้น ! ซึ่งในปัจจุบันมีให้ใช้เยอะมาก แต่ที่เขาฮิตและเป็นที่ต้องการของตลาดมาก ๆ คงหนีไม่พ้นเจ้า 3 ตัวนี้ นั่นคือ React, Vue, และ Angular นั่นเอง หรือบางทีอาจจะเรียกรวม ๆ ว่า MERN stack หรือ MEAN stack ส่วนทาง Back-end ก็มี Framework ตัวนึงที่น่าสนใจเช่นกัน คือเจ้า NodeJS, Django จาก Python , ExpressJS หรือจะเป็นทางฝั่ง .net
.
✏️ สกิลอื่น ๆ เพิ่มเติม
.
Git, SSH, Linux Command, Data structures และ Algorithms สกิลเหล่านี้ก็ขาดไม่ได้เช่นกัน มาดูกันดีกว่าว่าแต่ละตัวเป็นยังไง
.
Git - Version Control ซึ่งการทำงานจริง ๆ เราก็ต้องทำงานกับ Dev คนอื่นอีกหลายคน ซึ่งเจ้านี่จะทำให้เราสามารถควบคุมโค้ดในโปรเจกต์ เพิ่ม ลบ หรือเรียกเวอร์ชันเก่า ๆ กลับมาได้อย่างง่ายดาย แถมยังสามารถทำงานกับเพื่อนร่วมทีมได้ง่ายมากขึ้น
.
SSH - เป็นพื้นฐานสำคัญในระบบ Network ใช้เพื่อควบคุมการเชื่อมต่อในระยะไกลให้ปลอดภัย
.
Linux Command - บางทีเราอาจจะต้องเข้าไป Set ระบบ หรือควบคุมอะไรบางอย่างที่รันอยู่บนระบบ Linux ก็ต้องเรียนรู้คำสั่งพื้นฐานในการใช้งานระบบนี้ไว้บ้าง
.
Data structures และ Algorithms - เป็นวิธีในการจัดการข้อมูล หรือการแก้ไขปัญหาต่าง ๆ นี่ก็เป็นหนึ่งพื้นฐานสำคัญที่ Programmer ทุกคนควรมี ไม่ว่าจะทำงานตำแหน่งไหนก็ตาม เพื่อเพิ่มประสิทธิภาพในการพัฒนาโปรแกรมให้มากขึ้นนั่นเอง
.
📑 ขอบคุณข้อมูลดี ๆ จาก >> https://medium.com/nerd-for-tech/full-stack-developer-roadmap-2021-ebd68255563b , https://www.crampete.com/blogs/road-map-to-full-stack-web-development/
.
หวังว่าจะเป็นประโยชน์กับเพื่อน ๆ น้าาาา หากใครมีอะไรเพิ่มเติมสามารถเมนต์ไว้ด้านล่างได้เลยจ้า
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
#fullstackdeveloper #developers #programmer #frontend #backend #BorntoDev

🔥 จากโพสต์ที่แล้วแอดมินได้อธิบายการทำงานของ MEAN Strack ไปบ้างแล้ว แต่มันยังมี Framework อีกตัวนึงที่ช่วยพัฒนาเว็บแอปพลิเคชัน นั่นคือ MERN Strack นั่นเอง!!
.
และวันนี้เราจะมาดูความแตกต่างกันให้ชัดๆ เลยว่า อันไหนจะปังกว่ากัน !!
.
🤼‍♀️ ซึ่งทั้ง 2 เป็น JavaScript Framework ที่ช่วยพัฒนาเว็บแอปพลิเคชัน และช่วยในการสร้างหน้า UI ที่ตอบสนองกับผู้ใช้อย่างมีประสิทธิภาพ และใช้งานง่ายเหมือนกัน ความแตกต่างคือ MEAN ใช้ Angular แต่ MERN ใช้ ReactJS
.
❤️ MEAN Stack
.
- พัฒนาด้วย Mongo DB, Angular, Express และ Node.js
- ใช้ภาษา TypeScript
- มี Component Architecture
- เป็น Regular DOM
- เรียนรู้ได้ยากกว่า
- ทำงานแบบ MVC ได้ดีกว่า
- ไม่ค่อยมี Library ให้ใช้ เพราะมี Document จากทาง Angular ให้ใช้อยู่แล้ว
- ปรับแต่งได้น้อยกว่า
- ส่วนใหญ่จะใช้ในโปรเจกต์ใหญ่ๆ
.
💙 มาที่ MERN Stack กันบ้าง
- พัฒนาด้วย Mongo DB, React JS, Express และ Node.js
- ใช้ภาษา JavaScript และ JSX
- ไม่มี Component Architecture
- เป็น Virtual DOM
- เรียนรู้ง่าย
- ทำงานแบบ MVC ได้ด้อยกว่า
- มี Library ให้เลือกใช้เยอะ
- ปรับแต่งได้อย่างอิสระ
- ไม่ว่าโปรเจกต์จะเล็กหรือใหญ่ ก็สามารถใช้ได้
.
👉 ความเห็นของแอดคิดว่า MEAN มันจะเหมาะสำหรับพัฒนาเว็บแอปที่ใหญ่ๆ มากกว่า ซึ่งบริษัทใหญ่ เช่น Accenture, Raindrop, Vungle, Fiverr และ UNIQLQ ต่างก็เลือกใช้เจ้า MEAN ในการพัฒนาเว็บของเขา
.
☘️ ส่วนเจ้า MERN มันเหมาะสำหรับเว็บแอปที่เล็กๆ ที่ต้องการประมวลผลและโต้ตอบผู้ใช้อย่างรวดเร็วนั่นเอง
.
ส่วนเพื่อนๆ เลือกใช้อันไหนกันบ้าง? มาเม้ามอยให้ฟังกันหน่อยนะ 😆
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน