writing a fullstack application with javascript - remote media player
DESCRIPTION
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.dpufTRANSCRIPT
![Page 1: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/1.jpg)
Remote Media Player
A Tale of a Javascript Based Application
By Assaf Gannon
![Page 2: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/2.jpg)
The Need Me Ella Ofri
Tom & Jerry on Youtube
![Page 3: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/3.jpg)
The Solution That’s Awesome!
![Page 4: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/4.jpg)
Basic Application Layout
Client App (Controller)
Server
Client App (Player)
REST API Web Sockets
DB
JSON Micro Services
expressjs
![Page 5: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/5.jpg)
The Ingredients • 2 Client Apps – Controller App – Player App
• 1 Server - Express – REST API – Push Notifications
• 1 DB for storage
![Page 6: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/6.jpg)
Are we good to go?
• Greatest idea EVER?
• Technology stack to support it?
• Faint concept of usability?
![Page 7: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/7.jpg)
Scaffolding
And ta-da…
![Page 8: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/8.jpg)
Scaffold Result Express Angular Project Angular App
![Page 9: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/9.jpg)
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
![Page 10: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/10.jpg)
Client – Server (REST Communication)
![Page 11: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/11.jpg)
1. Basic client view with search box
![Page 12: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/12.jpg)
2. Server “search” API
![Page 13: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/13.jpg)
3. Youtube Micro Service Youtube API
Configurations
Module Definition
![Page 14: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/14.jpg)
4. Display results on client
![Page 15: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/15.jpg)
What’s Next
1. Create a basic player
2. Pair the player with the remote
3. Send a “Play” command to the player
![Page 16: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/16.jpg)
The Player
![Page 17: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/17.jpg)
Pairing Strategy • Options: – Automatic Peer Discovery – User Based Pairing – Manual Pairing
אבאאאא!!!
![Page 18: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/18.jpg)
Manual Pairing
![Page 19: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/19.jpg)
Manual Pairing 1. Player is assigned a key
2. Remote Control stores the key and passes it with every acFon request
![Page 20: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/20.jpg)
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
![Page 21: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/21.jpg)
Assign a key to the player
![Page 22: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/22.jpg)
Store the key on the player
![Page 23: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/23.jpg)
Complete the Pairing
![Page 24: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/24.jpg)
Almost Done.. Complete the loop: Send A “Play” command from the remote control to the player
![Page 25: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/25.jpg)
“Play” Sequence
![Page 26: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/26.jpg)
Some more code… Remote Controller
Express Server
Player
![Page 27: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/27.jpg)
Best Dad EVER!!!
![Page 28: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/28.jpg)
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
![Page 29: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/29.jpg)
Add To Favorites Client -> Express -> Playlist Micro Service -> Persistence (MongoDB)
![Page 30: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/30.jpg)
The “Playlist“ service • The data structure: • Playlists “Table” (AKA Collection):
{ _id: user-id, name: playlist-name, media: [{mediaType: media-type, mediaId: XX}]
}
![Page 31: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/31.jpg)
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)
![Page 32: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/32.jpg)
Adding MongoDB • My favorite: MongoJS – hIps://github.com/mafintosh/mongojs – Uses same syntax as the mongo-cli – Wraps the native driver
![Page 33: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/33.jpg)
Persist / Query Flow
![Page 34: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/34.jpg)
The “Playlist“ Micro Service
![Page 35: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/35.jpg)
Add To Favorites API
![Page 36: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/36.jpg)
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
![Page 37: Writing a Fullstack Application with Javascript - Remote media player](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55657dbfd8b42a723f8b497b/html5/thumbnails/37.jpg)
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!