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.

Фронтенд для миллионов (Орёл)

138 Aufrufe

Veröffentlicht am

Технологии и процессы в клиентской разработке сервиса Avito.ru
javascript meetup
Орёл, 24 июня 2017

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Фронтенд для миллионов (Орёл)

  1. 1. Фронтенд для миллионов Анастасия Горячева Avito Орёл, 24 июня 2017
  2. 2. Анастасия Горячева • Frontend team lead в Avito • basis.js contributor • github/tyanas • twitter/tyanas_
  3. 3. Avito.ru • Популярный • Высоконагруженный Подробнее в блоге на Хабре
  4. 4. История
  5. 5. без фронтенда
  6. 6. без фронтенда фронтендеров
  7. 7. • 2007 – старт Avito • ~2012 – 1-й фронтендер • … • 2017 – ~30 фронтендеров
  8. 8. • 2007 – старт Avito • ~2012 – 1-й фронтендер • … –> Фронтенд в Avito WSD, дек 2015 • 2017 – ~30 фронтендеров
  9. 9. • Технологический стек • Процессы в компании
  10. 10. Технологии
  11. 11. • native JS • react + redux • basis.js
  12. 12. Native JS • ядро сайта Avito.ru • вкрапления jQuery • es2015+
  13. 13. React + Redux • новые проекты • подключаются как node modules
  14. 14. Что на react? • VIN → карма автомобиля autoteka.ru • Мессенджер avito.ru/profile/messenger • Служба поддержки support.avito.ru • Доставка b2c avito.ru/reklama/delivery • Контекстная реклама avito.ru/profile/context
  15. 15. • транспиляция babel • для css: stylus, clean-css • сборка gulp + webpack
  16. 16. SPA для pro-пользователей • ActiAgent.ru – недвижимость • ActiDealer.ru – автомобили
  17. 17. Acti* • написано на basis.js • инструменты basisjs-tools • в том числе csso для css
  18. 18. WebSocket • мессенджер • в Acti* еще и счетчики, триггеры
  19. 19. Перешли
 на WebSocket (частично)
  20. 20. Процессы
  21. 21. • Ход разработки • Сборка, тестирование • Внедрение нового, саморазвитие
  22. 22. • git pull / clone / checkout • typing typing typing typing typing typing typing • git commit, git push
  23. 23. • git pull / clone / checkout • typing typing typing typing typing typing typing • [run tests] • git commit, git push
  24. 24. Подготовка к typing • Выявляем проблему • Описываем как историю • Дробим историю на части • Ставим задачу по каждой части • И – наконец-то – typing, но разработка в ветке
  25. 25. Что после git push?
  26. 26. Ревью изменений
  27. 27. Зачем ревью? • выше сопровождаемость • обмен знаниями • самоконтроль
  28. 28. Организация ревью • Таск ABC-123 • Ветка ABC-123-fix • pull request ABC-123-fix –> master • Обсуждение и тестирование изменений
  29. 29. Условия для merge • Есть добро от коллег • Есть добро от тестеров • Пройдены автотесты
  30. 30. Ответственность за аппрув • аппрувят только 1-4 самых опытных • аппрувят все
  31. 31. Условия для выкатки • Пройдены интеграционные тесты • Нет внешних стоп-факторов
  32. 32. Кто делает релиз? • боты • дежурные • все
  33. 33. In review 🐓 <–> 🥚 In test
  34. 34. Как ускорить ревью?
  35. 35. Меньше рутины • Линтеры: eslint, stylelint, stylint • Ворнинги по статическому анализу кода • Запуск этого .git/hooks/pre-push и при сборке
  36. 36. Зафиксировать соглашения • меньше скрытых знаний • не полагаемся на свою память • инструменты: плагин с чеклистом
  37. 37. Лень – наш друг
  38. 38. Сборка
  39. 39. Avito.ru • webpack+gulp • uglify-js для js • clean-css для css
  40. 40. aaa.css bbb.styl ab.css.gz
  41. 41. aaa.css bbb.styl transpile with stylus aaa.css bbb.css concat aaabbb.css clean-css ab.css gzip ab.css.gz
  42. 42. aaa.css bbb.styl transpile with stylus aaa.css bbb.css concat aaabbb.css clean-cssab.css gzip ab.css.gz minify сборка CSS
  43. 43. aaa.js bbb.es6 transpile with babel aaa.js bbb.js concat aaabbb.js uglify-jsab.js gzip ab.js.gz minify сборка JS
  44. 44. Сборка в Acti* • сборщик basisjs-tools-build • внутри – разбор AST, статический анализ кода • отчеты о ворнингах и ошибках realtime • csso встроен в basisjs-tools-build
  45. 45. SPA index.html сжатый css сжатый js
  46. 46. SPA index.html Парсинг, анализ Дерево из AST файлов Компрессор (трансформер) Дерево из AST файлов Транслятор сжатый css сжатый js
  47. 47. SPA index.html Парсинг, анализ Дерево из AST файлов Компрессор (трансформер) Дерево из AST файлов Транслятор Сборка статики сжатый css сжатый js
  48. 48. SPA index.html Парсинг, анализ Дерево из AST файлов Компрессор (трансформер) Дерево из AST файлов Транслятор сжатый css сжатый js
  49. 49. index.html Парсинг, анализ Дерево из AST файлов Компрессор (трансформер) Дерево из AST файлов Транслятор сжатый css сжатый js
  50. 50. index.html упоминания ресурсов (файлов) файл AST парсинг файл AST парсинг Статический анализ больше ссылок на ресурсы Дерево из AST файловАнализ дерева Отчет о разборе дерева Компрессор (трансформер) Дерево из AST файлов Транслятор сжатый css сжатый js
  51. 51. Отчет о разборе дерева
  52. 52. Отчет о разборе дерева
  53. 53. Выпуск релиза • боты +- devops’ы • выкатка на боевые сервера • регрессионные тесты • нотификации заинтересованным
  54. 54. Прозрачность
 упрощает
 контроль
  55. 55. Не фронтенд
  56. 56. Кто тестирует? • юнит-тесты – сами • в basis.js встроены ворнинги - заменяет некоторые тесты • ручное, пишут тест-кейсы • частично – функциональные тесты
  57. 57. Дизайн и бэк • спецификации (a.k.a. спеки) • живое общение
  58. 58. Бэк: спеки на АПИ • мобилки – еще один фронт для бэка • контракты (json-schemas) 
 на примере Acti*
  59. 59. Дизайн платформа • суть: интерактивные спеки на компоненты • доклады Александра Лобашева: • SPA Meetup в Avito, апрель • РИТ / FrontendConf в Сколково, июнь
  60. 60. UX-исследования • UX-lab • проектирование интерфейсов • важно участие фронтендеров на ранних стадиях
  61. 61. Мы не одни
 в этой вселенной
  62. 62. То, чего можно избегать, но нет
  63. 63. 20% • Развитие платформы • Рефакторинг • Внутренние проекты
  64. 64. Конференции • Роман Дворнов про Rempl,
 CodeFest, апрель 2017 • Александр Лобашев, Дизайн-платформа, 
 SPA Meetup, апрель 2017 • Александр Амосов, Favicon на стероидах,
 Moscow JS, ноябрь 2016 • Сергей Мелюков про Basis.js,
 Moscow JS, ноябрь 2016
  65. 65. Митапы • Проводим SPA Meetup с 2015, 
 отчет 2017 • Хоcтим Moscow JS
  66. 66. Open Source github/css/csso github/csstree twitter/rempljs github/component-inspector basisjs.com github/webpack-analyzer
  67. 67. Покажи
 свою
 работу!
  68. 68. • История • Технологии • Процессы • обсуждение изменений / code review • сборка для production • общение с не-фронтендерами • саморазвитие
  69. 69. Спасибо! twitter/tyanas_ github/tyanas gitter/basisjs gist со ссылками http://bit.ly/oreljs-6-2017
  70. 70. Присоединяйтесь к нам! • https://twitter.com/AvitoTech • https://habrahabr.ru/company/avito/ • https://github.com/avito-tech • https://hh.ru/vacancy/20223454
  71. 71. Вопросы? twitter/tyanas_

×