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
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)
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
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
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
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
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
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