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

@sergeymoiseev
Разрабатываете ли
вы для веба?
Пора начинать.
Теперь это просто.
Ваш frontend пишет
каждый день код на
jquery или ванильном js?
Пора избавиться от
него.
Вам не знакомы
аббревиатуры RIA и
SPA?
Время вернуть себе
frontend.
Итог 2013 года. Расцвет
MVC JS фреймворков.
http://www.funnyant.com/
choosing-javascript-mvcframework/
Backbone?
Слишком много усилий
onRender: ->
bindings = Backbone.ModelBinder.createDefaultBindings(@el, 'name')
delete bindings['resu...
Ember?
Поновее, но всё ещё слишком много
усилий.
Angular?
В самый раз?
Только если вы поняли
как его готовить.
Оставьте привычки за
дверью.
Модель это не
модель.
ngmodel=model.attribute
Keep It Simple Stupid.
Фильтры
ng-repeat = 'object in contextObjects'
От частных коллекций, к общим с фильтрацией данных.
ng-repeat = 'object in ...
http://jsfiddle.net/sergeymoiseev/8YsRn/
http://bit.ly/1c8nBRo
Фильтры №2
{{tree.change > 0 ? ('+' + tree.change) : tree.change}}%
От if к фильтрам при выводе данных.
{{ tree | changeBy...
http://jsfiddle.net/sergeymoiseev/tCGY5/
http://bit.ly/1cTgBbW
http://ngauthier.com/2013/04/learning-angular-on-rails.html
http://bit.ly/19Np9Ej
Bower
CSS анимации
.competence
@include transition (border 1.0s ease-in-out)
white-space: nowrap
padding: 5px
margin: 5px
border...
•

SASS http://sass-lang.com/

•

Bourbon http://bourbon.io/

•

Animate.css https://daneden.me/animate/
http://jsbin.com/usaruce/3/edit
http://bit.ly/JteLXs
http://www.divshot.com/blog/tips-and-tricks/angular-1-2-andanimate-cs...
Bonus track
http://d3js.org/
http://jsfiddle.net/sergeymoiseev/2PY3M/
http://bit.ly/19juiDq
Fire your front end
Fire your front end
Upcoming SlideShare
Loading in …5
×

Fire your front end

1,257 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,257
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Fire your front end

  1. 1. Уволь своего frontend разработчика http://slidesha.re/19NHpxn @sergeymoiseev
  2. 2. Разрабатываете ли вы для веба?
  3. 3. Пора начинать.
  4. 4. Теперь это просто.
  5. 5. Ваш frontend пишет каждый день код на jquery или ванильном js?
  6. 6. Пора избавиться от него.
  7. 7. Вам не знакомы аббревиатуры RIA и SPA?
  8. 8. Время вернуть себе frontend.
  9. 9. Итог 2013 года. Расцвет MVC JS фреймворков.
  10. 10. http://www.funnyant.com/ choosing-javascript-mvcframework/
  11. 11. Backbone?
  12. 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. 13. Ember?
  14. 14. Поновее, но всё ещё слишком много усилий.
  15. 15. Angular?
  16. 16. В самый раз?
  17. 17. Только если вы поняли как его готовить.
  18. 18. Оставьте привычки за дверью.
  19. 19. Модель это не модель.
  20. 20. ngmodel=model.attribute
  21. 21. Keep It Simple Stupid.
  22. 22. Фильтры 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);
  23. 23. http://jsfiddle.net/sergeymoiseev/8YsRn/ http://bit.ly/1c8nBRo
  24. 24. Фильтры №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; }
  25. 25. http://jsfiddle.net/sergeymoiseev/tCGY5/ http://bit.ly/1cTgBbW
  26. 26. http://ngauthier.com/2013/04/learning-angular-on-rails.html http://bit.ly/19Np9Ej
  27. 27. Bower
  28. 28. 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)
  29. 29. • SASS http://sass-lang.com/ • Bourbon http://bourbon.io/ • Animate.css https://daneden.me/animate/
  30. 30. 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
  31. 31. Bonus track http://d3js.org/ http://jsfiddle.net/sergeymoiseev/2PY3M/ http://bit.ly/19juiDq

×