นอกเหนือจาก jQuery: คำแนะนำสำหรับผู้เชี่ยวชาญเกี่ยวกับกรอบงาน JavaScript

ลักษณะเฉพาะของโปรแกรมเมอร์ที่ดีจริงๆคือความเกียจคร้าน นั่นไม่ได้หมายความว่าโง่หรืองมงาย โปรแกรมเมอร์ขี้เกียจที่ดีจริงๆไม่ได้เขียน (จากนั้นต้องดีบั๊กและทดสอบ) โค้ด 100 บรรทัดเมื่อ 10 จะทำ ในโลกของ JavaScript นักพัฒนาที่ขี้เกียจอย่างแท้จริงจะต้องพึ่งพาเฟรมเวิร์กที่มีประสิทธิภาพผ่านการทดสอบและได้รับการสนับสนุนเป็นอย่างดีเพื่อหลีกเลี่ยงการคิดค้นวิธีแก้ไขปัญหาทั่วไปอย่างต่อเนื่อง

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

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

ประวัติ JavaScript เล็กน้อย

ประวัติของ JavaScript ย้อนกลับไปในงานพัฒนาที่ Brendan Eich ทำในภาษา Mocha สำหรับ บริษัท เว็บเบราว์เซอร์ Netscape ในปี 1995 Mocha ได้รับการเผยแพร่เป็น LiveScript ในปีต่อมาและเปลี่ยนชื่อเป็น JavaScript เมื่อ Sun ให้สิทธิ์การใช้งานเครื่องหมายการค้าแก่ Netscape การพยายามผูกล่าม JavaScript แบบ C ที่มีน้ำหนักเบาเข้ากับ Java รุ่นหนาที่ไม่เกี่ยวข้องซึ่งเป็นภาษาที่รวบรวมโทเค็นเชิงวัตถุโดยใช้ชื่อที่คล้ายกันดูเหมือนจะเป็นความคิดที่ดีสำหรับวัตถุประสงค์ทางการตลาดในปี 1995 แต่ในช่วงหลายปีที่ผ่านมาทางเลือกนั้นมี ทำให้เกิดความสับสนไม่สิ้นสุด

การพัฒนา JavaScript ในทศวรรษหน้ามีความขัดแย้งระหว่างผู้ใช้งานเบราว์เซอร์และความพยายามมาตรฐาน ECMA ที่ค่อนข้างอ่อนแอ สิ่งที่เปลี่ยนความไม่สบายตัวนี้และทำให้ภาษาใหม่เพิ่มขึ้นอีกครั้งคือการเพิ่มขึ้นของ Dynamic HTML และ Ajax ในช่วงกลางปี ​​2000 ตามด้วยการเปิดตัวไลบรารี JavaScript แบบโอเพนซอร์สเช่น Prototype, jQuery, Dojo และ MooTools ซึ่งมีจุดประสงค์เพื่อสร้าง Dynamic HTML และ Ajax ใช้งานได้ง่ายขึ้นและมี "วิดเจ็ต" สำหรับ JavaScript ที่จะช่วยปรับปรุงการทำงานของตัวควบคุมรูปแบบ HTML

แม้ว่า Netscape จะเปิดตัวเซิร์ฟเวอร์ JavaScript หลังจาก JavaScript สำหรับเบราว์เซอร์เพียงไม่นาน แต่ภาษาก็ไม่ได้ถูกนำออกไปใช้สำหรับแบ็คเอนด์จนกระทั่งการเพิ่มขึ้นของ Node.js เริ่มในปี 2009 ส่วนหนึ่งของสิ่งที่ทำให้ Node.js น่าสนใจคือการใช้งานของ Google เอ็นจิ้น V8 JavaScript ที่ได้รับการปรับแต่งอย่างสูงสำหรับโมดูลไลบรารีพร้อมด้วยรหัสหลักใน C ++ แบบพกพา

ทัวร์ชมเฟรมเวิร์ก JavaScript นี้เป็นการพยายามทำความเข้าใจไลบรารี JavaScript ที่สำคัญในปัจจุบันในสามประเภท ได้แก่ กลุ่มที่ทำงานในเซิร์ฟเวอร์ Node.js กลุ่มที่ทำงานในเบราว์เซอร์และกลุ่มที่รองรับแอปบนอุปกรณ์เคลื่อนที่แบบเนทีฟหรือแบบไฮบริด

กรอบงาน Node.js

Node.js เป็นเทคโนโลยีเซิร์ฟเวอร์ที่ใช้ JavaScript และ C ++ ซึ่งดึงดูดความสนใจและการสนับสนุนไม่น้อยนับตั้งแต่มีการเปิดตัว (เพื่อยืนปรบมือ) โดยผู้เขียน Ryan Dahl ที่ European JSConf ในเดือนพฤศจิกายน 2552 Node.js มีความโดดเด่นด้วย สถาปัตยกรรมที่ขับเคลื่อนด้วยเหตุการณ์ที่สามารถ I / O แบบอะซิงโครนัสรอยเท้าหน่วยความจำขนาดเล็กและทรูพุตและความสามารถในการปรับขนาดสูงสำหรับเว็บแอปพลิเคชัน

แม้ว่า Node.js จะมีชิ้นส่วนทั้งหมดที่จำเป็นในการติดตั้งเว็บเซิร์ฟเวอร์ แต่การเขียนเลเยอร์นั้นก็ใช้งานได้ดี TJ Holowaychuk เปิดตัว Express 1.0 Beta ในเดือนกรกฎาคม 2010 และในไม่ช้ามันก็กลายเป็นเซิร์ฟเวอร์แบ็คเอนด์“ เริ่มต้น” สำหรับ Node.js และเป็นส่วนหนึ่งของ MEAN stack พร้อมฐานข้อมูล MongoDB และเฟรมเวิร์กส่วนหน้า Angular.JS

อย่างไรก็ตามนักพัฒนาและองค์กรที่แตกต่างกันมีความต้องการที่แตกต่างกัน Express มี Locomotive, Hapi, Koa, Kraken และ Sails js ทั้งทางตรงหรือทางอ้อม Meteor นั้นค่อนข้างแตกต่างกันแม้ว่ามันจะทำงานบน Node.js ด้วย

ด่วน. Express เป็นเฟรมเวิร์กเว็บแอปพลิเคชัน Node.js ที่เรียบง่ายและยืดหยุ่นโดยมีชุดคุณสมบัติที่มีประสิทธิภาพสำหรับการสร้างเว็บแอปพลิเคชันแบบหน้าเดียวหลายหน้าและแบบไฮบริด Express API เกี่ยวข้องกับเว็บแอปพลิเคชันคำขอ HTTP และการตอบกลับการกำหนดเส้นทางและมิดเดิลแวร์ สำหรับ Express 4.x มิดเดิลแวร์ที่รองรับสำหรับ Express จะอยู่ในที่เก็บแยกต่างหาก

ส้อมของ Express และส่วนเสริมสำหรับ Express จำนวนมากได้ปรากฏขึ้นรวมถึง Locomotive, Hapi และ Koa Koa ถูกสร้างขึ้นโดยหนึ่งในผู้สนับสนุนหลักของ Express

Express เก่ากว่าขนาดและมีขนาดใหญ่กว่า อย่างไรก็ตามยังมีชุมชนที่ใหญ่ขึ้นและมีความมั่นคงมากขึ้น ฉันเห็น Express รวมอยู่ในเฟรมเวิร์กและเครื่องมืออื่น ๆ ตลอดเวลาโดยไม่มีความคิดเห็นราวกับว่ามันเป็นทางเลือกเดียวที่เป็นไปได้สำหรับการสร้างเว็บเซิร์ฟเวอร์บน Node.js บน GitHub เฟรมเวิร์กมีมากกว่า 23,000 ดาวและ 4,000 ส้อม

ฮาปิ. Hapi เป็นเฟรมเวิร์กที่เน้นการกำหนดค่าที่ใช้งานง่ายพร้อมการสนับสนุนในตัวสำหรับการตรวจสอบอินพุตการแคชการตรวจสอบสิทธิ์และสิ่งอำนวยความสะดวกที่จำเป็นอื่น ๆ สำหรับการสร้างแอปพลิเคชันเว็บและบริการ Hapi ช่วยให้นักพัฒนาสามารถมุ่งเน้นไปที่การเขียนตรรกะของแอปพลิเคชันที่ใช้ซ้ำได้ด้วยวิธีแยกส่วนและกำหนด ได้รับการพัฒนาโดย Walmart Labs และเป็นตัวเลือกที่ดีสำหรับทีมขนาดใหญ่และโครงการขนาดใหญ่

เดิม Hapi ถูกสร้างขึ้นบน Express แต่ภายหลังได้รับการออกแบบใหม่ให้เป็นแบบสแตนด์อะโลน เป็นไปตามแนวคิดที่ว่า“ การกำหนดค่าดีกว่ารหัส” และ“ ตรรกะทางธุรกิจต้องแยกออกจากเลเยอร์การขนส่ง” ในตัวอย่างข้างต้นสังเกตว่าการกำหนดค่าเส้นทางเซิร์ฟเวอร์ปรากฏในโค้ดชัดเจนและสะอาดเพียงใด

โคอา. Koa เป็นเว็บเฟรมเวิร์กใหม่ที่ออกแบบโดยทีมงานเบื้องหลัง Express แต่ไม่ขึ้นกับโค้ด Express Koa มุ่งหวังที่จะเป็นรากฐานที่เล็กลงแสดงออกมากขึ้นและมีประสิทธิภาพมากขึ้นสำหรับเว็บแอปพลิเคชันและ API Koa ใช้เครื่องกำเนิดไฟฟ้า ES6 สำหรับมิดเดิลแวร์แทนที่จะใช้การเรียกกลับ Node.js ต่อไปนี้เป็นแอปพลิเคชัน Koa“ สวัสดีชาวโลก” โดยใช้เครื่องกำเนิดไฟฟ้าซึ่งyield nextจะส่งผ่านการควบคุมไปยังเครื่องกำเนิดไฟฟ้าถัดไป:

ความแตกต่างระหว่างเครื่องกำเนิดตัวกลางตามที่ Koa ใช้และการเรียกกลับตามที่ Express และ Connect ใช้คือคุณจะได้รับความยืดหยุ่นมากขึ้นกับเครื่องกำเนิดไฟฟ้า ตัวอย่างเช่น Connect จะส่งผ่านการควบคุมผ่านชุดฟังก์ชันจนกว่าจะส่งคืนหนึ่งในขณะที่ Koa ให้ผลการควบคุม "ปลายน้ำ" จากนั้นการควบคุมจะไหลกลับ "ต้นน้ำ" ในตัวอย่างข้างต้น x-response-time จะ "ตัด" ตัวสร้างการตอบสนองโดยมีyield nextคำสั่งทำเครื่องหมายการโทร การให้ผลผลิตมีความยืดหยุ่นมากกว่าการเรียกฟังก์ชันอย่างชัดเจนเนื่องจากทำให้ง่ายต่อการใส่ตัวสร้างอื่นลงในลำดับตัวอย่างเช่นตัวบันทึกเว็บระหว่างตัวจับเวลาและการตอบสนอง

คราเคน Kraken เป็นโครงการโอเพ่นซอร์สของ PayPal เป็นเลเยอร์ที่ปลอดภัยและปรับขนาดได้ซึ่งขยาย Express โดยจัดเตรียมโครงสร้างและการประชุมเช่นเดียวกับ Locomotive แม้ว่า Kraken จะเป็นเสาหลักของเฟรมเวิร์ก แต่โมดูลต่อไปนี้ยังสามารถใช้งานได้อย่างอิสระ: Lusca (ความปลอดภัย), Kappa (พร็อกซี NPM), Makara (LinkedIn Dust.js I18N) และ Adaro (LinkedIn Dust.js Templating)

Kraken อาศัยyoการสร้างโครงการดังที่แสดงในภาพหน้าจอด้านซ้าย เช่นเดียวกับ Locomotive จะจัดระเบียบโครงการเป็นไดเร็กทอรีที่เหมือน Rails ทั่วไปรวมถึงโมเดลคอนโทรลเลอร์และ config เมื่อสร้างขึ้น Kraken จะเชื่อมโยงกับ Express เป็นมิดเดิลแวร์มาตรฐานซึ่งกำหนดให้เป็นappซึ่งจะมีการเรียกใช้app.use()และapp.listen()วิธีการ แต่ละเส้นทางในเซิร์ฟเวอร์ Kraken อาศัยอยู่ในไฟล์ของตัวเองในโฟลเดอร์คอนโทรลเลอร์

หัวรถจักร.ในฐานะเว็บเฟรมเวิร์กสำหรับ Node.js Locomotive รองรับรูปแบบ MVC, เส้นทาง RESTful และการประชุมผ่านการกำหนดค่า (เช่น Rails) ในขณะที่รวมเข้ากับฐานข้อมูลและเอ็นจิ้นเทมเพลต หัวรถจักรสร้างบน Express และ Connect ซึ่งเป็นกรอบกาวอย่างง่ายสำหรับมิดเดิลแวร์ที่ใช้โดยเฟรมเวิร์ก Node.js จำนวนมาก

หัวรถจักรจะเพิ่มโครงสร้างให้กับ Express Ruby on Rails ซึ่งคุณสามารถเห็นได้ในภาพด้านบนที่ Express ขาดไป มุมมองหัวรถจักรมักจะฝังไฟล์ JavaScript (html.ejs) ดังที่แสดงไว้ที่นี่ แต่ Locomotive ยังรองรับ Jade และเอ็นจิ้นเทมเพลตอื่น ๆ สำหรับ Express ฟังก์ชัน REST ถูกควบคุมโดยเส้นทางตามปกติในเซิร์ฟเวอร์ที่ใช้ Express คุณสามารถใช้ฐานข้อมูลและเลเยอร์ ORM (การทำแผนที่เชิงสัมพันธ์เชิงวัตถุ) ใดก็ได้ที่คุณต้องการกับ Locomotive คู่มือนี้สาธิตการใช้ MongoDB กับ Mongoose รวมถึงการทำงานกับ Passport สำหรับการตรวจสอบผู้ใช้

ดาวตก. Meteor ช่วยให้คุณสร้างแอปบนอุปกรณ์เคลื่อนที่และเว็บแบบเรียลไทม์ได้ง่ายขึ้นโดยสิ้นเชิงใน JavaScript จากฐานรหัสเดียว แทนที่จะส่ง HTML ผ่านสาย Meteor จะส่งข้อมูลจากเซิร์ฟเวอร์เพื่อให้ไคลเอ็นต์แสดงผล นอกเหนือจากการทำงานแบบสแตนด์อโลนแล้ว Meteor ยังสามารถทำงานร่วมกับ AngularJS และ React ได้อีกด้วย Meteor ไม่มีอะไรเหมือนกับ Express แม้ว่ามันจะสร้างขึ้นบน Node.js และรองรับเทมเพลต Handlebars, Blaze และ Jade ก็ตาม

Meteor ช่วยให้สามารถสร้างต้นแบบอย่างรวดเร็วและสร้างโค้ดข้ามแพลตฟอร์ม (เว็บ, Android, iOS) มันทำงานร่วมกับ MongoDB โดยใช้ Distributed Data Protocol และรูปแบบการสมัครสมาชิกเพื่อเผยแพร่การเปลี่ยนแปลงข้อมูลไปยังไคลเอนต์โดยอัตโนมัติโดยไม่ต้องให้นักพัฒนาเขียนโค้ดซิงโครไนซ์ใด ๆ บนไคลเอนต์ Meteor ขึ้นอยู่กับ jQuery และสามารถใช้กับไลบรารีวิดเจ็ต JavaScript UI ใดก็ได้

Meteor พัฒนาโดย Meteor Development Group ซึ่งเป็นการเริ่มต้นที่บ่มเพาะโดย Y Combinator ตอนนี้ดาวตกโตพอที่จะรองรับหนังสือกวดวิชาได้ครึ่งโหล โครงการนี้ได้ดึงดาวมากกว่า 32,000 ดวงบน GitHub

Meteor เป็นซอฟต์แวร์โอเพ่นซอร์สฟรี แต่กลุ่ม Meteor สร้างรายได้จากการขายการสมัครสมาชิก Meteor Galaxy DevOps ซึ่งรวมถึงพื้นที่เซิร์ฟเวอร์ AWS และการรองรับ Meteor ขั้นพื้นฐานและการสมัครสมาชิกการสนับสนุนระดับพรีเมียมแยกต่างหาก

Sails.jsด้วย Sails คุณสามารถสร้างแอป Node.js ระดับองค์กรที่กำหนดเองได้ ได้รับการออกแบบมาเพื่อจำลองรูปแบบของเฟรมเวิร์ก model-view-controller (MVC) ที่คุ้นเคยเช่น Ruby on Rails แต่ด้วยการรองรับความต้องการของแอปสมัยใหม่: API ที่ขับเคลื่อนด้วยข้อมูลพร้อมสถาปัตยกรรมที่เน้นการบริการที่ปรับขนาดได้ เหมาะอย่างยิ่งสำหรับการสร้างแอปแชทแดชบอร์ดแบบเรียลไทม์หรือเกมแบบผู้เล่นหลายคน แต่คุณสามารถใช้กับโครงการเว็บแอปพลิเคชันใดก็ได้ Sails รองรับ WebSockets และส่งข้อความซ็อกเก็ตไปยังเส้นทางของแอพของคุณโดยอัตโนมัติ

เช่นเดียวกับ Rails Sails ให้ความสำคัญกับการกำหนดค่าให้เครื่องกำเนิดไฟฟ้าและโครงสำหรับสร้าง REST APIs ได้อย่างรวดเร็วจากพิมพ์เขียวและใช้รูปแบบการออกแบบ MVC / active-record Sails สร้างขึ้นจาก Express และใช้ Waterline สำหรับ ORM พร้อมรองรับการรวม ORM Waterline รองรับทั้งฐานข้อมูล SQL และ NoSQL

Sails เป็นเฟรมเวิร์กส่วนหลังที่ออกแบบมาเพื่อให้เข้ากันได้กับเว็บเฟรมเวิร์กส่วนหน้าเช่น Angular หรือ Backbone หรืออุปกรณ์เคลื่อนที่เช่น iOS หรือ Android ที่คุณชอบหรือต้องการการสนับสนุน มีหนังสือหนึ่งเล่มในผลงานบน Sails.js ซึ่งยังคงสมบูรณ์เพียงบางส่วน

กรอบ HTML5 / JavaScript

โดยปกติเราคิดว่าไลบรารีและเฟรมเวิร์ก JavaScript ทำงานในเบราว์เซอร์ ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้บางส่วนเช่น jQuery, Dojo และ MooTools เกิดขึ้นในช่วงกลางปี ​​2000 โดยส่วนใหญ่จะทำให้ Dynamic HTML และ Ajax เขียนได้ง่ายขึ้น สิ่งเหล่านี้บางส่วนได้ขยายไปสู่พื้นที่เพิ่มเติมของฟังก์ชันการทำงานเช่นวิดเจ็ตอินเทอร์เฟซผู้ใช้และอินเทอร์เฟซอุปกรณ์เคลื่อนที่

เมื่อไม่นานมานี้มีคนอื่น ๆ เข้ามา AngularJS เป็นเฟรมเวิร์กส่วนหน้าที่ขยาย HTML พร้อมมาร์กอัปสำหรับมุมมองแบบไดนามิกและการเชื่อมโยงข้อมูล Backbone.js และ Ember ได้รับการออกแบบมาสำหรับการพัฒนาเว็บแอปพลิเคชันแบบหน้าเดียว React มีไว้สำหรับสร้าง UI หรือมุมมองโดยทั่วไปสำหรับแอปพลิเคชันหน้าเดียว

กรอบงานอื่น ๆ ยังคงติดตามความเชี่ยวชาญเฉพาะด้านที่แคบกว่า D3 ทำการแสดงข้อมูลและภาพเคลื่อนไหว Socket.IO ใช้งานเว็บแอปแบบเรียลไทม์ Knockout เป็นวิธีระดับสูงในการเชื่อมโยงโมเดลข้อมูลกับ Web UI พอลิเมอร์นำเสนอชั้น "น้ำตาล" ที่มีน้ำหนักเบาที่ด้านบนของ Web Components API เพื่อช่วยในการสร้างส่วนประกอบเว็บของคุณเอง ขีดล่างคือไลบรารียูทิลิตี้ทั่วไป

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

AngularJS.  AngularJS (หรือเรียกง่ายๆว่า Angular ในหมู่เพื่อน) เป็นเฟรมเวิร์ก Ajax JavaScript แบบมุมมองแบบจำลอง (MVW) ที่ขยาย HTML พร้อมมาร์กอัปสำหรับมุมมองแบบไดนามิกและการเชื่อมโยงข้อมูล Angular เหมาะอย่างยิ่งสำหรับการพัฒนาเว็บแอปพลิเคชันแบบหน้าเดียวและการเชื่อมโยงฟอร์ม HTML กับโมเดลและคอนโทรลเลอร์ JavaScript

รูปแบบการดูแบบจำลองที่ฟังดูแปลก ๆ ไม่ว่าจะเป็นรูปแบบใดก็ตามคือความพยายามที่จะรวมรูปแบบการดูตัวควบคุมโมเดลมุมมองภาพแบบจำลอง (MVVM) และรูปแบบการดูโมเดลผู้นำเสนอ (MVP) ภายใต้ชื่อเล่นเดียว ในขณะที่โปรแกรมเมอร์ชอบที่จะโต้แย้งความแตกต่างระหว่างรูปแบบที่เกี่ยวข้องอย่างใกล้ชิดทั้งสามนี้นักพัฒนา Angular ตัดสินใจที่จะไม่เข้าร่วมการสนทนา

โดยพื้นฐานแล้ว Angular จะซิงโครไนซ์ข้อมูลจาก UI ของคุณ (มุมมอง) กับออบเจ็กต์ JavaScript (แบบจำลอง) ของคุณโดยอัตโนมัติผ่านการผูกข้อมูลแบบสองทาง เพื่อช่วยให้คุณจัดโครงสร้างแอปพลิเคชันของคุณได้ดีขึ้นและทำให้ง่ายต่อการทดสอบ Angular จะสอนเบราว์เซอร์ถึงวิธีการฉีดแบบพึ่งพาและการผกผันการควบคุม

Angular สร้างขึ้นโดย Google และโอเพ่นซอร์สภายใต้ใบอนุญาต MIT ที่เก็บบน GitHub มีมากกว่า 47,000 ดาวและ 22,000 ส้อม Made with Angular นำเสนอเว็บไซต์หลายร้อยแห่งที่สร้างด้วย Angular ซึ่งส่วนใหญ่เป็นคุณสมบัติเว็บที่มีรายละเอียดสูง