Building our first single-page app

Presented at the March 2013 @DjangoToronto, A somewhat high level overview of how we've built our single page app, challenges, and moving forward.

Transcript

1. Building our first single- page app Bartek Ciszkowski eCommerce team, G Adventures Thursday, March 21, 13
2. Everywhere! Thursday, March 21, 13
3. Thursday, March 21, 13
4. Why a single-page app? Thursday, March 21, 13
5. Thursday, March 21, 13
6. Customers are expecting more Thursday, March 21, 13
7. • “Time to first tweet”, rendering essentials as soon as possible. • Mobile web is dead. Long live the web • Limited/unavailable data connection. Global issues. Thursday, March 21, 13
8. • Potential for duplication on server/client • Javascript community, the wild west • Bootstrapping vs. data on demand Challenges Thursday, March 21, 13
9. Our first app! Thursday, March 21, 13
10. Tech used • Backbone.js • Marionette.js • Handlebars • RequireJS • GruntJS Thursday, March 21, 13
11. Why Backbone? • We wanted to learn how to write proper Javascript • Our app was small enough that we could build the scaffolding ourselves (with some help from Marionette) Thursday, March 21, 13
12. Initializing the app Global app object starts everything. Handle routing, caching Initializes with modules, which are agnostic of the app Thursday, March 21, 13
13. Common patterns in views Thursday, March 21, 13
14. Thursday, March 21, 13
15. Thursday, March 21, 13
16. DRY Forms • Framework agnostic client-side forms • django-remote-forms • backbone.stickit Thursday, March 21, 13
17. RequireJS Thursday, March 21, 13
18. Thursday, March 21, 13
19. NOPE Thursday, March 21, 13
20. Thursday, March 21, 13
21. Thursday, March 21, 13
22. Ready to deploy • r.js optimizer takes all your hard work and merges it into a single file. • Almond.js removes dependency on requirejs include. Thursday, March 21, 13
23. Other tools we’re using • Bower • Jasmine / PhantomJS • GruntJS Thursday, March 21, 13
24. GruntJS + {{variousTools}} = ὑ Thursday, March 21, 13
25. What we’ve learned so far Thursday, March 21, 13
26. Someones already done what you’re trying to (but it may be deprecated already for something else. Follow the yellow brick road!) Thursday, March 21, 13
27. Self contained modules "the UNIX way of tiny self-contained modules that each do just one thing" -- http://substack.net/ Thursday, March 21, 13
28. Building against a sane API helps Thursday, March 21, 13
29. http://bit.ly/11hNxqL Google+ Thursday, March 21, 13
30. Resources • AirBnB Tech Talk on Single-page apps by Spike Brehm • RequireJS Multi-page shimmed site • Making life easier with Grunt • Building the next Soundcloud • django-requirejs-boilerplate by Thursday, March 21, 13
31. Thanks! Let’s talk @bartekci http://bartek.im Thursday, March 21, 13