Backbone.js Architecture
showcasing Echoes Media Player
http://echotu.be
Oren Farhi
JS Engineer, Front End Architect, Consultant @Tikal
JS Group Tech Leader - Meet, Share, Contribute & Coding
Spe...
Echoes Media Center http://echotu.be
This is a backbone.
When used properly
It keeps one's head
Out of one's butt
Rand Macivor
Structure
Bootstrap
jquery
require.js
Where Do I Start?
Where Do I Start?
Require.js
How Do i connect them all?
What is the secret?
“The secret to building large apps is never build large
apps. Break your applications into small piece...
Youtube Item
View
Youtube API - JSON RESPONSE
Model
Youtube Item
View
HTML & CSS
View
Youtube Item
View Model
Results Navigation
View
Model
Model
View
Echoes Player: What does that do?
Echoes Model
(js memory)
Echoes View
(html, js)
Echoes Router
(url: #search/videos)
reference to Model
reference to Model
...
Echoes Model
(js memory)
Echoes View
(html, js)
Echoes Router
(url: #search/videos)
reference to Model
reference to Model
...
Echoes Model
Echoes Model
user
current
resource
youtube
provider
app
settings
filter
video player
current played
video
que...
Echoes Model - REST
Echoes Model
user
youtube
provider
gData My
Youtube
Playlists API
gData
(youtube)
gData
Users API
(you...
Echoes Model
Echoes Model Challenges
local storage & communication
Backbone.Safe
Communication
Echoes Model
Listener (View)
Listener (model)
Listener (View 2)
model
change
Echoes Model
(js memory)
Echoes View
(html, js)
Echoes Router
(url: #search/videos)
reference to Model
reference to Model
...
Echoes View
Echoes View
(html, js)
Search
jQuery
autocomplete
search
results
Search
Results
Some View
View Item
Results Na...
Echoes View
Echoes View Echoes View (html, js)
Player Bar
Search
Search Results
Results Nav
yt Player (Youtube)
Playlist Info
jQuery a...
Echoes View
Echoes View
(html, js)
Search
Search
Results
Results
Nav
Player Bar
Faceboo
k Like
Echoes Model
(js memory)
Us...
Echoes View Challenges
switcher, collections & transitions
Echoes View: Switch Echoes View (html, js)
Search ResultsSwitchable View
Item View Item View Item View Item View
Item View...
Backbone Switcher
Solves:
1. switching sub views with ease
2. no memory leaks (zombie views)
3. easy configuration
4. inte...
Echoes - Rendering Collections
Search Results Collection
Youtube Item Model
Youtube Item Model
Youtube Item Model
Youtube ...
Backbone Collection View
Solves:
1. no need to write another render method
2. Handles Memory Leaks issues (clean)
3. suppo...
Backbone Transition
Solves:
1. built to integrate with css transitions (animate.css)
2. no need to handle timeouts - show,...
Backbone Collection & Transition
Backbone.Beamer
1. collection-view
2. transition
3. switcher
One Register
Point
Clean Prototype
Chain
Extend, don't
break
...
Backbone.Beamer
1. collection-view
2. transition
3. switcher
Backbone.View.render Transition Extension Backbone.View.rende...
Echoes Router
the controller
Echoes Model
(js memory)
Echoes View
(html, js)
Echoes Router
(url: #search/videos)
reference to Model
reference to Model
...
Echoes Router
favoritesplay media
switch
route
filter type history
Echoes Model
(js memory)
Echoes Router
(url: #search/vi...
Echoes Router
Echoes Router
Videos Results View
action: Video is Playing
Youtube User Connection:
parsing User details
Echoes Router
(url: #search/videos)
Echoes Model
(js memory)
Echoes View
(html, js)
Sidebar Search Results Player Bar
Echo...
Echoes & TImber
https://github.com/orizens/Timber
Timber implements Echoes Architecture
Questions?
Tikal - http://www.tikalk.com
Echoes (Github) - https://github.com/orizens/echoes
Backbone.Beamer - https://git...
Backbone.js Architecture Example - Echoes Media Player (Hebrew)
Upcoming SlideShare
Loading in …5
×

Backbone.js Architecture Example - Echoes Media Player (Hebrew)

6,579 views

Published on

In this presentation we will cover advanced issues and cover the javascript mvc architecture considerations and journey of an open source backbone.js app - Echoes Player (http://echotu.be) - an alternative UI for youtube.
By : Oren Farhi "Tikal Knowledge"

Published in: Technology
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,579
On SlideShare
0
From Embeds
0
Number of Embeds
584
Actions
Shares
0
Downloads
0
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

Backbone.js Architecture Example - Echoes Media Player (Hebrew)

  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

×