36
CTO Avastec THE NATURAL RELATIONSHIP OF MV* JS FRAMEWORKS AND THE ORCHARD ECOSYSTEM Steve Taylor

Orchard Harvest - European Conference 2013

Embed Size (px)

DESCRIPTION

THE NATURAL RELATIONSHIP OF MV* JS FRAMEWORKS AND THE ORCHARD ECOSYSTEM

Citation preview

Page 1: Orchard Harvest - European Conference 2013

CTOAvastec

THE NATURAL RELATIONSHIP OF MV* JS FRAMEWORKS AND THE ORCHARD

ECOSYSTEM

Steve Taylor

Page 2: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Where it began…

Page 3: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

1990’s

Page 4: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

1996- iFrame

Page 5: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

1998 - XmlHttpRequest

Page 6: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

2001 - JSON

Page 7: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

2004 - Gmail

Page 8: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Timeline 2005 - Ajax

Page 9: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Timeline 2006 - jQuery

Page 10: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Demo: Old Skool

Page 11: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

The result?

Page 12: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

MVC, or rather MV*?

MVC (Model View Controller)

MVP (Model View Presenter)

MVVM (Model-View ViewModel)

Page 13: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Top players

Page 14: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Libraries vs Frameworks

Page 15: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Libraries

Page 16: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Frameworks

Page 17: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

There’s something familiar about all this

Page 18: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Remember these?

Page 19: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

JavaScript is HUGE!

Page 20: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

So why the surge?

Page 21: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Faster JavaScript Engines

Page 22: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

User Expectations

Page 23: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Better Browser Support

Page 24: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Great Scott!, what about Orchard?

Page 25: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

What’s being used now?

Page 26: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Orchard API Options

Page 27: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Backbone.js

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Page 28: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Who’s using Backbone?

Page 29: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Demo: Orchard.Backbone

+

Page 30: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

What does the future hold?

Page 31: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Optimised API

Page 32: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Orchard.Backbone Roadmap

Pagination

Sorting

Filtering

SearchingTransitions

Modular

View Management

Client & Server Modes

Optimisation

Page 33: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

What happening elsewhere?

:: Backbone at core

:: RESTful API at core

:: Twig Template Engine {{first-name}}

Page 34: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Embrace

Page 35: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

:: Backbone.js - http://backbonejs.org/

:: Underscore.js - http://underscorejs.org/

:: Drupal Webservice Initiative - http://www.garfieldtech.com/blog/web-services-initiative

:: Backbone.js & Underscore.js to Drupal Core - https://drupal.org/node/1149866

References

Page 36: Orchard Harvest - European Conference 2013

Orchard Harvest Conference – Amsterdam 2013

Thank You

@stevetayloruk

http://stevetaylor.me.uk

http://uk.linkedin.com/in/stevetayloruk