Параўнанне JavaScript фреймворков Vue.js, React і Angular (2019)

1. 1. Рэндэрынг - адлюстраванне канчатковага выніку
2. 2. Архітэктура кампанентаў
3. 3. Скіраванасць і класы залежнасцяў
4. 4. Зваротная сумяшчальнасць
5. Angular
6. React
7. Vue.js
8. 5. «Тэхнічнае абслугоўванне» - дакументацыя і кам'юніці
9. React
10. Vue.js
11. Angular
12. падагульнім

Пачынаючы новы праект, праграміст сутыкаецца з выбарам: які JavaScript фреймворк выбраць для сайта - Vue.js, React або Angular? Адрозненні паміж імі ёсць, і даволі істотныя. Аднак кожны з іх падыходзіць для вырашэння задач. Таму застаецца адкрытым пытанне эфектыўнасці працы.

Адкрытых дадзеных па шыраце выкарыстання фреймворков няма, аднак ускосны аналіз адкрытых вакансій на сайце Indeed.com дае даволі цікавае размеркаванне:

1 месца - React 78,1%

2 месца - Angular 21%

3 месца - Vue.js 0,8%

4 месца - без удакладнення асяроддзя 0,1%

Дадзеныя апытання StackOverflow даюць ужо некалькі іншыя лічбы: 67% галасоў аддадзены React, тады як за Angular «прагаласавала" 42% праграмістаў.

Атрымліваецца, што папулярней ўсіх - React . Але ці значыць, што ён будзе больш эфектыўна? Зусім няма, бо за папулярнасцю крыецца толькі выкарыстанне асяроддзя ў такіх праектах, як Facebook, Instagram. Да таго ж, напрыклад, на Github менавіта ў Vue.js больш за ўсё «зорачак».

Таму варта адмовіцца ад чужога вопыту і паспрабаваць параўнаць JavaScript фреймворка па фактычным паказчыках, якія крытычныя для распрацоўніка.

1. Рэндэрынг - адлюстраванне канчатковага выніку

Javascript фреймворка ў першую чаргу варта параўнаць па рэндэрынгу старонкі. Сучасная архітэктура дапускае два выгляду: на баку кліента (старонка малююць за кошт магутнасцяў ПК карыстальніка) ці на боку сервера.

DOM - Document Object Model - аб'ектная мадэль дакумента, якая дазваляе счытваць і змяняць змесціва, афармленне і нават структуру html-дакументаў. Кожны з фреймворков падыходзіць па-свойму да апрацоўкі DOM што і аказвае ўплыў на рэндэрынг канчатковай старонкі, якая адлюстроўваецца на экране карыстача.

Vue.js і React ствараюць копію DOM, апрацоўваюць яе, а затым вынік параўноўваецца з зыходнай версіяй. У канчатковым дакуменце (гэта значыць на экране карыстача) замяняюцца толькі тыя часткі старонкі, якія адрозніваюцца ад вынікаў апрацоўкі.

Гэта значна паскарае прагляд і рэндэрынг старонкі. Адпаведна скарачаецца аб'ём трафіку, што асабліва важна для карыстальнікаў мабільных прылад.

У корані адрозніваецца падыход да апрацоўкі DOM фреймворком Angular версіі 1.x і вышэй . Тут адбываецца падзел на два патокі, прычым за рэндэрынг DOM «адказвае» браўзэр (кліенцкая частка), а за стварэнне дырэктыў, загрузку кода і сэрвісаў - агульны паток (серверная частка).

Але гэта зусім не значыць, што рэндэрынг адбываецца на баку кліента - візуалізацыя па-ранейшаму вырабляецца серверамі. Такім чынам, SEO аптымізацыя не выкліча цяжкасцяў. Пошукавым робатам будзе прадастаўлена карэктная старонка пры індэксацыі.

2. Архітэктура кампанентаў

React не адносіцца да фреймворкам у чыстым выглядзе. Гэта свайго роду мадыфікаваная бібліятэка, «заточаная» пад MVC (Model-View-Controller, дзе Мадэль адказвае за прадастаўленне дадзеных, Від - адлюстроўвае дадзеныя Мадэлі карыстачу, а Кантролер інтэрпрэтуе дзеянні карыстальніка і прымушае Мадэль ўносіць змены).

Angular і Vue.js адносяцца ўжо да саміх фреймворкам.

Калі ў аснове архітэктуры праекта ляжыць React, то гэта прадвызначае:

• неабходнасць пошуку і ўкаранення дадатковых бібліятэк для рэалізацыі кожнай з задач;
• наладу функцыянальнай часткі прыкладання пад канкрэтную бібліятэку;
• складанасць ўключэння ў праект іншых распрацоўшчыкаў, з-за розніцы ў стэку бібліятэк кожнага прыкладання.

Такім чынам, для рэалізацыі архітэктуры спатрэбіцца больш часу. Нізкаўзроўневы API (Application Programming Interface - набор гатовых каманд, больш падрабязна пра тое, што такое API ) Патрабуе занадта доўгай налады.

У выпадку выкарыстання гатовых фреймворков - Vue.js і Angular, праблем з падборам або наладай бібліятэк для розных задач ўжо не ўзнікае. Высокаўзроўневы API забяспечвае зваротную сумяшчальнасць для ўсіх бібліятэк.

Гэта дазволіць падлучыцца да праекту іншаму праграмісту без працяглага вывучэння архітэктуры прыкладання. Менавіта ў уніфікацыі працэсаў крыецца папулярнасць паўнавартасных фреймворков.

3. Скіраванасць і класы залежнасцяў

React і Vue.js падтрымліваюць толькі аднабаковую перадачу дадзеных. Пры гэтым у React аб'екты інкапсуляванага. Кажучы простай мовай, кожны з аб'ектаў прыкладання ставіцца да канчатковым працэдурах, якія не патрабуюць дзеянняў карыстальніка да заканчэння работы.

Аднак React падтрымлівае капіраванне і перадачу стану. Гэта значыць, ўласцівасці прапісаных аб'ектаў могуць быць адноўлены на іншай прыладзе, калі запусціць прыкладанне і паведаміць стан кампанентаў. Такім чынам, рэндэрынг будзе ідэнтычным, на экранах абодвух прылад будзе адна і тая ж "карцінка".

фреймворк Vue.js працуе ўжо крыху інакш. JS па-ранейшаму аднабаковы, але кампаненты працуюць з шаблонамі, і на выхадзе атрымліваецца чысты html. Ёсць падтрымка JSX, што спрашчае пераход з React і падобных бібліятэк.

Для фреймворка аўтаматызавана логіка працэсаў за кошт пабудовы дырэктыў. Досыць дадаць патрэбную дырэктыву, каб атрымаць дадатковую функцыянальнасць. Напрыклад, неабходна зрабіць блокавы элемент

перамяшчаным па старонцы. Для рэалізацыі досыць дадаць дырэктыву «draggable» да ўласцівасцяў аб'екта, пасля чаго яго можна будзе перацягваць мышкай па экране.

фреймворк Angular некалькі адрозніваецца логікай працэсу. Так, тут ёсць усё, што ўласціва Vue.js, аднак апісанне ўзаемадзеяння аб'ектаў адбываецца ў службах, якія з'яўляюцца складовымі часткамі модуляў.

Модульная архітэктура больш зручная пры распрацоўцы вялікіх прыкладанняў. Модуль ствараецца для рашэння некалькіх задач падобнай функцыянальнасці. Такім чынам, канчатковы памер кода становіцца менш, а хуткасць апрацоўкі вышэй.

падтрымка MVVM (Model-View-ViewModel) дапускае рашэнне розных задач у адным раздзеле прыкладання з выкарыстаннем аднаго набору дадзеных. Залежнасць функцый вызначае двухбаковую накіраванасць перадачы дадзеных. Кожная працэдура можа запусціць іншы працэс.

4. Зваротная сумяшчальнасць

Для распрацоўніка прыкладання важная магчымасць абнаўлення архітэктуры для падлучэння новых модуляў і бібліятэк.

Angular

Паўнавартасны фреймворк. Абсалютная залежнасць ад папярэдніх версій і кампанентаў. Прамой пераход з 4.0 на 5.0 немагчымы, прыйдзецца паслядоўна ўсталёўваць усе абнаўлення паміж версіямі. Гэта прывядзе да неабгрунтаванага павелічэння аб'ёму прыкладання. Дарэчы, забаўны факт, Angular версіі 3.0 не існуе . Пасля 2-й версіі адразу ідзе 4-я.

React

Бібліятэка. Поўная сумяшчальнасць паміж версіямі. Магчыма падключэнне да дадатку бібліятэк розных версій, абнаўленне састарэлых з ўспадкоўванне уласцівасцяў.

Vue.js

Прагрэсіўны фреймворк (паводле заяве галоўнага распрацоўніка Vue.js Эвана Ю ). Модульная сістэма аналагічная React, але якая ўключае ў сябе ўсе атрыбуты JS-фреймворка, якія працуюць з поўнай зваротнай сумяшчальнасцю.

5. «Тэхнічнае абслугоўванне» - дакументацыя і кам'юніці

Пры выбары нейкай пэўнай архітэктуры нельга ігнараваць падтрымку супольнасці праграмістаў (кам'юніці). Бо нават простыя функцыі могуць выклікаць цяжкасці.

І чым больш складана праект, тым часцей распрацоўшчык звяртаецца і да тэхнічнай дакументацыі абранай асяроддзя, і за радай да кам'юніці. Таму варта параўнаць «падтрымку» кожнага JS-фреймворков

React

Даволі няпроста арганізавана «тэхпадтрымка» асяроддзя React. З аднаго боку, кам'юніці складаюць тысячы праграмістаў у розных краінах, што цалкам здымае моўны бар'ер. Параіцца з «калегамі па цэху» можна на любой мове, на рускай, англійскай, кітайскай і іншых.

Аднак адкрыты зыходны код і штодзённае з'яўленне новых бібліятэк на базе React з'яўляюцца недахопамі асяроддзя. Складана знайсці дакументацыю, якая б вычарпальна апісвала працэсы прымянення, функцыі і ўласцівасці канкрэтнай свежай выпушчанай бібліятэкі.

Часцей за ўсё новыя модулі з'яўляюцца такім чынам: праграміст стварае бібліятэку для вырашэння нейкай задачы ў сваім праекце. Затым ён піша кароткае кіраўніцтва і выкладвае напрацоўкі ў інтэрнэт.

Vue.js

Падрабязная дакументацыя для фреймворка - «візітная картка» Vue.js. Аднак прыхільнікі асяроддзя не згадваюць, што большая частка «мануалы» не мае нармальнага перакладу ні на англійская, ні на рускую мову.

Супольнасць карыстальнікаў, нягледзячы на ​​вялікую папулярнасць Vue.js на «Хабрэ» або Github, задаволенае сціплае, асабліва ў параўнанні з Angular або React. Нават JQuery карыстаецца значна больш распрацоўшчыкаў, чым Vue.js.

Як правіла, адказ на пытанне аб рэалізацыі задачы чакаецца некалькі сутак. І не факт, што хтосьці зможа адказаць.

Некалькі палегчыць выкарыстанне асяроддзя чат на афіцыйным сайце праекта.

Angular

У адрозненне ад Vue.js і React, для фреймворка напісана не толькі падрабязная дакументацыя, але і выпушчана нямала гайдлайнов. Такім чынам, не давядзецца звяртацца да дапамогі кам'юніці для пошуку адказаў.

Колькасць праграмістаў, якія выкарыстоўваюць фреймворк, вылічаецца сотнямі тысяч. Распрацоўшчык у любы момант можа задаць пытанне з разраду «Howto». Для гэтага не давядзецца шукаць афіцыйны сайт праекта. Звярнуцца па дапамогу можна і на stackoverflow, і на toster, і на іншых пляцоўках, аж да «Ответы@mail.ru».

Абавязкова знойдзецца чалавек, які ведае, як вырашыць пастаўленую задачу або падкажа, дзе знайсці адказ.

Як вырашыць задачу і дзе знайсці адказ - цалкам сапраўды падкажуць нашы ментар па праграмаванні на JavaScript выбраць ментар

падагульнім

Вядома, параўнаць фреймворка абсалютна аб'ектыўна дастаткова цяжка. Але аналіз дазволіць пачаткоўцу распрацоўніку падабраць платформу. Падвядзем вынікі:

1. Калі трэба хутка вывучыць сераду, то варта выбіраць паміж Vue.js і React.
2. На Vue.js лёгка перайсці як карыстальніку Angular, так і React. Бо тут атрымліваецца чысты html-код, знаёмы ўсім распрацоўнікам. Прыёмы і тэхнікі выкарыстоўваюцца прыкладна тыя ж, што і ў Angular.
3. Калі мяркуецца распрацоўка буйнога праекта, то варта разглядаць Angular ў якасці асновы. Ён забяспечвае максімальную гнуткасць і хуткасць рэндэрынгу. Велізарны досвед іншых распрацоўшчыкаў дазволіць вырашыць пытанні, якія абавязкова паўстануць пры працы над дадаткам. React апынецца занадта аб'ёмным, а для Vue.js яшчэ не існуе вялікай колькасці гайд-лайн.
4. Калі да распрацоўкі ў будучыні будуць прыцягвацца іншыя праграмісты, то Vue.js стане лепшым выбарам. Бо гэты фреймворк не толькі просты для вывучэння, але і дазваляе мяняць прыкладанне без разбурэння яго архітэктуры.
5. Калі для праекта прадугледжваецца шматступеннае абнаўленне і пашырэнне функцыянальнасці ў будучыні, то варта выкарыстоўваць Vue.js або React з-за найвышэйшай зваротнай сумяшчальнасці.

Кожны з фреймворков добры па-свойму, ёсць свае моцныя і слабыя бакі. Таму варта даць яшчэ адзін важны савет: што прасцей будзе вывучыць камандзе праграмістаў, то і варта выкарыстоўваць для распрацоўкі. Таксама вывучайце даступныя матэрыялы, развівайцеся, не стойце на месцы, бо Vue.js і React пастаянна змяняюцца.

Бо час, затрачаны на вывучэнне спецыфікі фреймворка, адсоўвае выпуск прыкладання ў камерцыйнае выкарыстанне на нявызначаны тэрмін. Пры гэтым, тэхпадтрымка рэалізаванага праекта можа апынуцца непасільным цяжарам, якое «разгоніць» штатных праграмістаў.

Чытай таксама: