FrontTalks Meetup #2. 2013: Михаил Давыдов – JavaScript на фронте и в тылу

Какую технологию использовать внутреннюю или "народную"? Node.js в продакшене? В докладе я расскажу о жизни JavaScript разработчика в Яндексе.

Transcript

1. #FrontTalks
2. Михаил Давыдов JavaScript разработчик JavaScript на фронте и в тылу
3. Бэк-, Тулзы, Фронт-
4. Backend   Backend   Backend   Back-­‐   Front-­‐   Схема типичного сервиса Tools  
5. Эра *ML
6. XML – формат де-факто для веб • XML DTD • XML Schema • XML+XSLT=HTML • XML+XSLT=Все что душе угодно… • XMLHttpRequest
7. Back-
8. XScript • Прослойка фронтэнд↔бэкэндЫ • ЯП на основе XML – "Все фронтэндеры знают XML и XSL" • Генерирует XML • +XSL…+XSL=HTML • И еще CORBA
9. 9 <?xml version="1.0" ?> <?xml-stylesheet type="text/xsl" href="page.xsl"?> <page xmlns:x="..." xmlns:xi="..."> <xscript all-threaded="no"/> <x:http> <method>getHttp</method> <param type="string">http://host/</param> <param name="tag">5</param> </x:http> </page> Код! Код! Запрос к http://host/?tag=5 !
10. 10 <?xml version="1.0" ?> <?xml-stylesheet type="text/xsl" href="page.xsl"?> <page xmlns:x="..." xmlns:xi="..."> <lua><![CDATA[ local value = true xscript.state:setBool('pewpew', value) print('ololo') ]]></lua> </page> XScript+Lua/JS
11. 11 Что не так • Lua/JS + XML • "Программирование на XML" • XScript не любили • XSLT тормозил
12. Front-
13. А как дела на фронте? • BEM – верстка –  Архитектура <3 –  Библиотека компонентов <3 • y5 – представление –  "Свой jQuery" –  Нужно обучать новичков –  Маленькое комунити –  Плагины <3
14. Tools
15. Инструменты • ycssjs –  Сборка CSS и JS –  Оптимизация CSS и JS –  Регулярки и Perl… • Makefile, bash –  Запуск необходимых задач –  Компоновка CSS и JS • И другие инструменты…
16. Эра JS*
17. Front-
18. Что изменилось на фронтах • Перешли с y5 на jQuery –  Из важных частей y5 сделали плагины –  jQuery не нужно дополнительно обучать –  Нет расходов на поддержку y5 –  Огромное сообщество • BEM –  BEMJSON –  Архитектура не изменилась –  Библиотека блоков не изменилась
19. Сейчас в проекте может быть это +
20. Back-
21. Что изменилось на фронт-бэке
22. Что изменилось на фронт-бэке
23. и переехать на ноду Нельзя просто так взять
24. Что из ноды используем • Портированные модули –  Работа с "особыми" куками –  Определение языка пользователя –  Определение девайса • Express.js • Cluster • Promise: Q или When • Streams & Buffers
25. RPS 1000*/core *в районе этого значения
26. Tools
27. -tools Что изменилось в инструментах Borschik and more…
28. BEM tools • Хэлперы для создания сущностей • Разработческий сервер • Сборка статики – html, css, js блоков, bemhtml https://github.com/bem/bem-tools
29. Borschik • Сборка текстовых файлов • Минимизация CSS и JS – CSSO – UglifyJS • Замена относительных путей • «Заморозка» картинок https://github.com/veged/borschik
30. Оптимизация графики: IMGO, SVGO • IMGO –  Тонкая оптимизация растровых изображений –  Использует разные минификаторы • SVGO –  Тонкая оптимизация SVG https://github.com/svg/svgo https://github.com/imgo/imgo
31. LMD – Lazy Module Declaration LMD
32. Grunt.js – Makefile эры JS*
33. Что же мы получили • Практически 100% JavaScript –  Инструменты –  Node.js –  Makefile отчасти • Использование народных средств –  jQuery –  Grunt.js –  Backbone, underscore… • Open-Source – мы открыты! –  BEM, Borschik, CSSO, IMGO, SVGO, LMD
34. Михаил Давыдов JavaScript разработчик azproduction@yandex-team.ru azproduction Спасибо