Уволь своего frontend разработчика

@sergeymoiseev

http://slidesha.re/19NHpxn

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

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

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

Ваш frontend пишет каждый день код на

jquery или ванильном js?

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

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

SPA?

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

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

http://www.funnyant.com/choosing-javascript-mvc-

framework/

Backbone?

Слишком много усилий 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'] = [ selector: '[name=position_specialization_ids_string]',

Ember?

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

Angular?

В самый раз?

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

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

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

ng-model=model.attribute

Keep It Simple Stupid.

Фильтры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); }

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

Фильтры №2

{{ tree | changeByContext: context | addPlus }}%

{{tree.change > 0 ? ('+' + tree.change) : tree.change}}%

От if к фильтрам при выводе данных.

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; } }

http://bit.ly/1cTgBbWhttp://jsfiddle.net/sergeymoiseev/tCGY5/

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

Bower

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)

• SASS http://sass-lang.com/

• Bourbon http://bourbon.io/

• Animate.css https://daneden.me/animate/

http://bit.ly/1jKXR7M

http://bit.ly/JteLXs

http://bit.ly/1iiKv0M

http://www.divshot.com/blog/tips-and-tricks/angular-1-2-and-animate-css/

http://jsbin.com/usaruce/3/edit

http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

Bonus trackhttp://d3js.org/

http://bit.ly/19juiDqhttp://jsfiddle.net/sergeymoiseev/2PY3M/