backbone web apps

This is a gentle intro into building Backbone web apps and hopefully convincing you all that JavaScript is no longer an add on to websites but a BIG PLAYER



Ye olde javascript

JavaScript was mostly for effect, for user interaction and form validation

Ajax

Asynchronous communication with the server.
Changed everything.





google changed the game, pioneering the modern web application

Forget websites

  • desktop experience on the web
  • states, not pages
  • no page refreshes

better, richer uis

  • perceived speed
  • why does the user care what's going on at your server
  • Facebook "like" and the Twitter "favourite" - immediate visual feedback
  • So damn good - http://www.infoq.com/presentations/Asynchronous-UI
Flow - http://www.getflow.com/
Gmail - http://mail.google.com
Rdio - http://rdio.com/new



who we do it for...

 

The user - how do they benefit

  • all about the user
  • not just a new fangled approach
  • quicker, seamless experience
  • more options client-side, localstorage for example
  • one API, multiple standalone frontends
  • takes the load off of the server
  • Google do it...


it can't be all peachy...



no disadvantages??

Sure there are, like many approaches there are some good and bad points. It's just that with this one, the good outweighs the bad and it's a more forward thinking approach (future-proofing our technology)

  • relatively young technology (SPA apps)
  • people are still learning
  • pre-existing knowledge 
  • turns development workflow on it's head
  • you can beef up your server, you can't beef up your user's PC

So what do we use?


jQuery

  • jQuery is awesome
  • jQuery is, however, not an application structure
  • jQuery is a Facade Pattern for JavaScript






So if not jQuery...then what...

mv* frameworks

  • bringing server side paradigms to JavaScript
  • forget "scripts", think "modules"
  • Models - hold data, save data, fetch data. Data.
  • Views - Control UI components. Dictated by higher powers
  • manipulate Models, render your "dumb" views
  • less "URLs", more "routes" - bookmarkable "states" for the user
  • we need frameworks. If we don't we end up with DOM spaghetti and build up code debt.




Enter backbone

backbone

  • written by an accomplished, reputable, company
  • strong developer community
  • KISS mentality - simple but powerful Objects for you to extend in your app
  • not opinionated on structure - this is up to you (sometimes criticised for this)
  • template and DOM library agnostic - use with jQuery
  • a forerunner in the MV* frameworks right now (maybe flavour of the month syndrome, but hey ho)
  • steep learning curve - muchos reward
  • developer exposure - only a handful of mainstream apps use it

where we want to be

  • decoupled, modular development
  • separation of concerns
  • BUZZWORDS


Resources

  • Anything by this guy - http://addyosmani.com/blog/
  • BackboneJS - http://backbonejs.org/
  • List of Scalable JavaScript Architecture resources - https://github.com/addyosmani/aura/wiki/Resources-On-Scalable-JavaScript-Application-Architecture

Ask me anything

http://twitter.com/benhowdle
Made with Slides.com