SPA инструменты
3 likes1,838 views
Документ представляет собой презентацию Романа Дворнова, на которой обсуждаются инструменты разработки для веб-программирования, включая среды разработки, консольные и браузерные инструменты. Обсуждаются также способы создания собственных инструментов и профилей приложений, а также применение abstract syntax tree (AST) для работы с контентом. Кроме того, документ затрагивает важность интеграции инструментов и предлагает подходы к созданию линтеров и других утилит, способствующих повышению эффективности разработки.
![Пример
37
ASTCSS
[ "stylesheet", [
"atrules",
[
"atkeyword",
[ "ident", "import" ]
],
[ "s", " " ],
[ "string", "'path/to/file.css'" ]
]
]
@import 'path/to/file.css';
gonzales (csso)](https://image.slidesharecdn.com/spatools-150301142608-conversion-gate01/85/SPA-37-320.jpg)
![Пример
38
ASTJavaScript
[ "toplevel", [
[ "var", [
[ "module",
[ "call",
[ "name", "require" ],
[ [ "string", "module" ] ]
]
]
] ]
] ]
var module = require('module');
uglifyjs 1.x](https://image.slidesharecdn.com/spatools-150301142608-conversion-gate01/85/SPA-38-320.jpg)
![Пример 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](https://image.slidesharecdn.com/spatools-150301142608-conversion-gate01/85/SPA-42-320.jpg)
![Используем
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"](https://image.slidesharecdn.com/spatools-150301142608-conversion-gate01/85/SPA-43-320.jpg)
![Примерно вот так
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;
}));
},
...
});
обработка вызовов
функций](https://image.slidesharecdn.com/spatools-150301142608-conversion-gate01/85/SPA-51-320.jpg)
![Да, понимает не все
53
var require = basis.require;
var modules = ['foo', 'bar'];
modules.forEach(function(name){
require(name);
});
на примере basisjs-tools
сборщик распознает
вызов basis.require, но
не сможет разрешить
названия модулей](https://image.slidesharecdn.com/spatools-150301142608-conversion-gate01/85/SPA-54-320.jpg)
SPA инструменты
- 1. SPA инструменты Роман Дворнов Avito SPA Meetup, февраль 2015
- 2. О себе • Работаю в Avito • Делаю SPA • Автор basis.js 2
- 4. Веб сегодня – большой мир возможностей... 4
- 6. Программирование абстрактно, нужно многое держать в голове – легко упустить детали 6
- 7. Нам нужны помощники – инструменты, которые помогут нам больше видеть и понимать 7
- 8. Сложность(кол-воболи) Размер проекта (в попугаях) Все делаем сами 8
- 9. Сложность(кол-воболи) Размер проекта (в попугаях) Все делаем сами Используем инструменты 9
- 10. Инструменты 10
- 11. Типы инструментов • среда разработки – редаторы, IDE + плагины • консольные – командная строка • браузерные – in-app и плагины 11
- 12. Среда разработки • Нам "не повезло" – веб-технологии слишком гибкие • либо базовые вещи – мало подсказок • либо все подряд – слишком много подсказок • обламываемся, если CommonJS, ES6 modules… • обламываемся, если среда не знает "фреймворк" 12
- 13. Консольные инструменты • Расцвет эпохи Task Runner'ов (node.js, io.js) • "сборка" - конкатенация, пре-/пост- процессоры, ... • FS watch – live reload, пересборка, ... • запуск тестов, линтеры, валидаторы • … 13
- 14. Браузерные инструменты • браузерные "Developer Tools" • простые утилитарные плагины • плагины фреймворков (React, Ember, Basis.js) • runtime приложения 14
- 15. Что делать, если существующих инструментов не хватает? 15
- 16. Создать свои! 16
- 17. Лучше день потерять, потом за 5 минут долететь…
- 18. Главное видеть проблемы и стараться решать их 18
- 20. В идеале – все три 20 Среда разработки Консольные инструменты Браузерные решения + +
- 22. Обычная практика • находим файлы по маске • прогоняем через пре-/пост-процессоры • объединяем, минизируем • ... • PROFIT! 22
- 23. Плюсы и минусы + достаточно просто – разные типы контента обрабатываются независимо – файлы попадают в сборку, без разбора используются или нет – каждое изменение файла – пересборка 23
- 24. А как по другому? 24
- 25. В идеале сборщик должен понять, что мы хотели и сделать из этого оптимальную сборку 25
- 26. Сценарий • указываем html-файл (у нас же single page!) • он находит используемые файлы • прогоняет через пре-/пост-процессоры и т.д. • объединяет, перестраивает, перелинковывает контент • ... • PROFIT! 26
- 27. Плюсы и минусы + не нужно объяснять лишнего сборщику + в сборку попадается только нужное – несколько сложнее реализация сборщика – менее надежно (не пишите непонятного ;) 27
- 28. DEMO 28
- 29. Ключевой компонент – профиль приложения 29
- 30. Профиль приложения • граф зависимостей – в частном случае файлы и их связи • факты о контенте – что и где используется 30
- 31. Как собрать профиль? • для этого сборщик должен быть немного "браузером" :) • разобрать контент "файлов" • найти и интерпритировать конструкции • собрать информацию воедино 31
- 32. Разбор полетов 32 контента AST: туда и обратно
- 33. Способы работы с контентом • Как со строкой – Regular Expressions • Структурированное представление – AST* 33 * Abstract Syntax Tree
- 34. RegExp + дешевое решение для простых задач – под каждую задачу свой RegExp – ненадежно – трудно поддерживать и расширять – почти невозможно делать сложные вещи 34
- 35. AST + надежно + универсальное решение + гораздо проще поддерживать + возможность выполнять задачи любой сложности – более дорогое решение для простых задач – можно потерять часть информации (формат и т.д.) 35
- 36. Наш выбор – AST 36
- 37. Пример 37 ASTCSS [ "stylesheet", [ "atrules", [ "atkeyword", [ "ident", "import" ] ], [ "s", " " ], [ "string", "'path/to/file.css'" ] ] ] @import 'path/to/file.css'; gonzales (csso)
- 38. Пример 38 ASTJavaScript [ "toplevel", [ [ "var", [ [ "module", [ "call", [ "name", "require" ], [ [ "string", "module" ] ] ] ] ] ] ] ] var module = require('module'); uglifyjs 1.x
- 39. Пример 39 ASTJavaScript { "type": "Program", "body": [ { "type": "VariableDeclaration", "declarations": [ { "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "module" }, ... var module = require('module'); ESTree (Esprima, uglifyjs 2.x, …)
- 40. Все уже придумано до нас • JavaScript – Esprima, acorn, uglifyjs, … • CSS – gonzales (csso), postCSS, … • (X)HTML, XML – htmlparser2, sax, … 40 Для многих форматов есть парсеры, производящие AST
- 41. Работаем с AST • walker – делает рекурсивный обход дерева • анализ = walker + сбор фактов • трансформер (transformer) = walker + модифицикация дерева • транслятор (translator) = walker + генерация кода (строка) 41
- 42. Пример 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. Используем 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"
- 45. HTML • <script src="{url}"></script> • <script>{inlineScript}</script> • <link rel="stylesheet" href="{url}"> • <style>{inlineStyle}</style> • <img src="{url}"> • <element style="{inlineStyleBlock}"> • ... 45
- 46. CSS • @import {url} • url({url}) 46
- 47. CSS • @import {url} • url({url}) 46 Вы уже знаете как это сделать ;)
- 48. JavaScript 47 Все несколько сложнее… Нужно несколько проходов и больше телодвижений
- 49. JavaScript проход №1 • определяем области видимости • для определенных значений добавляем обработчики: 48 var fnToken = someScope.get('require'); fnToken.run = function(token, args){ // интерпритация функции для сборщика };
- 50. JavaScript проход №2 • делаем базовую интерпритацию • объявления, присвоения • вызов функций • return • стараемся понять, что можем понять 49
- 51. Примерно вот так 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; })); }, ... }); обработка вызовов функций
- 52. Успешно понимаем 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 и значения аргументов
- 53. Так просто не обманешь 52 function example(){ var basis = { require: function(){ … } }; basis.require('module'); } на примере basisjs-tools Этот вызов будет проигнорирован, т.к. функция не оригинальная
- 54. Да, понимает не все 53 var require = basis.require; var modules = ['foo', 'bar']; modules.forEach(function(name){ require(name); }); на примере basisjs-tools сборщик распознает вызов basis.require, но не сможет разрешить названия модулей
- 55. Можно упороться и научить сборщик понимать более сложные патерны 54
- 56. С другой стороны это "фича", которая останавливает от написания "странного" кода ;) 55
- 57. Профиль приложения полезен не только для сборки 56
- 58. Профиль приложения • Профиль + трансформации = сборка • Профиль + проверки = линтер • Профиль + … = … 57
- 59. Главное: знаем все связи и можно работать со всеми видами контента одновременно 58
- 60. DEMO 59
- 61. Матчинг CSS классов • Сохраняем карту – какие классы используются в HTML (шаблонах) • Сохраняем карту – какие классы используются в селекторах • Есть в HTML, но нет в CSS –> варнинг • Есть в CSS, но нет в HTML –> варнинг 60
- 63. Делаем свой линтер • Пишем консольную утилиту, которая выводит список ошибок и файлов с местоположением ошибки • Интегрируем с редактором 62 Это очень важно
- 64. Интеграция с 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 Вызываем консольную утилиту
- 65. PROFIT! 64
- 67. DEMO 66
- 68. 67 Плагин Браузер Dev-сервер Среда разработки Web Socket (socket.io) Файловая система DOM события
- 69. Немного деталей • Сервер слушает файловую систему, и отправляет браузеру уведомления об изменениях • Браузер отправляет серверу команды и слушает уведомления 68
- 70. Открытие файла в редакторе • Браузер отправляет команду dev-серверу openFile('path/to/file.ext:10:20') • dev-сервер выполняет консольную команду subl path/to/file.ext:10:20 69
- 71. Кое-что еще… 70
- 72. DEMO 71
- 73. Под капотом все то же: парсер, AST, walker'ы, … 72
- 74. И еще немного магии • Dev-режим • Компонентный подход • DOM шаблонизация • Разделение логики и представления • Модульность • Sandbox • … 73
- 75. В заключении 74
- 76. Если чего-то не хватает – делайте это сами! 75
- 77. Наша эффективность зависит от инструментов, не меньше чем от фреймворков и нашего опыта 76
- 78. Главное видеть проблемы и стараться решать их 77