Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

«Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)

Обычно компонентный подход используют в крупных проектах из-за издержек по поддержке такого кода. Андрей рассказал, как даже в небольших проектах с помощью AngularJS и компонентного подхода можно улучшить качество кода, ускорить и упростить разработку. Доклад актуален для AngularJS 1 и 2. Он также будет полезен тем, кто вообще не используют данный фреймворк.

  • Be the first to comment

«Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)

  1. 1. Компонентная верстка с AngularJS MoscowJS 28 Докладчик: Яманов Андрей http://tenphi.me
  2. 2. Проекты 2 TeamHunt.co TweetWorthy.co Quotable.Tips Beta Beta
  3. 3. Содержание • Angular-компоненты • Верстка • Стили 3
  4. 4. 4 Поиск “идеальной” методологии для компонентов
  5. 5. Плоская структура компонентов 5
  6. 6. Angular-компоненты 6
  7. 7. directive component 7
  8. 8. Особенности module.component() 8 • Вся логика реализована через controller. • Можно привязать только к элементу. • Scope всегда изолирован. https://docs.angularjs.org/guide/component angular@1.5.0 и выше
  9. 9. Создание компонента 9 module.directive() * до angular@1.5.0
  10. 10. Создание компонента 10 module.component()
  11. 11. 11 block.js
  12. 12. 12 app.js
  13. 13. Наследование компонентов 13 • Object.assign() • class “extends”
  14. 14. 14 Верстка
  15. 15. BEM как методология верстки 15
  16. 16. Минусы БЭМ 16 • Строгие правила для определения стилей; • Почти нет ограничений для верстки; • Значения модификаторов возможно излишни.
  17. 17. Block As Component 17 • Компонентный подход в вёрстке; • Контекстные селекторы; • Значений модификаторов нет.
  18. 18. 18 block.html
  19. 19. Темная сторона силы 19
  20. 20. Темная сторона силы 20
  21. 21. angular-bem 21 https://github.com/tenphi/angular-bem
  22. 22. angular-bem и компоненты 22 • Генерация классов BEM на основе атрибутов; • Установка модификаторов по состоянию компонента; • Не замедляет компиляцию шаблона.
  23. 23. DDO replace: false 23 * compiled
  24. 24. Наследование 24 http://learnjade.com/tour/template-inheritance/ На примере Jade: base.jade child.jade
  25. 25. 25 Стили
  26. 26. Стили для компонента 26
  27. 27. Используем LESS 27
  28. 28. Селектор с контекстом 28
  29. 29. Наследование 29
  30. 30. Используем переменные! 30
  31. 31. Используем переменные! 31
  32. 32. Вместо вывода 32
  33. 33. –Разработчик с большим и грустным опытом “Никакая документация, методология или устоявшаяся практика не избавляет разработчика от необходимости думать.” 33
  34. 34. 34 Спасибо за внимание! Вопросы? Инструменты: http://bit.ly/1WItKwI GitHub: https://github.com/tenphi

    Be the first to comment

    Login to see the comments

  • dshster

    Mar. 12, 2016
  • VladimirBloshchitsyn

    Mar. 15, 2016
  • MakareevFedor

    Jul. 3, 2016

Обычно компонентный подход используют в крупных проектах из-за издержек по поддержке такого кода. Андрей рассказал, как даже в небольших проектах с помощью AngularJS и компонентного подхода можно улучшить качество кода, ускорить и упростить разработку. Доклад актуален для AngularJS 1 и 2. Он также будет полезен тем, кто вообще не используют данный фреймворк.

Views

Total views

11,649

On Slideshare

0

From embeds

0

Number of embeds

9,672

Actions

Downloads

16

Shares

0

Comments

0

Likes

3

×