Writing a Fullstack Application with Javascript - Remote media player

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  [email protected]