Backbone.js Architecture Example - Echoes Media Player (Hebrew)
•
17 likes•7,006 views
This document discusses the architecture of the Echoes Media Player, which is built using Backbone.js. It describes how the app is broken into smaller pieces, including the Model, View, and Router. The Model manages the data and state. The View displays UI and gets/sets data from the Model. The Router handles navigation and application flow. It also discusses challenges around communication between components, rendering collections, and transitions between views.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Backbone.js Architecture Example - Echoes Media Player (Hebrew)
Similar to Backbone.js Architecture Example - Echoes Media Player (Hebrew) (20)
More from Yifat Kanfi
Recently uploaded
Recently uploaded (20)
Backbone.js Architecture Example - Echoes Media Player (Hebrew)
- 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