Задаволены
- 01. Кутні
- 02. Рэагуйце
- 03. Вуе
- Як параўноўваецца сінтаксіс фрэймворкаў?
- Папулярнасць і рынак
- Распрацоўка мабільных прыкладанняў
- Іншыя рамкі, на якія трэба звярнуць увагу ў 2020 годзе
- Выснова
У 2020 годзе мы атрымалі шчаснасць фреймворкаў і бібліятэк, якія дапамогуць нам у распрацоўцы вэб. Але не заўсёды было так шмат разнастайнасці. У 2005 годзе хлопец па імі Брэндан Айх стварыў новую мову сцэнарыяў пад назвай Mocha. Праз некалькі месяцаў пасля перайменавання ў LiveScript, назва была зноў зменена на JavaScript. З тых часоў JavaScript прайшоў доўгі шлях.
У 2010 годзе мы ўбачылі ўвядзенне Backbone і Angular як першых фреймворкаў JavaScript, і да 2016 г. 92 працэнты ўсіх вэб-сайтаў выкарыстоўвалі JavaScript. У гэтым артыкуле мы паглядзім тры асноўныя фреймворкі JavaScript (Angular, React і Vue) і загаловак іх стану на наступнае дзесяцігоддзе. Хочаце зрабіць свой сайт? Паспрабуйце гэты спіс распрацоўшчыкаў сайтаў.
Каб даведацца пра бліскучыя рэсурсы, праверце наш спіс лепшых інструментаў для вэб-дызайну, наш агляд паслуг хостынгу і гэты спіс выдатных праграм для тэсціравання карыстальнікаў.
01. Кутні
AngularJS быў выпушчаны ў 2010 г., але да 2016 г. ён быў цалкам перапісаны і выпушчаны як Angular 2. Angular - гэта поўнамаштабная вэб-структура, распрацаваная Google, якая выкарыстоўваецца Wix, Upwork, The Guardian, HBO і многімі іншымі.
Плюсы:
- Выключная падтрымка TypeScript
- MVVM дазваляе распрацоўнікам раздзяляць працу над адным і тым жа раздзелам прыкладання, выкарыстоўваючы адзін і той жа набор дадзеных
- Выдатная дакументацыя
Мінусы:
- Мае крыху крывой навучання
- Пераход са старой версіі можа быць цяжкім.
- Абнаўленні ўводзяцца даволі рэгулярна, што азначае, што распрацоўшчыкі павінны адаптавацца да іх
Што далей?
У Angular 9 Ivy з'яўляецца кампілятарам па змаўчанні. Ён быў створаны для вырашэння вялікай колькасці праблем, звязаных з прадукцыйнасцю і памерам файла. Гэта павінна зрабіць прыкладанні меншымі, больш хуткімі і простымі.
Пры параўнанні папярэдніх версій Angular з React і Vue,
канчатковыя памеры пучкоў былі значна большымі пры выкарыстанні Angular. Ivy таксама робіць магчымым прагрэсіўнае ўвільгатненне, што і паказала каманда Angular на I / O 2019. Прагрэсіўнае ўвільгатненне выкарыстоўвае Ivy для паступовай загрузкі на сервер і кліент. Напрыклад, як толькі карыстальнік пачынае ўзаемадзейнічаць са старонкай, код кампанентаў разам з любым часам выканання атрымліваецца па частках.
Плюшч здаецца вялікім акцэнтам на Angular, і мы спадзяемся зрабіць яго даступным для ўсіх прыкладанняў. У версіі 9 будзе магчымасць адмовы, аж да Angular 10.
02. Рэагуйце
Першапачаткова React быў выпушчаны Facebook у 2013 годзе і выкарыстоўваецца для стварэння інтэрактыўных вэб-інтэрфейсаў. Ён выкарыстоўваецца Netflix, Dropbox, PayPal і Uber, каб назваць некалькі.
Плюсы:
- React выкарыстоўвае віртуальны DOM, што станоўча ўплывае на прадукцыйнасць
- JSX лёгка пісаць
- Абнаўленні не парушаюць стабільнасць
Мінусы:
- Адзін з асноўных няўдач - неабходнасць стварэння іншых бібліятэк для стварэння больш складаных прыкладанняў
- Распрацоўшчыкі не ведаюць, як лепш развівацца
Што далей?
На React Conf 2019 каманда React закранула шэраг рэчаў, над якімі працавала. Першая - гэта селектыўная гідратацыя, дзе React прыпыніць усё, над чым працуе, каб вызначыць прыярытэты кампанентаў, з якімі ўзаемадзейнічае карыстальнік. Калі карыстальнік пераходзіць да ўзаемадзеяння з пэўным раздзелам, гэтая вобласць будзе ўвільгатняцца. Каманда таксама працавала над Suspense, якая з'яўляецца сістэмай React для арганізацыі загрузкі кода, дадзеных і малюнкаў. Гэта дазваляе кампанентам чакаць чагосьці, перш чым яны аказацца.
І селектыўная гідратацыя, і прыпынак становяцца магчымымі ў паралельным рэжыме, які дазваляе прыкладанням рэагаваць больш, даючы React магчымасць уваходзіць у вялікія блокі працы з меншым прыярытэтам, каб засяродзіцца на чымсьці больш высокім прыярытэце, напрыклад, рэагаваць на ўвод карыстальнікам. Каманда таксама назвала даступнасць яшчэ адной сферай, якую яны разглядалі, засяродзіўшы ўвагу на дзвюх канкрэтных тэмах - кіраванні інтэрфейсам увагі і ўваходу.
03. Вуе
Vue быў распрацаваны ў 2014 годзе Эванам Ю, былым супрацоўнікам Google. Ім карыстаюцца Xiaomi, Alibaba і GitLab. Vue атрымалася заваяваць папулярнасць і падтрымку распрацоўшчыкаў за кароткі прамежак часу і без падтрымкі асноўнага брэнда.
Плюсы:
- Вельмі лёгкага памеру
- Пачатковец - зручны ў навучанні
- Вялікая суполка
Мінусы:
- Не падтрымліваецца такой велізарнай кампаніяй, як React з Facebook і Angular з Google
- Няма рэальнай структуры
Што далей?
Vue паставіў перад сабой мэту быць больш хуткім, меншым, больш зручным для абслугоўвання і палегчыць распрацоўшчыкам арыентацыю на ўласную (калі ў вас узнікаюць праблемы з падтрыманнем, разгледзьце паслугу вэб-хостынгу). Наступны выпуск (3.0) павінен выйсці ў 1 квартале 2020 года, які ўключае віртуальны DOM-перапіс для лепшай прадукцыйнасці разам з палепшанай падтрымкай TypeScript. Таксама ёсць дадатак Composition API, які прадастаўляе распрацоўшчыкам новы спосаб ствараць кампаненты і ўпарадкоўваць іх па функцыях, а не па аперацыях.
Распрацоўшчыкі Vue таксама былі занятыя працай над Suspense, якая прыпыняе рэндэрынг вашага кампанента і адлюстроўвае рэзервовы кампанент, пакуль не будзе выканана ўмова.
Адна з выдатных рэчаў абнаўленняў Vue - яны падтрымліваюць зваротную сумяшчальнасць. Яны не хочуць, каб вы ламалі свае старыя праекты Vue. Мы ўбачылі гэта ў пераходзе з 1,0 на 2,0, дзе 90 адсоткаў API былі аднолькавымі.
Як параўноўваецца сінтаксіс фрэймворкаў?
Усе тры фрэймворкі зведалі змены з моманту выпуску, але важна зразумець адно - сінтаксіс і тое, чым ён адрозніваецца. Давайце паглядзім, як параўноўваецца сінтаксіс, калі гаворка ідзе пра простае звязванне падзей:
Vue: v-на Дырэктыва выкарыстоўваецца для далучэння слухачоў падзей, якія выклікаюць метады ў экземплярах Vue. Дырэктывы маюць прэфікс v- для таго, каб паказаць, што яны з'яўляюцца адмысловымі атрыбутамі, прадастаўленымі Vue, і прымяняць асаблівыя рэактыўныя паводзіны да адлюстраванай DOM. Апрацоўшчыкі падзей могуць быць убудаваныя альбо ў выглядзе назвы метаду.
template> button v-on: click = ”clickHandler”> Click me / button> / template> script> экспарт па змаўчанні {name: “HelloWorld”, метады: {clickHandler: function () {console.log (“На мяне націснулі! "); }}}; / сцэнар>
Рэагаваць: React ставіць разметку і логіку ў JS і JSX, сінтаксічнае пашырэнне JavaScript. З JSX функцыя перадаецца як апрацоўшчык падзей. Апрацоўка падзей з элементамі React вельмі падобная на апрацоўку падзей з элементамі DOM. Але ёсць некаторыя сінтаксічныя адрозненні; напрыклад, падзеі React называюцца з выкарыстаннем camelCase, а не з малой літары.
function Button () {function clickHandler (e) {console.log (“Мяне націснулі”); } кнопка вяртання onClick = {clickHandler}> Націсні мяне! / кнопка>; }
Кутні: Сінтаксіс прывязкі падзей складаецца з назвы мэтавай падзеі ў дужках злева ад знака роўнасці і заявы шаблона ў працы. Акрамя таго, вы можаце выкарыстоўваць на- прэфікс, вядомы як кананічная форма.
@Component ({selector: “app-click-me”, template: `button (click) =” onClickMe () ”> Click me! / Button>`}) клас экспарту ClickMeComponent {onClickMe () {console.log (“ Вы націснулі мяне! "); }}
Папулярнасць і рынак
Пачнем з разгляду агульнай карціны трох структураў у дачыненні да астатняй частцы Інтэрнэту, вывучыўшы статыстыку W3Techs. У цяперашні час Angular выкарыстоўваецца 0,4 працэнта ўсіх вэб-сайтаў, а доля рынку бібліятэкі JavaScript складае 0,5 працэнта. React выкарыстоўваецца 0,3 працэнта ўсіх вэб-сайтаў і 0,4 працэнта долі рынку бібліятэк JavaScript, і Vue мае 0,3 працэнта для абодвух. Гэта здаецца даволі роўным, і вы чакаеце, што лічбы вырастуць.
Тэндэнцыі Google: За апошнія 12 месяцаў React з'яўляецца найбольш папулярным у пошукавых тэрмінах, за ім ідуць Angular. Vue.js даволі далёка адстае; аднак трэба памятаць адно: Vue яшчэ малады ў параўнанні з астатнімі двума.
Пошук працы: На момант напісання артыкула React і Angular даволі шчыльна супадаюць з пункту гледжання спісаў вакансій. Сапраўды, Vue далёка адстае. Аднак у LinkedIn попыт на распрацоўшчыкаў Vue павялічаны.
Перапаўненне стэка: Калі вы паглядзіце вынікі апытання распрацоўшчыкаў Stack Overflow за 2019 год, React і Vue.js - самыя любімыя і жаданыя вэб-структуры. Вуглавы садзіцца на дзевятую пазіцыю для самых любімых, але трэціх самых патрэбных.
GitHub: У Vue найбольшая колькасць зорак - 153 тысячы, але найменшая колькасць удзельнікаў (283). З іншага боку, у React - 140 тысяч зорак і 1341 удзельнік. У Angular ёсць толькі 59,6 тыс. Зорак, але найбольшая колькасць удзельнікаў з трох - 1579.
Тэндэнцыі NPM: На малюнку вышэй прыведзена статыстыка за апошнія 12 месяцаў, дзе вы бачыце, што React мае большую колькасць загрузак у месяц у параўнанні з Angular і Vue.
Распрацоўка мабільных прыкладанняў
Адзін з асноўных напрамкаў для вялікай тройкі - мабільнае разгортванне. React мае React Native, які стаў папулярным выбарам для стварэння прыкладанняў для iOS і Android не толькі для карыстальнікаў React, але і для шырокай супольнасці распрацоўшчыкаў прыкладанняў. Распрацоўшчыкі Angular могуць выкарыстоўваць NativeScript для натыўных прыкладанняў або Ionic для гібрыдных мабільных прыкладанняў, тады як распрацоўшчыкі Vue могуць выбраць NativeScript або Vue Native. З-за папулярнасці мабільных прыкладанняў гэта застаецца ключавой сферай інвестыцый.
Іншыя рамкі, на якія трэба звярнуць увагу ў 2020 годзе
Калі вы хочаце паспрабаваць нешта новае ў 2020 годзе, азнаёмцеся з гэтымі фреймворкамі JavaScript.
Эмбер: Фреймворк з адкрытым зыходным кодам для стварэння вэб-прыкладанняў, які працуе на аснове шаблону MVVM. Ім карыстаюцца некалькі буйных кампаній, такіх як Microsoft, Netflix і LinkedIn.
Метэор: Поўнакамплектная платформа JavaScript для распрацоўкі сучасных Інтэрнэт-і мабільных прыкладанняў. Гэта лёгка навучыцца і мае вельмі падтрымлівае супольнасць.
Выснова
Усе тры асновы пастаянна ўдасканальваюцца, што з'яўляецца абнадзейлівым знакам. Кожны чалавек мае ўласную перспектыву і пераважнае рашэнне наконт таго, якое з іх трэба выкарыстоўваць, але гэта сапраўды залежыць ад памеру праекта і дазваляе адчуваць сябе больш камфортна.
Самы важны аспект - гэта пастаянная падтрымка іх суполак, таму, калі вы плануеце пачаць новы праект і ніколі раней не выкарыстоўвалі ніводнага з трох, то я лічу, што вы ў надзейных руках з усімі. Калі вы яшчэ не змаглі даведацца ніводнага з трох рамак, то я прапаную прыняць рашэнне Новага года пачаць навучанне. Будучыня будзе круціцца вакол гэтых трох.
Гэты змест першапачаткова з'яўляўся ў часопісе net.
