diff options
Diffstat (limited to 'support/doc/client/code.md')
-rw-r--r-- | support/doc/client/code.md | 22 |
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 | ||
3 | The client is a HTML/CSS/JavaScript web application (single page application -> SPA) developed with [TypeScript](https://www.typescriptlang.org/)/[Angular 2](https://angular.io/). | 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 | 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 | ||
37 | Details 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). | 37 | 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). |
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 | ||
51 | Uses [TSLint](https://palantir.github.io/tslint/) for TypeScript linting and [Angular 2 styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html). | 51 | Uses [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 | ||
60 | In 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. | 60 | In 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. |
61 | If you are not familiar with Angular 2 I recommend you to read the [quickstart guide](https://angular.io/docs/ts/latest/quickstart.html). | 61 | If 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 | ||