Компонентная разработка на 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
• Полноценный движок шаблонов с синтакси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
Заключение
• Комбинируйте технологии, библиотеки, фреймворки• Ищите Ваш способ делать фронтенд компонентным и наработки
переиспользуемыми