Фронтенд для миллионов (Орёл)
•
2 likes•243 views
Технологии и процессы в клиентской разработке сервиса Avito.ru javascript meetup Орёл, 24 июня 2017
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Фронтенд для миллионов (Орёл)
Similar to Фронтенд для миллионов (Орёл) (20)
Фронтенд для миллионов (Орёл)
- 1. Фронтенд для миллионов Анастасия Горячева Avito Орёл, 24 июня 2017
- 2. Анастасия Горячева • Frontend team lead в Avito • basis.js contributor • github/tyanas • twitter/tyanas_
- 3. Avito.ru • Популярный • Высоконагруженный Подробнее в блоге на Хабре
- 4. История
- 7. • 2007 – старт Avito • ~2012 – 1-й фронтендер • … • 2017 – ~30 фронтендеров
- 8. • 2007 – старт Avito • ~2012 – 1-й фронтендер • … –> Фронтенд в Avito WSD, дек 2015 • 2017 – ~30 фронтендеров
- 11. • Технологический стек • Процессы в компании
- 12. Технологии
- 13. • native JS • react + redux • basis.js
- 14. Native JS • ядро сайта Avito.ru • вкрапления jQuery • es2015+
- 15. React + Redux • новые проекты • подключаются как node modules
- 16. Что на react? • VIN → карма автомобиля autoteka.ru • Мессенджер avito.ru/profile/messenger • Служба поддержки support.avito.ru • Доставка b2c avito.ru/reklama/delivery • Контекстная реклама avito.ru/profile/context
- 17. • транспиляция babel • для css: stylus, clean-css • сборка gulp + webpack
- 18. SPA для pro-пользователей • ActiAgent.ru – недвижимость • ActiDealer.ru – автомобили
- 20. Acti* • написано на basis.js • инструменты basisjs-tools • в том числе csso для css
- 21. WebSocket • мессенджер • в Acti* еще и счетчики, триггеры
- 24. Процессы
- 25. • Ход разработки • Сборка, тестирование • Внедрение нового, саморазвитие
- 26. • git pull / clone / checkout • typing typing typing typing typing typing typing • git commit, git push
- 27. • git pull / clone / checkout • typing typing typing typing typing typing typing • [run tests] • git commit, git push
- 28. Подготовка к typing • Выявляем проблему • Описываем как историю • Дробим историю на части • Ставим задачу по каждой части • И – наконец-то – typing, но разработка в ветке
- 29. Что после git push?
- 30. Ревью изменений
- 31. Зачем ревью? • выше сопровождаемость • обмен знаниями • самоконтроль
- 32. Организация ревью • Таск ABC-123 • Ветка ABC-123-fix • pull request ABC-123-fix –> master • Обсуждение и тестирование изменений
- 35. Условия для merge • Есть добро от коллег • Есть добро от тестеров • Пройдены автотесты
- 36. Ответственность за аппрув • аппрувят только 1-4 самых опытных • аппрувят все
- 37. Условия для выкатки • Пройдены интеграционные тесты • Нет внешних стоп-факторов
- 38. Кто делает релиз? • боты • дежурные • все
- 40. In review 🐓 <–> 🥚 In test
- 44. Меньше рутины • Линтеры: eslint, stylelint, stylint • Ворнинги по статическому анализу кода • Запуск этого .git/hooks/pre-push и при сборке
- 45. Зафиксировать соглашения • меньше скрытых знаний • не полагаемся на свою память • инструменты: плагин с чеклистом
- 49. Лень – наш друг
- 50. Сборка
- 51. Avito.ru • webpack+gulp • uglify-js для js • clean-css для css
- 56. Сборка в Acti* • сборщик basisjs-tools-build • внутри – разбор AST, статический анализ кода • отчеты о ворнингах и ошибках realtime • csso встроен в basisjs-tools-build
- 59. SPA index.html Парсинг, анализ Дерево из AST файлов Компрессор (трансформер) Дерево из AST файлов Транслятор Сборка статики сжатый css сжатый js
- 62. index.html упоминания ресурсов (файлов) файл AST парсинг файл AST парсинг Статический анализ больше ссылок на ресурсы Дерево из AST файловАнализ дерева Отчет о разборе дерева Компрессор (трансформер) Дерево из AST файлов Транслятор сжатый css сжатый js
- 63. Отчет о разборе дерева
- 64. Отчет о разборе дерева
- 65. Выпуск релиза • боты +- devops’ы • выкатка на боевые сервера • регрессионные тесты • нотификации заинтересованным
- 68. Не фронтенд
- 69. Кто тестирует? • юнит-тесты – сами • в basis.js встроены ворнинги - заменяет некоторые тесты • ручное, пишут тест-кейсы • частично – функциональные тесты
- 70. Дизайн и бэк • спецификации (a.k.a. спеки) • живое общение
- 71. Бэк: спеки на АПИ • мобилки – еще один фронт для бэка • контракты (json-schemas) на примере Acti*
- 73. Дизайн платформа • суть: интерактивные спеки на компоненты • доклады Александра Лобашева: • SPA Meetup в Avito, апрель • РИТ / FrontendConf в Сколково, июнь
- 75. UX-исследования • UX-lab • проектирование интерфейсов • важно участие фронтендеров на ранних стадиях
- 76. Мы не одни в этой вселенной
- 77. То, чего можно избегать, но нет
- 79. 20% • Развитие платформы • Рефакторинг • Внутренние проекты
- 80. Конференции • Роман Дворнов про Rempl, CodeFest, апрель 2017 • Александр Лобашев, Дизайн-платформа, SPA Meetup, апрель 2017 • Александр Амосов, Favicon на стероидах, Moscow JS, ноябрь 2016 • Сергей Мелюков про Basis.js, Moscow JS, ноябрь 2016
- 81. Митапы • Проводим SPA Meetup с 2015, отчет 2017 • Хоcтим Moscow JS
- 84. • История • Технологии • Процессы • обсуждение изменений / code review • сборка для production • общение с не-фронтендерами • саморазвитие
- 85. Спасибо! twitter/tyanas_ github/tyanas gitter/basisjs gist со ссылками http://bit.ly/oreljs-6-2017
- 86. Присоединяйтесь к нам! • https://twitter.com/AvitoTech • https://habrahabr.ru/company/avito/ • https://github.com/avito-tech • https://hh.ru/vacancy/20223454