Writing a Fullstack Application with Javascript - Remote media player
Upcoming SlideShare
Loading in...5
×
 

Writing a Fullstack Application with Javascript - Remote media player

on

  • 2,037 views

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

Statistics

Views

Total Views
2,037
Views on SlideShare
819
Embed Views
1,218

Actions

Likes
4
Downloads
9
Comments
0

4 Embeds 1,218

http://www.tikalk.com 1130
http://tikalk.com 66
http://localhost 19
http://tikalk.github.io 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Writing a Fullstack Application with Javascript - Remote media player Writing a Fullstack Application with Javascript - Remote media player Presentation Transcript

  • Remote Media Player A Tale of a Javascript Based Application By Assaf Gannon
  • The Need Me Tom & Jerry on Youtube Ella Ofri
  • That’s  Awesome! The Solution
  • Basic Application Layout Client App (Controller) Client App (Player) REST  API Web  Sockets Server DB JSON expressjs Micro Services
  • 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