Backbone web apps - design & architecture

3,203 views

Published on

This is a talk i gave at Javascript Israel Meetup about applying front end architecture with backbone.js on my open source project Echoes Player - http://echotu.be

Published in: Education, Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,203
On SlideShare
0
From Embeds
0
Number of Embeds
1,081
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Backbone web apps - design & architecture

  1. 1. Backbone.js Architecture showcasing Echoes Media Player http://echotu.be
  2. 2. Oren Farhi JS Engineer, Front End Architect, Consultant @Tikal JS Group Tech Leader - Meet, Share, Contribute & Coding Speaker (Israel & World Wide) Developing with: Pure Javascript, Backbone.js, Underscore.js, jQuery, CSS3 http://orizens.com github.com/tikalk @tikalk
  3. 3. Echoes Media Center http://echotu.be
  4. 4. This is a backbone. When used properly It keeps one's head Out of one's butt Rand Macivor
  5. 5. Structure Bootstrap jquery require.js
  6. 6. Where Do I Start?
  7. 7. Where Do I Start? Require.js
  8. 8. How Do i connect them all?
  9. 9. What is the secret? “The secret to building large apps is never build large apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application” Jastin Meyer (JavascriptMVC)
  10. 10. Youtube Item View Youtube API - JSON RESPONSE Model
  11. 11. Youtube Item View HTML & CSS View
  12. 12. Youtube Item View Model
  13. 13. Results Navigation View Model
  14. 14. Model View
  15. 15. Echoes Player: What does that do?
  16. 16. Echoes Model (js memory) Echoes View (html, js) Echoes Router (url: #search/videos) reference to Model reference to Model Sidebar Search Results Player Bar player search results media info provider app settings search features current played video info Echoes Player JS Architecture http://echotu.be
  17. 17. Echoes Model (js memory) Echoes View (html, js) Echoes Router (url: #search/videos) reference to Model reference to Model Sidebar Search Results Player Bar player search results media info provider app settings search features current played video info Echoes Player JS Architecture http://echotu.be
  18. 18. Echoes Model Echoes Model user current resource youtube provider app settings filter video player current played video query options playlistsdetails search results playlist info provider
  19. 19. Echoes Model - REST Echoes Model user youtube provider gData My Youtube Playlists API gData (youtube) gData Users API (youtube)
  20. 20. Echoes Model
  21. 21. Echoes Model Challenges local storage & communication
  22. 22. Backbone.Safe
  23. 23. Communication Echoes Model Listener (View) Listener (model) Listener (View 2) model change
  24. 24. Echoes Model (js memory) Echoes View (html, js) Echoes Router (url: #search/videos) reference to Model reference to Model Sidebar Search Results Player Bar player search results media info provider app settings search features current played video info Echoes Player JS Architecture http://echotu.be
  25. 25. Echoes View Echoes View (html, js) Search jQuery autocomplete search results Search Results Some View View Item Results Nav Player Bar Playlist InfoTrack Info yt (Youtube) Facebook Like FB service Echoes Model (js memory) index.html
  26. 26. Echoes View
  27. 27. Echoes View Echoes View (html, js) Player Bar Search Search Results Results Nav yt Player (Youtube) Playlist Info jQuery autocomplete Facebook Like Feed User Youtube User Playlist Provider Current Track Info
  28. 28. Echoes View Echoes View (html, js) Search Search Results Results Nav Player Bar Faceboo k Like Echoes Model (js memory) User profile User Playlists Youtube Model Echoes ModelPlayer Model Youtube Model User Model Youtube Model Youtube Model User Model Playlists Provider
  29. 29. Echoes View Challenges switcher, collections & transitions
  30. 30. Echoes View: Switch Echoes View (html, js) Search ResultsSwitchable View Item View Item View Item View Item View Item View Item View Item View Item View
  31. 31. Backbone Switcher Solves: 1. switching sub views with ease 2. no memory leaks (zombie views) 3. easy configuration 4. integrate with "this.model" - Model Driven Views
  32. 32. Echoes - Rendering Collections Search Results Collection Youtube Item Model Youtube Item Model Youtube Item Model Youtube View Item Youtube View Item Youtube View Item Search Results View
  33. 33. Backbone Collection View Solves: 1. no need to write another render method 2. Handles Memory Leaks issues (clean) 3. supports custom view events handling
  34. 34. Backbone Transition Solves: 1. built to integrate with css transitions (animate.css) 2. no need to handle timeouts - show, hide 3. work with others extensions
  35. 35. Backbone Collection & Transition
  36. 36. Backbone.Beamer 1. collection-view 2. transition 3. switcher One Register Point Clean Prototype Chain Extend, don't break https://github.com/orizens/Backbone.Beamer
  37. 37. Backbone.Beamer 1. collection-view 2. transition 3. switcher Backbone.View.render Transition Extension Backbone.View.render Backbone.View.initialize Collection View Extension backbone.transition backbone.CollectionView listen, define collection Backbone.View.initialize render
  38. 38. Echoes Router the controller
  39. 39. Echoes Model (js memory) Echoes View (html, js) Echoes Router (url: #search/videos) reference to Model reference to Model Sidebar Search Results Player Bar player search results media info provider app settings search features current played video info Echoes Player JS Architecture http://echotu.be
  40. 40. Echoes Router favoritesplay media switch route filter type history Echoes Model (js memory) Echoes Router (url: #search/videos) Youtube User API (token)
  41. 41. Echoes Router
  42. 42. Echoes Router Videos Results View action: Video is Playing Youtube User Connection: parsing User details
  43. 43. Echoes Router (url: #search/videos) Echoes Model (js memory) Echoes View (html, js) Sidebar Search Results Player Bar Echoes Player JS Architecture http://echotu.be player search results media info provider app settings search features current played video info
  44. 44. Echoes & TImber https://github.com/orizens/Timber Timber implements Echoes Architecture
  45. 45. Questions? Tikal - http://www.tikalk.com Echoes (Github) - https://github.com/orizens/echoes Backbone.Beamer - https://github.com/orizens/Backbone.Beamer Echoes Media Center (Player in production)- http://echotu.be

×