css-в-js, html-в-js, ВСЁ-в-jspublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf ·...
TRANSCRIPT
![Page 1: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/1.jpg)
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS
Все гораздо проще, когда всё вокруг JavaScript
Алексей Иванов, Злые Марсиане
![Page 2: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/2.jpg)
Чем занимаются Марсиане
2
![Page 3: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/3.jpg)
О чем этот доклад
3
![Page 4: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/4.jpg)
Часть 1.
Серверные приложения
4
![Page 5: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/5.jpg)
Было:
.block__element_modificator {...}
Стало:
.aBc {...}
Сокращаем CSS-классы
01.
01.
5
![Page 6: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/6.jpg)
Сокращаем CSS-классыЗамена в CSS
1. Собрать все CSS в один файл.
2. Заменить имена классов.
3. Сохранить спиcок замен:
{ 'block__element_modificator': 'aBc' }01.
6
![Page 7: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/7.jpg)
block__element block__element_modificator
Сокращаем CSS-классыЗамена в HTML
Заменить все вхождения:
<div class=" ">
Включая составные имена:
"block__element" + "_modificator"
01.
01.
7
![Page 8: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/8.jpg)
block__element_modificator
block
Сокращаем CSS-классыЗамена в JavaScript
Найти и заменить имена всех классов:
var className = " ";
$elem.addClass(className);
Не заменить ничего лишнего:
var = ...;
01.
02.
01.
8
![Page 9: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/9.jpg)
Убираем лишний CSSЛегаси, Bootstrap, Font Awesome
9
![Page 10: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/10.jpg)
Убираем лишний CSSЧто нужно сделать?
1. Основная задача:
Удалить лишние правила для одиночных классов, id и тегов.
2. Задача со звездочкой:
Удалить несуществующие комбинации: .class1 .class2 {} .
10
![Page 11: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/11.jpg)
Убираем лишний CSSПарсим HTML
1. Понять структуру HTML для каждой страницы с учетом состояний
(авторизован, неавторизован, акции, попапы).
2. Получить список классов, id и тегов. Лучше в виде дерева.
11
![Page 12: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/12.jpg)
Убираем лишний CSSПарсим JavaScript
1. Понимаем по JS как он может менять наш HTML:
Добавление классов, добавление элементов, и т. д.
2. Дополняем наше дерево возможными состояниями.
12
![Page 13: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/13.jpg)
Убираем лишний JavaScript
13
![Page 14: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/14.jpg)
Убираем лишний JavaScript
1. Удалить то, что не касается DOM: переменные, функции, и т. д.
2. Удалить то, что касается DOM:
1. Найти какие функции и методы влияют на DOM.
2. Найти может ли этот DOM быть на странице.
3. Удалить ненужное.
14
![Page 15: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/15.jpg)
Отдельная сборка длялендингаИли не лендинга
15
![Page 16: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/16.jpg)
Отдельная сборка для лендинга
1. Научить наши инструменты понимать что такое страница.
2. Построить HTML-дерево страницы во всех состояниях.
3. Найти какой JavaScript может её изменять.
4. Найти CSS и JavaScript который нужен для этой страницы.
16
![Page 17: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/17.jpg)
Подсвечиваемнеиспользуемый код в IDE
17
![Page 18: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/18.jpg)
Переносим код междупроектами
18
![Page 19: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/19.jpg)
Нытьё
Почему все этотак сложно?
19
![Page 20: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/20.jpg)
20
![Page 21: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/21.jpg)
21
![Page 22: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/22.jpg)
Часть 2.
Параллельный мир SPA
22
![Page 23: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/23.jpg)
Зависимости в JavaScriptRequireJS и Browserify
23
![Page 24: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/24.jpg)
module.exports
require('./file1');
Пример Browserify
file1.js:
var MyModule = {};
MyModule.method = function () {...};
= MyModule;
file2.js:
var something =
something.method();
01.
02.
03.
01.
02.
24
![Page 25: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/25.jpg)
Картинка: https://github.com/unindented/webpack-presentation 25
![Page 26: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/26.jpg)
Dead code eliminationUglifyJS
26
![Page 27: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/27.jpg)
longName
var a = 10;
b
Пример удаления кода
До UglifyJS:
function ( ) {
return longName;
}
После UglifyJS:
function () { return b; }
01.
02.
03.
04.
01.
27
![Page 28: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/28.jpg)
HTML-в-JSReact, Riot, Hyperscript
28
![Page 29: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/29.jpg)
<div onClick={this.onClick}>Hello!</div>;
React и .jsxvar Example = React.createClass({
onClick: function () { alert('Hello world!'); },
render: function () {
return
}
});
01.
02.
03.
04.
05.
06.
29
![Page 30: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/30.jpg)
React.createElement(
'div',
{ onClick: onClick },
"Hello!"
)
React и скомпилированный .jxsvar Example = React.createClass({
onClick: function () { alert('Hello world!') },
render: function () {return (
);}
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.30
![Page 31: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/31.jpg)
Не только JSWebpack
31
![Page 32: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/32.jpg)
style.css
data.json
kitten.png
Webpack и require
Подгрузит в шапку, добавит в граф пути из url() и @import :
var style = require(' ');
Подгрузит как JavaScript объект:
var json = require(' ');
Положит в папку для готовых ассетов, отдаст путь:
var img = require(' ');
01.
01.
01.
32
![Page 33: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/33.jpg)
CSS-в-JSJSS и CSS Modules
33
![Page 34: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/34.jpg)
style
style.hello
style['hel'+'lo']
Подключение стилейvar = require('style.css');
var Example = React.createClass({
render: function () {
return (
<div className={ }>Hello!</div>
<div className={ }>Hello!</div>
);
}
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
34
![Page 35: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/35.jpg)
hello
.hello--jss-0-0
Пример JSS
Стили:
export {
fontSize: 12
}
Скомпилированные стили:
{ font-size: 12px; }
01.
02.
03.
01.
35
![Page 36: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/36.jpg)
hello
style_hello_b8bW2Vg3fwHozO
ozO
Пример CSS Modules
Стили:
. { font-size: 12px; }
Скомпилированные стили в разработке:
. { font-size: 12px; }
Полная сборка:
. { font-size: 12px; }
01.
01.
01.
36
![Page 37: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/37.jpg)
Tree shakingRollup и Webpack 2
37
![Page 38: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/38.jpg)
Tree shakingrequire
file1.js
module.exports = {
header: "header",
footer: "footer"
}
file2.js
var styles = require('./file1');
01.
02.
03.
04.
01.
38
![Page 39: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/39.jpg)
header
content
fooner
header footer
Tree shakingimport и export в ES6
file1.js
export const = "header";
export const = "content";
export const = "footer";
file2.js
import { , } from file1;
01.
02.
03.
01.
39
![Page 40: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/40.jpg)
Tree shaking и CSS Moduleses-css-modules
40
![Page 41: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/41.jpg)
Картинка: https://github.com/jacobp100/es-css-modules 41
![Page 42: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/42.jpg)
Картинка: https://github.com/jacobp100/es-css-modules 42
![Page 43: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/43.jpg)
Оптимизация CSSCSSO
43
![Page 44: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/44.jpg)
module2-baz
module2-baz module2-qux
Настройки CSSO
Фильтрация селекторов:
{
"tags": ["ul", "li", ...],
"classes": [" ", ...]
}
Скоупы:
"scopes": [
[" ", " "]
]
01.
02.
03.
04.
01.
02.
03. 44
![Page 45: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/45.jpg)
Чтение и правка JavaScriptBabel.js не только для es6
45
![Page 46: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/46.jpg)
Задачи для Babel.js
1. Сбор статистики по подключению стилей.
2. Оборачивание каких-то фрагментов кода своими функциями.
3. Свой синтаксис в JS.
4. И т. д.
46
![Page 47: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/47.jpg)
Решение проблем из первой части в SPAСокращаем CSS-классы: CSS Modules в dev-режиме (также получаем в
процессе автоматическую изоляцию CSS)
Убираем лишний CSS: Webpack + JSS, либо Webpack + CSS Modules ES,
либо Webpack + Babel.js + CSSO
Убираем лишний JS: Webpack 2/Rollup + UglifyJS
Сборка под отдельную страницу: Webpack
Перенос кода между проектами: Подключение всех зависимостей
через import/require.
![Page 48: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/48.jpg)
47
Часть 3.
К чему все это?
![Page 49: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/49.jpg)
48
Границы между HTML, CSSи JS – искусственныеРазные технологии должны друг о друге знатьчтобы эффективно друг с другом работать
![Page 50: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/50.jpg)
49
SPA умеют эти знания получать и потомэффективно с ними работать
1. import/export,
2. Граф зависимостей,
3. Приведение при компиляции к одному типу,
4. Dead code elimination и tree shaking на основе информации из дерева,
5. Babel.js для изменения и переписывания js-бандла.
![Page 51: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/51.jpg)
50
Эти штуки могут работатьне только для SPA
![Page 52: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/52.jpg)
51
Где это может еще пригодиться
1. Интеграция с IDE.
2. Рендеринг на сервере:
1. Шаблоны отделены от стилей и логики.
2. JS-шаблонизаторы и инструменты сборки сейчас сильно заточены под
SPA.
3. Огромная куча других инструментов для оптимизации и анализа.
![Page 53: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/53.jpg)
52
Вопросы?
Я всегда рад поговорить с кем-нибудь про этих штуки.
• Подходите обсуждать на afterparty.
• Пишите в:
• Twitter: @iadramelk
• Facebook: @iadramelk
![Page 54: CSS-в-JS, HTML-в-JS, ВСЁ-в-JSpublic.jugru.org/holyjs/2016/spb/day_1/track_1/ivanov.pdf · Убираем лишний css Парсим html 1.Понять структуру](https://reader030.vdocuments.mx/reader030/viewer/2022040204/5ec6bc98c42d161c45709c0b/html5/thumbnails/54.jpg)
53