Components: The Future of the Web

"Why we Love Ember.js"
- Presented at DevBash Belfast. https://twitter.com/devbash

Transcript

1. Components: The future of the web Why we love Ember David Rice Technical Director at Rumble Labs @davidjrice
2. A tale of two MVCs What I was going to talk about Yehuda Katz http://www.youtube.com/watch?v=s1dhXamEAKQ
3. Ember.js <3 • Client-side JavaScript MVC • Observers • Computed Properties • Bindings • Components • & more…
4. What is MVC?
5. MVC • Model: data, business logic, persistence • View: data formatting, rendering, interaction • Controller: application flow, event handling
6. CONTROLLER MODEL VIEW
7. The grass is always greener on the other side
8. “Let’s just add this one hack. You know, for the time being…” - everyone, ever, at some point
9. CONTROLLER VIEW MODEL MODEL MODEL MODEL MODEL MODEL
10. MVC is not an application architecture MVC is a component pattern
11. What is an Application Architecture?
12. Server Side Application Architecture • Page-Based • Page-Based (with inline components) Flash • Page-Based (with selective inline updates) AJAX
13. Page-Based is how we traditionally design web applications http://onotate.com
14. Client Side Application Architecture • Master-Detail • Page-Based • Single View Application • Tabbed Application • Utility Application See: Xcode iOS etc.
15. Server Side MVC is always Page-Based yet may emulate client side MVC patterns
16. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec neque odio, accumsan quis diam ac, commodo egestas nibh. Mauris fringilla ipsum augue, tempus lobortis augue sagittis vehicula. Sed aliquet accumsan aliquet. Nulla varius, leo molestie ornare dictum, diam ante laoreet arcu, nec tempus nisi risus at augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec neque odio, accumsan quis diam ac, commodo egestas nibh. Page based design Image Comments Related Posts Text Post /posts/:id
17. Working in a Page context is not a refined enough scope enables per-page and one-off solutions
18. With great power comes great responsibility
19. With great flexibility comes the mother of all nightmares
20. The biggest benefit frameworks bring are patterns in interfaces and implementation
21. Application Patterns • Model View Controller • Decorators • Presenters • Service Objects • Service Extraction
22. Server Side Frameworks historically light on providing User Interface patterns
23. Hard to fall off the “golden path” except if we’re looking in /public
24. Partials / Helper functions are really just DRY-ing up the rendering of our view
25. Components Managing User Interface sanity
26. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec neque odio, accumsan quis diam ac, commodo egestas nibh. Mauris fringilla ipsum augue, tempus lobortis augue sagittis vehicula. Sed aliquet accumsan aliquet. Nulla varius, leo molestie ornare dictum, diam ante laoreet arcu, nec tempus nisi risus at augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec neque odio, accumsan quis diam ac, commodo egestas nibh. Component based design 100% 1/5 4/5 Comment
27. Thinking about design in terms of components allows immense focus, modularisation and re-use
28. Refactoring A place for everything and everything in it’s place
29. Editors and Frameworks force the structure of our applications into what kind of file we are writing
30. Editors of the future will allow us to view our applications in flexible ways, based on what the task at hand is
31. User interface components are an ideal “interface” for design and development teams to collaborate
32. DESIGN DEVELOPMENT COMPONENT UI API PRODUCT
33. The Future of the Web • Web Components (W3C specification) • HTML5 range sliders, dates, times • Future Browser components? • Credit Card forms? • Authentication?
34. The future of the Web: Components With ember.js we can begin thinking building for the future today
35. Thanks! David Rice @davidjrice