Halo 2.0 Web Frontend Architecture Spec

new_gist_file.md

Objective

• Enterprise grade system
• High performance
• Decouple frontend and backend
• Easy to maintain (decoupled module), reduced complexity
• Easy to scale
• Highly resuable components

Requirements

• Device support: Responsive Design

  • Mobile phone: xxx ??
  • Pad: xxx
  • Desktop: xxx

• Browser support:

  • IE: 9+
  • Chrome: Latest
  • Firefox: Latest
  • Safari: Latest

• Localization support:

  • English
  • Swedish
  • Danish
  • Norwegian
  • Finish

• Offline mode: Yes?

Language

• SASS for css preprocessing
• ES6 or Typescript for javascript preprocessing
• Coding standard: Airbnb react coding standard

Framework/Libraries

JS

• Templates:
• Module communication:
• Data abstraction:
• Routing:
• Dependency management:
• Widget/Component:
• Form Validation:

CSS: Bootstrap or Topcoat custom theme?

Building tool

Options are:

• Gulp
• Grunt
• Webpack

Linter

• Html linter
• CSS linter
• Javascript linter

Monitoring tool:

• package monitoring: gemnasium
• JavaScript error monitoring: Sentry
• Performance monitoring: pindom

Code analysis: Plato

Dependency management

• Package management : NPM
• Module dependency: Requirejs

Supported features

• Realtime competition leaderboard
• Realtime chatting message (multimedia support)
• Animation intensive leaderboard
• Intuitive competition creation flow
• Server side rendering ?
• User behaviour tracking
• Minimize dependency to third party libs, idealy to be framework agnostic

Patterns

• Module: Seperate concern into different modules
• Facade: abstract API to hide implementation detail
• Mediator: Flux Dispatch Pattern

Testing

• Unit test
  • Test runner: karma
  • Test framework: mocha
  • Test assertion: chai
  • Test mockup: sinon
  • Test coverage: blanketjs
• e2e test
  • Test framework: Capybara or cucumber
  • Test platform: CircleCI
• Performance benchmark ?

References