HTML5 Camp - JavaScript на фронте и в тылу

Доклад об опыте использования JavaScript в клиентской и серверной разработке в Яндексе.

Video https://www.techdays.ru/videos/6725.html

Transcript

1. View Slide

2. Михаил Давыдов
   JavaScript разработчик
   JavaScript
   на фронте и
   в тылу
   

   View Slide

3. Бэк-, Тулзы, Фронт-
   

   View Slide

4. Backend  
   Backend  
   Backend  
   Back-­‐   Front-­‐  
   Схема типичного сервиса
   Tools  
   

   View Slide

5. Эра *ML
   

   View Slide

6. XML – формат де-факто для веб
   • XML DTD
   • XML Schema
   • XML+XSLT=HTML
   • XML+XSLT=Все что душе угодно…
   • XMLHttpRequest
   

   View Slide

7. Back-
   

   View Slide

8. XScript @ Яндекс
   

   View Slide

9. XScript
   • Прослойка фронтэнд↔бэкэндЫ
   • ЯП на основе XML
   – "Все фронтэндеры знают XML и XSL"
   • Генерирует XML
   • +XSL…+XSL=HTML
   • И еще CORBA
   

   View Slide

10. 10
    
    href="page.xsl"?>
    
    
    
    getHttp
    http://host/
    5
    
    
    Код! Код!
    Запрос к http://host/?tag=5 !
    

    View Slide

11. 11
    
    href="page.xsl"?>
    
    
    
    getHttp
    http://host/
    5
    
    
    Код! Код!
    Запрос к http://host/?tag=5 !
    

    View Slide

12. 12
    Проблемы у разработчиков
    • XScript не любили
    –  И работал не очень быстро
    • XSLT тормозил
    • "Императивное мышление"
    

    View Slide

13. 13
    XScript+Lua/JS
    

    View Slide

14. 14
    
    href="page.xsl"?>
    
    local value = true
    xscript.state:setBool('pewpew', value)
    print('ololo')
    ]]>
    
    Код!
    

    View Slide

15. 15
    Все еще проблемы?
    • Lua/JS в XML – о_О
    • А подсветка синтаксиса?
    • Сложности с восприятием кода
    • Часть кода писали на XML
    • Любое расширение – бинарник
    • Маленькое сообщество
    

    View Slide

16. Front-
    

    View Slide

17. y5+BEM/XML
    

    View Slide

18. А как дела на фронте?
    • BEM
    –  Архитектура <3
    –  Библиотека компонентов <3
    • y5
    –  "Свой jQuery"
    –  Нужно обучать новичков
    –  Маленькое комунити
    –  Плагины <3
    

    View Slide

19. Tools
    

    View Slide

20. Инструменты
    • ycssjs
    –  Сборка CSS и JS
    –  Оптимизация CSS и JS
    –  Регулярки и Perl…
    • Makefile, bash
    –  Запуск необходимых задач
    –  Компоновка CSS и JS
    • И другие инструменты…
    

    View Slide

21. Эра JS*
    

    View Slide

22. Front-
    

    View Slide

23. Зачем делать
    второй jQuery?
    

    View Slide

24. +
    Что изменилось на фронтах
    

    View Slide

25. Что изменилось на фронтах
    • Отказались от y5 в пользу jQuery
    –  Из важных частей y5 сделали плагины
    –  jQuery не нужно дополнительно обучать
    –  Нет расходов на поддержку y5
    –  Огромное сообщество
    • BEM
    –  BEMJSON
    –  Архитектура не изменилась
    –  Библиотека блоков не изменилась
    

    View Slide

26. Был постепенный
    переход на jQuery
    

    View Slide

27. Сейчас в проекте может быть это
    +
    

    View Slide

28. Back-
    

    View Slide

29. Что изменилось на фронт-бэке
    

    View Slide

30. Что изменилось на фронт-бэке
    

    View Slide

31. и переехать на ноду
    Нельзя просто так взять
    

    View Slide

32. Проекты на XScript
    

    View Slide

33. Что изменилось на фронт-бэке
    • XScript – deprecated
    –  Старые проекты поддерживаются
    –  Новые пишутся на Node или XScript JS
    –  Стараются отходить от XML в сторону JS
    • Node.js <3
    –  Были проблемы с версиями
    –  Внутренний npm репозиторий
    –  Портировали важные модули XScript
    

    View Slide

34. Что из ноды используем
    • Портированные модули
    –  Работа с "особыми" куками
    –  Определение языка пользователя
    –  Определение девайса
    • Express.js
    • Cluster
    • Promise: Q или When
    • Streams & Buffers
    

    View Slide

35. RPS 1000*/core
    *в районе этого значения
    
    

    View Slide

36. Tools
    

    View Slide

37. -tools
    Что изменилось в инструментах
    Borschik
    and more…
    

    View Slide

38. BEM tools
    • Хэлперы для создания сущностей
    • Разработческий сервер
    • Сборка статики
    – html, css, js блоков, bemhtml
    https://github.com/bem/bem-tools
    

    View Slide

39. Borschik
    • Сборка текстовых файлов
    • Минимизация CSS и JS
    – CSSO
    – UglifyJS
    • Замена относительных путей
    • «Заморозка» картинок
    https://github.com/veged/borschik
    

    View Slide

40. Оптимизация графики: IMGO, SVGO
    • IMGO
    –  Тонкая оптимизация растровых изображений
    –  Использует разные минификаторы
    • SVGO
    –  Тонкая оптимизация SVG
    https://github.com/svg/svgo
    https://github.com/imgo/imgo
    

    View Slide

41. LMD – Lazy Module Declaration
    LMD
    

    View Slide

42. LMD – ленивая декларация модулей
    • Организация модульности
    –  CommonJS/Modules 1.0
    • Сборка CommonJS/Modules
    • Организация сборок
    –  Сборок бывает очень много: dev, prod+ru, prod+…
    • Встроенная аналитика
    –  Статическая (при сборке)
    –  Динамическая
    https://github.com/azproduction/lmd
    

    View Slide

43. Grunt.js – Makefile эры JS*
    

    View Slide

44. Что же мы получили
    • Практически 100% JavaScript
    –  Инструменты
    –  Node.js
    –  Makefile отчасти для сборки пакетов
    • Использование народных средств
    –  jQuery
    –  Grunt.js
    –  Backbone, underscore…
    • Open-Source – мы открыты!
    –  BEM, Borschik, CSSO, IMGO, SVGO, LMD
    

    View Slide

45. Михаил Давыдов
    JavaScript разработчик
    azproduction@yandex-team.ru
    azproduction
    Спасибо
    

    View Slide