Download - Fire your front end
![Page 1: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/1.jpg)
Уволь своего frontend разработчика
@sergeymoiseev
http://slidesha.re/19NHpxn
![Page 2: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/2.jpg)
Разрабатываете ли вы для веба?
![Page 3: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/3.jpg)
Пора начинать.
![Page 4: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/4.jpg)
Теперь это просто.
![Page 5: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/5.jpg)
Ваш frontend пишет каждый день код на
jquery или ванильном js?
![Page 6: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/6.jpg)
Пора избавиться от него.
![Page 7: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/7.jpg)
Вам не знакомы аббревиатуры RIA и
SPA?
![Page 8: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/8.jpg)
Время вернуть себе frontend.
![Page 9: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/9.jpg)
Итог 2013 года. Расцвет MVC JS фреймворков.
![Page 10: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/10.jpg)
http://www.funnyant.com/choosing-javascript-mvc-
framework/
![Page 11: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/11.jpg)
Backbone?
![Page 12: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/12.jpg)
Слишком много усилий 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]',
![Page 13: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/13.jpg)
Ember?
![Page 14: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/14.jpg)
Поновее, но всё ещё слишком много усилий.
![Page 15: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/15.jpg)
Angular?
![Page 16: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/16.jpg)
![Page 17: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/17.jpg)
В самый раз?
![Page 18: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/18.jpg)
Только если вы поняли как его готовить.
![Page 19: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/19.jpg)
![Page 20: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/20.jpg)
Оставьте привычки за дверью.
![Page 21: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/21.jpg)
Модель это не модель.
![Page 22: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/22.jpg)
ng-model=model.attribute
![Page 23: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/23.jpg)
Keep It Simple Stupid.
![Page 24: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/24.jpg)
Фильтры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); }
![Page 26: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/26.jpg)
Фильтры №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; } }
![Page 28: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/28.jpg)
http://bit.ly/19Np9Ejhttp://ngauthier.com/2013/04/learning-angular-on-rails.html
![Page 29: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/29.jpg)
Bower
![Page 30: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/30.jpg)
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)
![Page 31: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/31.jpg)
• SASS http://sass-lang.com/
• Bourbon http://bourbon.io/
• Animate.css https://daneden.me/animate/
![Page 32: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/32.jpg)
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
![Page 33: Fire your front end](https://reader034.vdocuments.site/reader034/viewer/2022051610/5495b0eeb4795947408b4693/html5/thumbnails/33.jpg)
Bonus trackhttp://d3js.org/
http://bit.ly/19juiDqhttp://jsfiddle.net/sergeymoiseev/2PY3M/