Эволюция инструментов JavaScript: современное руководство для разработчиков

Исходный код приложения JavaScript традиционно трудно понять из-за того, что код распространяется по файлам JavaScript, HTML и CSS, а также по событиям и данным, проходящим через ряд не-интуитивных путей. Как и все программные обеспечения, среда разработки JavaScript включает в себя упаковщиков, менеджеров пакетов, системы контроля последних версий и инструменты для тестирования.

Несоответствия и несовместимости между браузерами всегда требовали, чтобы вокруг кода были расположены различные настройки и зачастую решение одной ошибки может приводить к созданию новой. В результате команды разработчиков стараются создавать и поддерживать высококачественные крупномасштабные приложения, в то время как спрос на их работу растет, особенно на уровне корпоративных приложений, где влияние программистов на бизнес заменило их «Сколько строк кода Вы написали?».

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

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

Сложность современной веб-разработки

Эндрю Таненбаум, изобретатель Minix (предшественник Linux, который часто использовался для выпуска новых компьютерных чипов и систем), однажды сказал: «Хорошая новость о стандартах состоит в том, что у Вас есть из чего выбирать». Не все браузеры следовали различным стандартам, так как некоторые из них нашли свой собственный путь.

Вот тут то и начались проблемы, так называемые “войны браузеров”. Каждый браузер мог отображать данные с этих сайтов по разному. Несовместимости браузеров все еще существуют и сегодня, а также можно сказать, что они стали немного хуже из-за мобильности интернета.

Развитие в современном мире означает, что надо быть максимально совместимым с как можно большим количеством популярных веб-браузеров, включая мобильных и планшетных. 

Что насчет мобильности?

Изучение Android Java (Android) может быть трудным, если разработчик не был обучен самому Java. Для Apple iOS, Objective C это гибрид языка программирования C и Smalltalk, который отличается, но не совсем уж чужд разработчикам C ++. Но учитывая приход (Apple) Swift и новую парадигму «протокольно-ориентированное программирование», Objective C имеет сомнительное будущее.

В отличие от вышеупомянутого случая, мир JavaScript с помощью таких технологий, как React Native или Progressive Web Apps, позволяет разрабатывать кроссплатформенные приложения, которые выглядят как родные и являются производительными. С точки зрения бизнеса, то предприятия может получить ряд преимуществ, используя только один набор инструментов для создания сложных веб-приложений и мобильных приложений.

Постоянные изменения вызывают испуг

Мир JavaScript особенно богат тем, сколько функциональности и сколько пакетов доступно разработчикам. Числа ошеломляют. Количество ключевых технологий, которые помогают разработчикам создавать приложения быстрее, также велико, но скорость изменений в этой области вызывает так называемый «отток JavaScript» или просто отток. Например, когда Angular перешел с версии 1 на 2 (и снова с 3 на 4 чуть позже), несовместимости потребовали серьезного времени на передачу. Пока мы не примем новые стандарты веб-компонентов, не все из браузеров будут взаимодействовать со всем остальным.

Одно можно сказать наверняка, инвестиции в старые технологии, которые не придерживались стандартов, могут ограничивать карьеру. Именно поэтому крайне важно придерживаться стандартов ECMA и ECMAScript, а также соблюдать более или менее распространенные шаблоны проектирования. Использование часто применяемых шаблонов проектирования, таких как Model-View-Controller (MVC), Model-View-Viewmodel (MVVM) и Flux, означает, что ваш код можно изменять и его намного легче поддерживать, чем если бы Вы изобрели совершенно новую парадигму.

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

Популярность современных фреймворков и библиотек

Stack Overflow, невероятно популярный веб-сайт разработчиков, используемый для вопросов и ответов, отслеживает большое количество данных о популярности различных технологий и стал источником полезной информации для разработчиков. Их последний опрос продолжал показывать невероятную популярность библиотек и фреймворков JavaScript и самого JavaScript:

Согласно Stack Overflow, основанный на тегах для разных вопросов, восемь наиболее обсуждаемых тем сайта являются JavaScript, Java, C #, PHP, Android, Python, jQuery и HTML, а не C, C ++ или более экзотические языки, такие как Ocaml или Haskell. Если Вы создаете веб-сайты , то Вы, скорее всего, захотите использовать популярные технологии, потому что количество открытых и коммерческих/поддерживаемых продуктов дает вам возможность быстрее кодировать и тестировать, что в свою очередь приводит к более быстрому выходу продукта на рынок.

Для разработчиков это означает, что мир JavaScript продолжает лидировать по количеству разработчиков, и хотя старые технологии, такие как jQuery, все еще популярны, очевидно, что React и Angular важны для создания программ и продолжают расти. Новичок Vue, также становится все более и более популярным.

Выбирая между Angular, React и Vue

Angular против React против Vue – существует так много инструментов с открытым исходным кодом. Добавьте к этому библиотеки, такие как Backbone.js и сотню других. Как разработчики могут возобновлять свои знания о стольких новых функций? Какой из них выбрать? В какой-то степени это решение заключается в выборе текстовых редакторов: это личный выбор каждого и каждый жестко его защищают. В конце концов каждый из них может действительно работать для Вас.

Если вашей главной заботой является популярность, тогда Вам не нужно изучать сложную, богатую среду программирования только для того, чтобы увидеть, как поддержка исчезает, тогда как React явно «побеждает», как показывает линия долгосрочного тренда. Но популярность – это только один атрибут в длинном списке важных факторов.

Давайте рассмотрим каждый из них в удобном для восприятия формате.

React

Лучше всего используется для веб-сайтов, которые имеют много динамических данных и хотят очень высокую производительность.

React – самая популярная библиотека JavaScript. Библиотека была разработанна и открыта Facebook в 2013 году. Она быстро стала важной для разработки огромных веб-приложений, которые включают динамическую обработку данных. Осознание большого преимущества React приходит тогда, когда разработчикам приходится создавать сложные приложения и составлять их из модулей, чтобы их можно было повторно использовать. React по своей природе имеет преимущества в производительности и позволяет разработчикам писать на JSX. React особенно подходит для обработки данных в реальном времени. Instagram и WhatsApp, два чрезвычайно популярных веб-приложения, также используют React.

Angular

Подходит для: разработчиков, которые не хотят суетиться с интеграцией библиотек в другие фреймворки.

Angular, или в прошлом AngularJS, старше React и является вторым по популярности в нашем анализе. Он был создан и поддерживается Google и был разработан для удовлетворения потребности в фреймворке, который мог бы работать с одностраничными приложениями. Одностраничное приложение – это веб-приложение или веб-сайт, который обновляет информацию и данные путем динамического переписывания текущей страницы, а не загрузки целых новых страниц с сервера. Следовательно, приложение больше похоже на приложение для настольного ПК, но также оно хорошо работает на мобильных устройствах, если правильно разработано. Весь код загружается с одной страницы или же только части данной страницы загружаются динамически при ее обновлении. Angular может иметь относительно длинный процесс обучения, поскольку это действительно полноценная среда разработки, но сама Angular не содержит компонентов пользовательского интерфейса.

Vue

Подходит для: разработчиков с более простыми приложениями и более легкой программой обучения.

Vue является “новым ребенком” в блоке и набирает популярность в быстром темпе. В период с ноября 2016 года по октябрь 2017 года одна оценка (количество загрузок) показывает, что Vue растет с невероятно высокой скоростью в 13,933.4%. Тем не менее, абсолютные числа загрузок показывают, что React загрузил более 7 миллионов в октябре 2017 года по сравнению с почти 900 000 экземпляров Vue, а Angular находится на втором месте имея более 2 миллионов загрузок с npm. Интересно, что все фреймворки и библиотеки JavaScript продолжают расти очень быстрым темпом. Источником этих данных является npm-stat.

Vue является серединой между полноценным каркасом и «просто библиотекой». Неосновные функции, такие как маршрутизация, управление состоянием, наборы инструментов сборки и интерфейс командной строки, являются внешними, но они все официально поддерживаются, хорошо документированы и предназначены для совместной работы в Vue. Тем не менее, вам не нужно использовать их все. Angular обеспечивает определенную структуру организации кода, а Vue – нет.

По словам известного разработчика Джона Ханны:

“React и Vue довольно похожи, хотя есть некоторые ключевые отличия… Это имеет смысл, поскольку Эван Ю, разработчик Vue, использовал React в качестве одного из своих вдохновений. Они намного больше похожи друг на друга, чем, скажем, на Angular. Из документации Vue мы видим, что и React, и Vue:

• Используют виртуальный DOM для повышения производительности;
• Обеспечивают реактивные и составные компоненты для представлений;
• Сосредотачиваются на основной библиотеке, уделяя внимание таким вопросам, как маршрутизация и глобальное управление состоянием, которые выполнены сопутствующими библиотеками.”

Как и React, Vue подчеркивает производительность, но будучи меньше по размерам, его легче освоить изначально.

Ориентированная на разработчиков таблица быстрого просмотра

Программирование является не только сложной профессией, но и также очень личным, основанным на языке занятием, которое требует умных людей. Таких людей, которые почти всегда находятся под загруженным графиком и нехваткой ресурсов. Как мы уже говорили, выбор инструментов JavaScript для использования очень индивидуален и часто отражает то, как разработчики думают о проблемах. Короче говоря, это бизнес, ориентированный на трудолюбивых людей, и обычно это «командный спорт».

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

Опираясь на плечи великанов: Почему повторное изобретение колеса может Вас замедлять?

Разработка сложных фреймворков, многократное использование библиотек и особенно виджетов компонентов пользовательского интерфейса требует драгоценное времени, а время – деньги. Бремя поиска и объединение различных бесплатных инструментов и инструментов с открытым исходным кодом может быть дорогостоящим и занимать много времени, не исключая того факта, что они могут привести к разочарованию, потому что некоторые инструменты могут быть несовместимы или требовать дополнительных слоев прокладок.

Сегодня ключевые показатели эффективности изменились. Непрекращающаяся головная боль для IT-директоров и руководителей разработчиков это не строки кода, а количество поставленных функциональных точек и других технических показателей. Они уступили бизнес-целям, и именно так теперь измеряется влияние IT – директоров и разработчиков на бизнес. Эти бизнес-цели в настоящее время включают в себя снижение прибыли и затрат за счет повышения эффективности; они также часто включают время выхода на рынок, более низкие барьеры для входа в индустрию и общую стоимость владения (сколько будет стоить мне эта технология в краткосрочной и долгосрочной перспективе?).

В результате разработчики становятся более стратегическими в том, что для них важно. Они хорошо осведомлены и приспосабливаются к бизнес-стратегиям своего работодателя. Но более того, планка была поднята: теперь потенциальные цели для расширения бизнеса являются мобильные телефоны, планшеты, настольные ПК, даже телевизионные приставки и умные телевизоры.

К счастью, решения существуют: принятие хорошего фреймворка или набора библиотек может сэкономить разработчику время, деньги, усилия, душевную боль и обеспечить яркое будущее. Например, принятие React, Angular или Vue в качестве основы для разработки дает множество преимуществ, и эти преимущества можно выбирать исходя из требований и обстоятельств.

Использование надежных, хорошо протестированных, кроссплатформенных виджетов пользовательского интерфейса, таких как ExtReact или ExtAngular, может сэкономить много месяцев на поиск того, что вам нужно, а также на кодирование и время тестирования. Все эти элементы работают с подавляющим большинством веб-браузеров, а работа вашего веб-приложения на платформах Android и iOS без лишних усилий избавит вас от необходимости изучать сложные языки. Просто используйте JavaScript.