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

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

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

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

B827d6cfdfbcfce33700b0e6cc03e344?s=128

Mikhail Davydov

September 23, 2013
Tweet

Transcript

  1. None
  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 @ Яндекс

  9. XScript • Прослойка фронтэнд↔бэкэндЫ • ЯП на основе XML – "Все фронтэндеры знают

    XML и XSL" • Генерирует XML • +XSL…+XSL=HTML • И еще CORBA
  10. 10 <?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 !
  11. 11 <?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 !
  12. 12 Проблемы у разработчиков • XScript не любили –  И работал

    не очень быстро • XSLT тормозил • "Императивное мышление"
  13. 13 XScript+Lua/JS

  14. 14 <?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> Код!
  15. 15 Все еще проблемы? • Lua/JS в XML – о_О • А

    подсветка синтаксиса? • Сложности с восприятием кода • Часть кода писали на XML • Любое расширение – бинарник • Маленькое сообщество
  16. Front-

  17. y5+BEM/XML

  18. А как дела на фронте? • BEM –  Архитектура <3 – 

    Библиотека компонентов <3 • y5 –  "Свой jQuery" –  Нужно обучать новичков –  Маленькое комунити –  Плагины <3
  19. Tools

  20. Инструменты • ycssjs –  Сборка CSS и JS –  Оптимизация CSS

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

  22. Front-

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

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

  25. Что изменилось на фронтах • Отказались от y5 в пользу jQuery

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

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

  28. Back-

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

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

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

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

  33. Что изменилось на фронт-бэке • XScript – deprecated –  Старые проекты

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

    куками –  Определение языка пользователя –  Определение девайса • Express.js • Cluster • Promise: Q или When • Streams & Buffers
  35. RPS 1000*/core *в районе этого значения

  36. Tools

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

  38. BEM tools • Хэлперы для создания сущностей • Разработческий сервер • Сборка статики

    – html, css, js блоков, bemhtml https://github.com/bem/bem-tools
  39. Borschik • Сборка текстовых файлов • Минимизация CSS и JS – CSSO – UglifyJS

    • Замена относительных путей • «Заморозка» картинок https://github.com/veged/borschik
  40. Оптимизация графики: IMGO, SVGO • IMGO –  Тонкая оптимизация растровых изображений

    –  Использует разные минификаторы • SVGO –  Тонкая оптимизация SVG https://github.com/svg/svgo https://github.com/imgo/imgo
  41. LMD – Lazy Module Declaration LMD

  42. LMD – ленивая декларация модулей • Организация модульности –  CommonJS/Modules 1.0

    • Сборка CommonJS/Modules • Организация сборок –  Сборок бывает очень много: dev, prod+ru, prod+… • Встроенная аналитика –  Статическая (при сборке) –  Динамическая https://github.com/azproduction/lmd
  43. Grunt.js – Makefile эры JS*

  44. Что же мы получили • Практически 100% JavaScript –  Инструменты – 

    Node.js –  Makefile отчасти для сборки пакетов • Использование народных средств –  jQuery –  Grunt.js –  Backbone, underscore… • Open-Source – мы открыты! –  BEM, Borschik, CSSO, IMGO, SVGO, LMD
  45. Михаил Давыдов JavaScript разработчик azproduction@yandex-team.ru azproduction Спасибо