aboutsummaryrefslogtreecommitdiffhomepage
path: root/support/doc/client/code.md
diff options
context:
space:
mode:
Diffstat (limited to 'support/doc/client/code.md')
-rw-r--r--support/doc/client/code.md22
1 files changed, 11 insertions, 11 deletions
diff --git a/support/doc/client/code.md b/support/doc/client/code.md
index f629af32f..c1a5c1c5f 100644
--- a/support/doc/client/code.md
+++ b/support/doc/client/code.md
@@ -1,14 +1,14 @@
1# Client code documentation 1# Client code documentation
2 2
3The client is a HTML/CSS/JavaScript web application (single page application -> SPA) developed with [TypeScript](https://www.typescriptlang.org/)/[Angular 2](https://angular.io/). 3The client is a HTML/CSS/JavaScript web application (single page application -> SPA) developed with [TypeScript](https://www.typescriptlang.org/)/[Angular](https://angular.io/).
4 4
5 5
6## Technologies 6## Technologies
7 7
8 * [TypeScript](https://www.typescriptlang.org/) -> Language 8 * [TypeScript](https://www.typescriptlang.org/) -> Language
9 * [Angular 2](https://angular.io) -> JavaScript framework 9 * [Angular](https://angular.io) -> JavaScript framework
10 * [SASS](http://sass-lang.com/) -> CSS framework 10 * [SASS](http://sass-lang.com/) -> CSS framework
11 * [Webpack 2](https://webpack.github.io/docs/) -> Source builder (compile TypeScript, SASS files, bundle them...) 11 * [Webpack](https://webpack.github.io/docs/) -> Source builder (compile TypeScript, SASS files, bundle them...)
12 * [Bootstrap](http://getbootstrap.com/) -> CSS framework 12 * [Bootstrap](http://getbootstrap.com/) -> CSS framework
13 * [WebTorrent](https://webtorrent.io/) -> JavaScript library to make P2P in the browser 13 * [WebTorrent](https://webtorrent.io/) -> JavaScript library to make P2P in the browser
14 * [VideoJS](http://videojs.com/) -> JavaScript player framework 14 * [VideoJS](http://videojs.com/) -> JavaScript player framework
@@ -25,16 +25,16 @@ Here is the description of the useful `client` files directory:
25 .bootstraprc -> Bootstrap configuration file (which module we need) 25 .bootstraprc -> Bootstrap configuration file (which module we need)
26 config -> Webpack configuration files 26 config -> Webpack configuration files
27 src 27 src
28 |__ app -> TypeScript files for Angular 2 application 28 |__ app -> TypeScript files for Angular application
29 |__ assets -> static files (images...) 29 |__ assets -> static files (images...)
30 |__ sass -> SASS files that are global for the application 30 |__ sass -> SASS files that are global for the application
31 |__ standalone -> files outside the Angular application (embed HTML page...) 31 |__ standalone -> files outside the Angular application (embed HTML page...)
32 |__ index.html -> root HTML file for our Angular 2 application 32 |__ index.html -> root HTML file for our Angular application
33 |__ main.ts -> Main TypeScript file that boostraps our Angular 2 application 33 |__ main.ts -> Main TypeScript file that boostraps our Angular application
34 |__ polyfills.ts -> Polyfills imports (ES 2015...) 34 |__ polyfills.ts -> Polyfills imports (ES 2015...)
35 |__ vendor.ts -> Vendor imports (Angular, Bootstrap...) 35 |__ vendor.ts -> Vendor imports (Angular, Bootstrap...)
36 36
37Details of the Angular 2 application file structure. It tries to follow [the official Angular 2 styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html). 37Details of the Angular application file structure. It tries to follow [the official Angular styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html).
38 38
39 app 39 app
40 |__ account -> Account components (password change...) 40 |__ account -> Account components (password change...)
@@ -44,11 +44,11 @@ Details of the Angular 2 application file structure. It tries to follow [the off
44 |__ shared -> Shared components/services (search component, REST services...) 44 |__ shared -> Shared components/services (search component, REST services...)
45 |__ videos -> Video components (list, watch, upload...) 45 |__ videos -> Video components (list, watch, upload...)
46 |__ app.component.{html,scss,ts} -> Main application component 46 |__ app.component.{html,scss,ts} -> Main application component
47 |__ app.module.ts -> Angular 2 root module that imports all submodules we need 47 |__ app.module.ts -> Angular root module that imports all submodules we need
48 48
49## Conventions 49## Conventions
50 50
51Uses [TSLint](https://palantir.github.io/tslint/) for TypeScript linting and [Angular 2 styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html). 51Uses [TSLint](https://palantir.github.io/tslint/) for TypeScript linting and [Angular styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html).
52 52
53## Developing 53## Developing
54 54
@@ -57,8 +57,8 @@ Uses [TSLint](https://palantir.github.io/tslint/) for TypeScript linting and [An
57 * Run PostgreSQL and create the database `peertube_dev`. 57 * Run PostgreSQL and create the database `peertube_dev`.
58 * Run `npm run dev` to compile the client and automatically run the server. Then the server will watch and compile the client files automatically. You just need to refresh the browser to see your modifications. 58 * Run `npm run dev` to compile the client and automatically run the server. Then the server will watch and compile the client files automatically. You just need to refresh the browser to see your modifications.
59 59
60In a Angular 2 application, we create components that we put together. Each component is defined by an HTML structure, a TypeScript file and optionnaly a SASS file. 60In a Angular application, we create components that we put together. Each component is defined by an HTML structure, a TypeScript file and optionnaly a SASS file.
61If you are not familiar with Angular 2 I recommend you to read the [quickstart guide](https://angular.io/docs/ts/latest/quickstart.html). 61If you are not familiar with Angular I recommend you to read the [quickstart guide](https://angular.io/docs/ts/latest/quickstart.html).
62 62
63## Components tree 63## Components tree
64 64