Агульная інфармацыя

"You can’t identify a code craftsman by whether or not they use this framework or that language. You can identify them by how they decide which framework or language to use, or not use, in a given situation." by Eric Meyer

• Прэпрацэсары
  • SASS
  • LESS
  • Coffeescript
• Шабланізатары (JS)
  • Handlebars
  • Jade
  • _.template
• Прылады для жыцьця

Як абраць шабланізатар?

• Для кліента ці сервера?
• Колькі ўбудаванай логікі?
• Ці павінен быць найхутчэйшым?
• Ці трэба прэкампіліраваць шаблоны?
• DOM / String?

Прылады для жыцьця

• Photoshop
  • CSS Hat
  • Png Hat
• Siblime Text
  • Prefixr
  • Sidebar Enhancements
  • Emmet (ex Zen Coding)
  • Alignment
  • DocBlockr
• Іншае
  • Bower
  • “Oh My ZSH!” http://ohmyz.sh/
  • AngularJS Batarang (Chrome)
  • Perfect Pixel (Chrome)

Вайна білдоў: Grunt vs Gulp

Grunt плагіны

GRUNT since 0.4

+

BOWER

+

YEOMAN

=

Profit!

A challenge appears

Gulp.js

Пара словаў

• Маленькія node.js модулі
• Патокавая сістэма білдаваньня
• Простае і элегантнае API

Так у чым розніца?

Канфігурацыя vs код

А сур'ёзна?

Grunt workflow (пішам часовыя файлы)

Gulp workflow (захоўваем усё ў памяці)

Маст-юз плагіны

• grunt-/gulp-combine-media-queries
• grunt-grunticon/gulp-iconfont
• grunt-html-minify/gulp-minify-html
• grunt-uglify/gulp-uglify

Yeoman

Сучасны працэс распрацоўкі для сучасных пралыдаў.

Ключавыя кампаненты

• Yo
• Bower
• Grunt/Gulp

Вэб кампаненты?

4 асноўных модуля:

• Шаблоны (templates)
• Дэкаратары (decorators)
• Карыстальніцкія элементы (custom elements)
• Прывідны DOM (shadow DOM)

Дазваляюць:

• Ствараць віджэты,
• реюзабельныя віджэты,
• якія нічога не зламаюць, пры зьменах у рэалізацыі кампанента

Даступныя генератары

• AngularJS
  • ng-poly (aka ng-poly:app)
  • ng-poly:constant
  • ng-poly:controller
  • ng-poly:directive
  • ng-poly:factory
  • ng-poly:filter
  • ng-poly:module
  • ng-poly:provider
  • ng-poly:route
  • ng-poly:service
  • ng-poly:value
  • ng-poly:view
• Polymer
  • ng-poly:element