Client Side Docs

##Welcome to the Client side!

###Technologies that GOAT uses:

• Angular2 - Google's front-end Framework
• Redux - A scale-ability framework inspired by Flux which handles all our data flow in the frontend.
• Immutable JS - A data modeling library which preps our data for optimal compatibility with Redux principles.
• Socket IO - A real-time engine which serves to the user without the need for a browser to refresh.

##Key Concepts: ###If you embrace the below points, and gain a deep understanding of each item below you will be able to unlock the GOATstack's full potential.

• Modules & sub-modules
• Immutability
• Application States
• Observables
• Many-to-one relationships:
• Dependency Injection:
• Two way data binding:

##Files you will be making:

#Angular2

Bootstrap file, app.ts

Location: root/client/

####File Structure

.
├── client
│
│   ├── app.ts

####main.ts This is the file which gives your Angular application directions on how to bootstrap the project.

##Root Module

Location: root/client/

####File Structure

.
├── client
│
│   ├── app.module.ts

####app.module.ts Every Angular application will contain at least one module, and that is the [root module](####File Structure . ├── modulename │ │ ├── name-routing.module.ts │ ├── name.module.ts). The main purpose of this module is to setup the application tree, and to give the root/client/app.ts file the proper component to bootstrap. In our implementation that component is root/client/app.component.ts.

##Modules

Location: root/client/modules/

####File Structure

.
├── modulename
│
│   ├── name-routing.module.ts
│   ├── name.module.ts

####name-routing.module.ts This file is a module which is dependent on the module-name.module.ts file. It has one very specific purpose, defining all routes which are contained in this specific module. That route once defined will then be used in the core modules routing module located at root/client/modules/core/core-routing.module.ts

####name.module.ts This file is an NgModule. A Module's purpose is to group segments of an application together based on functionality.

For example all the components services directive etc related to live-chat would be in the live-chat module.

##Root Component

Location: root/client/

####File Structure

.
├── client
│
│   ├── app.component.html
│   ├── app.component.scss
│   ├── app.component.ts

####app.component.ts This component is the entry-point of the Angular application it's the first DOM content which will be processed. This component is included in the root module root/client/app.module.ts which is then bootstrapped in app.ts ####name.component.html This is the component template, it uses template syntax to scaffold out the html of the component ####name.component.scss This is the components stylesheet. We decided to use SCSS for the capability to use angular material 2

##Module Component

Location: root/client/modules/modulename/

####File Structure

.
├── modulename
│
│   ├── name.component.html
│   ├── name.component.scss
│   ├── name.component.ts

####name.component.ts Every module will have at-least one component. That is this component. any subsequent components will be contained in the ./components folder as defined below.

##Components:

Location: root/client/modules/modulename/components/

####File Structure

.
├── components
│   ├── name
│   │   ├── name.component.html
│   │   ├── name.component.scss
│   │   ├── name.component.ts

####name.component.ts This is the component file which hosts all of the components functionality.

any component which is considered global may be put in the core module. root/client/modules/core/components/

##Directives:

Location: root/client/modules/moudle-name/directives

####File Structure

.
├── directives
│   ├── name.directive.ts

####name.directive.ts We organize directives by component. Each directive serves one a specific purpose. You can read more about directives here: Attribute Directives and here: Structural Directives

If a directive is used by multiple modules you may consider placing it in the core module root/client/modules/core/directives/

##Services:

Location: root/client/modules/module-name/services/

####File Structure

.
├── services
│   ├── name.service.ts

####name.service.ts The purpose of a service is to transfer data from one place to another, be it two components, from the backend, or from an http request. This file's main purpose is to take data from point A and deliver it to point B. Usually services are Singletons You can learn more about them here

If you have a service which is used in multiple components you can consider moving it to the core module root/client/modules/core/services/

##Pipes:

Location: root/client/modules/module-name/pipes/

####File Structure

.
├── pipes
│   ├── name.pipe.ts

####name.pipe.ts The pipe is very useful, it intercepts the value inside data interpolation in an Angular html template, runs it through some user defined functions and then returns a new value for the interpolation to display to the client. You can learn more about pipes here

If you have a pipe which is used in multiple modules you can consider moving it into the core module root/client/modules/core/pipes/

##Public:

Location: root/public/

####File Structure

.
├── root
│   ├── public
│   ├── resource1
│   │   ├── ...
│   ├── resource2
│   │   ├── ...
│   ├── resource3
│   │   ├── ...

The structure inside of root/public/ is fair game as long as you properly link to the resources you would like to consume, please organize this however you wish.

Everything inside the /root/public/ folder is exposed to the client by express in root/server/express.ts line 79. As long as you don't change the name of this file anything in the public folder will be accessible in both the client and the server. Do not put anything sensitive in the public folder. anyone and everyone has access to it and can exploit sensitive information placed in it

#Redux

##Actions:

Location: root/client/redux/actions/

####File Structure

.
├── actions
│   ├── name
│   │   ├── name.actions.spec.ts
│   │   ├── name.actions.ts

##The Store:

Location: root/client/redux/store/

####File Structure

.
├── store
│   ├── name
│   │   ├── name.initial-state.ts
│   │   ├── name.reducer.spec.ts
│   │   ├── name.reducer.ts
│   │   ├── name.transformers.ts
│   │   ├── name.types.ts
│   │   ├── index.ts
│   ├── index.ts