В представленной статье мы сопоставим пару наиболее популярных в 2018 году веб-технологий. Кроме того, мы исследуем их историю, ключевые различия, в используемых в ядре языков (TypeScript и JavaScript) и т. д. Если не вдаваться в подробности, данные технологии достаточно сильно облегчили программистам написания повторного кода, рефакторинга и поддержки кода, ведь все разделено на модули/компоненты.
Задача этой статьи: не выбрать лучшую технологию, а сопоставить их, выделить некоторое количество «мифов» и прояснить их. Помимо этого, мы сфокусируем внимание на том, что важно, а не на небольших деталях, которые не оказывают большое влияние в длительной перспективе.
Важно осознавать, что сходства и различия этой пары технологий нельзя полностью охватить. В Angular используется полный фреймворк (MVC), а React - это библиотека с большим количеством пакетов, которые имеют открытый исходный код, разрешающий интегрирование.
Важно! Вместо Angular или React может использоваться слово «технологии».
Вопросы, которые мы рассмотрим
- Каковы основные различия между Angular и React?
- Что делает TypeScript таким особенным?
- Насколько популярны эти технологии?
- Каков текущий статус открытого кода?
- Какую технологию используют компании больше всего?
- Влияют ли статические, широко используемые языки языки на качество кода и время разработки?
Ключевые различия
Ниже приведено краткое сравнение Angular (слева) и React (справа). React действительно хорош с точки зрения эффективности Virtual DOM, о котором вы, наверное, уже слышали пару раз. Если не слышали, то не беспокойтесь, я объясню!
Проблема:
Допустим, вам нужно поставить новую дату рождения юзера в блоке тегов HTML.
Virtual DOM:
Он будет обновлять только требуемую часть с помощью вычисления разницы между предыдущей и текущей версией кода в HTML. Аналогично работает GIT, чтобы обнаружить изменения в файле.
Regular DOM:
Он обновит все дерево тегов HTML до даты рождения (включительно).
Почему это так важно?
Это может быть неважно для примера, который был описан выше. Однако, если мы имеем дело с 20-30 асинхронными запросами данных на одной странице (и для каждого запроса мы заменяем весь блок HTML), это будет влиять на производительность, а также на впечатления пользователя о страницу и сайте в целом.
Обратимся немного к истории
Нам нужно знать немного истории (контекста), потому что она дает представление о том, как все может сложиться в будущем.
Я не буду вдаваться в подробности того, что именно произошло между Angular и AngularJS, и я уверен, что есть много доступных ресурсов, которые покрывают эту информацию. Короче говоря, Google заменил AngularJS на Angular, а JavaScript - на TypeScript.
Итак, в дни ES4/ES5 на изучение JavaScript требовалось много времени и усилий. Если вы пришли из мира Java, C# или C++, мира объектно-ориентированного программирования, то изучение JavaScript просто не было интуитивным. Другими словами, это была «заноза в заднице».
Дело не в том, что язык плохо написан, а в том, что он имеет другую цель. Он был построен для обработки асинхронного характера Интернета: взаимодействие с пользователем, привязка событий, переходы/анимации и т. д. Это другое животное с другими инстинктами.
Популярность
Как показывают Google Trends, Angular и React - две самые популярные веб-технологии в 2018 году.
Angular имеет больше количество поисковых запросов, чем React, однако это не обязательно означает, что кто-то из них (Angular или React) лучше. Это указывает на то, что люди считают интересным, какова бы ни была причина. Важно знать, что люди могут использовать разные ключевые слова, например, AngularJS или Angular. Таким образом в поиске может быть больше результатов.
Одно можно сказать точно: обе технологии растут, а будущее выглядит ярким. Но все же мы должны помнить, что случилось с AngularJS. Это может произойти и с React, но я думаю, что такова суть бизнеса, частью которого мы все являемся.
Открытый исходный код
React имеет более 100 000 звезд, 1200 участников и около 300 вопросов, ожидающих решения.
React имеет преимущество по времени выхода на рынок, поскольку он был выпущен за 3 года до Angular. Это означает, что он столкнулся с множеством реальных проблем, прошел критические тесты и в целом превратился в гибкую и адаптируемую библиотеку, которую многие любят.
Когда дело доходит до Angular, сначала мы можем ясно заметить, что Angular имеет в 6 раз больше проблем, чем React. Тем не менее, не стоит забывать, что Angular является гораздо более крупным фреймворком, а также имеет меньше разработчиков, использующих его (в настоящее время), поскольку он был выпущен в 2016 году.
Что выбирают компании?
React был изначально разработан в Facebook для Facebook, чтобы оптимизировать и облегчить разработку компонентов. Статья, написанная Крисом Кордлом, указывает, что React шире используется в Facebook, чем Angular в Google.
Итак, Angular или React - какие компании используют эти технологии?
#React:
- Facebook;
- AirBnb;
- Uber;
- Netflix;
- Instagram;
- Whatsapp;
- Dropbox.
#Angular:
- Eat24;
- CVS shop;
- onefootball;
- Google Express;
- NBA;
- Delta.
TypeScript, JavaScript (ES6+)
Как я уже упоминал, вас может сбить с толку сравнение только Angular и React. Нужно также сосредоточиться на базовых языках, которые они могут предложить.
В плане пользовательской базы JavaScript, безусловно, является более крупным. Но TypeScript постепенно расширяется, поэтому кто знает, что принесет 10-15 лет. Может быть, пару десятков новых фреймворков (сарказм).
TypeScript был первоначально разработан Microsoft для упрощения JavaScript (другими словами, упрощения ES5). Он был выпущен в октябре 2012 года. Это просто транслятор, который компилирует код TypeScript в JavaScript, что также означает, что вы можете писать код ES5 в файле TypeScript.
В целом, TypeScript обеспечивает плавный переход для программистов, которые привыкли к объектно-ориентированному программированию. Важно заметить, что TypeScript был выпущен в период ES5. Тогда ES5 не был языком ООП, основанном на классах.
Короче говоря, тогда самым близким к классам и объектам понятием было наследование прототипов. И, как мы знаем, это был сложный переход для большинства разработчиков, привыкших к ООП. Поэтому идеальным решением было, конечно, выбрать то, что вам было удобно и знакомо. Чаще всего это выбор падал на TypeScript.
Однако в последние годы JavaScript развил и реализовал множество замечательных изменений, таких как модули, классы, операторы распространения, стрелочные функции, литералы шаблонов и т. д. В целом, он позволяет разработчикам писать декларативный код, поддерживая характеристики истинного языка ООП (т. е. включая структуру на основе классов).
Статические и динамические языки
Статически типизированный язык по сути означает, что вы можете определить тип переменной (строковая, числовая или массив, и т. д.). Вы можете спросить, почему это важно. Вот реальная аналогия, которую я сделал (креатив в лучшем виде).
Предположим, вы хотите дозаправить свой автомобиль. Главное - выбрать нужное топливо, бензин или дизель. Если вы не знаете, вам может понадобиться купить новый автомобиль.
Конечно, в программировании все не так серьезно, но в некоторых случаях может быть и так. Подумайте об этом. Если вы работаете с большим приложением, вам нужно знать передаваемые аргумент и тип, иначе вы можете сломать код.
Итак, если вы все еще не понимаете, что такое статически типизированный язык, взгляните сюда:
статически типизированное свойство
статически типизированный аргумент
Я узнал, что многие люди считают, что статически типизированный язык гарантирует надежность кода. Чаще всего он побеждает над динамически типизированными языками в спорах. Откровенно говоря, довольно сложно опровергнуть это утверждение, поскольку оно в корне зависит от среды разработки, опыта программистов и, конечно же, требований проекта.
К счастью, исследователи восприняло это всерьез и проверили этот миф (видео) с привлечением 49 субъектов.
Выводы из исследования:
- Статически типизированный язык требует больше времени из-за исправления ошибок-опечаток;
- Динамически типизированный язык проще читается и пишется (декларативный код).
На рисунке 5 показано, что в среднем разработчики сокращают время разработки в 2 раза при написании в динамически типизированном языке.
Если вы хотите углубиться в эту тему, я предлагаю прочитать эту статью Эрика Эллиотта, в которой говорится, что вам может не понадобиться TypeScript (или статически типизированные языки).
Что же выбрать?
Вопрос заключается не только в том, что предлагают Angular и React, но и в том, на какой базовый язык нужно будет тратить время. Честно говоря, это не так важно.
Если бы нам пришлось выбирать, то кажется, что причин, по которым TypeScript отличается от JavaScript, не так уж много. Я действительно не понимаю, почему люди пренебрегают JavaScript (ES6 +). В любом случае, если вы не являетесь поклонником типов, то вы можете писать код ES6 в файле .ts. Если вам что-то понадобится, то все будет на месте.
Ниже приведено простое сопоставление классов и объектов между TS и JS (ES6).
Мое мнение
Статично типизированный язык кажется структурированным, безопасным, читаемым и таким, который позволяет легко сотрудничать с другими (не позволяет людям передавать неожиданные значения). Однако при работе с динамически типизированным языками я получаю гибкость и креативность, что позволяет больше сосредоточиться на создании, а не на размышлениях о типах, интерфейсах, параметрах и т. д.
В прошлых веб-приложениях, которые я создал, я на самом деле не сталкивался с большими проблемами из-за того, что не использовал статически типизированные языки. Это не значит, что мне они не нравятся - я просто не нуждаюсь в них, но, возможно, буду в будущем.
Выводы
- React эффективно справляется с управлением памятью (Virtual DOM);
- React использует JavaScript (ES6) - признанный веб-язык, который используется с 1995;
- Angular использует TypeScript, выпущенный в 2012;
- Статически типизированные языки прекрасны, но можно обойтись и без них;
- Динамически типизированные языки требуют меньше времени на написание кода, при этом гарантируют больше гибкости для использования креатива (меньше опечаток);
- Выучить статически типизированный язык может быть трудно, особенно если вы работали только с динамическими языками;
- В ES6 используется много отличных вещей, таких как модули, классы, операторы распространения, стрелочные функции, литералы шаблонов. Это позволяет писать более компактный, чистый и структурированный код (синтаксический сахар);
- TS - это просто ES6+ с опечатками и т. д.
Заключение
Выбор библиотеки фреймворков/компонентов может повлиять на то, сколько времени вам потребуется на программирование и каков нужен будет бюджет. Если у вас есть команда из разработчиков C#, Java или C++, то я бы выбрал Angular, так как TypeScript имеет много сходств с этими языками.
Лучший совет, который я могу предложить, - это сделать базовое приложение как в Angular, так и в React, а затем оценить язык и рабочий процесс, прежде чем принимать решение.
Как уже упоминалось ранее, обе технологии имеют свой собственный набор преимуществ и сходств. Все сводится к тому, какие требования предъявляет приложение.