Slides from my presentation on Single-Page Applications at Desert Code Camp 2012. The event was held on November 17th, 2012 at Chandler-Gilbert Community College. http://nov2012.desertcodecamp.com/session/565

1. SINGLE-PAGE APPLICATIONS
Should you make the shift?
Adam Mokan
Desert Code Camp
Nov 17, 2012

2. Adam Mokan
Sr Application Architect
Five9, Inc
@adammokan

3. WHAT DEFINES A SINGLE-PAGE
APPLICATION?

4. 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

7. WHAT ARE THE GAINS?
• Deployment ease
• Feature-rich UI
• No plugins
• Cross-platform and device
• Web browser as a runtime
• HTML5, CSS3, Web Sockets*

8. 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.

9. IT’S NOT FOR EVERYONE
Yet

10. CONSIDERATIONS
• How ready is your team?
• Doyou have a JSON-based
REST API?
• How much JavaScript
experience? Especially over the
past couple years.
• Do you have specific browsers
or platforms to target?

11. 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.

12. WHICH FRAMEWORK???

13. WHICH FRAMEWORK???
• Backbone.js
• Spine.js
• Knockout.js
• Ember.js
• and hundreds more!

14. ‘Todo’ examples only go so
fa r...
http://todomvc.com
But they are beneficial

15. 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)

16. 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)

17. USE THE ‘LEGO’ APPROACH

18. 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.

19. 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 workflow.
• What can be improved?

20. TOOLING
Optimize Your Workflow

21. TOOLING
• Browser Dev Tools
• JavaScript console
• Debugging
• Builds
• File Concatenation
• File Minification
• JavaScript Transcompilers
• CoffeeScript
• TypeScript
• Node.js
• It’s not only useful for 4 line web servers

22. 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/

23. EXAMPLE OF A FULL-FEATURE
SYSTEM
• Brunch http://brunch.io/
• Application ‘skeletons’ or boilerplate templates
• JavaScript, CoffeeScript, and others
• Multiple frameworks, but primarily Backbone.js
• Combines project layout, builds, test runners, and dev server

24. But the re are others!
• Backbone Boilerplate
• Google Yeoman
• Ember.js

25. MODULAR CODE
Plan for disaster

26. THE OLD APPROACH
• LargeJavaScript files crossing
multiple concerns
• Dependency chain managed
manually

27. TODAY
• DiscreteJavaScript files and
structure based upon logical
area of application
• Dependency management
managed by a module
loader

28. AMD & REQUIREJS

29. WHAT AMD/REQUIREJS
HELPED US WITH
• Difficult and/or complex dependency issues
• Created a code-base that is easier for new developers to pick
up
• Flexible build strategies

30. LOOSE COUPLING

31. MEDIATORS & EVENT
AGGREGATORS
Avoid direct
communication
between
modules
Look for bad
patterns
developing
between view
modules, in
par ticular

32. TESTING
• Jasmine for unit testing
• Selenium Webdriver for integration testing
• This has been neglected, but is getting better

33. RESOURCES MENTIONED
A bit.ly bundle with links to
frameworks and tools
mentioned in addition to a
couple fairly new books.
http://bit.ly/dcc-single-page-app-resources

34. THANK YOU !
Adam Mokan
@adammokan