เนื้อหา
- 01. เชิงมุม
- 02. ปฏิกิริยา
- 03. Vue
- ไวยากรณ์ของเฟรมเวิร์กเปรียบเทียบได้อย่างไร?
- ความนิยมและการตลาด
- การพัฒนาแอพมือถือ
- กรอบงานอื่น ๆ ที่ควรระวังในปี 2020
- สรุป
ในปี 2020 เราได้รับพรจากเฟรมเวิร์กและไลบรารีมากมายที่จะช่วยเราในการพัฒนาเว็บ แต่ก็ไม่ได้มีความหลากหลายมากนักเสมอไป ย้อนกลับไปในปี 2548 ภาษาสคริปต์ใหม่ที่เรียกว่า Mocha ถูกสร้างขึ้นโดยผู้ชายชื่อ Brendan Eich หลายเดือนหลังจากเปลี่ยนชื่อเป็น LiveScript ชื่อก็ถูกเปลี่ยนอีกครั้งเป็น JavaScript ตั้งแต่นั้นเป็นต้นมา JavaScript ก็มีมาอย่างยาวนาน
ในปี 2010 เราได้เห็นการนำ Backbone และ Angular มาใช้เป็นเฟรมเวิร์ก JavaScript ตัวแรกและภายในปี 2559 ร้อยละ 92 ของเว็บไซต์ทั้งหมดใช้ JavaScript ในบทความนี้เราจะมาดูกรอบงาน JavaScript หลักสามแบบ (Angular, React และ Vue) และสถานะที่มุ่งหน้าไปสู่ทศวรรษหน้า ต้องการสร้างเว็บไซต์ของคุณเองหรือไม่? ลองดูรายชื่อผู้สร้างเว็บไซต์นี้
สำหรับแหล่งข้อมูลที่ยอดเยี่ยมโปรดดูรายการเครื่องมือออกแบบเว็บไซต์ชั้นนำบทสรุปของบริการเว็บโฮสติ้งของเราและรายการซอฟต์แวร์ทดสอบผู้ใช้ที่ยอดเยี่ยมนี้ด้วย
01. เชิงมุม
AngularJS เปิดตัวในปี 2010 แต่ในปี 2016 มันถูกเขียนใหม่ทั้งหมดและเผยแพร่เป็น Angular 2 Angular เป็นเว็บเฟรมเวิร์กที่พัฒนาโดย Google ซึ่งใช้โดย Wix, Upwork, The Guardian, HBO และอื่น ๆ
ข้อดี:
- การสนับสนุนที่ยอดเยี่ยมสำหรับ TypeScript
- MVVM ช่วยให้นักพัฒนาสามารถแยกการทำงานในส่วนแอปเดียวกันโดยใช้ชุดข้อมูลเดียวกัน
- เอกสารที่ยอดเยี่ยม
จุดด้อย:
- มีเส้นโค้งการเรียนรู้เล็กน้อย
- การย้ายข้อมูลจากเวอร์ชันเก่าอาจเป็นเรื่องยาก
- มีการแนะนำการอัปเดตเป็นประจำซึ่งหมายความว่านักพัฒนาจำเป็นต้องปรับตัวให้เข้ากับพวกเขา
อะไรต่อไป?
ใน Angular 9 Ivy เป็นคอมไพเลอร์เริ่มต้น มันถูกนำมาใช้เพื่อแก้ปัญหามากมายเกี่ยวกับประสิทธิภาพและขนาดไฟล์ ควรทำให้แอปพลิเคชันมีขนาดเล็กลงเร็วขึ้นและง่ายขึ้น
เมื่อคุณเปรียบเทียบ Angular เวอร์ชันก่อนหน้ากับ React และ Vue ไฟล์
ขนาดมัดสุดท้ายใหญ่กว่ามากเมื่อใช้ Angular Ivy ยังทำให้ Progressive Hydration เป็นไปได้ซึ่งเป็นสิ่งที่ทีม Angular นำเสนอในงาน I / O 2019 Progressive Hydration ใช้ Ivy เพื่อโหลดแบบต่อเนื่องบนเซิร์ฟเวอร์และไคลเอนต์ ตัวอย่างเช่นเมื่อผู้ใช้เริ่มโต้ตอบกับเพจโค้ดของคอมโพเนนต์พร้อมกับรันไทม์จะถูกดึงข้อมูลทีละชิ้น
ดูเหมือนว่า Ivy จะมุ่งเน้นไปข้างหน้าสำหรับ Angular และความหวังคือการทำให้มันพร้อมใช้งานสำหรับทุกแอพ จะมีตัวเลือกไม่ใช้ในเวอร์ชัน 9 ไปจนถึง Angular 10
02. ปฏิกิริยา
React เปิดตัวครั้งแรกในปี 2013 โดย Facebook และใช้สำหรับการสร้างเว็บอินเตอร์เฟสแบบโต้ตอบ Netflix, Dropbox, PayPal และ Uber ใช้เพื่อตั้งชื่อไม่กี่
ข้อดี:
- React ใช้ DOM เสมือนซึ่งมีผลดีต่อประสิทธิภาพ
- JSX เขียนง่าย
- การอัปเดตไม่ลดทอนความเสถียร
จุดด้อย:
- ความพ่ายแพ้หลักประการหนึ่งคือต้องการไลบรารีของบุคคลที่สามเพื่อสร้างแอปที่ซับซ้อนมากขึ้น
- นักพัฒนาถูกทิ้งให้อยู่ในความมืดด้วยวิธีที่ดีที่สุดในการพัฒนา
อะไรต่อไป?
ในงาน React Conf 2019 ทีม React ได้สัมผัสกับหลายสิ่งที่พวกเขากำลังดำเนินการอยู่ อย่างแรกคือ Selective Hydration ซึ่งเป็นที่ที่ React จะหยุดทุกสิ่งที่กำลังทำงานอยู่ชั่วคราวเพื่อจัดลำดับความสำคัญของส่วนประกอบที่ผู้ใช้โต้ตอบด้วย เมื่อผู้ใช้ไปโต้ตอบกับส่วนใดส่วนหนึ่งพื้นที่นั้นจะชุ่มชื้น ทีมงานยังได้ดำเนินการเกี่ยวกับ Suspense ซึ่งเป็นระบบของ React สำหรับการจัดเตรียมการโหลดโค้ดข้อมูลและรูปภาพ สิ่งนี้ทำให้คอมโพเนนต์รอบางอย่างก่อนที่จะแสดงผล
ทั้ง Selective Hydration และ Suspense เกิดขึ้นได้จากโหมดพร้อมกันซึ่งทำให้แอปสามารถตอบสนองได้ดีขึ้นโดยให้ React สามารถป้อนงานที่มีลำดับความสำคัญต่ำกว่าจำนวนมากเพื่อมุ่งเน้นไปที่บางสิ่งที่มีลำดับความสำคัญสูงกว่าเช่นการตอบสนองต่อการป้อนข้อมูลของผู้ใช้ ทีมงานยังกล่าวถึงการช่วยสำหรับการเข้าถึงว่าเป็นอีกพื้นที่หนึ่งที่พวกเขากำลังมองหาโดยมุ่งเน้นไปที่สองหัวข้อเฉพาะ ได้แก่ การจัดการโฟกัสและอินเทอร์เฟซอินพุต
03. Vue
Vue ได้รับการพัฒนาในปี 2014 โดย Evan You อดีตพนักงานของ Google ใช้โดย Xiaomi, Alibaba และ GitLab Vue ได้รับความนิยมและการสนับสนุนจากนักพัฒนาในระยะเวลาอันสั้นและไม่ได้รับการสนับสนุนจากแบรนด์หลัก
ข้อดี:
- ขนาดเบามาก
- เป็นมิตรกับผู้เริ่มต้น - เรียนรู้ได้ง่าย
- ชุมชนที่ดี
จุดด้อย:
- ไม่ได้รับการสนับสนุนจาก บริษัท ขนาดใหญ่เช่น React with Facebook และ Angular with Google
- ไม่มีโครงสร้างที่แท้จริง
อะไรต่อไป?
Vue ตั้งเป้าหมายให้ตัวเองเร็วขึ้นเล็กลงบำรุงรักษาได้มากขึ้นและทำให้นักพัฒนาสามารถกำหนดเป้าหมายเนทีฟได้ง่ายขึ้น (หากคุณประสบปัญหาในการดูแลรักษาให้พิจารณาบริการเว็บโฮสติ้ง) รุ่นถัดไป (3.0) จะครบกำหนดในไตรมาสที่ 1 ปี 2020 ซึ่งรวมถึงการเขียน DOM เสมือนใหม่เพื่อประสิทธิภาพที่ดีขึ้นพร้อมกับการสนับสนุน TypeScript ที่ได้รับการปรับปรุง นอกจากนี้ยังมีการเพิ่ม Composition API ซึ่งช่วยให้นักพัฒนามีวิธีใหม่ในการสร้างส่วนประกอบและจัดระเบียบตามคุณลักษณะแทนการดำเนินการ
Vue ที่กำลังพัฒนาเหล่านั้นยังยุ่งอยู่กับการทำงานกับ Suspense ซึ่งจะระงับการแสดงผลคอมโพเนนต์ของคุณและแสดงผลคอมโพเนนต์ทางเลือกจนกว่าจะเป็นไปตามเงื่อนไข
สิ่งที่ยอดเยี่ยมอย่างหนึ่งของการอัปเดตของ Vue คือการรักษาความเข้ากันได้แบบย้อนหลัง พวกเขาไม่ต้องการให้คุณทำลายโครงการ Vue เดิม ๆ เราเห็นสิ่งนี้ในการย้ายข้อมูลจาก 1.0 เป็น 2.0 โดยที่ 90 เปอร์เซ็นต์ของ API เหมือนกัน
ไวยากรณ์ของเฟรมเวิร์กเปรียบเทียบได้อย่างไร?
เฟรมเวิร์กทั้งสามได้รับการเปลี่ยนแปลงตั้งแต่เปิดตัว แต่สิ่งหนึ่งที่สำคัญในการทำความเข้าใจคือไวยากรณ์และความแตกต่าง มาดูวิธีเปรียบเทียบไวยากรณ์เมื่อพูดถึงการเชื่อมโยงเหตุการณ์อย่างง่าย:
Vue: v-on คำสั่งใช้เพื่อแนบตัวฟังเหตุการณ์ที่เรียกใช้เมธอดบนอินสแตนซ์ Vue คำสั่งขึ้นต้นด้วย v- เพื่อระบุว่าเป็นคุณลักษณะพิเศษที่ Vue จัดเตรียมไว้และใช้พฤติกรรมปฏิกิริยาพิเศษกับ DOM ที่แสดงผล ตัวจัดการเหตุการณ์สามารถระบุได้ทั้งแบบอินไลน์หรือเป็นชื่อของเมธอด
template> button v-on: click =” clickHandler”> Click me / button> / template> script> export default {name:“ HelloWorld”, method: {clickHandler: function () {console.log (“ ฉันถูกคลิก! ”); }}}; / script>
ตอบสนอง: React ทำให้มาร์กอัปและตรรกะใน JS และ JSX ซึ่งเป็นส่วนขยายไวยากรณ์ของ JavaScript ด้วย JSX ฟังก์ชันจะถูกส่งผ่านเป็นตัวจัดการเหตุการณ์ การจัดการเหตุการณ์ด้วยองค์ประกอบ React คล้ายกับการจัดการเหตุการณ์บนองค์ประกอบ DOM แต่มีความแตกต่างทางวากยสัมพันธ์บางประการ ตัวอย่างเช่นเหตุการณ์การตอบสนองถูกตั้งชื่อโดยใช้ camelCase แทนที่จะเป็นตัวพิมพ์เล็ก
function Button () {function clickHandler (e) {console.log (“ ฉันถูกคลิก”); } ปุ่ม return onClick = {clickHandler}> คลิกฉัน! / button>; }
เชิงมุม: ไวยากรณ์การผูกเหตุการณ์ประกอบด้วยชื่อเหตุการณ์เป้าหมายภายในวงเล็บทางด้านซ้ายของเครื่องหมายเท่ากับและคำสั่งเทมเพลตที่ยกมาทางด้านขวา หรือคุณสามารถใช้ไฟล์ บน- คำนำหน้าเรียกว่ารูปแบบบัญญัติ
@Component ({selector:“ app-click-me”, template:“ button (click) =” onClickMe ()”> Click me! / button> `}) ส่งออกคลาส ClickMeComponent {onClickMe () {console.log (“ คุณคลิกฉัน!”); }}
ความนิยมและการตลาด
เริ่มต้นด้วยการดูภาพรวมของกรอบงานทั้งสามที่เกี่ยวข้องกับส่วนที่เหลือของเว็บโดยการตรวจสอบสถิติจาก W3Techs ปัจจุบัน Angular ถูกใช้โดย 0.4 เปอร์เซ็นต์ของเว็บไซต์ทั้งหมดโดยมีส่วนแบ่งตลาดไลบรารี JavaScript 0.5 เปอร์เซ็นต์ React ถูกใช้โดย 0.3 เปอร์เซ็นต์ของเว็บไซต์ทั้งหมดและส่วนแบ่งตลาดไลบรารี JavaScript 0.4 เปอร์เซ็นต์และ Vue มี 0.3 เปอร์เซ็นต์สำหรับทั้งสอง ดูเหมือนว่าจะค่อนข้างสม่ำเสมอและคุณคาดว่าจะเห็นตัวเลขเพิ่มขึ้น
แนวโน้มของ Google: ในช่วง 12 เดือนที่ผ่านมา React ได้รับความนิยมมากที่สุดในข้อความค้นหาตามด้วย Angular Vue.js ค่อนข้างล้าหลัง อย่างไรก็ตามสิ่งหนึ่งที่ต้องจำไว้คือ Vue ยังเด็กเมื่อเทียบกับอีกสองคน
ค้นหางาน: ในขณะที่เขียน React และ Angular นั้นค่อนข้างเข้ากันอย่างใกล้ชิดในแง่ของรายชื่องานเกี่ยวกับ Indeed กับ Vue ที่อยู่เบื้องหลังมานาน อย่างไรก็ตามใน LinkedIn ดูเหมือนว่าจะมีความต้องการมากขึ้นสำหรับนักพัฒนา Vue
กองล้น: หากคุณดูผลการสำรวจ Stack Overflow Developer สำหรับปี 2019 React และ Vue.js ต่างก็เป็นเว็บเฟรมเวิร์กที่เป็นที่ชื่นชอบและต้องการมากที่สุด Angular นั่งลงในตำแหน่งที่เก้าสำหรับคนที่รักมากที่สุด แต่ต้องการมากที่สุดเป็นอันดับสาม
GitHub: Vue มีจำนวนดาวมากที่สุดถึง 153k แต่มีผู้ร่วมให้ข้อมูลน้อยที่สุด (283) ในทางกลับกันมี 140k ดาวและ 1,341 ผู้ร่วมให้ข้อมูล Angular มีเพียง 59.6k ดาว แต่มีผู้ร่วมให้ข้อมูลมากที่สุดจากทั้งสามด้วย 1,579
แนวโน้ม NPM: ภาพด้านบนแสดงสถิติในช่วง 12 เดือนที่ผ่านมาซึ่งคุณจะเห็นว่า React มีจำนวนการดาวน์โหลดต่อเดือนสูงกว่าเมื่อเทียบกับ Angular และ Vue
การพัฒนาแอพมือถือ
สิ่งสำคัญประการหนึ่งสำหรับสามกลุ่มใหญ่คือการปรับใช้อุปกรณ์เคลื่อนที่ React มี React Native ซึ่งกลายเป็นตัวเลือกยอดนิยมสำหรับการสร้างแอพ iOS และ Android ไม่เพียง แต่สำหรับผู้ใช้ React เท่านั้น แต่ยังรวมถึงชุมชนการพัฒนาแอพในวงกว้างด้วย นักพัฒนาเชิงมุมสามารถใช้ NativeScript สำหรับแอพเนทีฟหรือ Ionic สำหรับแอพมือถือแบบไฮบริดในขณะที่นักพัฒนา Vue มีตัวเลือก NativeScript หรือ Vue Native เนื่องจากความนิยมของแอปพลิเคชันบนมือถือจึงยังคงเป็นประเด็นสำคัญในการลงทุน
กรอบงานอื่น ๆ ที่ควรระวังในปี 2020
หากคุณต้องการลองสิ่งใหม่ในปี 2020 ลองดูกรอบงาน JavaScript เหล่านี้
เอมเบอร์: เฟรมเวิร์กโอเพนซอร์สสำหรับการสร้างเว็บแอปพลิเคชันที่ทำงานตามรูปแบบ MVVM มีการใช้งานโดย บริษัท ใหญ่ ๆ หลายแห่งเช่น Microsoft, Netflix และ LinkedIn
ดาวตก: แพลตฟอร์ม JavaScript แบบเต็มสแต็กสำหรับการพัฒนาเว็บและแอปพลิเคชันบนมือถือที่ทันสมัย เรียนรู้ได้ง่ายและมีชุมชนที่ให้การสนับสนุนเป็นอย่างดี
สรุป
กรอบทั้งสามได้รับการปรับปรุงอย่างต่อเนื่องซึ่งเป็นสัญญาณที่ให้กำลังใจ ทุกคนมีมุมมองของตัวเองและวิธีการแก้ปัญหาที่ต้องการเกี่ยวกับสิ่งที่พวกเขาควรใช้ แต่จริงๆแล้วมันขึ้นอยู่กับขนาดของโครงการและทำให้คุณรู้สึกสะดวกสบายมากขึ้น
สิ่งที่สำคัญที่สุดคือการสนับสนุนอย่างต่อเนื่องจากชุมชนของพวกเขาดังนั้นหากคุณกำลังวางแผนที่จะเริ่มโครงการใหม่และไม่เคยใช้โครงการใดในสามโครงการนี้มาก่อนฉันเชื่อว่าคุณอยู่ในมือที่ปลอดภัยสำหรับพวกเขาทั้งหมด หากคุณยังไม่มีโอกาสได้เรียนรู้กรอบงานทั้งสามนี้ฉันขอแนะนำให้ตั้งปณิธานว่าจะเริ่มเรียนรู้ในช่วงปีใหม่ อนาคตจะหมุนรอบสามคนนี้
เนื้อหานี้เคยปรากฏในนิตยสารเน็ต
