Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчика

2.143 Aufrufe

Veröffentlicht am

Поговорим об организации нового фронтенда в Альфа-Банке: как подружить шаблонизатор BEMHTML, bem-tools и AngularJS с Yeoman и Gulp. Мы рассмотрим проект, в котором используются все эти инструменты, а также внутренние и опенсорсные библиотеки блоков, и узнаем, как уровни переопределения помогают свести написание стилей для новых проектов к минимуму и почему вообще это нужно.

Veröffentlicht in: Technologie
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчика

  1. 1. Инструменты БЭМ-разработчика Антон Виноградов, разработчик интерфейсов, Альфа-Банк http://bit.ly/mebup-msk-alfa
  2. 2. Антон Виноградов winogradovaa@gmail.com @awinogradov разработчик интерфейсов, Альфа-Банк
  3. 3. Теория А как у них
  4. 4. Yeoman Gulp Roole AngularJS ReactJS BEMHTML bem-tools 5 Внутри
  5. 5. Уровни переопределения
  6. 6. Уровни переопределения Prototype – 80%
 базовые стили и функционал блоков

  7. 7. Prototype – 80% 
 базовые стили и функционал блоков
 Уровни переопределения Corporate – 15%
 корпоративные стили и специфика блоков
  8. 8. Уровни переопределения ! Project – 5%
 блоки и стили для конкретного проекта Prototype – 80%
 базовые стили и функционал блоков
 Corporate – 15%
 корпоративные стили и специфика блоков
  9. 9. 10 Профит
  10. 10. Единая кодовая база
 легко поддерживать и развивать 1111 Профит
  11. 11. Единая кодовая база
 легко поддерживать и развивать Единый стиль блоков и элементов
 узнаваемость бренда в каждом проекте 1212 Профит
  12. 12. Единая кодовая база
 легко поддерживать и развивать Единый стиль блоков и элементов
 узнаваемость бренда в каждом проекте Каждый новый проект заведомо готов на 80%
 абстракция над версткой и стилями 1313 Профит
  13. 13. Единая кодовая база
 легко поддерживать и развивать Единый стиль блоков и элементов
 узнаваемость бренда в каждом проекте Каждый новый проект заведомо готов на 80%
 абстракция над версткой и стилями Невероятная экономия времени
 в самом идеальном случае просто собираем проект 1414 Профит
  14. 14. 1515 Библиотеки
  15. 15. bem-core
 i-bem и обвязка 161616 Библиотеки
  16. 16. bem-core
 i-bem и обвязка bem-protein
 80% проекта, фреймворк на BEMHTML и Roole 171717 Библиотеки
  17. 17. bem-core
 i-bem и обвязка bem-protein
 80% проекта, фреймворк на BEMHTML и Roole bem-corporate
 корпоративные блоки и стили 181818 Библиотеки
  18. 18. 191919 Структура проекта
  19. 19. Группируем блоки по типу 20202020 Структура проекта
  20. 20. Группируем блоки по типу Директория для MVC 21212121 Структура проекта
  21. 21. Группируем блоки по типу Директория для MVC Директория для Server-Side 22222222 Структура проекта
  22. 22. Группируем блоки по типу Директория для MVC Директория для Server-Side Директория Public 23232323 Структура проекта
  23. 23. 24242424 Инструменты
  24. 24. Yeoman generator-bem
 создание шаблона проекта и раширение для MVC и Server-Side 2525252525 Инструменты
  25. 25. Yeoman generator-bem
 создание шаблона проекта и раширение для MVC и Server-Side Bower
 менеджер библиотек, зависимости тянет bower-npm-install 2626262626 Инструменты
  26. 26. Yeoman generator-bem
 создание шаблона проекта и раширение для MVC и Server-Side Bower
 менеджер библиотек, зависимости тянет bower-npm-install bem-tools
 cборка верстки, стилей и библиотек 2727272727 Инструменты
  27. 27. Yeoman generator-bem
 создание шаблона проекта и раширение для MVC и Server-Side Bower
 менеджер библиотек, зависимости тянет bower-npm-install bem-tools
 cборка верстки, стилей и библиотек спец. группы Gulp
 вотчеры и сборка MVC, подготовка ассетов 2828282828 Инструменты
  28. 28. Yeoman generator-bem
 создание шаблона проекта и раширение для MVC и Server-Side Bower
 менеджер библиотек, зависимости тянет bower-npm-install bem-tools
 cборка верстки, стилей и библиотек спец. группы Gulp
 вотчеры и сборка MVC, подготовка ассетов Jasmine
 тестирование блоков и MVC 2929292929 Инструменты
  29. 29. Практика Пример рабочего проекта
  30. 30. 3131313131 Скафолдинг
  31. 31. Создание шаблона проекта (generator-bem) 323232323232 Скафолдинг
  32. 32. Создание шаблона проекта (generator-bem) Merged bundle и необычный make.js (bem-protein) 333333333333 Скафолдинг
  33. 33. Создание шаблона проекта (generator-bem) Merged bundle и необычный make.js (bem-protein) Расширение до JS MVC (AngularJS) 343434343434 Скафолдинг
  34. 34. Создание шаблона проекта (generator-bem) Merged bundle и необычный make.js (bem-protein) Расширение до JS MVC (AngularJS) Внешние библиотеки и могучий borschik 353535353535 Скафолдинг
  35. 35. Создание шаблона проекта (generator-bem) Merged bundle и необычный make.js (bem-protein) Расширение до JS MVC (AngularJS) Внешние библиотеки и могучий borschik Расширение до Server-Side (NodeJS) 363636363636 Скафолдинг
  36. 36. Создание шаблона проекта (generator-bem) Merged bundle и необычный make.js (bem-protein) Расширение до JS MVC (AngularJS) Внешние библиотеки и могучий borschik Расширение до Server-Side (NodeJS) Gulp таски 373737373737 Скафолдинг
  37. 37. Создание шаблона проекта (generator-bem) Merged bundle и необычный make.js (bem-protein) Расширение до JS MVC (AngularJS) Внешние библиотеки и могучий borschik Расширение до Server-Side (NodeJS) Gulp таски Стилизация (bem-corporate) 383838383838 Скафолдинг
  38. 38. Обратная связь http://bit.ly/msk-bemup-feedback
  39. 39. Спасибо! Ссылки http://bit.ly/generator-bem http://bit.ly/bem-protein http://bit.ly/bem-protein-example http://bit.ly/bem-on-rails Контакты winogradovaa@gmail.com winogradovaa awinogradov verybigman

×