writing a fullstack application with javascript - remote media player
Post on 27-May-2015
1.983 Views
Preview:
DESCRIPTION
TRANSCRIPT
Remote Media Player
A Tale of a Javascript Based Application
By Assaf Gannon
The Need Me Ella Ofri
Tom & Jerry on Youtube
The Solution That’s Awesome!
Basic Application Layout
Client App (Controller)
Server
Client App (Player)
REST API Web Sockets
DB
JSON Micro Services
expressjs
The Ingredients • 2 Client Apps – Controller App – Player App
• 1 Server - Express – REST API – Push Notifications
• 1 DB for storage
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. Youtube micro service
4. Display results on client
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 the key and passes it with every acFon request
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
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 Favorites • Creating play lists • Users Management • Scheduling operations • Gathering statistics • Suggestions engine
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, media: [{mediaType: media-type, mediaId: XX}]
}
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)
Adding MongoDB • My favorite: MongoJS – hIps://github.com/mafintosh/mongojs – Uses same syntax as the mongo-cli – Wraps the native driver
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 – MongoHQ, – MongoLab, – AWS
• Use a Node process per core
• Use a Load Balancing proxy
• Nginx & HAProxy support WebSocket
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!
Thanks for sticking around!
Assaf Gannon Assaf.gannon@gmail.com
top related