Будущее фреймворков: что нас ждет до конца 2020 года?

Содержание

• 01. Угловой
• 02. Реагировать
• 03. Vue
• Как сравнить синтаксис фреймворков?
• Популярность и рынок
• Разработка мобильных приложений
• Другие фреймворки, на которые стоит обратить внимание в 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 для постепенной загрузки на сервере и клиенте. Например, как только пользователь начинает взаимодействовать со страницей, код компонентов вместе с любой средой выполнения извлекается по частям.

Кажется, что 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

Vue был разработан в 2014 году Эваном Ю, бывшим сотрудником 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: В v-on Директива используется для присоединения слушателей событий, которые вызывают методы в экземплярах Vue. Директивы начинаются с префикса v- чтобы указать, что они являются специальными атрибутами, предоставляемыми Vue, и применить особое реактивное поведение к визуализированной DOM. Обработчики событий могут быть встроены либо в качестве имени метода.

template> button v-on: click = ”clickHandler”> Щелкните меня / кнопка> / template> script> export default {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 () »> Нажмите меня! / 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 довольно близко соответствовали спискам вакансий на Indeed, а Vue сильно отставал. Однако в LinkedIn, похоже, больше спрос на разработчиков Vue.

Переполнение стека: Если вы посмотрите на результаты опроса разработчиков Stack Overflow за 2019 год, то React и Vue.js - самые популярные и популярные веб-фреймворки. Angular занимает девятое место среди самых любимых, но третье место среди самых популярных.

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 для разработки современных веб-приложений и мобильных приложений. Этому легко научиться, и у него очень отзывчивое сообщество.

Заключение

Все три фреймворка постоянно улучшаются, что является обнадеживающим признаком. У каждого есть своя точка зрения и предпочтительное решение, какое из них им следует использовать, но на самом деле все зависит от размера проекта, и это заставляет вас чувствовать себя более комфортно.

Самым важным аспектом является постоянная поддержка их сообществ, поэтому, если вы планируете начать новый проект и никогда раньше не использовали ни один из трех, то я считаю, что вы в надежных руках со всеми из них. Если у вас еще не было возможности изучить какую-либо из трех фреймворков, то я предлагаю вам принять новогоднее решение начать обучение. Будущее будет вращаться вокруг этих трех.

Этот контент изначально появился в сетевом журнале.