3 основных правила успешной реализации проектов на AngularJS

AngularJS — структурный фреймворк для динамических web приложений. Как начать разработку проекта на AngularJS? Думаю, многие разработчики сталкивались с этим вопросом. Попробуем разобраться.

Правило 1: Забываем об определенных библиотеках

Самое первое правило, которое нужно принять и не нарушать на протяжении всего проекта:

«Если проект пишется на фреймворке AngularJS, забудьте о существовании библиотек вроде jQuery и ей подобных.»

Если вдруг Вам понадобилось что-то из этой библиотеки, значит, Вы уже делаете что-то не так. Не удивлюсь, если это утверждение будет встречено волной возражений:

— Но я хочу использовать twitter bootstrap в проекте! Он тянет jQuery, там все так удобно, не нужно писать поп-апы, нотификаторы и т.д.

— Открой Google и вбей в поиск «AngularJS Bootstrap».

И таких примеров очень много. Главное правило усвоили, продолжим.

Правило 2: Code Style

Хорошо подобранный Code Style поможет вам быстро понять все прелести этого фрейморка. Так как мы — не любители изобретать свои велосипеды (ну разве только в ознакомительных целях), мы пересмотрели множество подходов. В результате, было решено остановиться на этом стиле: https://github.com/johnpapa/angular-styleguide. Данный подход помогает хорошо структурировать код. Его очень легко читать, что дает возможность быстро вникнуть в код новому разработчику. Замечательно, с Code Style для нашего проекта мы определились.

Правило 3: Четкая структура

Теперь давайте подумаем: как же мы будем организовывать наш код? Мне кажется, я не открою тайну, если скажу: «Писать шаблонный код скучно и нудно». Даешь переиспользование кода! Даешь компонентный подход! Именно его в последнее время можно все чаще встретить. Стоит только посмотреть на Google с их предложением Polymer, Яндекс, который использует методологию БЭМ, или открыть сайт http://webcomponents.org/ — там есть очень много интересного. Итак, к чему я веду?

  • 40% того, что мы будем писать будет подходит для переиспользования.
  • 40% того, что нам нужно, уже написано, остается только изучить матчасть.
  • 10% — это новая бизнес-логика, которая будет связывать наши компоненты.
  • 10% — это верстка наших компонентов и проекта целиком.

Занавес открывается, покажем структуру нашего приложения:

Структура AngularJS

Как вы могли заметить, у нас очень много мелких файлов. Нехорошо будет подключать их к нашему index.html, и здесь нам на помощь приходит gulp со своей командой плагинов:

  • gulp-minify-css
  • gulp-angular-templatecache
  • gulp-concat
  • gulp-minify-html
  • gulp-styl
  • gulp-webserver
  • gulp-jshint и т.д. (полный перечень вы сможете увидеть, если посмотрите в наш репозиторий)

Что мы будем делать при помощи «gulp» и его команды?

  1. Поднимать свой web server (чтобы не настраивать XAMP, apache или nginx, или не использовать Denwer).
  2. Собирать все наши JS файлы в один и для продакшн-версии обфусцировать, дабы не кормить браузер пользователя лишними килобайтами информации.
  3. В качестве шаблонизатора html используем jade. Естественно, его необходимо обработать и подготовить для работы с AngularJS.
  4. Для описания стилей используем style. Его также нужно собрать и упаковать. Копировать шрифты из библиотек.

Таким образом, у нас на выходе получится 3 основных файла:

  • index.html
  • application.css
  • application.js

Мы все прекрасно знаем, что браузер кэширует CSS и JS очень хорошо, отдать новую версию файла клиенту будет не так-то просто. Поэтому мы попросим gulp добавлять номер версии релиза к файлу, которую он будет брать за packages.json.

Основываясь на этих 3 правилах, мы и собираем наши проекты. Пример такого проекта можно посмотреть в нашем публичном репозитории на GitHub. Сейчас в нем есть отличия от приведенного  в статье описания, но в ближайшее время он будет обновлен и дополнен. В следующей статье я вам расскажу: как мы планируем избавиться от шаблонного кода при обработке форм и, вообще, CRUD-страниц.