3 เฟรมเวิร์ก/ไลบรารี JavaScript ที่ดีที่สุดสำหรับการพัฒนาส่วนหน้า

JavaScript ได้รับความนิยมเพิ่มขึ้นเรื่อยๆ ในช่วงหลายปีที่ผ่านมา ชุมชนเติบโตอย่างรวดเร็ว และนักพัฒนากำลังพัฒนาและสร้างเครื่องมือสำหรับภาษาอย่างต่อเนื่องทุกวัน

สิ่งนี้ทำให้ยากต่อการตัดสินใจว่าเครื่องมือ/กรอบงาน/ไลบรารีใดที่จะใช้สำหรับงานใดงานหนึ่ง เพราะมีหลายตัวเลือกสำหรับสิ่งที่คุณต้องการทำใน JavaScript อย่างแท้จริง ในตอนแรก การตัดสินใจว่าไลบรารีหรือกรอบงานใดจะเรียนรู้ได้ยาก

บทความนี้เน้นที่การทำให้กระจ่างถึงข้อดีของการใช้เฟรมเวิร์ก/ไลบรารีส่วนหน้าของ JavaScript หลายตัว และสุดท้ายให้ภาพที่ชัดเจนยิ่งขึ้น มีวัตถุประสงค์เพื่อให้กระบวนการตัดสินใจเลือกง่ายขึ้น

ปฏิกิริยา

ปฏิกิริยา ไม่ใช่เฟรมเวิร์ก แต่เป็นไลบรารี JavaScript สำหรับสร้างส่วนต่อประสานผู้ใช้

เป็นโอเพ่นซอร์สและดูแลโดย Facebook และชุมชนของนักพัฒนาแต่ละราย ตอนแรก React เขียนโดย จอร์แดน วอล์ค เป็นเครื่องมือภายในของ Facebook ต่อมาเป็นโอเพ่นซอร์สและเผยแพร่สู่สาธารณะในปี 2556 และได้รับความนิยมอย่างกว้างขวางหลังจากนั้น

คุณลักษณะบางอย่างมีดังต่อไปนี้

  • ให้ส่วนประกอบที่ตอบสนอง ปรับแต่งได้ และนำกลับมาใช้ใหม่ได้
  • ใช้ DOM . เสมือน
  • เร็วมาก
  • ตามส่วนประกอบ
  • การผูกข้อมูลทางเดียว
  • การนำรหัสกลับมาใช้ใหม่ได้
  • มีระบบนิเวศที่สดใสและเจริญรุ่งเรืองอยู่เบื้องหลัง
  • การจัดการของรัฐที่สะดวกสบาย

การติดตั้ง/การใช้งาน

สามารถใช้ React กับส่วนหน้าได้สองวิธี

มากกว่า CDN

คุณสามารถอ้างถึงของพวกเขา เว็บไซต์อย่างเป็นทางการ เพื่อรับลิงก์สคริปต์ ซึ่งคุณสามารถรวมไว้ในแท็กส่วนหัวในมาร์กอัป HTML ของคุณ เลือกลิงค์ตามวัตถุประสงค์

ตัวอย่างเช่น หากใช้ในสภาพแวดล้อมการพัฒนา ให้ทำดังนี้

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

และสำหรับการผลิต

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

การใช้ Node.JS

ฉันถือว่าคุณติดตั้ง NodeJS แล้ว ในการติดตั้ง React เพียงพิมพ์คำสั่งต่อไปนี้

sudo npm i -g create-react-app –save-dev

เมื่อติดตั้งเสร็จแล้วให้พิมพ์คำสั่งต่อไปนี้

create-react-app my-first-react-application

คำสั่งด้านบนจะติดตั้งไลบรารีที่จำเป็นทั้งหมดที่จำเป็นสำหรับ React เพื่อให้ทำงานได้อย่างเหมาะสม ซึ่งรวมถึงเซิร์ฟเวอร์การพัฒนา webpack และ Babel

  7 โซลูชั่น Secure Web Gateway (SWG) ที่ดีที่สุดสำหรับธุรกิจขนาดเล็กถึงขนาดใหญ่

ไปที่โฟลเดอร์ my-first-react-application และเรียกใช้คำสั่งต่อไปนี้

npm เริ่ม

ด้านบนจะเป็นการเปิดเซิร์ฟเวอร์การพัฒนาบนพอร์ต 3000 และเมื่อคุณเข้าถึง IP ของเซิร์ฟเวอร์ด้วยพอร์ต 3000 คุณจะเห็นสิ่งต่อไปนี้

React กำลังได้รับความนิยมและตามความต้องการจากองค์กรขนาดใหญ่หลายแห่ง หากคุณสนใจที่จะเรียนรู้ ฉันแนะนำให้คุณทำสิ่งนี้ จบหลักสูตร.

Vue.js

Vue.js เป็นเฟรมเวิร์ก JavaScript แบบก้าวหน้าสำหรับการสร้างอินเทอร์เฟซผู้ใช้แบบโต้ตอบและแอปพลิเคชันหน้าเดียว เป็นเฟรมเวิร์ก model-view ที่มีไลบรารี่หลัก โดยเน้นที่เลเยอร์การดู Vue เป็นที่นิยมเนื่องจากเป็นความสามารถในการขับเคลื่อนแอปพลิเคชันหน้าเดียว Vue ใช้ HTML แบบ raw ไม่ใช่ JSX ต่างจาก React

Vue.js เป็นโอเพ่นซอร์สและเริ่มสร้างโดย อีวาน ยู และเผยแพร่สู่สาธารณะในเดือนกุมภาพันธ์ 2014 ต่อไปนี้เป็นคุณลักษณะบางประการ

  • มันมีส่วนประกอบมุมมองแบบโต้ตอบและแบบคอมโพสิทได้
  • ใช้ DOM . เสมือน
  • ให้ความสำคัญกับไลบรารีหลัก (เช่น การกำหนดเส้นทางและการจัดการสถานะ)
  • กำหนดขอบเขตใน CSS โดยไม่มี CSS-In-Js
  • การผูกทางเดียวภายในส่วนประกอบ
  • รองรับส่วนเสริมที่จำเป็น
  • การนำรหัสกลับมาใช้ใหม่ได้

การติดตั้ง/การใช้งาน

คุณสามารถใช้ Vue.js ที่ส่วนหน้าทั้งบน CDN หรือด้วย Node.js

หากต้องการใช้วิธี CDN คุณสามารถเพิ่มสคริปต์ต่อไปนี้ลงในส่วนหัวของหน้า HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

สคริปต์ข้างต้นเหมาะสำหรับการพัฒนาเนื่องจากมีข้อความคอนโซลที่สำคัญ อย่างไรก็ตาม สำหรับการผลิต คุณควรใช้อันด้านล่าง

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

และเพื่อใช้กับ Nodejs คุณสามารถติดตั้งโดยใช้คำสั่ง npm

npm install vue

ฉันขอแนะนำอย่างยิ่งให้คุณอ่าน Vue JS . อย่างเป็นทางการ เอกสาร เพื่อเรียนรู้เพิ่มเติมหรือพิจารณารับสิ่งนี้ เส้นทาง.

เชิงมุม

เชิงมุม เป็นเฟรมเวิร์ก JavaScript เชิงโครงสร้างสำหรับเพจไดนามิก อนุญาตให้ใช้ HTML เป็นภาษาเทมเพลต และอนุญาตให้ใช้ไวยากรณ์ HTML เพื่อแสดงองค์ประกอบของแอปพลิเคชันได้อย่างชัดเจนและรัดกุม เป็นโครงการโอเพ่นซอร์สที่ดูแลโดย Google และผู้ร่วมให้ข้อมูลรายอื่นๆ

การติดตั้ง

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Nodejs ล่าสุดแล้ว สิ่งแรกที่เราต้องติดตั้งคือเครื่องมือ Angular CLI

  วิธีหาคนในเฟสบุ๊ค

npm ติดตั้ง -g @angular/cli

เมื่อติดตั้งแล้ว เราสามารถสร้างโปรเจ็กต์ใหม่ได้ด้วยคำสั่งต่อไปนี้

ng new my-first-angular-app

ทำตามคำแนะนำบนหน้าจอ สิ่งนี้จะสร้างไฟล์และโฟลเดอร์บางส่วนและใช้โมดูล npm เพื่อดาวน์โหลดไลบรารีของบุคคลที่สามที่จำเป็นสำหรับ Angular เพื่อให้ทำงานได้อย่างถูกต้อง

ในการเริ่มแอปพลิเคชันที่สร้างขึ้นใหม่ ให้รันคำสั่งต่อไปนี้จากโฟลเดอร์แอพ

ng server

สิ่งนี้ควรเริ่มต้นเซิร์ฟเวอร์โดยอัตโนมัติบนพอร์ต 4200

[[email protected] my-first-angular-app]# ng serve
10% building 3/3 modules 0 activeℹ 「wds」: Project is running at http://localhost:4200/webpack-dev-server/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ 「wdm」: Compiled successfully.

บทสรุป

ดังนั้น สิ่งที่คุณเลือกเรียนรู้จึงเป็นความชอบส่วนบุคคลมากกว่าสิ่งที่ “ดีกว่า”

  12 วิธีในการตัดการเชื่อมต่อ iPhone จาก Mac

กรอบงาน/ไลบรารีทั้งหมดที่ระบุไว้ข้างต้นนั้นยอดเยี่ยม นี่เป็นบทสรุปสั้น ๆ

  • คุณควรเรียนรู้ Angular หากคุณต้องการ Framework ที่คุณต้องการพึ่งพาโดยไม่ต้องจัดการกับการพึ่งพาภายนอก
  • คุณควรเรียนรู้ React หากคุณต้องการสร้างแอปพลิเคชัน PWA, Single Page ที่รวดเร็ว และคุณคุ้นเคยกับ JSX
  • React มีชุมชนที่มีชีวิตชีวาที่สุดและมีโอกาสในการทำงานมากขึ้นเนื่องจากชุมชนขนาดใหญ่
  • React นั้นค่อนข้างง่ายในการเริ่มต้น
  • React นั้นปรับแต่งได้สูงและถือว่า UI แต่ละส่วนเป็นส่วนประกอบ
  • Vue มีข้อดีเหมือนกับ React แต่ไม่มี JSX
  • ตลาดงานของ Vue เพิ่มขึ้นอย่างต่อเนื่อง

นี่คือแผนภูมิใน Google Trends ที่แสดงการเปรียบเทียบอัตราความนิยมของทั้ง 3 รายการ

หากคุณสนใจการพัฒนา front-end ลองดูสิ หลักสูตร Udemy.

เรื่องล่าสุด

x