Responsive Backbone

Responsive design is the forward-thinking alternative to building out separate applications or relying on device-specific templates in your web application. But be careful, as organizing the many pieces of a modern RD app can become just as unwieldy. In this session, we learn the tools, tips, and tricks to organize your Backbone application gracefully without the sweat, and dispel common misunderstandings about RD.

To support this presentation a fully responsive Backbone application was created and open-sourced here: http://dontbreak.me/ source: https://github.com/BrainSwap/dontbreakme

Transcript

1. Responsive Design with HTML5, CSS3, JavaScript and Backbone.js Mauvis Ledford CTO, Pathbrite @krunkosaurus
2. Overview 2 *Stolen  from  h-p://www.paulolyslager.com/   *  
3. Overview 3 The Rise of JavaScript Application Frameworks Ember.js   Backbone.js
4. Overview 4 Backbone + Responsive Design
5. Why Responsive Design 5 AudioVroom‘s  popularity  
6. Don’t Break the Chain 6 Open-source responsive Backbone app made just for you! h-ps://github.com/Brainswap/dontbreakme  
7. What is Responsive Design? •  A flexible grid •  Flexible media (images, videos) •  Media queries •  Avoid declaring non-percentage widths Actually… Responsive Design is a mindset not a technology or methodology 7
8. What is Responsive Design? •  Origins: Responsive Architecture *Image from http://www.archdaily.com/15014/ad-futures-4-sparc/ 8
9. What is Responsive Design? 9 Don't get set into one form, adapt it and build your own, and let it grow, be like water […] You put water into a bottle it becomes the bottle; You put it in a teapot it becomes the teapot. Now water can flow or it can crash. Be water, my friend. Bruce Lee A Warrior's Journey (2000)
10. Responsive design is •  Your data as water; everyone is holding containers •  Accessibility continued 10
11. Why Responsive Design 11 New York Times and Craigslist
12. Why Responsive Design 12 The Boston Globe http://www.bostonglobe.com/
13. Why Responsive Design 13 Sasquatch  FesEval   http://sasquatchfestival.com, snapshots from h-p://mediaqueri.es  
14. Why Responsive Design 14 AudioVroom   http://audiovroom.com, snapshots from h-p://mediaqueri.es  
15. Why Responsive Design 15 Financial Times - app.ft.com iPhone   iPad  
16. Argument against Designing Responsively 16 Responsive design just doesn’t work. … We’re looking at the ‘entrenched’ use case [for desktop users], the coffee- and-couch use case [for tablet users], the two-minute use case [for mobile phone users]. Kiran Prasad Director of Engineering, Mobile LinkedIn 95%  Web  view!  
17. Argument against Designing Responsively 17 iPad   iPhone  
18. Argument against Designing Responsively 18 iPad   iPhone   Is  this  very  different?  
19. The explosion of HTML5 19 Facebook  iPad  naEve  vs.  Facebook  iPhone  naEve  
20. Wait, didn’t Facebook go native? 20 Zuckerberg: More people use Facebook on mobile web than on Android and iPhone combined. *  Source:  Mark  Zuckerberg,  Disrupt  SF,  September  2012.   •  Facebook’s native mobile web app was atrociously slow. •  Mobile and hybrid web apps like LinkedIn and Financial Times do not suffer the same issues. •  The addition of native iOS does not solve Facebook problem for non- iOS audience. •  Solution: Buy the world an iPhone or improve Facebook’s mobile web app (which they are actively doing.)
21. Still evolving today: Facebook mobile web 21 6/2012   11/2012  
22. Basecamp for mobile 22 Launched  9/12   37 Signals: Devices and platforms will come and go, but the web browser is here to stay.
23. HTML5 Pushstate 23 Other features of being responsive: keeping in context
24. HTML5 Pushstate 24 Click a photo. URL changes, larger photo and comments pop up.
25. HTML5 Pushstate 25 Close the modal. Go back to user’s context. URL reverts.
26. HTML5 Pushstate 26 Had she copied the URL to a friend…
27. The explosion of HTML5 27 Pathbrite  web  vs.  Pathbrite  naEve  
28. The explosion of HTML5 28 Pathbrite  web  vs.  Pathbrite  naEve  
29. How do you make pages all bendy and flexy? Hint: It’s not media queries! 29
30. Find the layout in pixels 30
31. The magic equation 31 target / context = result … * 100 260  /  960  =  0.27083333333333  
32. How do you make images bendy and flexy? 32 Many options for making media flex.
33. So why do I need media queries? 33 http://www.dontbreak.me Flexible width with and without media queries.
34. Media queries 34 Pulled  from  the  Skeleton.css  framework.  
35. Magic formula + media queries 35 http://www.dontbreak.me Media queries get you adjustable widths. Ems control vertical layout. ßSecret  sauce   ßSecret  sauce  
36. Now that you know RD, let’s dive into some Responsive Backbone! 36 http://www.dontbreak.me •  Views •  Models •  Collections •  Routes •  *Templates First a quick primer. Backbone consists of:
37. Backbone architecture 37 •  ./js/models/ •  ├── month.js •  └── user.js •  .js/collections/ •  └── months.js Models and collections Clone  the  code  at  h-ps://github.com/BrainSwap/dontbreakme  
38. Backbone architecture 38 •  ./js/views/ •  ├── app •  │ └── app.js •  ├── base.js •  ├── modals •  │ ├── about.js •  │ ├── base.js •  │ ├── login.js •  │ ├── settings.js •  │ └── signup.js •  ├── months •  │ └── months.js •  └── partials •  ├── footer.js •  ├── header.js •  └── month.js Views (inc. partials and modals) •  ./js/views/ •  ├── app •  ├── base.js •  ├── modals •  ├── months •  └── partials Clone  the  code  at  h-ps://github.com/BrainSwap/dontbreakme  
39. Backbone architecture 39 CSS •  css/ •  ├── _base.scss •  ├── _mixins.scss •  ├── devices •  ├── features •  ├── helpers •  └── pages •  css/ •  ├── _base.scss •  ├── _mixins.scss •  ├── devices •  │ ├── _high-res.scss •  │ ├── _mobile-landscape.scss •  │ ├── _mobile-portrait.scss •  │ └── _tablet-portrait.scss •  ├── features •  │ ├── _feature-calendar.scss •  │ ├── _feature-header.scss •  │ ├── _feature-modal.scss •  │ └── _feature-spinner.scss •  ├── helpers •  │ └── _html5boilerplate.scss •  └── pages •  └── _page-app.scss Clone  the  code  at  h-ps://github.com/BrainSwap/dontbreakme  
40. Backbone architecture 40 CSS •  css/ •  ├── _base.scss •  ├── _mixins.scss •  ├── devices •  ├── features •  ├── helpers •  └── pages
41. 41 Diving into code!
42. Thanks and Resources! Books Responsive Web Design by Ethan Marcotte Responsive Web Design with HTML5 and CSS3 by Ben Frain Github projects: dontbreakme Mandible2 NodeInterval Feedback: mauvis@pathbrite.com @krunkosaurus 42