3 Framework JavaScript / Library ที่ดีที่สุดสำหรับการพัฒนา Front End

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


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

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

เกิดปฏิกิริยา

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

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

คุณสมบัติบางอย่างมีดังต่อไปนี้.

  • จัดเตรียมส่วนประกอบที่ตอบสนองต่อการปรับแต่งและนำมาใช้ซ้ำได้
  • ใช้ DOM เสมือน
  • เร็วมาก
  • component-based
  • การเชื่อมโยงข้อมูลทางเดียว
  • ความสามารถในการนำรหัสกลับมาใช้ใหม่
  • มันมีระบบนิเวศที่สดใสและเจริญรุ่งเรืองอยู่ด้านหลัง
  • การจัดการสถานะที่สะดวก

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

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

  • มากกว่า CDN
  • ใช้ Node.JS

มากกว่า CDN

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

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

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

ใช้ Node.JS

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

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

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

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

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

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

เริ่มต้นนาที

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

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

Vue.js

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

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

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

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

คุณสามารถใช้ Vue.js บน front-end ผ่าน CDN หรือกับ Node.js

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

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

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

npm install vue

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

เชิงมุม

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

การติดตั้ง

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

npm install -g @ angular / cli

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

ใหม่ my-first-angular-app

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

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

เซิร์ฟเวอร์

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

[[email protected] my-first-angular-app] # ng ให้บริการ
10% การสร้างโมดูล 3/3 0 ที่ใช้งานอยู่ 「wds」: โครงการกำลังทำงานที่ http: // localhost: 4200 / webpack-dev-server /
「「 wds 」: เอาท์พุท webpack จาก /
「「 wds 」: 404s จะย้อนกลับไปที่ //index.html

chunk {main} main.js, main.js.map (main) 47.8 kB [เริ่มต้น] [เรนเดอร์]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [เริ่มต้น] [แสดงผล]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [รายการ] [เรนเดอร์]
chunk {styles} styles.js, styles.js.map (สไตล์) 10 kB [เริ่มต้น] [เรนเดอร์]
chunk {ผู้ขาย} supplier.js, vendor.js.map (ผู้ขาย) 3.81 MB [เริ่มต้น] [แสดงผล]
วันที่: 2019-12-28T12: 08: 20.138Z – แฮ: 5d4b93c7bf9e61979c4d – เวลา: 12864 มิลลิวินาที
** Angular Live Development Server กำลังฟัง localhost: 4200 เปิดเบราว์เซอร์ของคุณบน http: // localhost: 4200 / **
ℹ 「wdm」: รวบรวมสำเร็จ.

ข้อสรุป

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

เฟรมเวิร์ก / ไลบรารีทั้งหมดที่กล่าวถึงข้างต้นนั้นยอดเยี่ยม นี่คือสรุปสั้น ๆ

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

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

หากการพัฒนาส่วนหน้าเป็นสิ่งที่คุณสนใจคุณสามารถลองดูได้ แน่นอน Udemy.

Tags:

  • โอเพ่นซอร์ส

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map