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

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