support/doc/development/client/code.md

   1 # Client code documentation
   2
   3 The client is a HTML/CSS/JavaScript web application (single page application -> SPA) developed with [TypeScript](https://www.typescriptlang.org/)/[Angular](https://angular.io/).
   4
   5
   6 ## Technologies
   7
   8   * [TypeScript](https://www.typescriptlang.org/) -> Language
   9   * [Angular](https://angular.io) -> JavaScript framework
  10   * [SASS](http://sass-lang.com/) -> CSS framework
  11   * [Webpack](https://webpack.js.org/) -> Source builder (compile TypeScript, SASS files, bundle them...)
  12   * [Bootstrap](http://getbootstrap.com/) -> CSS framework
  13   * [WebTorrent](https://webtorrent.io/) -> JavaScript library to make P2P in the browser
  14   * [VideoJS](http://videojs.com/) -> JavaScript player framework
  15
  16
  17 ## Files
  18
  19 The client files are in the `client` directory. The Webpack 2 configurations files are in `client/config` and the source files in `client/src`.
  20 The client modules description are in the [client/package.json](/client/package.json). There are many modules that are used to compile the web application in development or production mode.
  21 Here is the description of the useful `client` files directory:
  22
  23     tslint.json   -> TypeScript linter rules
  24     tsconfig.json -> TypeScript configuration for the compilation
  25     .bootstraprc  -> Bootstrap configuration file (which module we need)
  26     config        -> Webpack configuration files
  27     src
  28     |__ app          -> TypeScript files for Angular application
  29     |__ assets       -> static files (images...)
  30     |__ sass         -> SASS files that are global for the application
  31     |__ standalone   -> files outside the Angular application (embed HTML page...)
  32     |__ index.html   -> root HTML file for our Angular application
  33     |__ main.ts      -> Main TypeScript file that boostraps our Angular application
  34     |__ polyfills.ts -> Polyfills imports (ES 2015...)
  35
  36 Details of the Angular application file structure. It tries to follow [the official Angular styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html).
  37
  38     app
  39     |__ +admin                       -> Admin components (followers, users...)
  40     |__ account                      -> Account components (password change...)
  41     |__ core                         -> Core components/services
  42     |__ header                       -> Header components (logo, search...)
  43     |__ login                        -> Login component
  44     |__ menu                         -> Menu component (on the left)
  45     |__ shared                       -> Shared components/services (search component, REST services...)
  46     |__ signup                       -> Signup form
  47     |__ videos                       -> Video components (list, watch, upload...)
  48     |__ app.component.{html,scss,ts} -> Main application component
  49     |__ app-routing.module.ts        -> Main Angular routes
  50     |__ app.module.ts                -> Angular root module that imports all submodules we need
  51
  52 ## Conventions
  53
  54 Uses [TSLint](https://palantir.github.io/tslint/) for TypeScript linting and [Angular styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html).
  55
  56 ## Concepts
  57
  58 In a Angular application, we create components that we put together. Each component is defined by an HTML structure, a TypeScript file and optionally a SASS file.
  59 If you are not familiar with Angular I recommend you to read the [quickstart guide](https://angular.io/docs/ts/latest/quickstart.html).
  60
  61 ## Components tree
  62
  63 ![Components tree](/support/doc/development/client/components-tree.png)
  64
  65 ## Newcomers
  66
  67 The main client component is `app.component.ts`. You can begin to look at this file. Then you could navigate in the different submodules to see how components are built.