$30 off During Our Annual Pro Sale. View Details »

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

Mikhail Davydov
September 23, 2013

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

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

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

Mikhail Davydov

September 23, 2013
Tweet

More Decks by Mikhail Davydov

Other Decks in Education

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 разработчик
    [email protected]
    azproduction
    Спасибо

    View Slide