javascript on frontend and backend (in russian
DESCRIPTION
TRANSCRIPT
Михаил Давыдов JavaScript разработчик
JavaScript на фронте и в тылу
Бэк-, Тулзы, Фронт-
Backend
Backend
Backend
Back-‐ Front-‐
Схема типичного сервиса
Tools
Эра *ML
XML – формат де-факто для веб
• XML DTD • XML Schema • XML+XSLT=HTML • XML+XSLT=Все что душе угодно… • XMLHttpRequest
Back-
XScript @ Яндекс
XScript
• Прослойка фронтэнд↔бэкэндЫ • ЯП на основе XML
– "Все фронтэндеры знают XML и XSL"
• Генерирует XML • +XSL…+XSL=HTML • И еще CORBA
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
<?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
Проблемы у разработчиков
• XScript не любили – И работал не очень быстро
• XSLT тормозил • "Императивное мышление"
13
XScript+Lua/JS
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
Все еще проблемы?
• Lua/JS в XML – о_О • А подсветка синтаксиса? • Сложности с восприятием кода • Часть кода писали на XML • Любое расширение – бинарник • Маленькое сообщество
Front-
y5+BEM/XML
А как дела на фронте?
• BEM – Архитектура <3 – Библиотека компонентов <3
• y5 – "Свой jQuery" – Нужно обучать новичков – Маленькое комунити – Плагины <3
Tools
Инструменты
• ycssjs – Сборка CSS и JS – Оптимизация CSS и JS – Регулярки и Perl…
• Makefile, bash – Запуск необходимых задач – Компоновка CSS и JS
• И другие инструменты…
Эра JS*
Front-
Зачем делать второй jQuery?
+
Что изменилось на фронтах
Что изменилось на фронтах
• Отказались от y5 в пользу jQuery – Из важных частей y5 сделали плагины – jQuery не нужно дополнительно обучать – Нет расходов на поддержку y5 – Огромное сообщество
• BEM – BEMJSON – Архитектура не изменилась – Библиотека блоков не изменилась
Был постепенный переход на jQuery
Сейчас в проекте может быть это
+
Back-
Что изменилось на фронт-бэке
Что изменилось на фронт-бэке
и переехать на ноду
Нельзя просто так взять
Проекты на XScript
Что изменилось на фронт-бэке
• XScript – deprecated – Старые проекты поддерживаются – Новые пишутся на Node или XScript JS – Стараются отходить от XML в сторону JS
• Node.js <3 – Были проблемы с версиями – Внутренний npm репозиторий – Портировали важные модули XScript
Что из ноды используем
• Портированные модули – Работа с "особыми" куками – Определение языка пользователя – Определение девайса
• Express.js • Cluster • Promise: Q или When • Streams & Buffers
RPS 1000*/core *в районе этого значения
Tools
-tools
Что изменилось в инструментах
Borschik and more…
BEM tools
• Хэлперы для создания сущностей • Разработческий сервер • Сборка статики
– html, css, js блоков, bemhtml
https://github.com/bem/bem-tools
Borschik
• Сборка текстовых файлов • Минимизация CSS и JS
– CSSO – UglifyJS
• Замена относительных путей • «Заморозка» картинок
https://github.com/veged/borschik
Оптимизация графики: IMGO, SVGO
• IMGO – Тонкая оптимизация растровых изображений – Использует разные минификаторы
• SVGO – Тонкая оптимизация SVG
https://github.com/svg/svgo https://github.com/imgo/imgo
LMD – Lazy Module Declaration
LMD
LMD – ленивая декларация модулей
• Организация модульности – CommonJS/Modules 1.0
• Сборка CommonJS/Modules • Организация сборок
– Сборок бывает очень много: dev, prod+ru, prod+…
• Встроенная аналитика – Статическая (при сборке) – Динамическая
https://github.com/azproduction/lmd
Grunt.js – Makefile эры JS*
Что же мы получили
• Практически 100% JavaScript – Инструменты – Node.js – Makefile отчасти для сборки пакетов
• Использование народных средств – jQuery – Grunt.js – Backbone, underscore…
• Open-Source – мы открыты! – BEM, Borschik, CSSO, IMGO, SVGO, LMD
