Embularactymerbone

Have you ever picket frontend framework or library?

Transcript

1. Embularactymerbone 28 March , SETCON 2015 @ Brest
2. Have you ever picked a frontend framework or library?
3. Ember vs Angular Angular vs Backbone Backbone vs Ember React vs Polymer
4. Frameworks vs FrameworksYou
6. Whoami Hi, I'm Vitali Fokin Lead Software Engineer at EPAM Systems, UI zealot
 Vitali_Fokin@epam.com
7. Yesterday Earlier tools led to the larger frameworks of today
8. JQuery MooTools Prototype Script.aculo.us Dojo
9. JQuery MooTools Prototype Script.aculo.us Dojo?
10. You might not need jQuery http://youmightnotneedjquery.com/
11. What was wrong? Lots of small libraries No common interfaces Build your own framework Reinvent the wheel Compatibility hell
12. Today One ring to rule them all
13. One stop-shop Solve all the problems with one shot Components-based architecture Comprehensive solutions Easy to reuse
17. Why?
18. No silver bullet
19. Pitfalls Vendor lock (Angular) High learning curve (Ember) Too modern for most browsers (Polymer) Opinionated solutions (Ember) Lack of features (Backbone, React)
20. Let's look around
21. Components
22. JQuery UI ExtJS, YUI
23. Angular Directives
24. <google-map lat="37.790" long="-122.390"> </google-map>
25. Flight Meanwhile in Twitter
26. Who on earth needs controllers?
27. Web Components
28. Polymer
29. Ember Components
30. React Components done right
31. React + React Router
32. All for DOM updates
33. Data bindings
34. One-way vs Two-way
37. One-way One-time vs Two-way
38. KVO (Ember, Backbone) Dirty checking (Angular) Virtual DOM (React)
39. Key-value observers Inconvenient API
40. Dirty Checking Slow
41. Virtual DOM :thumbs_up:
42. DOM updates done right getters / setters / observe (ES7) priority queues virtual DOM
43. Tools
44. Inspect it Ember Inspector (Chrome, FF) Angular Batarang (Chrome) React DevTools (Chrome) Backbone Debugger (Chrome)
46. Scaffold it
47. Automate it Grunt Brunch Broccoli Gulp
49. Test it QUnit Jasmine Mocha
50. Load it RequireJS Browserify Webpack
51. etc, etc, etc...
52. How'd we get here?
53. Browsers and javascript evolved We changed our mind and tools People got tired of creating same stuff
54. Lots of folks are trying to build on the Web
55. Tomorrow
56. What every framework will do?
57. Realtime Offline mode ECMAScript 6 Server bootstrapping Mobile oriented Rich tools
58. So, what should I use then?
59. Angular
60. Ember
61. React Components done right
62. Backbone
63. Polymer
64. Picked a framework?
65. You're AWESOME!
66. But what will you choose?
68. Thank you!
69. Feel free to contact me Vitali_Fokin@epam.com
70. Q&A