Backbone web apps - design & architecture
5 likes3,335 views
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
More Related Content
What's hot (9)
Viewers also liked (6)
Similar to Backbone web apps - design & architecture (20)
Recently uploaded (20)
Backbone web apps - design & architecture
- 1. Backbone.js Architecture showcasing Echoes Media Player http://echotu.be
- 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. Echoes Media Center http://echotu.be
- 4. This is a backbone. When used properly It keeps one's head Out of one's butt Rand Macivor
- 6. Where Do I Start?
- 7. Where Do I Start? Require.js
- 8. How Do i connect them all?
- 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. Youtube Item View Youtube API - JSON RESPONSE Model
- 11. Youtube Item View HTML & CSS View
- 14. Model View
- 15. Echoes Player: What does that do?
- 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. 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. 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. Echoes Model - REST Echoes Model user youtube provider gData My Youtube Playlists API gData (youtube) gData Users API (youtube)
- 20. Echoes Model
- 21. Echoes Model Challenges local storage & communication
- 22. Backbone.Safe
- 24. Communication Echoes Model Listener (View) Listener (model) Listener (View 2) model change
- 25. 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
- 26. 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
- 27. Echoes View
- 28. 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
- 29. 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
- 30. Echoes View Challenges switcher, collections & transitions
- 31. 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
- 32. 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
- 33. 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
- 34. Backbone Collection View Solves: 1. no need to write another render method 2. Handles Memory Leaks issues (clean) 3. supports custom view events handling
- 35. 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
- 36. Backbone Collection & Transition
- 37. 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
- 38. 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
- 40. 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
- 41. Echoes Router favoritesplay media switch route filter type history Echoes Model (js memory) Echoes Router (url: #search/videos) Youtube User API (token)
- 42. Echoes Router
- 43. Echoes Router Videos Results View action: Video is Playing Youtube User Connection: parsing User details
- 44. 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
- 45. Echoes & TImber https://github.com/orizens/Timber Timber implements Echoes Architecture
- 46. 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