![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>
Код!](https://image.slidesharecdn.com/html5camp-javascript-140318114333-phpapp01/85/JavaScript-on-frontend-and-backend-in-Russian-14-320.jpg)
More Related Content
What's hot (20)
Similar to JavaScript on frontend and backend (in Russian (20)
More from Mikhail Davydov (16)
JavaScript on frontend and backend (in Russian
- 2. Михаил Давыдов JavaScript разработчик JavaScript на фронте и в тылу
- 4. Backend Backend Backend Back-‐ Front-‐ Схема типичного сервиса Tools
- 5. Эра *ML
- 6. XML – формат де-факто для веб • XML DTD • XML Schema • XML+XSLT=HTML • XML+XSLT=Все что душе угодно… • XMLHttpRequest
- 7. Back-
- 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 тормозил • "Императивное мышление"
- 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-
- 24. + Что изменилось на фронтах
- 25. Что изменилось на фронтах • Отказались от y5 в пользу jQuery – Из важных частей y5 сделали плагины – jQuery не нужно дополнительно обучать – Нет расходов на поддержку y5 – Огромное сообщество • BEM – BEMJSON – Архитектура не изменилась – Библиотека блоков не изменилась
- 26. Был постепенный переход на jQuery
- 27. Сейчас в проекте может быть это +
- 28. Back-
- 29. Что изменилось на фронт-бэке
- 30. Что изменилось на фронт-бэке
- 31. и переехать на ноду Нельзя просто так взять
- 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