Презентация с DevConf'14

1. Компонентная разработка на
Stylus, Jade, Typescript
Леонид Ширманов - MCT, MCPD

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

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

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

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

6. Jade для HTML
http://jade-lang.com/

7. Jade для HTML
• Полноценный движок шаблонов с синтаксиcом на основе HAML
• Реализации для Node.js, Java, .NET (Spark), PHP, Ruby (wrapper)
• Есть все конструкции синтаксиса – условия, итерации, case
• Фильтры для компиляции фрагментов на другом языке
(markdown, coffee script etc)
• Мощное средство как server-side движок в рантайме
• Так почему он?

8. Jade для HTML
• Синтаксис HAML – визуально меньше текста, исключены ошибки
«забыли закрыть тег», «не туда вставили фрагмент» и т.п.
• Умеет компилировать статический html
• Mixins !

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

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

11. Jade mixin со строковым параметром
mixin article(title)
div.article
div.article-wrapper
h1= title
if block
block
else
p Статья не найдена

12. Jade mixin со строковым параметром
+article(‘Погода в Москве')
p Солнечно!
<div class="article">
<div class="article-wrapper">
<h1>Погода в Москве</h1>
<p>Солнечно!</p>
</div>
</div>

13. Jade для HTML
• Demo

14. Stylus для CSS
• Мощная альтернатива LESS и SASS
• Яндекс.Почта писали на Хабре причины перехода на Stylus http:
//habrahabr.ru/company/yandex/blog/169415/
• Mixins !
Имеет сногшибательные дополнения:
• Jeet (http://jeet.gs/)
• Rupture (http://jenius.github.io/rupture/)

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

16. Jeet для Stylus

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

18. Грид на Bootstrap-e

19. Rupture для Stylus
• Breakpoint Slicer - генерирует Media Queries
• http://jenius.github.io/rupture/
• переменная scale = 0 400px 600px 800px 1050px

20. 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

21. Rupture - mixins для Stylus
https://github.com/lolmaus/breakpoint-slicer

22. Stylus для CSS
• Demo

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

24. Недостатки Typescript
• Без использования ООП – не дает приемуществ
• ООП означает на все пишем классы и методы класса
• Для использования сторонних библиотек требуются Type
Definitions https://github.com/borisyankov/DefinitelyTyped
• jquery.d.ts, require.d.ts и т.д.

25. ООП в Typescript - классы
class User {
private name: string;
constructor(name: string) {
this.name = name;
}
public displayInHeader(): string {
return "Привет, " + this.name;
}
}

26. ООП в Typescript - классы
var currentUser = new User("Иван");
element.textContent = currentUser.displayInHeader();
Что-то не так...

27. ООП в 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);
}
}

28. ООП в Typescript - классы
var currentUser = new User("Иван");
currentUser.displayInHeader( $(‘selector’) );

29. Typescript для JavaScript
• Demo

30. Event Aggregator Pattern
• Паттерн описанный Мартином Фаулером в книге Patterns of
Enterprise Application Architecture
• http://martinfowler.com/eaaDev/EventAggregator.html
• Широко применяется в MVVM-фреймворках для десктопа
• Это реализация событий «на принципах» ООП

31. Event Aggregator Pattern

32. Event Aggregator Pattern
• Источники событий имеют ссылку на агрегатор и используют ее
для генерации событий
• Потребители событий имеют ссылку на агрегатор и
подписываются у него на оповещение о событиях
• Все объекты не знают друг о друге – знают только об агрегаторе

33. Event Aggregator Pattern
• Demo на Typescript

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