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

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Эра *ML

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Back-

Slide 8

Slide 8 text

XScript @ Яндекс

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

10 getHttp http://host/ 5 Код! Код! Запрос к http://host/?tag=5 !

Slide 11

Slide 11 text

11 getHttp http://host/ 5 Код! Код! Запрос к http://host/?tag=5 !

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

13 XScript+Lua/JS

Slide 14

Slide 14 text

14 Код!

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Front-

Slide 17

Slide 17 text

y5+BEM/XML

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Tools

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Эра JS*

Slide 22

Slide 22 text

Front-

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Back-

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Проекты на XScript

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Tools

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

LMD – Lazy Module Declaration LMD

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Grunt.js – Makefile эры JS*

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Михаил Давыдов JavaScript разработчик [email protected] azproduction Спасибо