Download - Fire your front end
Уволь своего 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/