Remote Media Player	
A Tale of a Javascript Based
Application
By Assaf Gannon
The Need	
Me	

Tom & Jerry on Youtube	

Ella	

Ofri
That’s	
  Awesome!	
The Solution
Basic Application Layout	
Client App
(Controller)	

Client App
(Player)	

REST	
  API	

Web	
  Sockets	

Server

DB
	

JSO...
The Ingredients	
•  2 Client Apps
–  Controller App
–  Player App

•  1 Server - Express
–  REST API
–  Push Notifications...
Are we good to go?	
•  Greatest idea EVER?
•  Technology stack to support it?
	
•  Faint concept of usability?
Scaffolding	

And ta-da…
Scaffold Result	
Express	

Angular Project	

Angular App
Getting Started	
•  First Flow - Search Youtube
•  Steps:
1.  Basic client view with search box
2.  Server “search” API
3....
Client – Server
(REST Communication)
1. Basic client view with search box
2. Server “search” API
3. Youtube Micro Service	
Youtube API
Configurations	

Module Definition
4. Display results on client
What’s Next	
1.  Create a basic player
2.  Pair the player with the remote
3.  Send a “Play” command to the player
The Player
Pairing Strategy	
•  Options:
–  Automatic Peer Discovery
–  User Based Pairing
–  Manual Pairing

	
!!!‫אבאאאא‬
Manual Pairing
Manual Pairing	
1.  Player	
  is	
  assigned	
  a	
  key	
  
	
  
	
  
	
  
	
  
	
  
2.  Remote	
  Control	
  stores	
  
...
Introducing: Socket.io	
•  Provides the most capable transport:
–  WebSocket
–  Flash Socket
–  AJAX long polling
–  AJAX ...
Assign a key to the player
Store the key on the player
Complete the Pairing
Almost Done..	
Complete the loop:
Send A “Play” command from the remote
control to the player
“Play” Sequence
Some more code…	
Remote Controller	

Express Server	

Player
Best Dad EVER!!!
Going Forward:
Adding Server-Side persistency	
Lots of features require persistency:
•  Recently played
•  Saving Favorite...
Add To Favorites	
Client ->
Express ->
Playlist Micro Service ->
Persistence (MongoDB)
The “Playlist“ service	
•  The data structure:
•  Playlists “Table” (AKA Collection):
{
_id: user-id,
name: playlist-name,...
Introducing: MongoDB	
•  Document based NoSQL database
•  Very easy to get started
•  Uses Javascript internally for
opera...
Adding MongoDB	
•  My favorite: MongoJS
–  hIps://github.com/mafintosh/mongojs
–  Uses same syntax as the mongo-cli
–  Wrap...
Persist / Query Flow
The “Playlist“ Micro Service
Add To Favorites API	
  
Tips and Tricks	
•  Keep the server
stateless
•  Consider cloud
(managed) Solutions:
–  AppFog
–  Nodejitsu,
–  Heroku
–  ...
Conclusion	
Javascript based applications are :
–  Easy to set up
–  Easy to enhance (feature iterations)
–  Easy to scale...
Thanks for sticking around! 	
Assaf	
  Gannon	
  
Assaf.gannon@gmail.com	
  
Upcoming SlideShare
Loading in...5
×

Writing a Fullstack Application with Javascript - Remote media player

2,018

Published on

Writing apps should be fun. This is a statement I try to keep in mind when approaching any application development. When I first realized that a full stack of Javascript can be used to create an application I was very happy, since for me coding in Javascript is a lot of fun. I was soon quite eager to neglect the traditional Java server-side + Javascript client, giving up the Java server side "bliss" and the constant context switching, in favor of a full stack of Javascript whenever I could.

For the past 2+ years I have been developing a variety of applications using a pure JS stack: Games, Forex trading middleware, CRM, CMS, sophisticated proxies, and various utilities. I must admit my productivity has increased dramatically and the time-to-market of each and every project was a fraction of what it would have been using traditional Java based server side infra-structure.

On October 29th 2013 I gave a talk at the "Javascript.everywhere" meetup event, in which I presented the development route of Youtube Remote Control Application with a "slave" player using Javascript stack all over (NodeJS, Socket.IO, ExpressJS, AngularJS, MongoDB). I'm pleased to share the presentation

- See more at: http://www.tikalk.com/js/writing-fullstack-application-javascript#sthash.IjFNbQJ2.dpuf

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

No Downloads
Views
Total Views
2,018
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
10
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Writing a Fullstack Application with Javascript - Remote media player

  1. 1. Remote Media Player A Tale of a Javascript Based Application By Assaf Gannon
  2. 2. The Need Me Tom & Jerry on Youtube Ella Ofri
  3. 3. That’s  Awesome! The Solution
  4. 4. Basic Application Layout Client App (Controller) Client App (Player) REST  API Web  Sockets Server DB JSON expressjs Micro Services
  5. 5. The Ingredients •  2 Client Apps –  Controller App –  Player App •  1 Server - Express –  REST API –  Push Notifications •  1 DB for storage
  6. 6. Are we good to go? •  Greatest idea EVER? •  Technology stack to support it? •  Faint concept of usability?
  7. 7. Scaffolding And ta-da…
  8. 8. Scaffold Result Express Angular Project Angular App
  9. 9. Getting Started •  First Flow - Search Youtube •  Steps: 1.  Basic client view with search box 2.  Server “search” API 3.  Youtube micro service 4.  Display results on client
  10. 10. Client – Server (REST Communication)
  11. 11. 1. Basic client view with search box
  12. 12. 2. Server “search” API
  13. 13. 3. Youtube Micro Service Youtube API Configurations Module Definition
  14. 14. 4. Display results on client
  15. 15. What’s Next 1.  Create a basic player 2.  Pair the player with the remote 3.  Send a “Play” command to the player
  16. 16. The Player
  17. 17. Pairing Strategy •  Options: –  Automatic Peer Discovery –  User Based Pairing –  Manual Pairing !!!‫אבאאאא‬
  18. 18. Manual Pairing
  19. 19. Manual Pairing 1.  Player  is  assigned  a  key             2.  Remote  Control  stores   the  key  and  passes  it   with  every  acFon   request
  20. 20. Introducing: Socket.io •  Provides the most capable transport: –  WebSocket –  Flash Socket –  AJAX long polling –  AJAX Multipart Streaming –  Forever Iframe –  JSONP Polling •  Provides Client Side library
  21. 21. Assign a key to the player
  22. 22. Store the key on the player
  23. 23. Complete the Pairing
  24. 24. Almost Done.. Complete the loop: Send A “Play” command from the remote control to the player
  25. 25. “Play” Sequence
  26. 26. Some more code… Remote Controller Express Server Player
  27. 27. Best Dad EVER!!!
  28. 28. Going Forward: Adding Server-Side persistency Lots of features require persistency: •  Recently played •  Saving Favorites •  Creating play lists •  Users Management •  Scheduling operations •  Gathering statistics •  Suggestions engine
  29. 29. Add To Favorites Client -> Express -> Playlist Micro Service -> Persistence (MongoDB)
  30. 30. The “Playlist“ service •  The data structure: •  Playlists “Table” (AKA Collection): { _id: user-id, name: playlist-name, media: [{mediaType: media-type, mediaId: XX}] }
  31. 31. Introducing: MongoDB •  Document based NoSQL database •  Very easy to get started •  Uses Javascript internally for operations such as Map/Reduce •  Shell is based on V8 engine – runs js files. •  Good hosted solutions (with free tier)
  32. 32. Adding MongoDB •  My favorite: MongoJS –  hIps://github.com/mafintosh/mongojs –  Uses same syntax as the mongo-cli –  Wraps the native driver
  33. 33. Persist / Query Flow
  34. 34. The “Playlist“ Micro Service
  35. 35. Add To Favorites API  
  36. 36. Tips and Tricks •  Keep the server stateless •  Consider cloud (managed) Solutions: –  AppFog –  Nodejitsu, –  Heroku –  MongoHQ, –  MongoLab, –  AWS •  Use a Node process per core •  Use a Load Balancing proxy •  Nginx & HAProxy support WebSocket
  37. 37. Conclusion Javascript based applications are : –  Easy to set up –  Easy to enhance (feature iterations) –  Easy to scale (out & up) –  Feature rich –  Easy to deploy –  Most important: It’s Fun!
  38. 38. Thanks for sticking around! Assaf  Gannon   Assaf.gannon@gmail.com  
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×