Writing a Fullstack Application with Javascript - Remote media player

2,649 views

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
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
2,649
On SlideShare
0
From Embeds
0
Number of Embeds
1,433
Actions
Shares
0
Downloads
11
Comments
1
Likes
6
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  

×