Веб-баттл: React vs. Angular

Хочу для себя зафиксировать мини-обзор двух популярных инструментов для front-end веб-разработки - React и Angular 2. Фреймоворки будем оценивать на основе их подходов к построению структуры приложений, уровня принятия пользователями, производительности и возможности интеграции с различными платформами.

Целью данной статьи является выделение основных отличий, чтобы понять сходство между этими двумя инструментами.

Поток развития

Angular 2

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

Сервисы (Services) - элементы, которые используют данные с API или разделяют состояние между несколькими компонентами.

Компоненты (Components) - строительные блоки UI, которые используют сервисы. Могут быть вложены друг в друга через структурные директивные селекторы.

Директивы (Directives) - подразделяются на структурные и атрибутными директивы. Структурные директивы (например, *NgFor) влияют на DOM (Document Object Model), тогда как директивы атрибутов является частью элементов и контролируют их стиль и состояние.

Пайпы (Pipes) - используются для форматирования того, как отражаются данные в окне просмотра.

Модули (Modules) - экспортоспособные блоки приложения, которые изолируют компоненты, директивы, пайпы, сервисы и маршруты вместе.

React

React менее строгий, чем Angular 2. Это библиотека, которая предоставляет самые главные инструменты для создания веб-приложений - сервис для работы с HTTP и компоненты.

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

Структура кода

Angular 2

Angular 2 написан на TypeScript, это язык-надстройка над JavaScript, разработанная Microsoft. Язык вводит новые типы, новые структуры данных и более объектно-ориентированных возможностей, что делает код легче для чтения в сравнении с чистым JavaScript.

Сначала синтаксис TypeScript был намеренно подобный C #. Однако в последнее время TypeScript использует стрелку (=>) и другой ES6-образный синтаксис, что делает TS похожим больше на ES6.

Использование TypeScript делает создание Angular 2-приложения таким скучным, так как TypeScript вводит дополнительные сложности для конфигурации.

React

React возлагается на JSX (Java Serialization to XML), XML используется для синтаксического расширения JavaScript и HTML. С точки зрения синтаксиса и структуры, JSX выглядит как JavaScript и, кажется, сливается в HTML легче. Это позволяет смешивать переменные и структуры данных с JavaScript внутри разметки HTML.

Для того, чтобы получить более четкое сравнения в коде между Resact и Angular 2, мы будем сравнивать код TODO приложения.

Обе программы используют Webpack для разработки и перегруппировки.

С точки зрения структуры приложения, как для React, так и для Angular 2 нужно два файла - ToDoList, представляющий собой список задач и Todo, представляющий одну задачу.

Преимущества компонента Angular 2

Код компонента для Angular 2, как правило, более многословен, чем для React. Единственный случай, где React требует больше кода - это самонастраивающийся. Это несоответствие можно отнести к TypeScript. :void, :ITodo и других типов, часто встречаются в TypeScript. Стиль Angular 2 обычно требует, чтобы переменные, параметры функции и те же функции имели тип в TypeScript. React не имеет ничего подобного, и это делает код более удобным для разработчиков, которые отдают предпочтение традиционному JavaScript.

Angular 2 использует @Component декораторы для определения различных конструкций (сервисы, директивы, пайпы), которые он включает в себя и определение своих собственных свойств. Он также позволяет разработчику указать selector для компонента и поместить код для шаблона с помощью свойства template или templateUrl, если отдельный файл используется. То же самое относится и к стилям - есть возможность для ввода стилей непосредственно с помощью свойства styles или при использовании множества файлов с помощью styleUrls. React не имеет аналога для компонента декоратора и требует шаблон компонента для включения в сам файл компонента, тем самым ограничивая варианты для настройки, поэтому информация о компоненте становится тяжелее для интерпретации.

Angular 2 шаблона поставляются с конкретным согласованию для различных элементов:

- *значит директиву, манипулирует DOM. Например, *ngFor перебирает массив значений и создает новый элемент для каждого из них. *ngIf используется для обозначения того, элемент можно увидеть, нет.

- []демонстрирует свойство связывания, что указывает, элемент принимает значение от компонента. Он используется в основном для передачи данных дочернего компонента к отцу или матери.

- ()указывает на событие связывания (например, (click), который вызывает функцию в компонентах).

- [()]указывает на двустороннее связывание, а это значит, что любые изменения в данных, передаваемых будут распространяться.

React шаблоны показываются с их особенностями. JSX размывает связь между HTML и JavaScript, предоставляя свою собственную разметку. Даже если кажется, что шаблон записывается в HTML, на самом деле действует разметка XML, которая позже превращается в HTML. Через JSX, стандартные слова HTML является camel-cased или имеют разные имена - onclick в JSX - OnClick. for(используется в метках) становится htmlFor, потому что for есть зарезервированным словом в JavaScript.

6 непопулярных, но очень удобных возможностей ES6... Статья про 6 непопулярных, но очень удобных возможностей ES6. Как известно, стандарт Ecmascript 6 опубликовали в июне 2015. Но так как многое уже импл...
Делаем калькулятор с расчетом в реальном времени на JavaScript... Кстати, вы обновили Wordpress до версии 4.9? Очень крутое обновление. О нем я еще напишу, но что самое ценное - редактор WP начинает походить на IDE. ...
Переводим таблицу Excel в HTML с сохранением функционала, используя Javascript... В этом уроке мы разберем, как перевести таблицу Excel в HTML, с сохранением интерактивных элементов и формул. В итоговую верстку HTML можно будет внос...

Опубликовано в 13:52, 11 декабря 2017 | Обновлено в 17:16, 13 декабря 2017 | Просмотров: 46