Your SlideShare is downloading. ×
0
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Fire your front end
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Fire your front end

754

Published on

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

No Downloads
Views
Total Views
754
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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?
  • 16. В самый раз?
  • 17. Только если вы поняли как его готовить.
  • 18. Оставьте привычки за дверью.
  • 19. Модель это не модель.
  • 20. ngmodel=model.attribute
  • 21. Keep It Simple Stupid.
  • 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. http://jsfiddle.net/sergeymoiseev/8YsRn/ http://bit.ly/1c8nBRo
  • 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. http://jsfiddle.net/sergeymoiseev/tCGY5/ http://bit.ly/1cTgBbW
  • 26. http://ngauthier.com/2013/04/learning-angular-on-rails.html http://bit.ly/19Np9Ej
  • 27. Bower
  • 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. • SASS http://sass-lang.com/ • Bourbon http://bourbon.io/ • Animate.css https://daneden.me/animate/
  • 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. Bonus track http://d3js.org/ http://jsfiddle.net/sergeymoiseev/2PY3M/ http://bit.ly/19juiDq

×