Handover Documentation - welikepie/asos-hangout-app GitHub Wiki

General Notes

.htaccess in gateway and index. These need changing per grunt compile to reflect the password location. packages.json governs the general grunt compile state. --harmony argument in Node enables ECMA6 Javascript support.

Main.js for each file

This handles the collections being fetched and sorted. Heavily based on Backbone.

In the node-backend section

manager.js Keeps a list of the callbacks based on the server/URL method called. (server/app-options to return app state. etc.) passthrough.html Write html to open the SSE connection to the server. Server.js replaces the variables in passthrough with the current state on the fly. SSE Manager Found at node-backend/util/sse-manager.js

  • List of Events
  • List of Listeners
  • Event IP
  • backlogs

Whenever an event is emitted, it is first saved and added to a list. This is then broadcasted through to every listener attached to the current stream. Backlog can be broadcast using specific ID.

Process of registering as new listener

  • Send request to be added as listener
  • Receive request and added as listener
  • Takes requests and responds with current state
  • Pushes to stream of events to broadcast if(XHR), remove the listeners to compensate for an old IE bug.

###Apache and Node Servers

Node

  • Product Feed
  • Twitter Feed
  • User queues (staging and app)
  • generic app options
  • Live Updating (Real Time)

Apache

  • Serves Admin
  • Job to keep Node server running
  • http general security

Front End

  • Landing Page (hangout, product feed, twitter feed)
    • Read Only
    • Embeds handled automatically through the scripts on the page.
  • Admin Panel
    • Product Feed
    • Twitter Feed
    • Resetting the App clears the state completely
    • A way of starting the staging and main hangouts
    • Links automatically set via Node.js server

###Node.js code breakdown

  • Vendor folder contains all external code Storage of information
  • Product Feed
  • Twitter streaming
  • Twitter feed
  • App options
  • Queues

Rest Interface Used to edit the different storage types, and is primarily used by the admin. Get requests retrieve, Put requests add content.

SSE Is retrieved from the Node server, appended with the various content and then fed out to the individual pages.

Static Served HTML that opens connection for client side.

##SSE

  • Uses IFraming to communicate
  • SSE have no CORS policies
  • Iframe can accept POST messages
  • EasyXDM is used for the communication across browser
  • Uses the window.postMessage API
  • Supplies backlog with last event id.
  • 'emit' function is what sends events out. SSE onChange listeners *SSE Manager tied to observe Model and observe Collection *When a change event is noticed, the change is carried out and the new payload is thrown.

##Diagrams Asos Generic Asos Generic Asos Passthrough Asos Passthrough Asos System Topography Asos Passthrough

##Deployment

  • Update Package JSON with all URL paths.
  • Ensure SSL is on the server.
  • Grunt builds for landing page, hangout app, stagint app, admin app (main/staging) node
  • .htAccess pointing to the right passwd files.
  • Change .htpasswd file. SHA1, 64 bit encryption and Unix line endings.
  • Apache config. Depends on location. Configure to serve files for that domain.
  • Unpack landing page in to root directory. Node
  • Node 0.10.4 Upstart Job. Current Asos one is at etc/init/asos-communication.
  • Can also use nohup or forever. If Nohupped, disown the process ID first before DC-ing.