Embed Size (px)
Citation preview
SPA инструментыРоман Дворнов
AvitoSPA Meetup, февраль 2015
О себе• Работаю в Avito • Делаю SPA • Автор basis.js
2
Все непросто…
3
Веб сегодня – большой мир возможностей...
4
Бла-бла-бла…
5
Программирование абстрактно, нужно многое держать в голове –
легко упустить детали
6
Нам нужны помощники – инструменты, которые помогут нам больше видеть и понимать
7
Слож
ность
(кол
-во бо
ли)
Размер проекта (в попугаях)
Все делаем сами
8
Слож
ность
(кол
-во бо
ли)
Размер проекта (в попугаях)
Все делаем самиИспользуем инструменты
9
Инструменты
10
Типы инструментов
• среда разработки – редаторы, IDE + плагины
• консольные – командная строка
• браузерные – in-app и плагины
11
Среда разработки• Нам "не повезло" – веб-технологии слишком гибкие
• либо базовые вещи – мало подсказок
• либо все подряд – слишком много подсказок
• обламываемся, если CommonJS, ES6 modules…
• обламываемся, если среда не знает "фреймворк"
12
Консольные инструменты• Расцвет эпохи Task Runner'ов (node.js, io.js)
• "сборка" - конкатенация, пре-/пост-процессоры, ...
• FS watch – live reload, пересборка, ... • запуск тестов, линтеры, валидаторы • …
13
Браузерные инструменты
• браузерные "Developer Tools"
• простые утилитарные плагины
• плагины фреймворков (React, Ember, Basis.js)
• runtime приложения
14
Что делать, если существующих инструментов не хватает?
15
Создать свои!
16
Лучше день потерять, потом за 5 минут долететь…
Главное видеть проблемы и стараться решать их
18
Какого типа инструменты делать?
19
В идеале – все три
20
Среда разработки
Консольные инструменты
Браузерные решения
+
+
Сборка
21
Консольный инструмент
Обычная практика• находим файлы по маске
• прогоняем через пре-/пост-процессоры
• объединяем, минизируем
• ...
• PROFIT!22
Плюсы и минусы
+ достаточно просто
– разные типы контента обрабатываются независимо
– файлы попадают в сборку, без разбора используются или нет
– каждое изменение файла – пересборка
23
А как по другому?
24
В идеале сборщик должен понять, что мы хотели
и сделать из этого оптимальную сборку
25
Сценарий• указываем html-файл (у нас же single page!)
• он находит используемые файлы
• прогоняет через пре-/пост-процессоры и т.д. • объединяет, перестраивает, перелинковывает контент
• ...
• PROFIT!26
Плюсы и минусы
+ не нужно объяснять лишнего сборщику
+ в сборку попадается только нужное
– несколько сложнее реализация сборщика
– менее надежно (не пишите непонятного ;)
27
DEMO
28
Ключевой компонент – профиль приложения
29
Профиль приложения
• граф зависимостей – в частном случае файлы и их связи
• факты о контенте – что и где используется
30
Как собрать профиль?• для этого сборщик должен быть немного
"браузером" :)
• разобрать контент "файлов"
• найти и интерпритировать конструкции
• собрать информацию воедино31
Разбор полетов
32
контента
AST: туда и обратно
Способы работы с контентом
• Как со строкой – Regular Expressions
• Структурированное представление – AST*
33
* Abstract Syntax Tree
RegExp+ дешевое решение для простых задач
– под каждую задачу свой RegExp
– ненадежно
– трудно поддерживать и расширять
– почти невозможно делать сложные вещи34
AST+ надежно + универсальное решение + гораздо проще поддерживать + возможность выполнять задачи любой сложности – более дорогое решение для простых задач – можно потерять часть информации (формат и т.д.)
35
Наш выбор – AST
36
Пример
37
ASTCSS
[ "stylesheet", [ "atrules", [ "atkeyword", [ "ident", "import" ] ], [ "s", " " ], [ "string", "'path/to/file.css'" ] ]]
@import 'path/to/file.css';
gonzales (csso)
Пример
38
ASTJavaScript
[ "toplevel", [ [ "var", [ [ "module", [ "call", [ "name", "require" ], [ [ "string", "module" ] ] ] ] ] ]] ]
var module = require('module');
uglifyjs 1.x
Пример
39
ASTJavaScript
{ "type": "Program", "body": [ { "type": "VariableDeclaration", "declarations": [ { "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "module" }, ...
var module = require('module');
ESTree (Esprima, uglifyjs 2.x, …)
Все уже придумано до нас
• JavaScript – Esprima, acorn, uglifyjs, …
• CSS – gonzales (csso), postCSS, …
• (X)HTML, XML – htmlparser2, sax, …
40
Для многих форматов есть парсеры, производящие AST
Работаем с AST• walker – делает рекурсивный обход дерева
• анализ = walker + сбор фактов
• трансформер (transformer) = walker + модифицикация дерева
• транслятор (translator) = walker + генерация кода (строка)
41
Пример walker'а
42
function gonzalesAstWalker(ast, handlers){ function walk(token){ for (var i = 2, child; child = token[i]; i++) { var handler = handlers[child[1]]; if (typeof handler == 'function') handler(child); walk(child); } }!
walk([{}, '', ast]);};
для AST производимого gonzales
Используем
43
var ast = gonzales.parse( '.foo { background: url("foo.jpg"); }' + '.bar { background: url("bar.png"); }', 'stylesheet', true);!
gonzalesAstWalker(ast, { 'uri': function(token){ console.log(token[2][2]); }});
находим все url(…)
Вывод в консоли: "foo.jpg""bar.png"
Поиск Священного Грааля
44
связей
HTML• <script src="{url}"></script>• <script>{inlineScript}</script>• <link rel="stylesheet" href="{url}">• <style>{inlineStyle}</style>• <img src="{url}">• <element style="{inlineStyleBlock}">• ...
45
CSS
• @import {url}
• url({url})
46
CSS
• @import {url}
• url({url})
46
Вы уже знаете как это сделать ;)
JavaScript
47
Все несколько сложнее…
Нужно несколько проходов и больше телодвижений
JavaScript проход №1• определяем области видимости • для определенных значений добавляем
обработчики:
48
var fnToken = someScope.get('require');fnToken.run = function(token, args){ // интерпритация функции для сборщика};
JavaScript проход №2• делаем базовую интерпритацию
• объявления, присвоения • вызов функций • return • стараемся понять, что можем понять
49
Примерно вот так
50
jsAstWalker(ast, { 'call': function(token, scope){ var expr = token[1]; var args = token[2]; var fn = scope.resolve(expr);!
if (fn && fn[0] == 'function' && fn.run) fn.run(token, args.map(function(a){ return scope.resolve(a) || a; })); }, ...});
обработка вызовов функций
Успешно понимаем
51
var foo = basis.require;foo('./path/to/file.ext');// и даже такvar prefix = './path/to';var bar = foo;bar(prefix + '/foo.ext');
на примере basisjs-tools
сборщик правильно распознает вызов
basis.require и значения аргументов
Так просто не обманешь
52
function example(){ var basis = { require: function(){ … } }; basis.require('module');}
на примере basisjs-tools
Этот вызов будет проигнорирован, т.к. функция не оригинальная
Да, понимает не все
53
var require = basis.require;var modules = ['foo', 'bar'];modules.forEach(function(name){ require(name);});
на примере basisjs-tools
сборщик распознает вызов basis.require, но не сможет разрешить названия модулей
Можно упороться и научить сборщик понимать более
сложные патерны
54
С другой стороны это "фича", которая останавливает от
написания "странного" кода ;)
55
Профиль приложения полезен не только для сборки
56
Профиль приложения
• Профиль + трансформации = сборка
• Профиль + проверки = линтер
• Профиль + … = …
57
Главное: знаем все связи и можно работать со всеми
видами контента одновременно
58
DEMO
59
Матчинг CSS классов• Сохраняем карту – какие классы используются в HTML (шаблонах)
• Сохраняем карту – какие классы используются в селекторах
• Есть в HTML, но нет в CSS –> варнинг
• Есть в CSS, но нет в HTML –> варнинг60
Делаем свой линтер
61
Делаем свой линтер
• Пишем консольную утилиту, которая выводит список ошибок и файлов с местоположением ошибки
• Интегрируем с редактором
62
Это очень важно
Интеграция с Sublime Text
63
from SublimeLinter.lint import NodeLinter, util!
class Basisjs(NodeLinter): syntax = ('javascript', 'javascriptnext', 'html', 'css', 'json') cmd = ('basis', 'lint', '@', '-r', 'checkstyle') regex = ( r'^\s+?<error line="(?P<line>\d+)" ' r'column="(?P<col>\d+)" ' r'severity="(?P<warning>error)" ' r'message="(?P<message>.+?)"' ) multiline = True tempfile_suffix = '-'
плагин для SublimeLinter
Вызываем консольную
утилиту
PROFIT!
64
Стыкуем все вместе
65
DEMO
66
67
Плагин
Браузер Dev-сервер Среда разработки
Web Socket (socket.io) Файловая система
DOM события
Немного деталей
• Сервер слушает файловую систему, и отправляет браузеру уведомления об изменениях
• Браузер отправляет серверу команды и слушает уведомления
68
Открытие файла в редакторе
• Браузер отправляет команду dev-серверу openFile('path/to/file.ext:10:20')
• dev-сервер выполняет консольную команду subl path/to/file.ext:10:20
69
Кое-что еще…
70
DEMO
71
Под капотом все то же: парсер, AST, walker'ы, …
72
И еще немного магии• Dev-режим
• Компонентный подход
• DOM шаблонизация
• Разделение логики и представления
• Модульность
• Sandbox
• …73
В заключении
74
Если чего-то не хватает – делайте это сами!
75
Наша эффективность зависит от инструментов, не меньше чем от фреймворков и нашего опыта
76
Главное видеть проблемы и стараться решать их
77
