Компонентная разработка на Stylus, Jade, Typescript

Леонид Ширманов - MCT, MCPD

Agenda

• Бенефиты компонентной разработки на фронтенде• Jade для HTML• Stylus для CSS + Jeet + Rupture• Typescript для JavaScript• Выводы

Что имеем в виду под компонентой

• Компонента, контрол, блок/элемент в терминах Яндекс.БЭМ• Суть в легко переиспользуемом фрагменте HTML/CSS/JS• HTML/CSS/JS переиспользуются совместно• Компоненты переиспользуются путем их размещения на

страницах• Компоненты не знают о существовании друг друга на странице

В чем трудности

• Обычно мы делаем CSS, JS, HTML «модульным» по отдельности• Принципы деления на модули различны• JavaScript – CommonJS, AMD – requirejs, browserify и др.• CSS – делим по файлам, испольуем LESS, SASS• HTML – серверные контролы, клиентские шаблоны

• Backbone, Angular, Ember – это все об MVC – HTML, JS, без CSS

Как было бы удобно

Jade для HTML

http://jade-lang.com/

Jade для HTML

• Полноценный движок шаблонов с синтаксиcом на основе HAML• Реализации для Node.js, Java, .NET (Spark), PHP, Ruby (wrapper)• Есть все конструкции синтаксиса – условия, итерации, case• Фильтры для компиляции фрагментов на другом языке

(markdown, coffee script etc)

• Мощное средство как server-side движок в рантайме• Так почему он?

Jade для HTML

• Синтаксис HAML – визуально меньше текста, исключены ошибки «забыли закрыть тег», «не туда вставили фрагмент» и т.п.

• Умеет компилировать статический html• Mixins !

User.jade file

-- var user = { nickname: ‘Дамский угодник 1744' }div.user if user.nickname h2 Ник-нейм: p.nickname= user.nickname else h1 Ник-нейм: p.nickname Ник-нейм не указан

User.html file

<div class="user"> <h2>Ник-нейм</h2> <p class=“nickname">Дамский угодник 1744</p></div>

Jade mixin со строковым параметром

mixin article(title) div.article div.article-wrapper h1= title if block block else p Статья не найдена

Jade mixin со строковым параметром

+article(‘Погода в Москве') p Солнечно!

<div class="article"> <div class="article-wrapper"> <h1>Погода в Москве</h1> <p>Солнечно!</p> </div></div>

Jade для HTML

• Demo

Stylus для CSS

• Мощная альтернатива LESS и SASS• Яндекс.Почта писали на Хабре причины перехода на Stylus http:

//habrahabr.ru/company/yandex/blog/169415/• Mixins !

Имеет сногшибательные дополнения:• Jeet (http://jeet.gs/)• Rupture (http://jenius.github.io/rupture/)

Stylus mixin

rainbow(cssclass) hr.{cssclass}:before background linear-gradient(…) position absolute … hr.{cssclass}:after position absolute …

Jeet для Stylus

Jeet mixins

• column() == col() -- column(1/4, offset: 1/4)• span() -- span(1/4)• center()• stack()• unstack()• edit()• alight()• cf() -- clearfix• shift()• unshift()

Грид на Bootstrap-e

Rupture для Stylus

• Breakpoint Slicer - генерирует Media Queries• http://jenius.github.io/rupture/

• переменная scale = 0 400px 600px 800px 1050px

Rupture - mixins для Stylus

• +above(measure)• +from(measure)• +below(measure)• +to(measure)• +between(measure, measure)• +at(measure)

• +mobile() <= 400px• +tablet() between 400px & 1050px• +desktop() >= 1050px• +retina() pixel density >= 1.5

Rupture - mixins для Stylus

https://github.com/lolmaus/breakpoint-slicer

Stylus для CSS

• Demo

Typescript для JavaScript

• http://www.typescriptlang.org/• Привносит ООП в JavaScript – модули, классы, интерфейсы• Типы, дженерики, enums• Компилирует сразу в AMD или CommonJS модули• Поддержка IDE – Visual Studio, WebStorm и др.

Недостатки Typescript

• Без использования ООП – не дает приемуществ• ООП означает на все пишем классы и методы класса

• Для использования сторонних библиотек требуются Type Definitions https://github.com/borisyankov/DefinitelyTyped

• jquery.d.ts, require.d.ts и т.д.

ООП в Typescript - классы

class User { private name: string; constructor(name: string) { this.name = name; } public displayInHeader(): string { return "Привет, " + this.name; }}

ООП в Typescript - классы

var currentUser = new User("Иван");

element.textContent = currentUser.displayInHeader();

Что-то не так...

ООП в Typescript - классы

class User { private name: string; constructor(name: string) { this.name = name; } public displayInHeader(element: any): void { var nameElement = ‘<span>Hello, ‘ + this.name + ‘</span>’; $(element).append(nameElement); }}

ООП в Typescript - классы

var currentUser = new User("Иван");

currentUser.displayInHeader( $(‘selector’) );

Typescript для JavaScript

• Demo

Event Aggregator Pattern

• Паттерн описанный Мартином Фаулером в книге Patterns of Enterprise Application Architecture

• http://martinfowler.com/eaaDev/EventAggregator.html• Широко применяется в MVVM-фреймворках для десктопа• Это реализация событий «на принципах» ООП

Event Aggregator Pattern

Event Aggregator Pattern

• Источники событий имеют ссылку на агрегатор и используют ее для генерации событий

• Потребители событий имеют ссылку на агрегатор и подписываются у него на оповещение о событиях

• Все объекты не знают друг о друге – знают только об агрегаторе

Event Aggregator Pattern

• Demo на Typescript

Заключение

• Комбинируйте технологии, библиотеки, фреймворки• Ищите Ваш способ делать фронтенд компонентным и наработки

переиспользуемыми