ng best practices
1.0.0
Этот проект направлен на то, чтобы стать примером поддержки учебного пособия, проводящего вас через лучшие практики фронтальной разработки (Web/Mobile) с конкретным примером, основанным на угловом проекте.
Чтобы увидеть учебник , придет как можно скорее, вы можете проголосовать здесь.
Этот проект является результатом моего опыта работы по оказанию помощи стартапам и более традиционным отраслям (в финансах и аэропатиации), определяющего и разрабатывая их интерфейсные проекты (Web и Mobule).
Я заметил, что каждый раз, одна из самых сложных частей при запуске продукта - это определение лучших практик и поиск лучших инструментов для создания рабочего процесса разработки.
Поэтому я решил создать этот проект, чтобы стать концентратом лучших практик, готовых к использованию из коробки, и это может сэкономить разработчикам и специфическим технологическим составам/техническим архитекториям и даже месяцами тяжелой работы, чтобы найти и определить лучший рабочий процесс для своих проектов.
Этот проект/Основное внимание уделяется лучшим практикам разработки. Таким образом, в начале он не будет включать какие -либо материалы, связанные с непрерывной интеграцией или развертыванием приложений.
Обратите внимание 1: Многие из лучших практик, присутствующих в этом проекте, являются, как уже упоминалось ранее, общего до фронтального развития и даже для развития в целом (не только передовым), поэтому даже если вы не используете угловой в своем проекте, вы можете пройти через него, чтобы получить некоторые интересные идеи.
Примечание 2: Вы можете увидеть содержимое различных коммитов проекта, чтобы иметь представление об эволюции проекта и шагов по добавлению/включению конкретного инструмента, библиотеки или шаблона в проект.
Этот проект был создан с помощью Angular CLI версии 7.3.1.
Для этого проекта я в основном использую пряжу. Но вы можете запустить те же сценарии/команды, используя NPM.
Например, чтобы начать проект, используя yarn , вы запускаете yarn start . Чтобы сделать то же самое, используя npm , вы можете запустить npm run start .
Чтобы иметь возможность запустить этот проект, вам нужно установить:
npm для запуска разных сценариев. (необязательный)Прежде чем начать проект, вы должны установить различные зависимости/библиотеки. Для этого беги:
# if npm
npm install
# if yarn
yarn
Вот список дополнительных инструментов, которые вам могут понадобиться в целом для разработки ваших проектов:
Основным филиалом, где вы можете найти последний рабочий и протестированный код, является мастер.
Вы можете следовать ежедневным коммитам и развитию в развитии филиала.
Система тегов будет происходить по различным обновлениям и выпускам проекта.
yarn start для Dev Server. Перейдите к http://localhost:4200/ . Приложение автоматически перезагружается, если вы измените какие -либо из исходных файлов.
Запустите ng generate component component-name , чтобы генерировать новый компонент. Вы также можете использовать ng generate directive|pipe|service|class|guard|interface|enum|module .
Запустите yarn build , чтобы построить проект. Артефакты сборки будут храниться в dist/ Directory. Используйте флаг --prod для производственной сборки.
На самом деле, в проекте сгенерированного угловым клином по умолчанию используется инструмент кармы для модульного тестирования. Проблема с кармой (в некоторых случаях это может быть преимуществом) заключается в том, что ей необходимо запустить браузер для проведения теста, который во многих случаях не является необходимым и в то же время увеличивает время выполнения теста. Кроме того, у вас может быть непрерывная интеграция, интегрированная в процесс разработки/доставки, которая работает в среде, где вы можете иметь браузер.
Есть интересная альтернатива Karma , которая шутит. Это делает его быстрее и проще писать тесты. Браузер не требуется. Он поставляется со встроенными издевальными способностями и способностями утверждения. Кроме того, Jest запускает ваши тесты одновременно параллельно, обеспечивая более плавный, более быстрый тестовый запуск.
Jest-Preset-Angular: используется для облегчения конфигурации шутки. Фактическая используемая версия - 6.0.2, поэтому документация и конфигурация будут отличаться для Futur версий этой библиотеки.
Запустите yarn test:all , чтобы выполнить модульные тесты через Jest по всему проекту.
Если вы хотите запустить модульные тесты в конкретном проекте, например, тест на пряжу запустите connection yarn test:connection . Не забудьте добавить необходимый сценарий в свой файл package.json в Addiion в соответствующий файл конфигурации Jest, чтобы иметь возможность запустить тест в новой библиотеке. Вы можете взять пример того, как это сделано для библиотеки connection .
Вы также можете запустить свои тесты и следить за изменениями, выполнив yarn test:all:watch .
VS Code и Jest Debug: .vscode вы используете код VS, вы можете отлаживать свои модульные тесты на основе Jest, добавив файл launch.json в папке. Отладчик будет использовать встроенный отладчик узла. Более полная документация может быть полюблена здесь.
Запустите yarn e2e , чтобы выполнить сквозные тесты через Proctor.
Если мы хотим импортировать компонент из библиотеки connection мы можем использовать аннотацию @connection .
Пример: import { ConnectionModule } from '@connection' ;
Это возможно благодаря добавлению атрибута paths в файл tsconfig.json .
"compilerOptions" : {
...,
"paths" : {
"@connection" : [
" projects/connection/src/public_api "
],
...
},
...
} Если мы хотим стать более конкретным в отношении пути (например, в случае циркулярной зависимости), мы можем добавить другой путь к файлу tsconfig.json , например, следующий:
"compilerOptions" : {
...,
"paths" : {
"@connection" : [
" projects/connection/src/public_api "
],
"@connection/*" : [
" projects/connection/src/* "
]
...
},
...
}Он позволит импортировать компоненты или другие угловые экспортируемые функции, такие как следующий пример:
Пример: import { ConnectionComponent } from '@connection/lib/modules/main/pages'; ;
Чтобы убедиться, что разработчики следуют за точным рабочим процессом, пока в результате выдвигая и выдвигая код, чтобы вам не приходилось делать вершины и запускать сценарии вручную, очень полезны следующие инструменты:
В package.json вы добавляете:
" scripts " {
"commit" : " git-cz " ,
...
} Поэтому, когда вы запускаете yarn commit используется cz-cli . Так что больше нет прямых git commit .
cz-cli . В package.json вы добавляете:
"config" : {
"commitizen" : {
"path" : " node_modules/cz-customizable "
},
"cz-customizable" : {
"config" : " path/to/custom/cz-config.js "
}
},
... Если вы не даете никакого пользовательского файла в конфигурации ( config.cz-customizable.config ), будет использоваться файл .cz-config.js присутствующий в корне проекта.
ПРИМЕЧАНИЕ. Чтобы иметь возможность использовать VS -код для редактирования комментариев GIT Commity или других задач манипуляции с файлами вместо vim по умолчанию, вы можете запустить git config --global core.editor "code --wait" При Pruniction, который VS -код доступен из Line Commande (вы можете проверить его с помощью code --help ).
Больше информации здесь.
Добавьте конфигурацию husky в корне файла package.json :
"husky" : {
"hooks" : {
"pre-commit" : " yarn lintstaged " ,
"prepush" : " yarn prod "
}
} Если вы хотите пропустить Hools, просто добавьте флаг --no-verify в свою команду GIT. Пример: git push --no-verify
Таким образом, к уже определенной конфигурации husky Hooks вы можете добавить крючок commit-msg :
"husky" : {
"hooks" : {
...,
"commit-msg" : " commitlint -E HUSKY_GIT_PARAMS "
}
} commit-msg Hook позволяет вам прокинуть Commits, прежде чем они будут созданы.
Вы можете добавить файл commitlint.config.js в корне проекта, чтобы определить правила/соглашения о лининге.
commitlint.config.js Пример:
module . exports = {
// we use the default @commitlint/config-conventional rules.
// you have to install @commitlint/config-conventional library to be able to use it.
extends : [ '@commitlint/config-conventional' ] ,
// Any rules defined here will override rules from @commitlint/config-conventional
// => custom rules
rules : {
'header-max-length' : [ 2 , 'always' , 100 ] ,
'subject-case' : [
2 ,
'never' ,
[ 'sentence-case' , 'start-case' , 'pascal-case' , 'upper-case' ]
] ,
...
}
} ; Примечание. Если вы хотите повторить коммит, чтобы вам не пришлось снова вводить ту же информацию снова, просто запустите yarn commit:retry .
Румодуль углового был использован. Документация Angular очень полна, и я советую вам взглянуть на это.
В этом проекте я сделал выбор, который для проекта app (автономный) я использую прямую маршрутизацию/загрузку. С другой стороны, для основного приложения (корневое приложение) модуль ленивый загружен и влияет на то, как работает маршрутизация.
Чтобы увидеть, как обрабатывается загрузка LZAY, вы можете взглянуть на каталог src/app/lazy где определяются ленивые нагруженные модули. Затем эти модули «действительно» ленивы загружены в файл src/app/app-routing.module.ts . Для каждого ленивого загруженного модуля определяется путь. Этот путь должен предшествовать всем путям, определенным в исходном модуле.
Exemple: Предположим, что в вашем модуле orignal вы получаете доступ к контенту page-one через URL localhost:4200/page-one , когда вы направляете его (например, в приложении/автономном проекте). В то же время путь, который вы определили для ленивой нагрузки, тот же модуль-это my-lazy-loaded-path . Таким образом, чтобы получить доступ к одному и тому же контенту/странице, вы должны использовать URL localhost:4200/my-lazy-loaded-path/page-one .
И здесь, чтобы заставить мой модуль работать во время ленивого загруженного или прямого нагрузки, используется комбинация forRoot по сравнению с загруженным модулем и переменными среды.
Когда дело доходит до манипуляции форм, у угловой у вас есть выбор между реактивными формами и формируемыми шаблонами.
В официальной угловой документации вы можете найти:
Реактивные формы более надежны: они более масштабируемые, многократные и проверенные. Если формы являются ключевой частью вашего приложения, или вы уже используете реактивные шаблоны для создания вашего приложения, используйте реактивные формы.
Формы, управляемые шаблонами, полезны для добавления простой формы в приложение, такое как форма регистрации списка электронной почты. Их легко добавить в приложение, но они не масштабируются, а также реактивные формы. Если у вас есть очень основные требования к форме и логика, которые можно управлять исключительно в шаблоне, используйте формы, управляемые шаблонами.
Вы можете найти таблицу ключевых различий здесь.
Для этого проекта я решил использовать реактивные формы для всех преимуществ, которые он приносит, например, наличие модели данных с просеиванием или использования синхронности между вашим шаблоном (View/HTML) и вы контроллером (класс/модель компонента). Кроме того, в целом, в крупных проектах у вас могут быть сложные формы, а reactive forms облегчают задачу их построить для вас.
Когда вы запустите свой проект, вы можете сначала основывать его на уже существующей библиотеке стиля. Это поможет вам сэкономить время при стилии вашего приложения.
Вот несколько примеров библиотек, которые вы можете использовать:
На самом деле, для этого проекта это bootstrap которая использовалась (не ng-boostrap ).
Большинство библиотек, такие как React, Angular и т. Д., Созданы с способом для компонентов внутренне управлять своим состоянием без необходимости во внешней библиотеке или инструменте. Это хорошо для приложений с небольшим количеством компонентов, но по мере того, как приложение становится все больше, управляющие государства, разделенные по компонентам, становится рутинной.
В приложении, где данные передаются между компонентами, может быть запутанным знать, где должно жить государство. В идеале данные в компоненте должны жить только в одном компоненте. Таким образом, обмен данными между компонентами брата становится трудным (источник).
То, как работает библиотека управления государством, просто. Существует центральный магазин, который содержит все состояние приложения. Каждый компонент может получить доступ к сохраненному состоянию без необходимости отправлять реквизиты из одного компонента в другой.
Например, для реагирования одной из наиболее используемых библиотек управления государством является Redux. И использование пакета React-RETUX облегчает. Конечно, у вас есть другие библиотеки управления государством для react , например поток Facebook. Поэтому выберите то, что вам больше всего подходит, что redux больше используется, этот flux , потому что он не сосредоточен на react и может использоваться с любой другой библиотекой представления.
Для angular у вас есть много вариантов для управления государством, как:
Для Angular , после изучения различных вариантов, я обнаружил, что ngxs является лучшим вариантом. Он написан для Angular на первом месте, поэтому он реализован после стиля кода угловой и получает и полагает Dependency Injection обеспечиваемая Angular . Кроме того, это менее словесно, чем другие библиотеки. По этим причинам мы сделали выбор, чтобы использовать его во многих компаниях, с которыми я работал. Вы можете найти здесь полное объяснение того, почему использовать ngxs .
Использовали плагины ngxs для этого репо:
Фаскадный шаблон представляет собой программный дизайн, обычно используемый в объектно-ориентированном программировании. Аналогичный фасаду в архитектуре, фасад-это объект, который служит фронтальным интерфейсом, маскирующим более сложный базовый или структурный код. Фасад может:
Хотя это кажется довольно тривиальным изменением (и дополнительным слоем), фасад оказывает огромное положительное влияние производительности разработчика, а урожайность значительно меньше сложности в слоях представления (источник).
Другим преимуществом является то, что он делает ваши контроллеры (например, угловые компоненты), независимым от библиотеки управления государством, которую вы решили использовать.
Для интернационализации у вас есть два варианта:
1 - Используйте систему I18N Angular
2 - Используйте библиотеку NGX -Translate.
Я не буду вдаваться в подробности, но выбором для этого проекта и многих других производств, таких как проекты, состоял в том, чтобы использовать ngx-translate . Основные причины заключаются в том, что для того же результата его проще использовать и разрабатывать с и Angular i18n заставляет вас создавать приложение на язык, и оно перезагружает приложение при изменении языка.
Чтобы получить больше помощи в угловом клиенте, используйте ng help или посетите Angular Cli Readme.
Если вы используете код VS, вы можете найти следующие плагины очень полезными:
Авторское право от @haythem-ouederni. Все источники проекта выпускаются по лицензии Apache.
