Front days Фронтенд для миллионов Avito
•
0 likes•348 views
20 мая 2017 Тольятти #frontdays все ссылки в одном месте https://bit.ly/frontdays2017 Анастасия Горячева, Avito О докладчике Фронтенд тим лид в Avito. Фанат инструментов разработки для фреймфорка basis.js. В веб-разработке больше 12-ти лет. Из них 5 лет имею дело со сложными одностраничными приложениями. Последние пару лет вместе с командой пилим SPA на basis.js О докладе Требовательность аудитории Авито растет постоянно. Мир, технологии – всё меняется. Ожидания пользователей всё выше и выше. Как меняемся мы сами, чтобы дарить больше радости нашим пользователям? Почему эти изменения – внезапно – помогают нам самим развиваться в профессии? Какие боли и выгоды приносит текущий стек технологий, при чем тут дизайн-платформа, есть ли жизнь без react, куда мы катим open source и что будет дальше. Описание на сайте мероприятия https://frontdays.ru/#openreport_anastasiyagoryacheva06409663226af2f3114485aa4e0a23b4
Recommended
Recommended
More Related Content
Similar to Front days Фронтенд для миллионов Avito
Similar to Front days Фронтенд для миллионов Avito (20)
Front days Фронтенд для миллионов Avito
- 1. Фронтенд для миллионов Анастасия Горячева Avito Frontdays, Тольятти, май 2017
- 2. Анастасия Горячева • Frontend teamlead в Avito • basis.js contributor • github/tyanas • twitter/tyanas_
- 4. Avito.ru • Популярный • Высоконагруженный Подробнее в блоге на Хабре
- 5. История
- 8. • 2007 – старт Avito • ~2012 – 1-й фронтендер • … • 2017 – ~30 фронтендеров
- 9. • 2007 – старт Avito • ~2012 – 1-й фронтендер • … –> Фронтенд в Avito WSD, дек 2015 • 2017 – ~30 фронтендеров
- 12. • Технологический стек • Процессы в компании
- 13. Технологии
- 14. • native JS • react + redux • basis.js
- 15. Native JS • ядро сайта Avito.ru • вкрапления jQuery • es2015+
- 16. React + Redux • новые проекты • подключаются как node modules
- 17. Что на react? • autoteka.ru: VIN → карма автомобиля • Доставка b2c • Контекстная реклама • HelpDesk • Мессенджер
- 18. • транспиляция babel • для css: stylus, css-clean • сборка gulp + webpack
- 19. SPA для pro-пользователей • ActiAgent.ru недвижимость • ActiDealer.ru автомобили
- 21. Acti* • написано на basis.js • инструменты basisjs-tools • в том числе csso для css
- 22. WebSocket • мессенджер • в Acti* еще и счетчики, триггеры
- 24. Процессы
- 25. • Ход разработки • Сборка, тестирование • Внедрение нового, саморазвитие
- 26. Что после git push?
- 27. Ревью кода • разработка в ветках • выше сопровождаемость • обмен знаниями • самоконтроль
- 30. Ответственность за аппрув • аппрувят только 1-4 самых опытных • аппрувят все • релизят дежурные • релизят все
- 32. In review 🐓 <–> 🥚 In test
- 36. Меньше рутины • Линтеры: eslint, stylelint, stylint • Ворнинги по статическому анализу кода • Запуск этого .git/hooks/pre-push и при сборке
- 37. Зафиксировать соглашения • меньше скрытых знаний • не полагаемся на свою память • инструменты: плагин с чеклистом
- 41. Лень – наш друг
- 42. Сборка
- 43. Avito.ru • webpack+gulp • uglify-js для js • css-clean для css
- 48. Сборка в Acti* • сборщик basisjs-tools-build • внутри – разбор AST, статический анализ кода • отчеты о ворнингах и ошибках realtime • csso встроен в basisjs-tools-build
- 51. SPA index.html Парсинг, анализ Дерево из AST файлов Компрессор (трансформер) Дерево из AST файлов Транслятор Сборка статики сжатый css сжатый js
- 54. index.html упоминания ресурсов (файлов) файл AST парсинг файл AST парсинг Статический анализ больше ссылок на ресурсы Дерево из AST файловАнализ дерева Отчет о разборе дерева Компрессор (трансформер) Дерево из AST файлов Транслятор сжатый css сжатый js
- 55. Отчет о разборе дерева
- 56. Отчет о разборе дерева
- 57. Выпуск релиза • боты +- devops’ы • выкатка на боевые сервера • регрессионные тесты • нотификации заинтересованным
- 60. Не фронтенд
- 61. Кто тестирует? • юнит-тесты – сами • в basis.js встроены ворнинги - заменяет некоторые тесты • ручное, пишут тест-кейсы • частично – функциональные тесты
- 62. Дизайн и бэк • спецификации (a.k.a. спеки) • живое общение
- 63. Бэк: спеки на АПИ • мобилки – еще один фронт для бэка • контракты (json-schemas) на примере Acti*
- 65. Дизайн платформа • суть: интерактивные спеки на компоненты • текущий статус: доклад на SPA Meetup, апрель • подробнее будет на РИТ в июне, доклад Александра Лобашева
- 67. UX-исследования • UX-lab • проектирование интерфейсов • важно участие фронтендеров на ранних стадиях
- 68. Мы не одни в этой вселенной
- 69. То, чего можно избегать, но нет
- 70. 20% • Развитие платформы • Рефакторинг • Внутренние проекты
- 71. Конференции • Роман Дворнов про Rempl, CodeFest, апрель 2017 • Александр Лобашев, Дизайн-платформа, SPA Meetup, апрель 2017 • Александр Амосов, Favicon на стероидах, Moscow JS, ноябрь 2016 • Сергей Мелюков про Basis.js, Moscow JS, ноябрь 2016
- 72. Митапы • Проводим SPA Meetup с 2015, отчет 2017 • Хоcтим Moscow JS
- 75. Спасибо! twitter/tyanas_ github/tyanas gitter/basisjs gist со ссылками http://bit.ly/frontdays2017
- 76. Присоединяйтесь к нам! • https://twitter.com/AvitoTech • https://habrahabr.ru/company/avito/ • https://github.com/avito-tech • https://hh.ru/vacancy/20223454