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 ?