peertube/support/doc/development/client/code.md

# Client code documentation

The client is a HTML/CSS/JavaScript web application (single page application -> SPA) developed with [TypeScript](https://www.typescriptlang.org/)/[Angular](https://angular.io/).


## Technologies

  * [TypeScript](https://www.typescriptlang.org/) -> Language
  * [Angular](https://angular.io) -> JavaScript framework
  * [SASS](http://sass-lang.com/) -> CSS framework
  * [Webpack](https://webpack.js.org/) -> Source builder (compile TypeScript, SASS files, bundle them...)
  * [Bootstrap](http://getbootstrap.com/) -> CSS framework
  * [WebTorrent](https://webtorrent.io/) -> JavaScript library to make P2P in the browser
  * [VideoJS](http://videojs.com/) -> JavaScript player framework


## Files

The client files are in the `client` directory. The Webpack 2 configurations files are in `client/config` and the source files in `client/src`.
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.
Here is the description of the useful `client` files directory:

    tslint.json   -> TypeScript linter rules
    tsconfig.json -> TypeScript configuration for the compilation
    .bootstraprc  -> Bootstrap configuration file (which module we need)
    config        -> Webpack configuration files
    src
    |__ app          -> TypeScript files for Angular application
    |__ assets       -> static files (images...)
    |__ sass         -> SASS files that are global for the application
    |__ standalone   -> files outside the Angular application (embed HTML page...)
    |__ index.html   -> root HTML file for our Angular application
    |__ main.ts      -> Main TypeScript file that boostraps our Angular application
    |__ polyfills.ts -> Polyfills imports (ES 2015...)

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).

    app
    |__ +admin                       -> Admin components (followers, users...)
    |__ account                      -> Account components (password change...)
    |__ core                         -> Core components/services
    |__ header                       -> Header components (logo, search...)
    |__ login                        -> Login component
    |__ menu                         -> Menu component (on the left)
    |__ shared                       -> Shared components/services (search component, REST services...)
    |__ signup                       -> Signup form
    |__ videos                       -> Video components (list, watch, upload...)
    |__ app.component.{html,scss,ts} -> Main application component
    |__ app-routing.module.ts        -> Main Angular routes
    |__ app.module.ts                -> Angular root module that imports all submodules we need

## Conventions

Uses [TSLint](https://palantir.github.io/tslint/) for TypeScript linting and [Angular styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html).

## Concepts

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.
If you are not familiar with Angular I recommend you to read the [quickstart guide](https://angular.io/docs/ts/latest/quickstart.html).

## Components tree

![Components tree](/support/doc/development/client/components-tree.svg)

## Newcomers

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.
Add client documentation 2016-12-01 16:16:38 -05:00			`# Client code documentation`

Use shared models 2017-06-11 05:02:35 -04:00			`The client is a HTML/CSS/JavaScript web application (single page application -> SPA) developed with [TypeScript](https://www.typescriptlang.org/)/[Angular](https://angular.io/).`
Add client documentation 2016-12-01 16:16:38 -05:00

			`## Technologies`

			`* [TypeScript](https://www.typescriptlang.org/) -> Language`
Use shared models 2017-06-11 05:02:35 -04:00			`* [Angular](https://angular.io) -> JavaScript framework`
Add client documentation 2016-12-01 16:16:38 -05:00			`* [SASS](http://sass-lang.com/) -> CSS framework`
Fix webpack link in client documentation (#129) Webpack link used to lead to webpack 1 documentation. Fixed it to reach lastest documentation instead. 2017-11-28 12:05:08 -05:00			`* [Webpack](https://webpack.js.org/) -> Source builder (compile TypeScript, SASS files, bundle them...)`
Add client documentation 2016-12-01 16:16:38 -05:00			`* [Bootstrap](http://getbootstrap.com/) -> CSS framework`
			`* [WebTorrent](https://webtorrent.io/) -> JavaScript library to make P2P in the browser`
			`* [VideoJS](http://videojs.com/) -> JavaScript player framework`


			`## Files`

			The client files are in the `client` directory. The Webpack 2 configurations files are in `client/config` and the source files in `client/src`.
Some markdown fixes 2018-01-12 12:55:45 -05:00			`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.`
Add client documentation 2016-12-01 16:16:38 -05:00			Here is the description of the useful `client` files directory:

			`tslint.json -> TypeScript linter rules`
			`tsconfig.json -> TypeScript configuration for the compilation`
			`.bootstraprc -> Bootstrap configuration file (which module we need)`
			`config -> Webpack configuration files`
			`src`
Use shared models 2017-06-11 05:02:35 -04:00			`\|__ app -> TypeScript files for Angular application`
Add client documentation 2016-12-01 16:16:38 -05:00			`\|__ assets -> static files (images...)`
			`\|__ sass -> SASS files that are global for the application`
			`\|__ standalone -> files outside the Angular application (embed HTML page...)`
Use shared models 2017-06-11 05:02:35 -04:00			`\|__ index.html -> root HTML file for our Angular application`
			`\|__ main.ts -> Main TypeScript file that boostraps our Angular application`
Add client documentation 2016-12-01 16:16:38 -05:00			`\|__ polyfills.ts -> Polyfills imports (ES 2015...)`

Use shared models 2017-06-11 05:02:35 -04:00			`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).`
Add client documentation 2016-12-01 16:16:38 -05:00
			`app`
Fix changing video in watch page 2018-01-12 11:16:48 -05:00			`\|__ +admin -> Admin components (followers, users...)`
Add client documentation 2016-12-01 16:16:38 -05:00			`\|__ account -> Account components (password change...)`
			`\|__ core -> Core components/services`
Fix changing video in watch page 2018-01-12 11:16:48 -05:00			`\|__ header -> Header components (logo, search...)`
Add client documentation 2016-12-01 16:16:38 -05:00			`\|__ login -> Login component`
Fix changing video in watch page 2018-01-12 11:16:48 -05:00			`\|__ menu -> Menu component (on the left)`
Add client documentation 2016-12-01 16:16:38 -05:00			`\|__ shared -> Shared components/services (search component, REST services...)`
Fix changing video in watch page 2018-01-12 11:16:48 -05:00			`\|__ signup -> Signup form`
Add client documentation 2016-12-01 16:16:38 -05:00			`\|__ videos -> Video components (list, watch, upload...)`
			`\|__ app.component.{html,scss,ts} -> Main application component`
Fix changing video in watch page 2018-01-12 11:16:48 -05:00			`\|__ app-routing.module.ts -> Main Angular routes`
Use shared models 2017-06-11 05:02:35 -04:00			`\|__ app.module.ts -> Angular root module that imports all submodules we need`
Add client documentation 2016-12-01 16:16:38 -05:00
			`## Conventions`

Use shared models 2017-06-11 05:02:35 -04:00			`Uses [TSLint](https://palantir.github.io/tslint/) for TypeScript linting and [Angular styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html).`
Add client documentation 2016-12-01 16:16:38 -05:00
Try to improve documentations/readme 2018-01-12 12:07:41 -05:00			`## Concepts`
Add client documentation 2016-12-01 16:16:38 -05:00
Fix changing video in watch page 2018-01-12 11:16:48 -05:00			`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.`
Use shared models 2017-06-11 05:02:35 -04:00			`If you are not familiar with Angular I recommend you to read the [quickstart guide](https://angular.io/docs/ts/latest/quickstart.html).`
Add client documentation 2016-12-01 16:16:38 -05:00
			`## Components tree`

Updated components tree 2018-07-26 08:47:14 -04:00			`![Components tree](/support/doc/development/client/components-tree.svg)`
Add client documentation 2016-12-01 16:16:38 -05:00
			`## Newcomers`

			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.