Новый проект в Angular может быть очень простым, но дополнительные функции, которые вы получаете с помощью пакетов npm, могут стать предметом спора. Есть много вопросов, на которые нужно ответить. Какую среду тестирования мне следует использовать? А как насчет библиотек компонентов? Как мне управлять состоянием? Как можно оптимизировать проект?
В этой статье я выделю некоторые решения, которые необходимо принять, думая о новом проекте с масштабируемыми решениями. В зависимости от размера вашей команды, знакомства с Angular и размера / объема проекта или проектов многие зависимости становятся немного более очевидными.
Запуск вашего проекта
$ ng new your-project name
Во-первых, начиная любой проект на Angular, я всегда рекомендую использовать Angular CLI. Это предоставляет команды для быстрого создания любого шаблона Angular через терминал. Более доступная версия - Angular Console. Это автономная программа, в которой можно запускать команды, предоставляемые интерфейсом командной строки Angular, через простой в использовании пользовательский интерфейс консоли Angular.
Библиотеки компонентов
Создание библиотеки компонентов для проекта или проектов имеет свои преимущества. Это обеспечивает единообразие взаимодействия с конечным пользователем и унифицирует взаимодействие и визуальные эффекты в разных системах, а также дает разработчикам более согласованную среду разработки. Хотя поддержание этой библиотеки может оказаться непростым делом. Кроме того, уже существуют большие группы, специально предназначенные для поддержки библиотек компонентов, которые могут очень быстро запустить и запустить ваш проект.
При запуске с нуля есть возможность ускорить процесс. Angular Component Development Kit (CDK) предоставляет отличную основу для реализации общих функций приложения.
Когда проект должен быть запущен, может быть более выгодным использовать существующую библиотеку компонентов. Все они предоставляют очень похожие функции, но по-разному, обеспечивая при этом различный пользовательский интерфейс. Angular Material поступает напрямую от Google. Также существуют платные опции, такие как Kendo UI, предлагающий огромный набор компонентов. Пользовательский интерфейс Kendo объединяет проекты брендов в различных фреймворках JavaScript с компонентами в React, Vue, Angular и других. Те, кто знаком с Bootstrap, могут реализовать NGX-Bootstrap или NG-Bootstrap вместе с включением Bootstrap CSS в сборку. Эти библиотеки позволяют использовать начальную загрузку без добавления JQuery в качестве зависимости.
Красивее самоуверенный форматтер кода отлично подходит для работы в команде. Он обеспечивает единообразный стиль, делая код более читабельным. Это также ускоряет разработку с меньшими затратами времени на синтаксис. В Angular CLI есть TSlint для линтинга, но нет никаких опций автоматического форматирования, что у Prettier действительно хорошо. Обычно TSlint используется вместе с Prettier, см. Статью Victor Mejia о настройке этих пакетов вместе в VSCode.
Управление состоянием / данными
Состояние - горячая тема для всех фреймворков. Паттерн Redux, знакомый многим разработчикам, реализован во многих различных пакетах. Самым популярным из них является NGRX, за ним следует Акита. Шаблон redux отлично подходит для отладки и упрощения компонентов, удаляя из них большие части кода. Часто рекомендуется вводить государственное управление только тогда, когда необходимость в нем начинает возникать. В частности, для новых команд, незнакомых с шаблоном Redux или Angular, это может добавить сложности, которая изначально замедляет разработку.
Сама структура Angular предоставляет способы управления данными с помощью внедрения сервисов и зависимостей, поэтому шаблон redux не всегда является ответом. Особенно, если у вас нет сложных требований к управлению данными.
Тестирование
Используя команду Angular CLI.
$ ng new your-project-name
Это сгенерирует проект, включающий Транспортир для сквозного тестирования. Protractor - это среда тестирования, которая работает на Selenium Webdriver, это позволяет Angular фактически запускать свои тесты в браузере. Хотя Protractor не самый удобный для разработчиков интерфейс, он исключительно мощный. В последнее время я вижу все больше и больше проектов, изучающих возможности в этой области. И Cypress, и TestCafe набирают обороты благодаря простоте использования и дружественному интерфейсу. Для команд, плохо знакомых с тестированием, это отличные варианты, но они имеют свои ограничения. Cypress работает в приложении Electron (HTML, CSS, JS), а не изначально в каких-либо браузерах, поэтому при прохождении некоторых тестов в Cypress могут быть обнаружены проблемы в конкретном браузере. TestCafe - это платная опция, которая имеет огромный набор функций и поддерживает все основные браузеры.
Карма и Жасмин также включены в генератор проектов по умолчанию. Не рекомендуется менять структуру модульного тестирования, если у вас нет на то веской причины. Любому React-разработчику более знакома опция Jest. Возможно, ваша команда более знакома с Jest или требует некоторых дополнительных функций, которые Jest предоставляет поверх Jasmine.
Заключение
Эта статья не предназначена для того, чтобы давать исчерпывающие ответы, но на самом деле подчеркивает важные решения, которые вам предстоит принять. Надеюсь, направление, представленное в этой статье, по крайней мере, поможет принять решение о том, какие пакеты включать в ваши проекты.
Есть и другие варианты, которые нужно рассмотреть, но я чувствовал, что они не обязательно были специфичными для Angular / Frontend, например, какие базы данных (MongoDB, DynamoDB, Firebase и т. Д.) Использовать или как ваш проект будет интегрирован с apis (HTTPClient Angular или GraphQL и т. д.).
В ответах дайте мне знать, какой у вас стек Angular, или какие-либо дальнейшие рекомендации по пакетам!
Вы также можете подписаться на меня в твиттере @mattmccherry, где я пишу о крутых интерфейсах разработки, арте и космосе.
