JavaScript Framework гэж юу вэ, энэ нь юу хийдэг вэ?
Вэб хөгжүүлэлтийн хүрээ гэдэг нь ерөнхий функцийг хангадаг программ хангамжийг хэрэглэгчийн бичсэн нэмэлт кодоор сонгон өөрчлөх боломжтой хийсвэрлэл юм. JavaScript фреймворк нь JavaScript хэл дээр бичигдсэн хэрэглээний хүрээ бөгөөд програмистууд функцуудыг удирдаж, тэдгээрийг тав тухтай байлгах үүднээс ашиглах боломжтой.
Хамгийн хүчирхэг, үр ашигтай JavaScript фреймворкуудын нэг болох Angular нь Single Page Application (SPA) боловсруулахад ашиглагддаг нээлттэй эхийн хүрээ юм. Энэ нь HTML-г програм руу өргөтгөж, өгөгдөл холбох шинж чанаруудыг тайлбарладаг.
Онцлогууд
Прогрессив вэб програмууд: Өндөр гүйцэтгэлтэй, офлайн, тэг шат дамжлагагүй суулгац бүхий програмтай төстэй туршлагыг хүргэх орчин үеийн вэб платформын чадвартай.
Ширээний компьютер: Mac, Windows болон Linux дээр ширээний компьютерт суулгасан програмуудыг вэбтэй ижил өнцгийн аргуудыг ашиглан үүсгэж, мөн үндсэн үйлдлийн API-д хандах боломжтой.
Код үүсгэх: Өнцөг нь загваруудыг JavaScript виртуал машинуудад маш оновчтой болгосон код болгон хувиргаж, гараар бичсэн кодын давуу талыг өгдөг.
Код хуваах: Шинэ бүрэлдэхүүн чиглүүлэгчийн тусламжтайгаар өнцгийн програмууд хурдан ачаалж, автомат код хуваах боломжтой.
Загварууд: Энгийн бөгөөд хүчирхэг загварын синтакс ашиглан UI харагдац үүсгэх.
Angular CLI: Тушаалын мөрийн хэрэгслүүд нь хурдан бүтээж эхлэх, бүрэлдэхүүн хэсэг, тест нэмэх, дараа нь шууд ашиглах боломжийг олгоно.
Хөдөлгөөнт дүрслэл: Angular-ын ойлгомжтой API-ээр дамжуулан маш бага кодоор өндөр гүйцэтгэлтэй, нарийн төвөгтэй бүжиг дэглэлт, хөдөлгөөнт дүрсийг бүтээгээрэй.
Хүртээмжтэй байдал: ARIA-г идэвхжүүлсэн бүрэлдэхүүн хэсгүүд, хөгжүүлэгчийн гарын авлага, суурилуулсан туршилтын дэд бүтцийн тусламжтайгаар хүртээмжтэй програмуудыг үүсгэ.
2. React
Facebook-ийн бүтээсэн React хүрээ нь маш хурдан алдартай болсон. Энэ нь орж ирж буй ачаалал ихтэй вэб хуудсуудын динамик хэрэглэгчийн интерфэйсийг хөгжүүлэх, ажиллуулахад ашиглагддаг. Энэ нь виртуал DOM ашигладаг тул ямар ч програмтай нэгтгэх нь илүү хялбар байдаг.
Онцлогууд:
Тунхаглал: Вэбсайт болон гар утасны програмуудад зориулсан интерактив, динамик UI-г бий болгодог. Мэдээллийн харагдах байдал нь кодыг уншихад хялбар, дибаг хийхэд хялбар болгодог.
Virtual DOM: DOM объект бүрт тохирох “виртуал DOM объект” байдаг. Энэ нь анхны DOM-ийн виртуал хуулбарыг үүсгэдэг бөгөөд DOM объектын дүрслэл юм.
Үйл явдлыг зохицуулах: React нь бүрэн нийцтэй W3C объект загварын үйл явдлын системийг бий болгосон. Энэ нь мөн төрөлх үйл явдалд хөтчүүд хоорондын интерфейсээр хангадаг.
JSX: JSX нь HTML-тэй маш төстэй тэмдэглэгээний синтакс юм. JSX нь синтаксийг вэб хуудсанд оруулсан HTML-тэй бараг адилхан болгосноор React бүрэлдэхүүн хэсгүүдийг бичихэд хялбар болгодог.
Гүйцэтгэл: React нь Flux удирдлага гэж нэрлэгддэг програмын архитектуртай нэг талын өгөгдөл холбоход ашигладаг. ReactJS нь програмын ажлын урсгалыг удирддаг Flux-ийн тусламжтайгаар хэрэглэгчдэд зориулсан View-г шинэчлэхэд тусалдаг.
React Native: React Native нь React-д зориулсан захиалгат renderer юм; Энэ нь React гэх мэт вэб бүрэлдэхүүн хэсгүүдийн оронд үндсэн бүрэлдэхүүн хэсгүүдийг барилгын блок болгон ашигладаг.
Бүрэлдэхүүн хэсгүүдэд суурилсан: Бүх зүйл нь вэб хуудасны бүрэлдэхүүн хэсэг бөгөөд харагдац (эсвэл UI) үүсгэхийн тулд жижиг бүрэлдэхүүн хэсгүүдэд хуваагддаг. ReactJS дахь бүрэлдэхүүн хэсгүүдийг программ дахь визуал болон харилцан үйлчлэлийг тодорхойлоход ашигладаг.
3. Vue.js
Хэдийгээр 2016 онд бүтээгдсэн ч энэхүү JavaScript-ийн хүрээ нь зах зээлд хэдийнэ нэвтэрсэн бөгөөд олон боломжуудыг санал болгосноор үнэ цэнээ нотолсон. Түүний хос интеграцийн горим нь өндөр чанартай ДЦГ-ыг бий болгох хамгийн сонирхолтой шинж чанаруудын нэг юм. Энэ нь хөндлөн платформ хөгжүүлэх найдвартай платформ юм.
Онцлогууд
Virtual DOM: Vue.js нь үндсэн DOM элементийн клон болох виртуал DOM-г ашигладаг.
Өгөгдөл холбох: Энэ функц нь HTML шинж чанаруудад утгыг өөрчлөх эсвэл хуваарилах боломжийг олгодог.
CSS шилжилтүүд болон хөдөлгөөнт дүрсүүд: Vue нь DOM-ээс нэмэх, шинэчлэх, устгах үед HTML элементүүд рүү шилжих хэд хэдэн аргуудтай.
Загвар: Vue нь DOM-г Vue.js жишээ өгөгдөлтэй холбосон HTML-д суурилсан загваруудыг өгдөг. Загваруудыг Virtual DOM Render функц болгон эмхэтгэсэн.
Нарийн төвөгтэй байдал: Vue.js нь API болон дизайны хувьд илүү хялбар байдаг. Вэб хөгжүүлэгч энгийн программуудыг нэг өдрийн дотор бүтээж чадна.
4. Ember.js
Ember.js нь 2015 онд ирсэн бөгөөд түүнээс хойш өргөн хэрэглээний хүрээгээрээ алдартай болсон. Ember.js-ийн онцлогууд нь хоёр талын өгөгдөл холбохыг дэмждэг бөгөөд энэ нь түүнийг төвөгтэй хэрэглэгчийн интерфэйстэй ажиллах найдвартай платформ болгодог. LinkedIn, Netflix, Nordstrom зэрэг алдартай вэбсайтууд вэбсайтдаа
Онцлогууд:
Ашиглахад хялбар: Ашиглахад хялбар вэб програмуудыг үүсгэ.
HTML болон CSS-ийн онцлогууд: Энэ нь үндсэндээ хөгжүүлэлтийн загварын HTML болон CSS-ийг санал болгодог.
Instance эхлүүлэгч: Ember нь ангиудын жишээ эхлүүлэгчээр хангадаг
Routes: Ember.js нь URL-г удирдахад ашигладаг үндсэн функцууд болох маршрутуудыг санал болгодог.
Дибаг хийх: Ember.js нь Ember програмыг дибаг хийх зориулалттай Ember Inspector хэрэгсэлтэй.
Загвар: Ember.js нь програмын агуулга өөрчлөгдсөн тохиолдолд загварыг автоматаар шинэчлэхэд тусалдаг загваруудыг ашигладаг.
Ember.js ашигладаг.
5. Meteor
Meteor нь програм хангамжийн хөгжүүлэлтийн нэлээд хэсгийг хамарсан хэд хэдэн өөр өөр хэрэглээтэй. Ашиглалтад арын төгсгөлийн хөгжүүлэлт, мэдээллийн баазын удирдлага, бизнесийн логик, урд талын дүрслэл орно.
Онцлогууд:
Бүрэн стек шийдэл: Meteor нь вэб програмуудыг хөгжүүлэх, ашиглахад зориулагдсан бүрэн стек шийдэл болох нь батлагдсан. Онцлогууд нь автомат CSS, реактив загварууд, үйлдвэрлэлийн сервер дээрх JS-ийг багасгах зэрэг орно.
Хөгжлийн экосистем: Meteor.js нь нээлттэй эхийн изоморф хөгжлийн экосистем (IDevE) юм. Энэ нь шаардлагатай бүх урд болон хойд талын бүрэлдэхүүн хэсгүүдийг агуулсан тул бодит цагийн вэб програмуудыг эхнээс нь бүтээхэд хялбар болгодог.
Изоморф JavaScript код: Ижил кодыг урд тал, арын хэсэг, гар утасны болон вэб програмуудад ашиглаж болно. Энэ нь хөгжүүлэгчдийг өөр өөр модулийн менежер, номын сан, драйвер, API болон бусад зүйлийг суулгах, тохируулах шаардлагаас авардаг.
Front-end Solution:Meteor нь Blaze.js программыг санал болгодог бөгөөд энэ нь зарим хэрэгцээт функцуудыг санал болгодог. Энэ нь илүү сайн үр дүнд хүрэхийн тулд Backbone.js зэрэг орчин үеийн алдартай фреймворкуудтай нэгддэг.
Өгөгдлийн сангийн интеграцчлал: Meteor.js нь Node.js драйвертай ямар ч мэдээллийн санг дэмждэг. MongoDB нь түгээмэл хэрэглэгддэг.
Одоо оролдоод үз
6. Mithril
Mithril нь нэг хуудасны программуудыг хөгжүүлэхэд голчлон ашиглагддаг үйлчлүүлэгч талын JavaScript хүрээ юм. Суурь ангиас үүсмэл функц байхгүй тул хүрээний хэрэгжилт илүү хялбар байдаг. Энэ нь жижиг хэмжээтэй (<8кб gzip), хурдан бөгөөд чиглүүлэлт болон XHR хэрэгслүүдийг хайрцагнаас гаргаж өгдөг.
Онцлогууд:
Кодын хэмжээ: Mithril нь 7.8 кБ орчим gzip-тэй бөгөөд бусад номын сангаас хамааралгүй.
Архитектур: Mithril нь өргөтгөх үндсэн ангиудыг өгдөггүй. Үндсэн MVC загварыг хэрэгжүүлэхэд далд гүйцэтгэлийн зардал байхгүй.
Жижиг API: Mithril нь хатуу API-г санал болгодог бөгөөд үүний үр дүнд бүх хувилбарт функцийг бий болгох шаардлагагүй болно.
Тунхаглал: Митрил нь тунхаглалтай бөгөөд кодын нарийн төвөгтэй байдлыг бууруулдаг.
7. Node.js
Node.js нь сервер талын JavaScript ажиллах цагийн орчин бөгөөд хөндлөн платформ дээр ажилладаг бөгөөд нээлттэй эх сурвалж юм. Энэхүү фреймворк нь үйл явдалд тулгуурласан архитектураараа асинхрон оролт/гаралтыг жолоодох чадвартай. Энэ нь JavaScript Runtime орчинд ажилладаг бөгөөд JAVA-ийн урсгалтай, савлах, гогцоо үүсгэх зэрэг ижил төстэй шинж чанаруудыг харуулдаг.
Онцлогууд:
Хурдан: Node.js номын сан нь Google Chrome-ийн V8 JavaScript хөдөлгүүр дээр бүтээгдсэн тул кодыг гүйцэтгэхэд хурдан байдаг.
Асинхрон ба үйл явдалд тулгуурласан I/O: Бүх API-ууд нь асинхрон байдаг бөгөөд энэ нь сервер нь API-г өгөгдөлтэй буцаж ирэхийг хүлээхгүй гэсэн үг юм.
Single-threaded: Node.js нь үйл явдлын давталттай хамт нэг урсгалтай загварыг дагадаг.
Өргөтгөх өндөр боломжтой: Node.js нь үйл явдлын механизмыг дагадаг бөгөөд энэ нь серверийг блоклохгүй хариу үйлдэл үзүүлэх боломжийг олгодог бөгөөд энэ нь түүнийг өргөтгөх боломжтой болгодог.
Буфер хийхгүй: Аудио болон видео файлуудыг байршуулах үед Node.js нь боловсруулах хугацааг эрс багасгадаг. Энэ нь ямар ч өгөгдлийг буферлэхгүй бөгөөд програм нь өгөгдлийг хэсэг хэсгээр нь авдаг.
Нээлттэй эх сурвалж: Нээлттэй эх сурвалжийн хувьд Node.js нийгэмлэг нь Node.js программуудад илүү олон боломжуудыг нэмэхэд ашиглаж болох хэд хэдэн гайхалтай загваруудыг гаргаж ирсэн.
8. Polymer
Полимер бол Google-ийн боловсруулсан нээлттэй эхийн JavaScript номын сан бөгөөд вэбсайтын элементүүдийг хэтэрхий төвөгтэй болгохгүйгээр үүсгэж чаддаг. Энэ нь нэг талын болон хоёр талын өгөгдөл холбохыг дэмждэг бөгөөд энэ нь илүү өргөн хэрэглээний талбарыг өгдөг.
Онцлогууд:
Polyfills: Полимер нь захиалгат болон дахин ашиглах боломжтой элементүүдийг бий болгоход зориулагдсан полифиллүүдийг агуулдаг.
Дахин ашиглах боломжтой: Полимер нь вэб баримт бичиг болон програмуудад дахин ашиглах боломжтой виджетүүдийг бүтээхэд ашиглагддаг.
Мобайл аппликейшнүүдэд тохиромжтой: Полимер нь гар утасны программыг хурдан бөгөөд хялбар боловсруулахад зориулж Google-ийн материалын дизайныг ашигладаг.
Уян хатан байдал: Захиалгат элементүүд нь сүлжээгээр тархсан бөгөөд хэрэглэгчдэд HTML импортын тусламжтайгаар эдгээр элементүүдийг ашиглах боломжийг олгодог.
9. Aurelia
Өмнөх шиг тийм ч нийтлэг биш байсан ч Aurelia хүрээ нь илүү бат бөх вэбсайтуудыг хөгжүүлэхэд тустай. Энэхүү JS хүрээ нь өгөгдөл холбох зэрэг хэд хэдэн зорилгоор HTML-г өргөтгөх боломжтой. Түүний орчин үеийн архитектур нь төлбөр хураамжийн зорилго нь үйлчлүүлэгч болон серверийн тал дээр нэг дор тайлбарлах явдал гэдгийг баталгаажуулдаг.
Онцлогууд:
Бүрэлдэхүүн хэсгүүд: Бүрэлдэхүүн хэсгүүд нь Aurelia хүрээний барилгын блокууд бөгөөд JavaScript-н харагдах загвар хосууд болон HTML харагдацуудаас бүрддэг.
Вэб стандартууд: Энэ бол орчин үеийн хамгийн цэвэрхэн хүрээнүүдийн нэг юм. Энэ нь шаардлагагүй хийсвэрлэлгүйгээр вэб стандартад бүрэн төвлөрдөг.
Өргөтгөх боломжтой: Энэхүү хүрээ нь бусад хэрэгслүүдтэй нэгтгэх хялбар аргыг дэмждэг.
Арилжааны дэмжлэг: Энэхүү хүрээ нь арилжааны болон аж ахуйн нэгжийн дэмжлэгийг санал болгодог.
Одоо оролдоод үз
10. Backbone.js
Quite easy to learn, Backbone is used to create Single Page Applications. The development of this framework uses the idea that all the server-side functions must flow through an API, which helps achieve complex functionalities with less code.
Features:
- Convenience: Building blocks such as models, views, events, routers, and collections are provided for assembling the client-side web applications.
- Easy-to-use library: It is a simple library that helps separate business and user interface logic.
- Many extensions: Backbone has a free and open-source library and contains over 100 available extensions.
- Dependencies: Backbone has a soft dependency on jQuery and a hard dependency on Underscore.js.
- Organized development: Backbone lets you create client-side web applications or mobile applications in a well-structured and organized format.
