fuyi
9/23/2015 - 6:40 AM

Halo 2.0 Web Frontend Architecture Spec

Halo 2.0 Web Frontend Architecture Spec

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][3]

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][4]
  • JavaScript error monitoring: Sentry
  • Performance monitoring: [pindom][5]

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

![Reactjs Flux][flux]

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

[flux]: https://facebook.github.io/flux/img/flux-simple-f8-diagram-explained-1300w.png "flux" [1]: http://developer.telerik.com/featured/planning-front-end-javascript-application [2]: https://lob.com/blog/api-first-development-makes-lob-more-productive [3]: https://github.com/airbnb/javascript/tree/master/react [4]: https://gemnasium.com/ [5]: https://www.pingdom.com/ [6]: http://addyosmani.com/largescalejavascript/