Экосистемный подход к сборке веб-проекта с TeaCSS

    В этой статье я расскажу как можно организовать процесс сборки фронтэнда «от и до».

    Советую начать со вводной статьи, если кто не читал.

    Там я рассказывал про TeaCSS как про надмножество CSS, и это была неправда. Точнее – полуправда. И таким он был во времена своего создания (откуда и название).

    Сейчас – это декларативный метаязык для генерации контента, во многом черпающий вдохновение из QML, Lisp, Clojure, Nemerle.

    Предпосылки


    Я бы для начала хотел договориться о некоторых базовых вещах, чтоб избежать холиваров:

    1. Тип или направленность языка не определяют его возможности, если язык Тьюринг-полный, то на нем можно сделать все, что угодно
    2. Тип языка и синтаксис определяют лишь удобство разработчика применительно к предметной области
    3. Для универсального применения императивные языки в целом подходят лучше т.к. оперируют с базовыми сущностями (строки, числа, структуры, классы) и из них, как из кирпичиков, позволяют строить дома.
    4. Для готовых предметных областей лучше (опять-таки, в целом) подходят декларативные языки т.к. процесс больше похоже не на строительство, а на настройку готовых сложных сущностей.

    Именно из-за такого разделения «способностей» сейчас буйным цветом цветут различные сторонние DSL (Domain Specific Language), встроенные в язык DSL (в руби, лисп и т.д.) декларативного толка. На них удобно описывать процессы сборки, тестирования, интерфейсы, внешний вид – т.е. все, где базовая сущность уже определена. Для приведенных примеров сущности – это «проект», «функциональность», «пользовательский ввод и поведение программы» и «типаж предмета, чей внешний вид описывается».

    Что же такое TeaCSS


    Это каркас для декларативных DSL, конструктор компиляторов с Javascript API. И несколько базовых реализаций DSL для стилей, скриптов, шаблонов и изображений из коробки.

    Он берет на себя парсинг, оказывает существенную помощь в генерации контента. Чем-то этот проект родственнен PEG.js и Jison – если есть время, рекомендую ознакомиться.

    И если есть желание, то могу написать статью про парсеры и компиляторы, если это кому-то нужно.

    Синтаксис у TeaCSS прост до безобразия:
    [Язык] Блочное_Правило {
        // комментарий
        /* многострочный комментарий */
        @import "another_tea_file.tea"; 
        @ строчка JS
        @{ многострочный JS }
        [Язык] Правило;
        [Язык] Блочное_правило {
         // и так далее, сколько угодно уровней вложенности
        }
    }
    


    Он такой именно потому, что практически любой декларативный язык можно описать как набор вложенных правил, а встроенный JS позволяет добавлять императивные элементы в язык, такие как переменные, условия, циклы и прочее.

    Например, чтоб описать LESS-подобный язык для стилей достаточно всего 150 строк кода.
    github.com/boomyjee/teacss/blob/master/src/teacss/core.js#L309

    Именно он и являетc языком генерации по умолчанию (Style).
    Чтоб переключиться на другой язык достаточно начать селектор с него:

    SomeLang {
       // правила специфичные для этого языка
    } 
    


    TeaCSS как система сборки


    Второй встроенный язык в teacss – это Script, как несложно догадаться, он служит для сборки скриптов приложения.

    Синтаксис у него простой:

    Script some_name {
      @append "some/script/path.js";
      @append {
          function bla() { /* … */  } // Some javascript Code
      }
    }
    


    Т.е. линейные элементы – это просто сторонние скрипты, блочные – просто код, который вы не хотите выделять отдельно. В продакшене все скрипты будут объединены по some_name, т.е. вы можете сгруппировать JS, как вам удобно.

    Сама библиотека TeaCSS собирается сама собой, вот ее «мейкфайл»:
    github.com/boomyjee/teacss/blob/master/src/build.tea

    При таком подходе TeaCSS является заменой библиотек для модульной разработки и экосистемой для сборки фасада веб-приложений.

    Он берет на себя то, что делают RequireJS или StealJS.

    Я привел как пример именно эти 2 библиотеки потому, что AFAIK только они две также поддерживают минификацию и создание продакшен версии скриптов.

    Но у них (скорее даже не у самих библиотек, а у самого подхода) есть ряд серьезных недостатков:
    1. Они смешивают систему сборки с кодом приложения, т.е. оставляют специфичные вызовы API сборки внутри продакшен кода. Для require вы должны особым образом оформлять ваш код. В Steal есть метод pluginify, но он попросту глючит и является попыткой вырезать при минифае Steal код из дев-версий файлов.
    2. Require не дружит с CSS
    3. Сама идея смешивать сборку и код подразумевает слабый контроль над сборкой или захламление кода. Это разные сущности и код, который собирает, обеспечивает модульность и т.п. вещи должен лежать отдельно от кода, который пойдет в конечную программу.
    4. Steal не позволяет гибко настроить конечные пути к ресурсам и нет никакого (кроме ручного копания в минифаеном скрипте) пути это перенастроить.

    Поэтому сразу напрашивается правила сборки выделять в отдельное место (в C разработке — это мейкфайл).
    Роль такого мейкфайла и берет на себя teacss.Script.

    Подход к использованию тот же самый.

    <? if ($applicationMode=="development") ?>
        <link tea="scripts.tea">
        <script src="teacss.js"></script>
    <? else ?>
        <script src="production.js">
    <? endif ?>
    


    Подключение других языков и несколько примеров


    TeaCSS сам по себе – модульная и расширяемая система сборки. Чтоб подключить новый язык на основе базового синтаксиса достаточно добавить импорт с описанием языка.

    Например:
    @import "some_language_definition.js";
    @import "some_tea_file.tea"; // внутри этого файла уже будет доступен новый язык
    


    Про то, как описать новый язык в экосистеме TeaCSS, я напишу отдельную статью. А пока покажу пример такого языка.

    TeaCSS может быть использован как система генерации статических сайтов, аналоги – Jekyll и вот списком, много iwantmyname.com/blog/2011/02/list-static-website-generators.html

    Синтаксис интуитивно понятный, при этом есть поддержка компиляции в Liquid.

    Template layout {
        html {
            head {
                meta[http-equiv="Content-Type"][content="text/html; charset=utf-8"];
                title TeaCSS;
            }
            body {
                #header {
                    .item(url,text) { 
                        % if path == "@{url}" {
                            a.active[href="@{url}"] @text;    
                        }
                        % else {
                            a[href="@{url}"] @text;    
                        }
                    }
                    div {
                        .item('index.htm','Intro');
                        .item('canvas.htm','Canvas');
                        a[href="download.htm"][target="_blank"] Download;
                    }
                }
                #content {
                    % block content {}
                }
            }
        }
    }
    


    Это, используется, например, чтоб сгенерировать сайт teacss.org.
    Вот репозиторий в котором лежит сам сайт и его генератор — github.com/boomyjee/teacss-docs

    И более развернутый пример — github.com/boomyjee/teacss-docs/blob/master/build/templates/pages/index.tea

    В качестве вспомогательного языка используются конструкции вроде

    Highlight xml {
      <link tea="style.tea">
      <script src="teacss.js"></script>
    }
    


    Которые дают на выходе html для подсвеченного кода.

    Я сделал небольшой плейграунд, чтоб вы могли подробнее посмотреть, как работает генерация html – teacss.org/template.htm


    Заключение


    TeaCSS – это мета-DSL декларативного толка, который изначально был придуман для облегчения разработки и сборки веб-приложений, но по сути является универсальным генератором контента на декларативной основе используя в качестве дружественного языка браузерный JS.

    Это означает, что для запуска и работы не нужно ничего, кроме браузера, чтоб открывает возможность создавать интерактивный процесс разработки прямо в браузере.

    Про это я расскажу в одной из следующих статей.

    P.S.


    Напомню, что я решил написать эту статью т.к. по сути делаю вещи очень похожие одновременно на последний проект Adobe — Brackets и на кикстартеровский Light-table. Но есть несколько отличий и мне кажется, что они могут быть ключевыми, чтоб рассказать про них, нужно начать с библиотеки, которая лежит в основе проекта — teacss. Надеюсь найти на хабре единомышленников и помощников/партнеров этот самый большой проект.

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 8

      0
      TeaCSS может быть использован как система генерации статических сайтов

      Это сейчас так актуально…

      Посмотрите на addyosmani.com/blog/improved-developer-tooling-and-yeoman/, github.com/cowboy/grunt. Про Less/Sass/Stylus, думаю, можно промолчать…
        0
        Это сейчас так актуально…

        ну тот же GitHub pages по этому принципу работает
        для документации вполне актуально, смысл делать сложно (динамически), где можно сделать просто (статически)?

        про грант почитал, это лишь набор тулзов командной строки, ну и он требует ноды, но в общем-то неплохая штука
        а вот yeoman.io/ интереснее, как сборная солянка лучших практик

        и, конечно, мне было бы приятно, если бы туда же попал и TeaCSS, как один из компонент

        P.S. и было бы замечательно, если бы вы точнее формулировали мысли
        а то я пока уловил только «посмотрите это и это», посмотрел, спасибо за ссылку
        было бы лучше, если бы вы явно написали какое это отношение имеет к статье, тогда мне было бы проще написать вам осмысленный ответ
          0
          Не судите строго, но читаю второй ваш пост на тему, и, честно — не въезжаю в вашу цель. Ну, или, как-то из далека оно все более менее понятно, но в сухом остатке не вижу никакого профита над имеющимися решениями.

          Зачем мне писать 300+ строк непонятного/неинтуитивного, смешанного по семантике кода, который генерит одну статику? А как же OOP и DRY? Как вы видите применение вашего подхода в большой команде, разделении на уровни, ответственности?

          Может я туплю, но все это как-то мимо текущих трендов. Невзлетит (с).
            0
            Я не знаю, зачем вам вообще писать непонятный и смешанный по семантике код.
            Лучше писать код понятный с четкой, привычной и интуитивной семантикой. Но это вроде я кэпом выступаю.
            Возможно, и я правда, не совсем донес мысль, но TeaCSS — не для генерации статики.

            Это одна из тех вещей, которую он может делать. Зачем вообще генерировать статику — это вопрос выходящий за рамки статьи, но эта задача стоит и часто это самый простой путь. Например те же твиттеровцы генерят доки к бутстрепу именно статикой.

            Так вот, именно эту задачу (как и многие другие) TeaCSS решает проще и изящнее других генераторов (примеры в статье) т.к. не завязан ни на что кроме браузера, дает однотипный и минималистичный синтаксис для всех компонент страницы, ну и некоторые плюшки, о которых я не успел рассказать, но вроде пока достаточно.

            Теперь по OOP и DRY. Инструмент как и был создан для соблюдения максимального DRY-принципа. Он просто провоцирует реюзабельность всего.

            Разделение вижу, как и при любых других подходах. Эти вещи лежат в разных плоскостях и принципы командной работы я никак не нарушаю этим инструментом (если вам показалось, что нарушаю, буду благодарен, если вы поясните где я это сделал — можно в личку или скайп, и я или пойму свою ошибку или ошибку формулировки, что возникает такое впечатление).

            Про тренды — это вообще отдельный вопрос. Мне как раз кажется, что когда адоб выпускает продукт, а он на 90% повторяет библиотеки на которые я опирался в своем, то это о чем-то говорит.

            В общем, я верю не в тренды (т.е. моду), а верю в удобные и полезные для людей вещи. Мода приходяща, а вот польза дает реальный профит ))
        0
        Пусть картинка тут повисит…
          0
          картинка отличная ) только непонятно в какой вы когорте:
          — тех, кто считает обобщенный подход злом
          — или тех, кто верит, что в основе многих вещей лежат общие корни )
            0
            А вы прочтите про этот нож в интернетах…
              0
              прочел, впрочем, аналогия не совсем верна
              jQuery же никто не считает монстром просто потому, что к ней есть куча плагинов и можно писать новые
              так и тут — cама система занимает килобайт 10-20 (с гзипом, без)

        Only users with full accounts can post comments. Log in, please.