From 35a12fee2f639f43e9b0c48f6eeb355ff71a065f Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 1 Dec 2016 22:16:38 +0100 Subject: Add client documentation --- support/doc/client/code.md | 69 +++++++++++++++++++++++++++++++++ support/doc/client/components-tree.png | Bin 0 -> 47396 bytes 2 files changed, 69 insertions(+) create mode 100644 support/doc/client/code.md create mode 100644 support/doc/client/components-tree.png (limited to 'support/doc/client') diff --git a/support/doc/client/code.md b/support/doc/client/code.md new file mode 100644 index 000000000..3c2029847 --- /dev/null +++ b/support/doc/client/code.md @@ -0,0 +1,69 @@ +# Client code documentation + +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/). + + +## Technologies + + * [TypeScript](https://www.typescriptlang.org/) -> Language + * [Angular 2](https://angular.io) -> JavaScript framework + * [SASS](http://sass-lang.com/) -> CSS framework + * [Webpack 2](https://webpack.github.io/docs/) -> 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](https://github.com/Chocobozzz/PeerTube/blob/master/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 2 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 2 application + |__ main.ts -> Main TypeScript file that boostraps our Angular 2 application + |__ polyfills.ts -> Polyfills imports (ES 2015...) + |__ vendor.ts -> Vendor imports (Angular, Bootstrap...) + +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). + + app + |__ account -> Account components (password change...) + |__ admin -> Admin components (friends, users...) + |__ core -> Core components/services + |__ login -> Login component + |__ shared -> Shared components/services (search component, REST services...) + |__ videos -> Video components (list, watch, upload...) + |__ app.component.{html,scss,ts} -> Main application component + |__ app.module.ts -> Angular 2 root module that imports all submodules we need + +## Conventions + +Uses [TSLint](https://palantir.github.io/tslint/) for TypeScript linting and [Angular 2 styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html). + +## Developing + + * Install [the dependencies](https://github.com/Chocobozzz/PeerTube#dependencies) + * Run `npm install` at the root directory to install all the dependencies + * Run MongoDB + * 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. + +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. +If you are not familiar with Angular 2 I recommend you to read the [quickstart guide](https://angular.io/docs/ts/latest/quickstart.html). + +## Components tree + +![Components tree](https://github.com/Chocobozzz/PeerTube/blob/master/support/doc/client/components-tree.png) + +## 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. diff --git a/support/doc/client/components-tree.png b/support/doc/client/components-tree.png new file mode 100644 index 000000000..cd89aa02b Binary files /dev/null and b/support/doc/client/components-tree.png differ -- cgit v1.2.3