Бъдещето на рамките: Какво се очаква през останалата част от 2020 г.?

Съдържание

• 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 също така прави възможно Progressive Hydration, което екипът на Angular показа на I / O 2019. Progressive Hydration използва Ivy за прогресивно зареждане на сървъра и клиента. Например, след като потребителят започне да взаимодейства със страница, кодът на компонентите заедно с всяко време на изпълнение се извлича парче по парче.

Айви изглежда като основният фокус за Angular и се надяваме да го направим достъпен за всички приложения. Във версия 9 ще има опция за отказ, чак до Angular 10.

02. Реагирайте

React първоначално е пуснат през 2013 г. от Facebook и се използва за изграждане на интерактивни уеб интерфейси. Използва се от Netflix, Dropbox, PayPal и Uber, за да назовем само няколко.

Професионалисти:

• React използва виртуалния DOM, което има положително въздействие върху производителността
• JSX е лесен за писане
• Актуализациите не компрометират стабилността

Минуси:

• Един от основните неуспехи е нуждата от библиотеки на трети страни за създаване на по-сложни приложения
• Разработчиците остават на тъмно за най-добрия начин за развитие

Какво следва?

На React Conf 2019 екипът на React засегна редица неща, по които работи. Първият е Selective Hydration, където React ще постави на пауза каквото и да работи, за да даде приоритет на компонентите, с които потребителят взаимодейства. Докато потребителят отива да взаимодейства с определена секция, тази зона ще бъде хидратирана. Екипът работи и върху Suspense, която е системата на React за организиране на зареждането на код, данни и изображения. Това позволява на компонентите да чакат нещо, преди да се изобразят.

И селективната хидратация, и суспензията са възможни от едновременния режим, който позволява на приложенията да бъдат по-отзивчиви, като дава възможност на React да влиза в големи блокове с по-нисък приоритет, за да се съсредоточи върху нещо, което е с по-висок приоритет, като отговор на потребителския вход. Екипът също спомена достъпността като друга област, която те разглеждат, като се фокусира върху две конкретни теми - управление на фокуса и интерфейси за въвеждане.

03. Вю

Vue е разработен през 2014 г. от Evan You, бивш служител на Google. Използва се от Xiaomi, Alibaba и GitLab. Vue успя да спечели популярност и подкрепа от разработчиците за кратко време и без подкрепата на голяма марка.

Професионалисти:

• Много леки по размер
• Приятен за начинаещи - лесен за научаване
• Страхотна общност

Минуси:

• Не е подкрепено от огромна компания, като React с Facebook и Angular с Google
• Няма реална структура

Какво следва?

Vue си е поставил за цел да бъде по-бърз, по-малък, по-поддържаем и улесняващ разработчиците да се насочват към родните (ако имате проблеми с поддръжката, помислете за услуга за уеб хостинг). Следващото издание (3.0) се очаква през първото тримесечие на 2020 г., което включва виртуално презаписване на DOM за по-добра производителност заедно с подобрена поддръжка на TypeScript. Освен това има добавяне на Composition API, който предоставя на разработчиците нов начин да създават компоненти и да ги организират по функции, вместо по операции.

Разработващите Vue също са били заети да работят върху Suspense, което спира изобразяването на вашия компонент и рендерира резервен компонент, докато не бъде изпълнено условие.

Едно от страхотните неща с актуализациите на Vue е, че поддържат обратна съвместимост. Те не искат да разбиете старите си проекти на Vue. Видяхме това при миграцията от 1,0 до 2,0, където 90% от API беше същият.

Как се сравнява синтаксисът на рамки?

И трите рамки са претърпели промени след техните издания, но едно важно нещо за разбиране е синтаксисът и как се различава. Нека да разгледаме как синтаксисът се сравнява, когато става въпрос за просто обвързване на събития:

Vue: The v-on Директива се използва за прикачване на слушатели на събития, които извикват методи на екземпляри на Vue. Директивите са с префикс v- за да посочи, че те са специални атрибути, предоставени от Vue, и да приложат специално реактивно поведение към визуализирания DOM. Манипулаторите на събития могат да бъдат предоставени или вградени, или като име на метода.

template> button v-on: click = ”clickHandler”> Click me / button> / template> script> export default {name: “HelloWorld”, методи: {clickHandler: function () {console.log („Бях щракнат! ”); }}}; / script>

Реагирайте: React поставя маркировка и логика в JS и JSX, синтаксисно разширение на JavaScript. С JSX функцията се предава като манипулатор на събития. Обработката на събития с React елементи е много подобна на обработката на събития на DOM елементи. Но има някои синтактични разлики; например, React събитията се именуват с помощта на camelCase, а не с малки букви.

бутон за функция () {функция 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 Developer Survey за 2019 г., React и Vue.js са най-обичаните и желани уеб рамки. Angular сяда на девето място за най-обичани, но трето най-желано.

GitHub: Vue има най-много звезди с 153 000, но има най-малък брой участници (283). От друга страна, React има 140 000 звезди и 1341 сътрудници. Angular има само 59,6 хиляди звезди, но има най-голям брой участници от трите с 1579.

Тенденции на NPM: Горното изображение показва статистика за последните 12 месеца, където можете да видите, че React има по-голям брой изтегляния на месец в сравнение с Angular и Vue.

Разработка на мобилни приложения

Един от основните акценти за големите три е мобилното внедряване. React има React Native, който се превърна в популярен избор за създаване на приложения за iOS и Android не само за потребителите на React, но и за по-широката общност за разработка на приложения. Ъгловите разработчици могат да използват NativeScript за естествени приложения или Ionic за хибридни мобилни приложения, докато разработчиците на Vue имат избор от NativeScript или Vue Native. Поради популярността на мобилните приложения това остава ключова област за инвестиции.

Други рамки, на които да се обърне внимание през 2020 г.

Ако искате да опитате нещо ново през 2020 г., разгледайте тези JavaScript рамки.

Жарава: Рамка с отворен код за изграждане на уеб приложения, която работи на базата на шаблона MVVM. Използва се от няколко големи компании като Microsoft, Netflix и LinkedIn.

Метеор: Пълна стекова JavaScript платформа за разработване на съвременни уеб и мобилни приложения. Лесно е да се научи и има много подкрепяща общност.

Заключение

И трите рамки непрекъснато се подобряват, което е обнадеждаващ знак. Всеки има своя собствена перспектива и предпочитано решение за това кое трябва да използва, но това наистина се свежда до размера на проекта и което ви кара да се чувствате по-комфортно.

Най-важният аспект е непрекъснатата подкрепа на техните общности, така че ако планирате да започнете нов проект и никога преди не сте използвали нито един от трите, тогава вярвам, че сте в сигурни ръце с всички тях. Ако все още не сте имали възможност да научите някоя от трите рамки, предлагам да направите решението си за Нова година да започнете да учите. Бъдещето ще се върти около тези три.

Това съдържание първоначално се появи в нетно списание.