1. Уволь своего frontend
разработчика
http://slidesha.re/19NHpxn
@sergeymoiseev

2. Разрабатываете ли
вы для веба?

3. Пора начинать.

4. Теперь это просто.

5. Ваш frontend пишет
каждый день код на
jquery или ванильном js?

6. Пора избавиться от
него.

7. Вам не знакомы
аббревиатуры RIA и
SPA?

8. Время вернуть себе
frontend.

9. Итог 2013 года. Расцвет
MVC JS фреймворков.

10. http://www.funnyant.com/
choosing-javascript-mvcframework/

11. Backbone?

12. Слишком много усилий
onRender: ->
bindings = Backbone.ModelBinder.createDefaultBindings(@el, 'name')
delete bindings['resume_salary']
delete bindings['position_specialization_ids_string']
delete bindings['new_specialization_ids_string']
bindings['resume.positions.0.position.still_working'] = [
selector: '[name=position_still_working]'
,
selector: '[name=position_date_end]'
elAttribute: 'disabled'
direction: 'ModelToView'
]
bindings['resume.positions.0.position.employer.id'] = selector: '[name=position_employer_id]'
bindings['resume.positions.0.position.employer.name'] = [
selector: '[name=position_employer_id]'
elAttribute: 'data-name'
direction: 'ModelToView'
]
bindings['resume.positions.0.position.name'] = selector: '[name=position_name]'
bindings['resume.positions.0.position.date_begin'] = selector: '[name=position_date_begin]'
bindings['resume.positions.0.position.date_end'] = selector: '[name=position_date_end]'
bindings['resume.positions.0.position.industry.id'] = selector: '[name=position_industry_id]'
bindings['resume.positions.0.position.metric_size'] = selector: '[name=position_size]'
bindings['resume.positions.0.position.metric_grade'] = selector: '[name=position_grade]'
bindings['resume.positions.0.position.specialization_ids_string'] = [

13. Ember?

14. Поновее, но всё ещё слишком много
усилий.

15. Angular?

17. В самый раз?

18. Только если вы поняли
как его готовить.

20. Оставьте привычки за
дверью.

21. Модель это не
модель.

22. ngmodel=model.attribute

23. Keep It Simple Stupid.

24. Фильтры
ng-repeat = 'object in contextObjects'
От частных коллекций, к общим с фильтрацией данных.
ng-repeat = 'object in objects | objectsByContext: context'
if(trees && context && (context_id = context.id || context.template_id)) {
var tempTrees = [];
!
angular.forEach(trees, function (tree) {
if ( tree.context_percents && _.contains(Object.keys(tree.context_percents),
context_id.toString()) ) {
tempTrees.push(tree);
}
});
!
return _(tempTrees);
} else {
return _(trees);

25. http://jsfiddle.net/sergeymoiseev/8YsRn/
http://bit.ly/1c8nBRo

26. Фильтры №2
{{tree.change > 0 ? ('+' + tree.change) : tree.change}}%
От if к фильтрам при выводе данных.
{{ tree | changeByContext: context | addPlus }}%
filter('changeByContext', function(){
return function(tree, context) {
if ( context && context.id ) {
if (tree.old_context_percents) {
var result = tree.context_percents[context.id.toString()] tree.old_context_percents[context.id.toString()];
!
return result;
}
} else {
return tree.percent_change;
}

27. http://jsfiddle.net/sergeymoiseev/tCGY5/
http://bit.ly/1cTgBbW

28. http://ngauthier.com/2013/04/learning-angular-on-rails.html
http://bit.ly/19Np9Ej

29. Bower

30. CSS анимации
.competence
@include transition (border 1.0s ease-in-out)
white-space: nowrap
padding: 5px
margin: 5px
border: solid 2px rgba(250, 92, 93, 0.2)
border-radius: 5px
float: left
z-index: 1
cursor: pointer
!
&.ng-enter
@include animation(bounceIn 1s)
!
&.ng-leave
@include animation(bounceOut 1s)

31. •
SASS http://sass-lang.com/
•
Bourbon http://bourbon.io/
•
Animate.css https://daneden.me/animate/

32. http://jsbin.com/usaruce/3/edit
http://bit.ly/JteLXs
http://www.divshot.com/blog/tips-and-tricks/angular-1-2-andanimate-css/
http://bit.ly/1iiKv0M
http://www.yearofmoo.com/2013/08/remastered-animation-inangularjs-1-2.html
http://bit.ly/1jKXR7M

33. Bonus track
http://d3js.org/
http://jsfiddle.net/sergeymoiseev/2PY3M/
http://bit.ly/19juiDq