KEY CHARACTERISTICS• No reload or ‘refresh’ within the user interface• User experience similar to Flash and Java• Much more ‘state’ and logic on the client• Gmail is a good example
WHAT ARE THE GAINS? • Deployment ease • Feature-rich UI • No plugins • Cross-platform and device • Web browser as a runtime • HTML5, CSS3, Web Sockets*
GAINS OFTEN NOT CONSIDERED• REST API can be consumed by other clients and makes a great integration point.• Flexibility to shift your application/UI in directions not considered.• Many client distribution options.• Parallel development opportunities.
FIRST STEP IDEAS• Dashboard interfaces• Portions of a larger application for use on mobile or tablets• A ‘todo’ list ( I am not being serious here ) If this idea is new to you and your team, start small.
WHICH FRAMEWORK???• Backbone.js• Spine.js• Knockout.js• Ember.js• and hundreds more!
‘Todo’ examples only go so fa r... http://todomvc.com But they are beneﬁcial
WHAT ARE WE USING ?• Backbone.js (base lib)• Backbone.Marionette (application framework, composite views, and more)• Handlebars.js (view templating)• AMD/RequireJS (dependency management, module loading)• Rivets.js (UI binding/Observables)
WHAT ARE WE USING ?• Backbone.js (base lib) Backbone.js is like a toolbox• Backbone.Marionette with a few ba sic items in it (application framework, composite . views, and more) You will not b uild a skyscra without addit per• Handlebars.js (view templating) ional knowled specialty tool ge, s, and manpo• AMD/RequireJS (dependency wer. management, module loading)• Rivets.js (UI binding/Observables)
THINGS TO PLAN FOR• Plan for shifts in client-side technology.• You will spend considerable time refactoring.• Ifin a Scrum environment, plan time for refactoring every other sprint or so.• Set proper expectations with stakeholders and management.
DEVELOP YOUR TEAM• Invest in learning and enable developers to do the same • Try to keep up, but don’t expect to follow everything.• Keep moving forward • Even if things are not perfect, because they will not be! • Extract what works and refactor.• Step back and look at your development workﬂow. • What can be improved?
HOW WE HAVE HANDLED THE BUILD PROCESS• Custom CLI tool built upon Grunt.js• Evaluated Google’s Yeoman and many others• Focused on consistency across teams http://gruntjs.com/
But the re are others!• Backbone Boilerplate• Google Yeoman• Ember.js