Skip to content

Frontend

Jump to bottom
Grant Mercer edited this page Apr 5, 2017 · 5 revisions

Table of Contents:

  1. Overview
  2. Design
  3. Development
  4. Production
  5. Documentation

Overview

This frontend uses an Angular2-Typescript-Webpack stack for both development and production mode.

Angular2 is a new frontend framework written in Typescript which superseeds Angular1.X. Make sure you don't confuse Angular2 with Angular1.X at any point when working on CLT! 1.X is considerably different and is not compatible with 2.

Typescript is a language which decompiles into javascript, and offers a more clean syntax and stronger typing to work with. If you know javascript, then you know most of typescript, so don't think it's an entirely new language to learn.

Webpack does some serious voodoo magic to make the frontend run fast. When a developer wants to run an Angular2 frontend, a couple things must happen:

  • All typescript must be compiled into javascript
  • Javascript files must be concatenated and chunked to reduce webpage load time (loading 1 huge js file which takes 300ms is eons faster than loading 25 js files taking 150ms each)
  • Code must be uglified to avoid users looking into frontend source too deeply
  • CSS must be concatenated together
  • Whitespace and comments must be removed to reduce file size
  • All JS and CSS files must be injected into index.html

Webpack does all of these things. For all typescript files which make up the frontend, webpack will generate and inject 3 main JS files: vendor.js, polyfill.js, and app.js. These 3 files will contain all javascript needed to run the frontend. More JS files may be generated for lazy loaded modules, but those are not loaded at the landing page of the website.

Design

CLT has a number of key design philosophies that one should consider when contributing:

  • UI construction should adhere to the Material Design guidelines.
  • Avoid vibrant colors, stick to colors defined in the palette
  • Use cookies for local user storage, treat user data as de-synchronized (that is, data must be synchronized before patching)

Development

In order to run the development server for the CLT frontend, first make sure you have the repository cloned and all npm packages installed:

git clone https://[email protected]/CLTracker/CLT-webapp

cd CLT-webapp
cd frontend

npm install

Once installed, there are two possible options for starting up a development server.

  • npm start will run a standard webpack dev server, any changes made will refresh the page
  • npm run start:hmr will run a webpack dev server with hot module replacement. Instead of a page refreshing when changes are made, the hmr module will only replace the sections changed and avoid refreshing the page. warning: HMR mode will often times break animations which are bound to 'on load' type events.

Once you've run either of these commands, wait for the webpack server to start then visit http://localhost:8080 in your browser.

note: If you encounter any errors in the web console or during the build process, please post an issue and include your error. This is often caused by NPM dependencies which update and conflict with each other.

Production

To prepare the frontend for production, all that's needed is to run the following:

cd CLT-webapp
cd frontend

npm run build

Documentation

In code documentation can be generate via running npm run docs

Clone this wiki locally