CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript

CSS-в-JS, HTML-в-JS,
ВСЁ-в-JS
Все гораздо проще, когда всё вокруг JavaScript
Алексей Иванов, Злые Марсиане

Чем занимаются Марсиане
2

Чем занимаюсь я
3

А чем вы
занимаетесь?
4

Часть 1.
Задачи и проблемы
5

Было:
.block__element_modificator {...}
Стало:
.aBc {...}
Сократить
CSS-классы
01.
01.
6

Сократить CSS-классы
Замена в CSS
1. Собрать все CSS в один файл.
2. Заменить имена классов.
3. Сохранить спиcок замен:
{ 'block__element_modificator': 'aBc' }01.
7

block__element block__element_modificator
Замена в HTML
Заменить все вхождения:
<div class=" ">
Включая составные имена:
"block__element" +"_modificator"
01.
01.
8

block__element_modificator
block
Замена в JavaScript
Найти и заменить имена всех классов:
var className = " ";
$elem.addClass(className);
Не заменить ничего лишнего:
var = ...;
01.
02.
01.
9

Убираем
лишний CSS
Легаси, Bootstrap, Font Awesome
10

Убираем лишний CSS
Что нужно сделать?
1. Основная задача:
Удалить лишние правила для одиночных классов, id и тегов.
2. Задача со звездочкой:
Удалить несуществующие комбинации: .class1 .class2 {} .
11

Парсим HTML
1. Понять структуру HTML для каждой страницы с учетом
состояний (авторизован, неавторизован, акции, попапы).
2. Получить список классов, id и тегов. Лучше в виде дерева.
12

Парсим JavaScript
1. Понимаем по JS как он может менять наш HTML:
Добавление классов, добавление элементов, и т. д.
2. Дополняем наше дерево возможными состояниями.
13

Убираем
лишний JavaScript
14

Убираем лишний JavaScript
1. Удалить то, что не касается DOM: переменные, функции, и т. д.
2. Удалить то, что касается DOM:
1. Найти какие функции и методы влияют на DOM.
2. Найти может ли этот DOM быть на странице.
3. Удалить ненужное.
15

Отдельная сборка
для лендинга
Или не лендинга
16

Отдельная сборка
для лендинга
1. Научить наши инструменты понимать что такое страница.
2. Построить HTML-дерево страницы во всех состояниях.
3. Найти какой JavaScript может её изменять.
4. Найти CSS и JavaScript который нужен для этой страницы.
17

Подсвечиваем
неиспользуемый
код в IDE
18

Переносим код
между проектами
19

Нытьё
Почему все это
так сложно?
20

Часть 2.
Как все может
быть
23

Зависимости
в JavaScript
RequireJS и Browserify
24

module.exports
require('./file1');
Пример Browserify
ﬁle1.js:
var MyModule = {};
MyModule.method = function () {...};
= MyModule;
ﬁle2.js:
var something =
something.method();
01.
02.
03.
01.
02.
25

Картинка: https://github.com/unindented/webpack-presentation
26

Dead code elimination
UglifyJS
27

longName
var a = 10;
b
Пример удаления кода
До UglifyJS:
function ( ) {
return longName;
}
После UglifyJS:
function ( ) { return b; }
01.
02.
03.
04.
01.
28

HTML-в-JS
React, Riot, Hyperscript
29

<div onClick={this.onClick}>Hello!</div>;
React и .jxs
var Example = React.createClass({
onClick: function () { alert('Hello world!'); },
render: function () {
return
}
});
01.
02.
03.
04.
05.
06.
30

React.createElement(
'div',
{ onClick: onClick },
"Hello!"
)
React и скомпилированный .jxs
onClick: function () { alert('Hello world!') },
render: function () {return (
);}
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
31

Не только JS
Webpack
32

style.css
data.json
kitten.png
Webpack и require
Подгрузит в шапку, добавит в граф пути из url() и @import :
var style = require(' ');
Подгрузит как JavaScript объект:
var json = require(' ');
Положит в папку для готовых ассетов, отдаст путь:
var img = require(' ');
01.
01.
01.
33

CSS-в-JS
JSS и CSS Modules
34

style
style.hello
style['hel'+'lo']
Подключение стилей
var = require('style.css');
render: function () {
return (
<div className={ }>Hello!</div>
<div className={ }>Hello!</div>
);
}
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
35

hello
.hello--jss-0-0
Пример JSS
Стили:
export {
fontSize: 12
}
Скомпилированные стили:
{ font-size: 12px; }
01.
02.
03.
01.
36

hello
style_hello_b8bW2Vg3fwHozO
ozO
Пример CSS Modules
Стили:
. { font-size: 12px; }
Скомпилированные стили в разработке:
Полная сборка:
01.
01.
01.
37

Tree shaking
Rollup и Webpack 2
38

Tree shaking
require
ﬁle1.js
module.exports = {
header: "header",
footer: "footer"
}
ﬁle2.js
var styles = require('./file1');
01.
02.
03.
04.
01.
39

header
content
fooner
header footer
Tree shaking
import и export в ES6
ﬁle1.js
export const = "header";
export const = "content";
export const = "footer";
ﬁle2.js
import { , } from file1;
01.
02.
03.
01.
40

Оптимизация CSS
CSSO
41

module2-baz
module2-baz module2-qux
Настройки CSSO
Фильтрация селекторов:
{
"tags": ["ul", "li", ...],
"classes": [" ", ...]
}
Скоупы:
"scopes": [
[" ", " "]
]
01.
02.
03.
04.
01.
02.
03. 42

Чтение и правка
JavaScript
Babel.js не только для es6
43

Часть 3.
К чему все это?
44

К чему все это?
1. Нет отдельных html, css, js – все тесно взаимосвязано и влияет
друг на друга.
2. В процессе сборки все в JS – мы можем использовать кучу
автоматических оптимизаций.
3. Граф зависимостей – позволяет собирать только нужное
и ничего не терять.
4. Локальное пространство имен – нет глобальных переменных
и классов, все делает автоматика, можно не думать
о конфликтах.
45

Ближайшие точки для
развития
1. Интеграция с IDE.
2. Рендеринг на сервере:
1. Шаблоны отделены от стилей и логики.
2. JS-шаблонизаторы и инструменты сборки сейчас сильно
заточены под SPA.
3. Огромная куча других инструментов для оптимизации и
анализа.
46

Вопросы?
Я всегда рад поговорить с кем-ниубудь про этих штуки.
• Подходите обсуждать на afterparty.
• Пишите в:
• Twitter: @iadramelk
• Facebook: @iadramelk
47

CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript

Related slideshows

More Related Content

CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript