Ностальгическая и полная безумия история о сервисе вФОСе.ру, который я сделал и запустил в далёком 2007-ом, на коленке, дома, и как он стал ресурсом с посещаемостью 12 000 человек в сутки и «главным» сайтом локальной сети Саратовской области.
Будет проведён сравнительный анализ возможностей создания анимаций как в Flash так и в HTML5. Неужели и правда HTML5 способен полностью заменить Flash?
Иван Воищев, Мануфактура, Воронеж
О том, как мы жили до БЭМа и к чему пришли с ним, как искали инструменты для решения задач команды и почему выбор пал на полный стек БЭМ-технологий. Рассказ будет проиллюстрирован примерами из жизни на основе выполненных проектов и опытом использования готовых решений, кодом из собственных библиотек и краткими рекомендациями, с чего начать. В конце подытожим: что изменилось в команде и как теперь мы смотрим в будущее.
Breaking Free from Bootstrap: Custom Responsive Grids with Sass SusyJames Steinbach
Instead of relying on heavy, pre-formatted, markup-intensive CSS frameworks for grids, we can use a Sass grid framework to write clean, maintainable, performant CSS grid layouts.
twitter.com/jdsteinbach
jamessteinbach.com
Ностальгическая и полная безумия история о сервисе вФОСе.ру, который я сделал и запустил в далёком 2007-ом, на коленке, дома, и как он стал ресурсом с посещаемостью 12 000 человек в сутки и «главным» сайтом локальной сети Саратовской области.
Будет проведён сравнительный анализ возможностей создания анимаций как в Flash так и в HTML5. Неужели и правда HTML5 способен полностью заменить Flash?
Иван Воищев, Мануфактура, Воронеж
О том, как мы жили до БЭМа и к чему пришли с ним, как искали инструменты для решения задач команды и почему выбор пал на полный стек БЭМ-технологий. Рассказ будет проиллюстрирован примерами из жизни на основе выполненных проектов и опытом использования готовых решений, кодом из собственных библиотек и краткими рекомендациями, с чего начать. В конце подытожим: что изменилось в команде и как теперь мы смотрим в будущее.
Breaking Free from Bootstrap: Custom Responsive Grids with Sass SusyJames Steinbach
Instead of relying on heavy, pre-formatted, markup-intensive CSS frameworks for grids, we can use a Sass grid framework to write clean, maintainable, performant CSS grid layouts.
twitter.com/jdsteinbach
jamessteinbach.com
Картинки к моему рассказу о том, как мы делаем Банки.ру. Некоторые слайды очень неоднозначны без текста. Тезисы тут: http://nastachku.ru/lectures?lecture_id=630#lecture_630
Видео тут https://www.youtube.com/watch?v=m5QuiTZwMrU
БЭМ — это технология разработки сайтов, которые нужно быстро создать и долго поддерживать. Она используется в разработке фронтенда почти всех сервисов Яндекса и успела обрасти большим набором библиотек и инструментов, которым мы хотим с вами поделиться.
Имея в своих руках обширный арсенал БЭМ со всей его модульностью и мощью, остаётся «всего-то» придумать идею и реализовать её. На мастер-классе вы сможете вместе с нами создать то, что мы «только что» придумали.
Вы узнаете, в чём преимущество вёрстки независимыми блоками и что такое «уровни переопределения», познакомитесь с готовыми библиотеками блоков и инструментами для автоматизации сборки. Мы покажем, как разные инструменты для упрощения жизни разработчика, вроде autoprefixer, css-препроцессора roole и модульной системы YModules, встраиваются в процесс разработки на БЭМ и создают по-настоящему удобную платформу. На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JS. Более того, декларативным шаблонам: BEMHTML и BEMTREE, которые позволяют преобразовывать сырые данные во view-ориентированный BEMJSON, — будет посвящена одна из трёх частей мастер-класса.
В результате получится работающий сайт, а вы на практике познакомитесь с полным стеком БЭМ-технологий.
После мастер-класса запланировано дополнительное время на полезное общение: вы сможете рассказать о трудностях, с которыми встретились при реализации проекта на БЭМ, и мы вместе подумаем, как воплотить вашу идею в жизнь.
Backend на Swift. Существует и работает! / Роман Мочалов (Improve Digital)Ontico
РИТ++ 2017, App's Conf
Зал Найроби, 6 июня, 13:00
Тезисы:
http://appsconf.ru/2017/abstracts/2712.html
- Рассмотрим случаи, когда нам было бы полезно самим писать backend...на Swift'e, конечно же!
- Разбор open-source библиотек, позволяющих вам писать только Swift-код для работы с реквестами. Остальную REST, OAuth, HTTP-магию они делают сами.
- Напишем с вами API для работы с "юзерами", будем записывать данные в базу, делать Basic-авторизацию. В общем, демо будет максимально приближено к "боевым проектам" )
- Выльем наш бэкенд на Heroku и Digital Ocean (что это за звери, я тоже расскажу).
- Ну и, конечно же, в конце похоливарим на тему: "Зачем вам, как Swift-разработчикам под iOS, писать еще и backend". Дискуссия обещает быть жаркой!
Speech about BEM and our fails at FailOver conference, 2015
by Kirill Lapenin, Alexej Yaroshevich
Materials and links: https://www.channelkit.com/yaroshevich/bem-for-corporate/
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...Yandex
БЭМ упрощает разработку сайтов, которые нужно быстро создать и долго поддерживать. Эту технологию используют во фронтенде почти всех сервисов Яндекса, и она уже успела обрасти множеством библиотек и инструментов, которыми мы хотим с вами поделиться. С обширным арсеналом БЭМ, со всей его модульностью и мощью, вам останется «всего-то» придумать идею и реализовать её. На мастер-классе вы сможете вместе с нами создать то, что мы «только что» придумали. Вы узнаете, в чём преимущество вёрстки независимыми блоками и что такое уровни переопределения, познакомитесь с готовыми библиотеками блоков и инструментами для автоматизации сборки. Мы покажем, как разные инструменты — например, autoprefixer, css-препроцессор Roole или модульная система YModules — упрощают жизнь разработчика и создают по-настоящему удобную платформу, если встроить их в процесс разработки на БЭМ. На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JavaScript. Отдельная часть мастер-класса будет посвящена декларативным шаблонам BEMHTML и BEMTREE, которые позволяют преобразовывать сырые данные во view-ориентированный BEMJSON. Мы вместе напишем серверную часть приложения в БЭМ-методологии и используем данные от разных социальных и поисковых сервисов (RSS с Яндекс.Фоток, API Twitter и Instagram). В результате получится работающий сайт, а вы — на практике познакомитесь с полным стеком БЭМ-технологий. После мастер-класса мы сможем свободно пообщаться на профессиональные темы. Например, вы расскажете о трудностях, с которыми встретились при реализации проекта на БЭМ, и мы вместе подумаем, как воплотить вашу идею в жизнь.
Talk (in Russian) for BEMup in Minsk, April 18th, 2014
Abstract: During our community meetups we introduced you already to the technology history. Now we will talk about people who build it. I will introduce you to the team inside Yandex and outside, projects and companies that use BEM in their work in CIS and abroad.
Video (Russian) https://events.yandex.ru/lib/talks/1821/
Елена Джетпыспаева — Открытие. Новости и планы БЭМ-сообществаYandex
На встречах сообщества мы уже знакомили участников с технологической историей проекта. Теперь мы расскажем о людях, которые стоят за этими технологиями. Мы познакомим вас с командой проекта и внутри Яндекса, и снаружи. Остановимся на проектах и компаниях, использующих БЭМ в своей работе, как в СНГ, так и за его пределами. Вспомним забавные случаи и детские радости, бессонные ночи и ваши отзывы, которые вселяют в нас веру в прекрасный новый мир. Приоткроем завесу тайны и заглянем в Зазеркалье внутрь Яндекса с его общепортальной библиотекой блоков Лего и своим циклом БЭМ-развития, где есть место онлайн-активностям, внутренним офлайн-BEMup’ам, совместной разработке и непростым коммуникационным процессам. Поделимся нашим опытом решения тех или иных задач и расскажем, как планируем развиваться в 2014 году. Надеемся, что из этого рассказа вы сможете вынести для себя полезные уроки о работе внутри сообщества и вместе с нами.
WebCamp: Developer Day: Разработка фронтенда: от кузницы до металлургического...GeeksLab Odessa
Разработка фронтенда: от кузницы до металлургического завода
Дмитрий Поляков
разработчик команды Яндекс.Маркета
Первые версии фронденда Маркета далали всего несколько человек. Сегодня нас больше 20, а за это время сам Маркет технологически вырос из кузницы с ручным трудом до маленького html-завода, где многое за разработчика делают скрипты.
В докладе я расскажу особенности разработки фронтенда Маркета:
— создание рабочей копии для разработчика "в один клик";
— файловая структура шаблонов и их сборка;
— фриз статики;
— выкладка в продакшн: как обновить верстку на десятке серверов;
— общие компоненты между проектами: как избавиться от копипаста и ничего не сломать новой фичей.
Когда код «убивает», или зачем нам тестировать наши продуктыОлег Стрекаловский
Доклад посвящен теме тестирования и надёжности ПО. Что вы получаете, когда забываете о качестве разрабатываемого продукта и "куда копать", если вы вдруг решите начать проверять то, что у вас разрабатывается.
Документирование блоков. Раскрываем все плюсыYandex
Документирование блоков. Раскрываем все плюсы
Мы поговорим о том, как разрабатывается техническая документация к библиотеке bem-components и почему разделение интерфейса на блоки облегчает работу с документами как техническим писателям, так и разработчикам. А также о том, как мы выкладываем всю информацию по каждому блоку с примерами и JSDoc на наш сайт ru.bem.info.
Инна Белая, Яндекс
Разработчик технической документации в бригаде документирования БЭМ. В Яндексе с 2013 года.
Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчикаYandex
Поговорим об организации нового фронтенда в Альфа-Банке: как подружить шаблонизатор BEMHTML, bem-tools и AngularJS с Yeoman и Gulp. Мы рассмотрим проект, в котором используются все эти инструменты, а также внутренние и опенсорсные библиотеки блоков, и узнаем, как уровни переопределения помогают свести написание стилей для новых проектов к минимуму и почему вообще это нужно.
Картинки к моему рассказу о том, как мы делаем Банки.ру. Некоторые слайды очень неоднозначны без текста. Тезисы тут: http://nastachku.ru/lectures?lecture_id=630#lecture_630
Видео тут https://www.youtube.com/watch?v=m5QuiTZwMrU
БЭМ — это технология разработки сайтов, которые нужно быстро создать и долго поддерживать. Она используется в разработке фронтенда почти всех сервисов Яндекса и успела обрасти большим набором библиотек и инструментов, которым мы хотим с вами поделиться.
Имея в своих руках обширный арсенал БЭМ со всей его модульностью и мощью, остаётся «всего-то» придумать идею и реализовать её. На мастер-классе вы сможете вместе с нами создать то, что мы «только что» придумали.
Вы узнаете, в чём преимущество вёрстки независимыми блоками и что такое «уровни переопределения», познакомитесь с готовыми библиотеками блоков и инструментами для автоматизации сборки. Мы покажем, как разные инструменты для упрощения жизни разработчика, вроде autoprefixer, css-препроцессора roole и модульной системы YModules, встраиваются в процесс разработки на БЭМ и создают по-настоящему удобную платформу. На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JS. Более того, декларативным шаблонам: BEMHTML и BEMTREE, которые позволяют преобразовывать сырые данные во view-ориентированный BEMJSON, — будет посвящена одна из трёх частей мастер-класса.
В результате получится работающий сайт, а вы на практике познакомитесь с полным стеком БЭМ-технологий.
После мастер-класса запланировано дополнительное время на полезное общение: вы сможете рассказать о трудностях, с которыми встретились при реализации проекта на БЭМ, и мы вместе подумаем, как воплотить вашу идею в жизнь.
Backend на Swift. Существует и работает! / Роман Мочалов (Improve Digital)Ontico
РИТ++ 2017, App's Conf
Зал Найроби, 6 июня, 13:00
Тезисы:
http://appsconf.ru/2017/abstracts/2712.html
- Рассмотрим случаи, когда нам было бы полезно самим писать backend...на Swift'e, конечно же!
- Разбор open-source библиотек, позволяющих вам писать только Swift-код для работы с реквестами. Остальную REST, OAuth, HTTP-магию они делают сами.
- Напишем с вами API для работы с "юзерами", будем записывать данные в базу, делать Basic-авторизацию. В общем, демо будет максимально приближено к "боевым проектам" )
- Выльем наш бэкенд на Heroku и Digital Ocean (что это за звери, я тоже расскажу).
- Ну и, конечно же, в конце похоливарим на тему: "Зачем вам, как Swift-разработчикам под iOS, писать еще и backend". Дискуссия обещает быть жаркой!
Speech about BEM and our fails at FailOver conference, 2015
by Kirill Lapenin, Alexej Yaroshevich
Materials and links: https://www.channelkit.com/yaroshevich/bem-for-corporate/
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...Yandex
БЭМ упрощает разработку сайтов, которые нужно быстро создать и долго поддерживать. Эту технологию используют во фронтенде почти всех сервисов Яндекса, и она уже успела обрасти множеством библиотек и инструментов, которыми мы хотим с вами поделиться. С обширным арсеналом БЭМ, со всей его модульностью и мощью, вам останется «всего-то» придумать идею и реализовать её. На мастер-классе вы сможете вместе с нами создать то, что мы «только что» придумали. Вы узнаете, в чём преимущество вёрстки независимыми блоками и что такое уровни переопределения, познакомитесь с готовыми библиотеками блоков и инструментами для автоматизации сборки. Мы покажем, как разные инструменты — например, autoprefixer, css-препроцессор Roole или модульная система YModules — упрощают жизнь разработчика и создают по-настоящему удобную платформу, если встроить их в процесс разработки на БЭМ. На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JavaScript. Отдельная часть мастер-класса будет посвящена декларативным шаблонам BEMHTML и BEMTREE, которые позволяют преобразовывать сырые данные во view-ориентированный BEMJSON. Мы вместе напишем серверную часть приложения в БЭМ-методологии и используем данные от разных социальных и поисковых сервисов (RSS с Яндекс.Фоток, API Twitter и Instagram). В результате получится работающий сайт, а вы — на практике познакомитесь с полным стеком БЭМ-технологий. После мастер-класса мы сможем свободно пообщаться на профессиональные темы. Например, вы расскажете о трудностях, с которыми встретились при реализации проекта на БЭМ, и мы вместе подумаем, как воплотить вашу идею в жизнь.
Talk (in Russian) for BEMup in Minsk, April 18th, 2014
Abstract: During our community meetups we introduced you already to the technology history. Now we will talk about people who build it. I will introduce you to the team inside Yandex and outside, projects and companies that use BEM in their work in CIS and abroad.
Video (Russian) https://events.yandex.ru/lib/talks/1821/
Елена Джетпыспаева — Открытие. Новости и планы БЭМ-сообществаYandex
На встречах сообщества мы уже знакомили участников с технологической историей проекта. Теперь мы расскажем о людях, которые стоят за этими технологиями. Мы познакомим вас с командой проекта и внутри Яндекса, и снаружи. Остановимся на проектах и компаниях, использующих БЭМ в своей работе, как в СНГ, так и за его пределами. Вспомним забавные случаи и детские радости, бессонные ночи и ваши отзывы, которые вселяют в нас веру в прекрасный новый мир. Приоткроем завесу тайны и заглянем в Зазеркалье внутрь Яндекса с его общепортальной библиотекой блоков Лего и своим циклом БЭМ-развития, где есть место онлайн-активностям, внутренним офлайн-BEMup’ам, совместной разработке и непростым коммуникационным процессам. Поделимся нашим опытом решения тех или иных задач и расскажем, как планируем развиваться в 2014 году. Надеемся, что из этого рассказа вы сможете вынести для себя полезные уроки о работе внутри сообщества и вместе с нами.
WebCamp: Developer Day: Разработка фронтенда: от кузницы до металлургического...GeeksLab Odessa
Разработка фронтенда: от кузницы до металлургического завода
Дмитрий Поляков
разработчик команды Яндекс.Маркета
Первые версии фронденда Маркета далали всего несколько человек. Сегодня нас больше 20, а за это время сам Маркет технологически вырос из кузницы с ручным трудом до маленького html-завода, где многое за разработчика делают скрипты.
В докладе я расскажу особенности разработки фронтенда Маркета:
— создание рабочей копии для разработчика "в один клик";
— файловая структура шаблонов и их сборка;
— фриз статики;
— выкладка в продакшн: как обновить верстку на десятке серверов;
— общие компоненты между проектами: как избавиться от копипаста и ничего не сломать новой фичей.
Когда код «убивает», или зачем нам тестировать наши продуктыОлег Стрекаловский
Доклад посвящен теме тестирования и надёжности ПО. Что вы получаете, когда забываете о качестве разрабатываемого продукта и "куда копать", если вы вдруг решите начать проверять то, что у вас разрабатывается.
Документирование блоков. Раскрываем все плюсыYandex
Документирование блоков. Раскрываем все плюсы
Мы поговорим о том, как разрабатывается техническая документация к библиотеке bem-components и почему разделение интерфейса на блоки облегчает работу с документами как техническим писателям, так и разработчикам. А также о том, как мы выкладываем всю информацию по каждому блоку с примерами и JSDoc на наш сайт ru.bem.info.
Инна Белая, Яндекс
Разработчик технической документации в бригаде документирования БЭМ. В Яндексе с 2013 года.
Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчикаYandex
Поговорим об организации нового фронтенда в Альфа-Банке: как подружить шаблонизатор BEMHTML, bem-tools и AngularJS с Yeoman и Gulp. Мы рассмотрим проект, в котором используются все эти инструменты, а также внутренние и опенсорсные библиотеки блоков, и узнаем, как уровни переопределения помогают свести написание стилей для новых проектов к минимуму и почему вообще это нужно.
Similar to БЭМ в Мануфактуре РИФ-Воронеж 2014 (20)
3. МАНУФАКТУРА
Интерактивное агентство
Как мы жили до БЭМа и к чему
пришли с ним
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
2 / 60
РИФ-Воронеж, 3 октября 2014
4. ОБО МНЕ
Воищев Иван
@voischev
В «Мануфактуре» 3 года
Ведущий Front-end разработчик
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 3 / 60
5. СОДЕРЖАНИЕ
Проблемы4
• Старый подход
Решение4
• Собственные инструменты
• BEM full stack (Сервис Myweddy.ru)
Профит4
• Воркфлоу
• Cобственные библиотеки блоков
• О команде
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 4 / 60
6. СОДЕРЖАНИЕ
Проблемы4
• Старый подход
Решение4
• Собственные инструменты
• BEM full stack (Сервис Myweddy.ru)
Профит4
• Воркфлоу
• Cобственные библиотеки блоков
• О команде
2011
2012
2013
Cейчас
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 4 / 60
7. СОДЕРЖАНИЕ
Проблемы4
• Старый подход
Решение4
• Собственные инструменты
• BEM full stack (Сервис Myweddy.ru)
Профит4
• Воркфлоу
• Cобственные библиотеки блоков
• О команде
2011
2012
2013
Cейчас
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 4 / 60
8. СОДЕРЖАНИЕ
Проблемы4
• Старый подход
Решение4
• Собственные инструменты
• BEM full stack (Сервис Myweddy.ru)
Профит4
• Воркфлоу
• Cобственные библиотеки блоков
• О команде
2011
2012
2013
Cейчас
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 4 / 60
9. ПРОБЛЕМЫ 2011 год
5 / 60
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
10. 5 / 60
ПРОБЛЕМЫ
• HTML – это хаос!
2011 год
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
11. 5 / 60
ПРОБЛЕМЫ
• HTML – это хаос!
• Большие CSS файлы
2011 год
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
12. 5 / 60
ПРОБЛЕМЫ
• HTML – это хаос!
• Большие CSS файлы
• JS где-то сбоку
2011 год
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
13. 5 / 60
ПРОБЛЕМЫ
• HTML – это хаос!
• Большие CSS файлы
• JS где-то сбоку
2011 год
• Нет общего языка общения в команде
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
14. 5 / 60
ПРОБЛЕМЫ
• HTML – это хаос!
• Большие CSS файлы
• JS где-то сбоку
2011 год
• Нет общего языка общения в команде
• Быстро развивающаяся индустрия
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
15. 5 / 60
ПРОБЛЕМЫ
• HTML – это хаос!
• Большие CSS файлы
• JS где-то сбоку
2011 год
• Нет общего языка общения в команде
• Быстро развивающаяся индустрия
• Низкая скорость разработки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
22. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 8 / 60
23. РЕШЕНИЕ 2012 год
9 / 60
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
24. РЕШЕНИЕ 2012 год
9 / 60
• Выбрать методологию разработки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
25. РЕШЕНИЕ 2012 год
9 / 60
• Выбрать методологию разработки
• Инструменты сборки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
26. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 10 / 60
27. Сходство
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 11 / 60
28.
29.
30.
31.
32.
33. Независимость
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 13 / 60
34. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 14 / 60
35. ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год
15/ 60
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
36. ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год
15/ 60
• Все технологии блока в одном месте
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
37. ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год
15/ 60
• Все технологии блока в одном месте
• Простая модификация кода
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
38. ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год
15/ 60
• Все технологии блока в одном месте
• Простая модификация кода
• Полное разделение ответственности разработчиков
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
39. ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год
15/ 60
• Все технологии блока в одном месте
• Простая модификация кода
• Полное разделение ответственности разработчиков
• Автоматическая подготовка кода к продакшену
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
40. ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год
15/ 60
• Все технологии блока в одном месте
• Простая модификация кода
• Полное разделение ответственности разработчиков
• Автоматическая подготовка кода к продакшену
• Удобный деплой проектов
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
41. Первый взгляд на bem-tools в 2012
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 16 / 60
42. Первый взгляд на bem-tools в 2012
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 8 / 94
17 60
43. Первый взгляд на bem-tools в 2012
• Не хватало технологий для
связи с бэкендом
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 8 / 94
17 60
44. Первый взгляд на bem-tools в 2012
• Не хватало технологий для
связи с бэкендом
• Мало документации
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 8 / 94
17 60
45. Первый взгляд на bem-tools в 2012
• Не хватало технологий для
связи с бэкендом
• Мало документации
• Высокий порог входа
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 8 / 94
17 60
47. СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013
18 / 60
• Основа на Zend Framework
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
48. СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013
18 / 60
• Основа на Zend Framework
• Blitz Templates + хелперы
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
49. СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013
18 / 60
• Основа на Zend Framework
• Blitz Templates + хелперы
• Собственная система сборки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
50. СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013
18 / 60
• Основа на Zend Framework
• Blitz Templates + хелперы
• Собственная система сборки
• Поддержали БЭМ структуру хранения файлов
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
51. СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013
18 / 60
• Основа на Zend Framework
• Blitz Templates + хелперы
• Собственная система сборки
• Поддержали БЭМ структуру хранения файлов
• Сборка в дев. и продакшен режиме
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
52. СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013
18 / 60
• Основа на Zend Framework
• Blitz Templates + хелперы
• Собственная система сборки
• Поддержали БЭМ структуру хранения файлов
• Сборка в дев. и продакшен режиме
• Фриз статики
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
53. СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013
18 / 60
• Основа на Zend Framework
• Blitz Templates + хелперы
• Собственная система сборки
• Поддержали БЭМ структуру хранения файлов
• Сборка в дев. и продакшен режиме
• Фриз статики
• Хеш имен css, js файлов
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
59. 21 / 60
ПЛЮСЫ
• Не нужно было каждый раз компилировать
(в bem-tools это появилось позже)
Собственные инструменты сборки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
60. 21 / 60
ПЛЮСЫ
• Не нужно было каждый раз компилировать
(в bem-tools это появилось позже)
• Работали с привычным шаблонизатором
Собственные инструменты сборки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
61. 21 / 60
ПЛЮСЫ
• Не нужно было каждый раз компилировать
(в bem-tools это появилось позже)
• Работали с привычным шаблонизатором
• Заточен под наши процессы
Собственные инструменты сборки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
63. МИНУСЫ
• Нужно поддерживать и развивать
Собственные инструменты сборки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
22 / 60
64. МИНУСЫ
• Нужно поддерживать и развивать
• Часть логики представления в контролерах
Собственные инструменты сборки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
22 / 60
65. МИНУСЫ
• Нужно поддерживать и развивать
• Часть логики представления в контролерах
• Подсветка синтаксиса
Собственные инструменты сборки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
22 / 60
66. МИНУСЫ
• Нужно поддерживать и развивать
• Часть логики представления в контролерах
• Подсветка синтаксиса
• Нет документации
Собственные инструменты сборки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
22 / 60
67. МИНУСЫ
• Нужно поддерживать и развивать
• Часть логики представления в контролерах
• Подсветка синтаксиса
• Нет документации
• Нет переопределения шаблонов
Собственные инструменты сборки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
22 / 60
77. СНОВА BEM STACK? Профит с 2013
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
78. СНОВА BEM STACK?
• Появилась BEMTREE технология
Профит с 2013
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
79. СНОВА BEM STACK?
Профит с 2013
• Появилась BEMTREE технология
• bem-tools решает почти все задачи, поставленные перед инструментом
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
80. СНОВА BEM STACK?
Профит с 2013
• Появилась BEMTREE технология
• bem-tools решает почти все задачи, поставленные перед инструментом
• CSS препроцессор на выбор из коробки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
81. СНОВА BEM STACK?
Профит с 2013
• Появилась BEMTREE технология
• bem-tools решает почти все задачи, поставленные перед инструментом
• CSS препроцессор на выбор из коробки
• Шаблонизатор, в котором можно всё
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
82. СНОВА BEM STACK?
Профит с 2013
• Появилась BEMTREE технология
• bem-tools решает почти все задачи, поставленные перед инструментом
• CSS препроцессор на выбор из коробки
• Шаблонизатор, в котором можно всё
• Больше нет проблем с подсветкой синтаксиса BEMHTML
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
83. СНОВА BEM STACK?
Профит с 2013
• Появилась BEMTREE технология
• bem-tools решает почти все задачи, поставленные перед инструментом
• CSS препроцессор на выбор из коробки
• Шаблонизатор, в котором можно всё
• Больше нет проблем с подсветкой синтаксиса BEMHTML
• Модульная система для JS
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
84. СНОВА BEM STACK?
Профит с 2013
• Появилась BEMTREE технология
• bem-tools решает почти все задачи, поставленные перед инструментом
• CSS препроцессор на выбор из коробки
• Шаблонизатор, в котором можно всё
• Больше нет проблем с подсветкой синтаксиса BEMHTML
• Модульная система для JS
• Любой бэкэнд
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
85. СНОВА BEM STACK?
Профит с 2013
• Появилась BEMTREE технология
• bem-tools решает почти все задачи, поставленные перед инструментом
• CSS препроцессор на выбор из коробки
• Шаблонизатор, в котором можно всё
• Больше нет проблем с подсветкой синтаксиса BEMHTML
• Модульная система для JS
• Любой бэкэнд
• Появилась актуальная документация
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
88. Доопределение BEMHTML
!
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 60
89. Доопределение BEMHTML
!
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 60
90. Доопределение BEMHTML
!
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 60
91. Доопределение BEMHTML
!
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 60
92. Доопределение BEMHTML
!
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 60
93. РЕЗУЛЬТАТ СБОРКИ
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
94. РЕЗУЛЬТАТ СБОРКИ
• _common.bemtree.js
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
95. РЕЗУЛЬТАТ СБОРКИ
• _common.bemtree.js
• _common.bemhtml.js
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
96. РЕЗУЛЬТАТ СБОРКИ
• _common.bemtree.js
• _common.bemhtml.js
• _common.js
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
97. РЕЗУЛЬТАТ СБОРКИ
• _common.bemtree.js
• _common.bemhtml.js
• _common.js
• _common.css (Autoprefixer)
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
98. РЕЗУЛЬТАТ СБОРКИ
• _common.bemtree.js
• _common.bemhtml.js
• _common.js
• _common.css (Autoprefixer)
• папка с фризом (img, fonts, svg …)
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
99. DATA → BEMTREE → BEMHTML → HTML
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 60
100. json
DATA → BEMTREE → BEMHTML → HTML
Бекэнд сервер
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
36 / 60
101. json
DATA → BEMTREE → BEMHTML → HTML
Nodejs
Бекэнд сервер
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
36 / 60
102. bemjson
json
DATA → BEMTREE → BEMHTML → HTML
Nodejs
Бекэнд сервер
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
36 / 60
103. ВОРКФЛОУ
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 60
104. ВОРКФЛОУ
• Простой редактор кода
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 60
105. ВОРКФЛОУ
• Простой редактор кода
• Препроцессор css
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 60
106. ВОРКФЛОУ
• Простой редактор кода
• Препроцессор css
• npm, bower, bem, [git hooks, jshint, jscs, csscomb…]
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 60
107. ВОРКФЛОУ
• Простой редактор кода
• Препроцессор css
• npm, bower, bem, [git hooks, jshint, jscs, csscomb…]
• Любой бекэнд сервер
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 60
109. БИБЛИОТЕКИ БЛОКОВ
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
110. БИБЛИОТЕКИ БЛОКОВ
• bem-core
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
111. БИБЛИОТЕКИ БЛОКОВ
• bem-core
• bem-components
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
112. БИБЛИОТЕКИ БЛОКОВ
• bem-core
• bem-components
• bem-font
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
113. БИБЛИОТЕКИ БЛОКОВ
• bem-core
• bem-components
• bem-font
• bem-social
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
114. БИБЛИОТЕКИ БЛОКОВ
• bem-core
• bem-components
• bem-font
• bem-social
• bem-factory
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
115. БИБЛИОТЕКИ БЛОКОВ
• bem-core
• bem-components
• bem-font
• bem-social
• bem-factory
• manufactura-bl
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
116. БИБЛИОТЕКИ БЛОКОВ
• bem-core
• bem-components
• bem-font
• bem-social
• bem-factory
• manufactura-bl
• factory-fonts
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
135. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 45 / 60
136. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 45 / 60
137. BEM-FONT
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
https://github.com/voischev/bem-font
46 / 60
138. BEM-FONT
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
https://github.com/voischev/bem-font
47 / 60
139. BEM-FONT
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
https://github.com/voischev/bem-font
48 / 60
140. BEM-FONT
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
https://github.com/voischev/bem-font
49 / 60
141. BEM-FONT
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
https://github.com/voischev/bem-font
50 / 60
142. 8 / 94
BEM-SOCIAL
Однообразное API блоков
https://github.com/voischev/bem-social
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
143. 8 / 94
BEM-SOCIAL
Однообразное API блоков
https://github.com/voischev/bem-social
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
144. BEM-SOCIAL
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
https://github.com/voischev/bem-social
52 / 60
145. BEM-SOCIAL
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
https://github.com/voischev/bem-social
52 / 60
146. BEM-FACTORY
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
https://github.com/factorymn/bem-factory
• reset-css
• jquery__ui
• fancybox
• …
53 / 60
147. ВНУТРЕННИЕ РАЗРАБОТКИ
• manufactura-bl
• factory-fonts
• свой project-stub
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
54 / 60
148. ИТОГИ
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 55 / 60
149. ИТОГИ
• Полное разделение ответственности у разработчиков
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
55 / 60
150. ИТОГИ
• Полное разделение ответственности у разработчиков
• Автоматизация
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
55 / 60
151. ИТОГИ
• Полное разделение ответственности у разработчиков
• Автоматизация
• Реиспользуемый код
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
55 / 60
152. ИТОГИ
• Полное разделение ответственности у разработчиков
• Автоматизация
• Реиспользуемый код
• Библиотеки блоков
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
55 / 60
153. ИТОГИ
• Полное разделение ответственности у разработчиков
• Автоматизация
• Реиспользуемый код
• Библиотеки блоков
• Один язык общения для всей команды
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
55 / 60
154. ИТОГИ
• Полное разделение ответственности у разработчиков
• Автоматизация
• Реиспользуемый код
• Библиотеки блоков
• Один язык общения для всей команды
• Простая поддержка
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
55 / 60
155. ИТОГИ
• Полное разделение ответственности у разработчиков
• Автоматизация
• Реиспользуемый код
• Библиотеки блоков
• Один язык общения для всей команды
• Простая поддержка
• Уменьшились сроки разработки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
55 / 60
156. ИТОГИ
• Полное разделение ответственности у разработчиков
• Автоматизация
• Реиспользуемый код
• Библиотеки блоков
• Один язык общения для всей команды
• Простая поддержка
• Уменьшились сроки разработки
• Комьюнити
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
55 / 60
157. ПРО СРОКИ
МЭР ГУБЕРНАТОР
Frontend 198 217
Backend 180 80
378 часов 297 часов
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 56 / 60
158. ПРО СРОКИ
МЭР ГУБЕРНАТОР
Frontend 198 217
Backend 180 80
378 часов 297 часов
(- 81 час)
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 56 / 60
159. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 57 / 60
160. ВАКАНСИИ!
ВЕБ-ПРОГРАМ-
МИСТ
ТЕХНОЛОГИИ
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
ТЕХНОЛОГИИ
iOS-
ПРОГРАМ-
МИСТ
ЗАКОН И ПОРЯДОК
МЕНЕДЖЕР ПО
ПРОДАЖАМ
JOBS.
FACTORY.
MN
И ДРУГИЕ
59 / 60
161. @VOISCHEV
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
59 / 60
162. THANKU МАНУФАКТУРА
Интерактивное агентство
www.factory.mn
voischev@factory.mn
@voischev
voischev
СПАСИБО
ВОИЩЕВ
ИВАН
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 60 / 60