Components: The future of the web Why we love Ember David Rice Technical Director at Rumble Labs @davidjrice

A tale of two MVCs What I was going to talk about Yehuda Katz http://www.youtube.com/watch?v=s1dhXamEAKQ

Ember.js <3 • Client-side JavaScript MVC • Observers • Computed Properties • Bindings • Components • & more…

What is MVC?

MVC • Model: data, business logic, persistence • View: data formatting, rendering, interaction • Controller: application flow, event handling

CONTROLLER MODEL VIEW

The grass is always greener on the other side

“Let’s just add this one hack. You know, for the time being…” - everyone, ever, at some point

CONTROLLER VIEW MODEL MODEL MODEL MODEL MODEL MODEL

MVC is not an application architecture MVC is a component pattern

What is an Application Architecture?

Server Side Application Architecture • Page-Based • Page-Based (with inline components) Flash • Page-Based (with selective inline updates) AJAX

Page-Based is how we traditionally design web applications http://onotate.com

Client Side Application Architecture • Master-Detail • Page-Based • Single View Application • Tabbed Application • Utility Application See: Xcode iOS etc.

Server Side MVC is always Page-Based yet may emulate client side MVC patterns

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

Working in a Page context is not a refined enough scope enables per-page and one-off solutions

With great power comes great responsibility

With great flexibility comes the mother of all nightmares

The biggest benefit frameworks bring are patterns in interfaces and implementation

Application Patterns • Model View Controller • Decorators • Presenters • Service Objects • Service Extraction

Server Side Frameworks historically light on providing User Interface patterns

Hard to fall off the “golden path” except if we’re looking in /public

Partials / Helper functions are really just DRY-ing up the rendering of our view

Components Managing User Interface sanity

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

Thinking about design in terms of components allows immense focus, modularisation and re-use

Refactoring A place for everything and everything in it’s place

Editors and Frameworks force the structure of our applications into what kind of file we are writing

Editors of the future will allow us to view our applications in flexible ways, based on what the task at hand is

User interface components are an ideal “interface” for design and development teams to collaborate

DESIGN DEVELOPMENT COMPONENT UI API PRODUCT

The Future of the Web • Web Components (W3C specification) • HTML5 range sliders, dates, times • Future Browser components? • Credit Card forms? • Authentication?

The future of the Web: Components With ember.js we can begin thinking building for the future today

Thanks! David Rice @davidjrice