Your SlideShare is downloading. ×
Writing a Fullstack Application with Javascript - Remote media player
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Writing a Fullstack Application with Javascript - Remote media player


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 …

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:

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Remote Media Player A Tale of a Javascript Based Application By Assaf Gannon
  • 2. The Need Me Tom & Jerry on Youtube Ella Ofri
  • 3. That’s  Awesome! The Solution
  • 4. Basic Application Layout Client App (Controller) Client App (Player) REST  API Web  Sockets Server DB JSON expressjs Micro Services
  • 5. The Ingredients •  2 Client Apps –  Controller App –  Player App •  1 Server - Express –  REST API –  Push Notifications •  1 DB for storage
  • 6. Are we good to go? •  Greatest idea EVER? •  Technology stack to support it? •  Faint concept of usability?
  • 7. Scaffolding And ta-da…
  • 8. Scaffold Result Express Angular Project Angular App
  • 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. Client – Server (REST Communication)
  • 11. 1. Basic client view with search box
  • 12. 2. Server “search” API
  • 13. 3. Youtube Micro Service Youtube API Configurations Module Definition
  • 14. 4. Display results on client
  • 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. The Player
  • 17. Pairing Strategy •  Options: –  Automatic Peer Discovery –  User Based Pairing –  Manual Pairing !!!‫אבאאאא‬
  • 18. Manual Pairing
  • 19. Manual Pairing 1.  Player  is  assigned  a  key             2.  Remote  Control  stores   the  key  and  passes  it   with  every  acFon   request
  • 20. Introducing: •  Provides the most capable transport: –  WebSocket –  Flash Socket –  AJAX long polling –  AJAX Multipart Streaming –  Forever Iframe –  JSONP Polling •  Provides Client Side library
  • 21. Assign a key to the player
  • 22. Store the key on the player
  • 23. Complete the Pairing
  • 24. Almost Done.. Complete the loop: Send A “Play” command from the remote control to the player
  • 25. “Play” Sequence
  • 26. Some more code… Remote Controller Express Server Player
  • 27. Best Dad EVER!!!
  • 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. Add To Favorites Client -> Express -> Playlist Micro Service -> Persistence (MongoDB)
  • 30. The “Playlist“ service •  The data structure: •  Playlists “Table” (AKA Collection): { _id: user-id, name: playlist-name, media: [{mediaType: media-type, mediaId: XX}] }
  • 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. Adding MongoDB •  My favorite: MongoJS –  hIps:// –  Uses same syntax as the mongo-cli –  Wraps the native driver
  • 33. Persist / Query Flow
  • 34. The “Playlist“ Micro Service
  • 35. Add To Favorites API  
  • 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. 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. Thanks for sticking around! Assaf  Gannon