Роботы для людей: боевой арсенал фронтендера

Алексей Андросов

Старший разработчик интерфейсов

WSD, Санкт-Петербург, 8 июня 2013 года

Обо мне

doochik@ya.ru @doochik

По образованию – специалист по защите информации
6 лет в Яндексе, 2 года ведущий разработчик фронтенда в Я.Почте
Люблю копаться в браузерах и внедрять новые фичи из HTML5
Можете спрашивать про JS, CSS и frontend в целом

Роботы для людей

Borschik, CSSO и SVGO

Входят в БЭМ-стек
Не привязаны к БЭМ-методологии
Open-source
Написаны на node.js

Презентация: bit.ly/doochik-wsd-spb

Borschik

Это текстовый процессор для файлов
Умеет склеивать файлы
Умеет преобразовывать файлы
Умеет минимизировать файлы
Поддерживает «из коробки» CSS и JS
Можно расширять своими «технологиями»

Внутри два понятия

include – вы указываете ссылку на файл, после сборки ссылка заменяется на содержимое файла
link – вы указываете ссылку на файл, после сборки ссылка преобразовывается

Borschik: include

Склейка CSS

page.css

            @import url("b-header/b-header.css");
            @import url("b-footer/b-footer.css");

Запускаем

            $ borschik --input=page.css

Склейка CSS

Получаем

            /* b-header/b-header.css begin */
              .b-header {...}
            /* b-header/b-header.css end */
             
            /* b-footer/b-footer.css begin */
              .b-footer {...}
            /* b-footer/b-footer.css end */

Склейка CSS

Правильное раскрытие путей

b-footer/b-footer.css

            .b-footer {
                background: url("bg.png");
            }

Склейка CSS

Правильное раскрытие путей

В page.css получим

            .b-footer {
                background: url("b-footer/bg.png");
            }

Склейка JS (вариант 1)

borschik:include в /**/ раскрываются без преобразований

page.js

            /* borschik:include:b-header/b-header.js */
            /* borschik:include:b-footer/b-footer.js */

Запускаем

            $ borschik --input=page.js

Склейка JS (вариант 1)

Получаем

            /* b-header/b-header.js begin */
              ...b-header/b-header.js content ...
            /* b-header/b-header.js end */
             
            /* b-footer/b-footer.js begin */
              ...b-footer/b-footer.js content ...
            /* b-footer/b-footer.js end */

Склейка JS (вариант 2)

"borschik:include" раскрывается через JSON.stringify

page.js

            var prj = {};
            prj.STATIC_HOST = "borschik:include:configs/host.txt";

host.txt

            http://yandex.st

Склейка JS (вариант 2)

Получаем

            var prj = {};
            prj.STATIC_HOST = "http://yandex.st";

Borschik: link

Относительные ссылки на ресурсы

Можно изменить ссылки с относительных на абсолютные или другие относительные
Управляется с помощью конфигов в файле .borschik
Конфигов может быть много (в разных директориях)

Конфиг .borschik

            {
                "paths" : {
                    "./": "/",
                    "css/": "//yandex.st/my-prj/css/"
                }
            }

Попробуем!

css/style.css

            background: url("../imgs/bg1.png")

Правило

            "./": "/"

Результат

            background: url("/imgs/bg1.png")

Попробуем!

css/style.css

            background: url("bg2.png")

Правило

            "css/": "//yandex.st/my-prj/css/"

Результат

            background: url("//yandex.st/my-prj/css/bg2.png")

Borschik: freeze

Заморозка файлов

Загрузка ресурсов (например, картинок) по урлу, зависящему от содержимого файла (хеш-суммы)

Все ссылки на ресурсы заменяются на хеш от контента файла и создается файл, у которого имя – хеш

Заморозка файлов: конфиг

            {
                "freeze_paths" : {
                    "css": "../_"
                }
            }

Попробуем

css/style.css

            .style {
                background: url("hot.png");
            }

Запускаем

            $ borschik --input=css/style.css --freeze=yes

Получаем

            .style {
              background: url("../_/jUK5O9GsR0hf0.png");
            }

Заморозка файлов

Можно фризить:

не только картинки, а шрифты, swf и т.п.
картинки в JS(!)
картинки с динамическими урлами в JS(!!!)
сами JS- и CSS-файлы

И это еще не всё!

Минимизация

CSS – через CSSO
JS – через UglifyJS
У каждой технологии можно переопределить метод minimize

Borschik

GitHub: github.com/bem/borschik

Borschik

GitHub: github.com/bem/borschik

Подробная статья: bit.ly/ru-borschik

Borschik

GitHub: github.com/bem/borschik

Подробная статья: bit.ly/ru-borschik

Всё про заморозку в моем докладе на Я.Субботнике:
bit.ly/doochik-kiev

CSSO

CSS Optimizer

Да, еще один минимизатор CSS =)

Всё вроде бы как обычно...

Вырезает комментарии и пробелы

Всё вроде бы как обычно...

Вырезает комментарии и пробелы
Удаляет пустые декларации

Всё вроде бы как обычно...

Вырезает комментарии и пробелы
Удаляет пустые декларации
Укорачивает записи (цвет, размер)

Всё вроде бы как обычно...

Вырезает комментарии и пробелы
Удаляет пустые декларации
Укорачивает записи (цвет, размер)
???

Всё вроде бы как обычно...

Вырезает комментарии и пробелы
Удаляет пустые декларации
Укорачивает записи (цвет, размер)
???
Строит AST дерево

Зачем AST?

AST дает полное понимание всех деклараций и селекторов.

А значит можно менять структуру самих CSS-деклараций!

Лучше один раз увидеть, чем сто раз услышать

Объединение селекторов

            .merge0 {color: red}
            .merge1 {color: blue}
            .merge1 {margin: 0}

↓

            .merge0 {color: red}
            .merge1 {color: blue; margin: 0}

Объединение свойств

            .property0 {margin: 1em}
            .property1 {margin: 0}
            .property2 {margin: 0}

↓

            .property0 {margin: 1em}
            .property1, property2 {margin: 0}

Разделение селекторов

            .split0 {color: red; border: none; margin: 0}
            .split1 {color: blue; border: none; margin: 0}

↓

            .split0 {color: red}
            .split1 {color: blue}
            .split0, split1 {border: none; margin: 0}

Удаление перекрываемых свойств

            .override {padding: 1em; margin: 0; padding: 0}

↓

            .override {margin: 0; padding: 0}

В цифрах

В тестах использовались

Microsoft Ajax Minifier 4.93
CSSO 1.3.7
CSSmin (YUICompressor) 0.4.1
CSScomb 2.12 (csscomb.ru) – форматтер CSS-свойств

В цифрах. bootstrap 2.3.2

	Ajax Minifier	CSSO	CSScomb + CSSO	CSSmin
source	127352
source.gz	18384
min	105710	105644	105644	106035
min.gz	17103	17085	17097	17101

В цифрах. jQuery UI 1.10.3

	Ajax Minifier	CSSO	CSScomb + CSSO	CSSmin
source	32456
source.gz	6101
min	25669	25250	24756	25645
min.gz	4918	4885	4659	4899

В цифрах. jQuery Mobile 1.3.0

	Ajax Minifier	CSSO	CSScomb + CSSO	CSSmin
source	136008
source.gz	19410
min	94010	92884	92884	93995
min.gz	13209	13128	13136	13206

В цифрах. Синяя тема Я.Почты

	Ajax Minifier	CSSO	CSScomb + CSSO	CSSmin
source	371466
source.gz	53235
min	250373	247153	247153	249066
min.gz	41212	41064	40631	40987

CSSO

Github github.com/css/csso

CSSO

Github github.com/css/csso

Подробная статья с примерами bit.ly/ru-csso

SVGO

SVG Optimizer

Зачем?

Уменьшает размер файла
Увеличивает скорость парсинга
Увеличивает скорость рендеринга

Как?

            <?xml version="1.0" encoding="utf-8"?>
            <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In .
            SVG Version: 6.00 Build 0) -->
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
            www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              width="120px" height="120px" viewBox="0 0 120 120"
              enable-background="new 0 0 120 120" xml:space="preserve">
              <g>
                <g>
                  <circle fill="#ff0000" cx="60px" cy="60px" r="50px"/>
                </g>
              </g>
            </svg>

Как?

            <?xml version="1.0" encoding="utf-8"?>
            <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In .
            SVG Version: 6.00 Build 0) -->
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
            www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              width="120px" height="120px" viewBox="0 0 120 120"
              enable-background="new 0 0 120 120" xml:space="preserve">
              <g>
                <g>
                  <circle fill="#ff0000" cx="60px" cy="60px" r="50px"/>
                </g>
              </g>
            </svg>

Как?

            <?xml version="1.0" encoding="utf-8"?>
            <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In .
            SVG Version: 6.00 Build 0) -->
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
            www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              width="120px" height="120px" viewBox="0 0 120 120"
              enable-background="new 0 0 120 120" xml:space="preserve">
              <g>
                <g>
                  <circle fill="#ff0000" cx="60px" cy="60px" r="50px"/>
                </g>
              </g>
            </svg>

Как?

            <?xml version="1.0" encoding="utf-8"?>
            <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In .
            SVG Version: 6.00 Build 0) -->
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
            www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              width="120px" height="120px" viewBox="0 0 120 120"
              enable-background="new 0 0 120 120" xml:space="preserve">
              <g>
                <g>
                  <circle fill="#ff0000" cx="60px" cy="60px" r="50px"/>
                </g>
              </g>
            </svg>

Как?

            <?xml version="1.0" encoding="utf-8"?>
            <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In .
            SVG Version: 6.00 Build 0) -->
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
            www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              width="120px" height="120px" viewBox="0 0 120 120"
              enable-background="new 0 0 120 120" xml:space="preserve">
              <g>
                <g>
                  <circle fill="#ff0000" cx="60px" cy="60px" r="50px"/>
                </g>
              </g>
            </svg>

Как?

            <?xml version="1.0" encoding="utf-8"?>
            <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In .
            SVG Version: 6.00 Build 0) -->
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
            www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              width="120px" height="120px" viewBox="0 0 120 120"
              enable-background="new 0 0 120 120" xml:space="preserve">
              <g>
                <g>
                  <circle fill="#ff0000" cx="60px" cy="60px" r="50px"/>
                </g>
              </g>
            </svg>

Как?

            <?xml version="1.0" encoding="utf-8"?>
            <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In .
            SVG Version: 6.00 Build 0) -->
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
            www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              width="120px" height="120px" viewBox="0 0 120 120"
              enable-background="new 0 0 120 120" xml:space="preserve">
              <g>
                <g>
                  <circle fill="#ff0000" cx="60px" cy="60px" r="50px"/>
                </g>
              </g>
            </svg>

Как?

            <?xml version="1.0" encoding="utf-8"?>
            <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In .
            SVG Version: 6.00 Build 0) -->
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
            www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              width="120px" height="120px" viewBox="0 0 120 120"
              enable-background="new 0 0 120 120" xml:space="preserve">
              <g>
                <g>
                  <circle fill="red#ff0000" cx="60px" cy="60px" r="50px"/>
                </g>
              </g>
            </svg>