Постпроцессоры

контролируемое будущее

Руслан Абдуллаев, 2016

Преимущество постпроцессоров:

Возможность самостоятельного расширения
Гибкость и недетерминированность
Стандартный синтаксис
Высокая производительность

История развития постпроцессоров

2012 - Rework (TJ Holowaychuk)
2013 - PostCSS (Andrey Sitnik)
2015 - PostHTML ( The Protein Corp. )

Внутренняя структура PostHTML

HTML/XML

Парсер

Рендер

Новый HTML

Внутренняя структура PostHTML

HTML/XML

Парсер

Плагин

Рендер

Новый HTML

Экосистема PostHTML

PostHTML Core ( posthtml-parser, posthtml-render )
Plugins ( PostHTML Plugins Catalog )
Bindings ( posthtml-cli, gulp-posthtml, grunt-posthtml, posthtml-loader, )
Middlewares ( Koa, Hapi, Express, Electron )
PostHTML Gitter

Plugins

posthtml-bem

      <div block="animal">
    <div elem="nose" mods="size:long">Nose</div>
</div>

        <div class="animal">
    <div class="animal__nose animal__nose_size_long">
          Nose</div>
</div>

posthtml-bem (mix-example)

      <div
  block="animal"
  mix="block:elephant elem:trunk mods:[size:short broken],
  block:cow mods:[moo]">
      <div elem="nose" mods="size:long">Nose</div>
</div>

posthtml-bem (mix-example)

      <div class="animal
    elephant__trunk
    elephant__trunk_size_short
    elephant__trunk_broken
    cow cow_moo">
      <div class="animal__nose animal__nose_size_long">
            Nose</div>
</div>

posthtml-bem (jade example)

      div(block='animals')
    div(elem='rabbit' mods='color:white')
    div(elem='dormouse' mods='color:red')

      <div class="animals">
    <div class="animals__rabbit animals__rabit_color_white">
    <div class="animals__dormouse animals__dormouse_color_red">)
</div>

posthtml-classes

    <div class="animal">
    <div class="animal__nose animal__nose_size_long
      elephant__trunk elephant__trunk_size_short
      elephant__trunk_color_brown">
          Nose
    </div>
</div>

posthtml-classes

                .animal {}
                .animal__nose {}
                .animal__nose_size_long {}
                .elephant__trunk {}
                .elephant__trunk_size_short {}
                .elephant__trunk_color_brown {}

posthtml-classes ( nested example )

                .animal {
                  &__nose {
                      &_size_long {}
                  }
                }
                .elephant {
                  &__trunk {
                      &_size_short {}
                      &_color_brown {}
                  }
                }

HTML-to-React-Components

      <!DOCTYPE html>
      ...
    <header class="header">
        <h1 class="heading">
            Hello, world!
        </h1>
    </header>
      ...

HTML-to-React-Components

      <!DOCTYPE html>
      ...
    <header class="header" data-component="Header">
        <h1 class="heading" data-component="Heading">
            Hello, world!
        </h1>
    </header>
      ...

          $ html2react index.html -c es5 -m es6 -e js -o ./components

header.js

      import React, { Component } from 'react';
import Heading from './heading';

class Header extends Component {
  render() {
    return (
      <header className="header"></header>
        <Heading></Heading>
      </header>
    );
  }
}
export default Header;

heading.js

      import React, { Component } from 'react';
  class Heading extends Component {
    render() {
      return <h1 className="heading"<Hello, world!</h1>;
    }
  }
  export default Heading;

Плагины PostHTML

Спасибо за внимание!

Github:github.com/rajdee

Twitter:@rajdee_mhm