Writing a Fullstack Application with Javascript - Remote media player

  • 1,877 views
Uploaded 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: http://www.tikalk.com/js/writing-fullstack-application-javascript#sthash.IjFNbQJ2.dpuf

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,877
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
9
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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: 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. 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://github.com/mafintosh/mongojs –  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   Assaf.gannon@gmail.com