Плюсы и минусы приложения Angular

Угловой

Плюсы и минусы приложений Angular

На прошлой неделе я только что прочитал статью о плюсах и минусах Angular, и я думаю, что есть некоторые моменты, которые не соответствуют действительности в Angular 2+, основываясь на моем 4-летнем опыте работы с Angular с момента Angular 2-rc1 до настоящего времени. с Angular 9.

Я решил написать эту статью, чтобы рассказать о плюсах и минусах приложения Angular 2+:

Плюсы углового

• Возможности Angular CLI
• Легкое обучение кодированию + условности
• Реактивное программирование
• Базель поддержка
• Реактивные формы

Минусы углового

• Требуется время для обновления до новых версий
• Плохой рендеринг на стороне сервера
• Жизнь без jQuery

Дополнительную информацию можно найти на https://betterfullstack.com

Плюсы Angular

Есть несколько основных преимуществ, которые вы получаете после работы с Angular.

Возможности Angular CLI

В приложении Angular вы создаете практически все из Angular CLI. Он позволяет делать много вещей:

1. Создавайте несколько приложений и несколько библиотек с помощью синтаксиса ng g application и ng g library
2. Поддержка создания шаблона для сервис-воркера
3. Поддержка создания class, component, directive, enum, guard, interceptor, interface, module, pipe, service командой ng g.
4. Поддержка нескольких языков от ng xi18n.
5. Запустить инструмент linting до ng lint.
6. Запустите модульный тест и сквозной тест ng test и ng e2e.
7. Легко переносите проект с ng update.

Angular CLI поддерживает разработчиков, которые делают почти все в приложении.

Простое обучение программированию + условные обозначения

Angular очень легко освоить. Когда я начал работать над Angular 2 четыре года назад, мне потребовалось всего 3 дня, чтобы установить, запустить и понять код.

Причина:

1. Angular CLI создает файлы с условным обозначением типа home.component.ts. Это позволяет мне легко понять.
2. Angular использует TypeScript, и когда вы работаете над JavaScript и смотрите на TypeScript, это как взрослый, возвращающийся в школу и выучивающий 1 + 1 = 2. Кодировать TypeScript очень просто и легко.
3. Много вариантов для таблицы стилей при настройке нового проекта. Вы можете использовать стандартный css или выбрать Sass и другие. Выберите тот, который вам знаком, или тот, который требуется от клиента. Не нужно тратить время на настройку этого пути.

Вам не нужно тратить много времени на изучение Angular, и я не думаю, что Angular требует больших знаний в JavaScript.

Реактивное программирование

После создания нового проекта Angular вы можете увидеть библиотеку rxjs из node_modules, потому что Angular везде использует реактивное программирование:

1. HTTP-запрос вернет поток. Вы можете использовать pipe или subscribe для получения результата.
2. Перехватчик. Это своего рода промежуточное ПО в Node. Вы можете использовать реактивное программирование для обработки вещей, связанных с XHR.
3. Использование Rxjs для управления и составления данных
4. Использование Rxjs для управления взаимодействием между различными компонентами в Angular, которые не связаны друг с другом.
5. Обработка пользовательских событий, таких как нажатие, нажатие клавиши, нажатие клавиши, нажатие клавиши мыши и т. Д.

Эта библиотека очень эффективна для работы с данными или событиями пользовательского интерфейса.

Базель Поддержка

Bazel - это инструмент для сборки и тестирования с открытым исходным кодом, похожий на Make, Maven и Gradle. Он использует понятный человеку язык сборки высокого уровня.

Поддержка Angular позволяет очень легко установить Bazel с помощью Angular CLI:

1. для существующего проекта запустите ng add @angular/bazel.
2. для нового проекта запустите npm i @angular/bazel -g и создайте новый проект с помощью команды ng new --collection=@angular/bazel.

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

Renderer2 для манипуляции с DOM

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

Renderer2 - это замена jQuery в приложении Angular. Это причина, по которой Angular 2+ НЕ использует JQuery в приложении.

Вы считаете невозможным?

Это одно из главных преимуществ Angular. jQuery - это просто библиотека, выполняющая только некоторые манипуляции с DOM. То, что люди могут построить с помощью jQuery, затем можно построить с помощью renderer2.

В приложении Angular:

• использовать Renderer2 для манипуляций с DOM
• используйте Renderer2 для реализации любых компонентов, таких как слайд, карусель, кнопка переключения или многие другие.

Это помогает клиентам избежать использования слишком большого количества библиотек с открытым исходным кодом в своих проектах и ​​риска лицензирования.

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

Реактивные формы

После работы с 3 различными фреймворками и библиотеками для пользовательского интерфейса, включая Angular, React и Vuejs, я думаю, что для работы с формами лучше всего подходит Angular.

Возможно, вы не согласитесь со мной в этом пункте.

Но вы должны попытаться создать демонстрационное приложение с помощью Angular, React и Vuejs с такой логикой, как создание приложения для опроса Google.

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

Это означает, что вам нужно создать форму с 3 разными уровнями.

1. уровень раздела
2. уровень вопроса
3. уровень опциона

Есть одна ситуация, когда вы хотите, чтобы выбранный вариант вопроса номер 5 принадлежал к разделу 2. Этот просто занимает 1 строку кода для реактивной формы в angular.

Возможности Reactive Form в Angular - одно из лучших преимуществ Angular перед конкурентами.

МИНУСЫ Angular

Angular также имеет некоторые недостатки, которые я считаю недостатками по сравнению с Vuejs или Reactjs.

Найдите время, чтобы перейти на новую версию.

Вы знаете, что Angular очень быстро выпускает новые версии. Это означает, что разработчик Angular каждые 3 или 6 месяцев должен переносить версию для Angular один раз, чтобы избежать устаревания.

Вот график выпуска основной версии:

• Версия 2: выпущена в октябре 2014 г.
• Версия 3: произошла ошибка. Не выпускать
• Версия 4: выпущена 13 декабря 2016 г.
• Версия 5: выпущена 1 ноября 2017 г.
• Версия 6: выпущена 4 мая 2018 г.
• Версия 7: выпущена 18 октября 2018 г.
• Версия 8: выпущена 28 мая 2019 г.
• Версия 9: выпущена 7 февраля 2020 г.

И есть также много второстепенных версий и патчей, которые исправляют некоторые ошибки и улучшают ситуацию. 7 основных версий за 6 лет, при этом выпущено более 400 версий.

Это заставляет разработчиков, работающих с Angular, регулярно переносить проекты.

Не подходит для рендеринга на стороне сервера

У нас есть Angular Universal для рендеринга на стороне сервера с помощью Angular. Лично я делал несколько проектов Angular Universal, проектов Nextjs и проектов Nuxtjs, и я считаю, что Angular Universal сложнее, чем Nextjs и Nuxtjs.

Я думаю, что будет лучше, если мы будем использовать Angular для проекта рендеринга на стороне клиента. Если вы попытаетесь реализовать рендеринг на стороне сервера с помощью Angular, это потребует больше усилий, чем то же самое с Nextjs или Nuxtjs.

Жизнь без jQuery

Как я упоминал выше в разделе Renderer2. В Angular есть Renderer2, который помогает нам справляться с манипуляциями с DOM.

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

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

Итак, что я наблюдал в некоторых проектах Angular, они все еще используют jQuery для некоторых конкретных библиотек и устанавливают jQuery в проект с помощью npm и добавляют его в angular.json или помещают вindex.html.

Это вызовет некоторую путаницу у разработчиков в том, почему некоторые проекты используют jQuery, а некоторые не используют jQuery.

Если вы нашли эту статью полезной! Вы можете следить за мной на Medium. Я тоже в Твиттере. Не стесняйтесь оставлять любые вопросы в комментариях ниже. Буду рад помочь!