Front end for a hobby chat application. Author Perttu Kärnä
Core technologies used:
- nodejs and NPM
- Angular (v5) (project originally generated with angular-cli)
- Redux for state management
- Angular Materials for UI components
- Karma for unit tests
- Protractor for e2e tests
The source code can be found under app -folder. The code is structured in following way:
- Redux action definitions can be found under actions -folder
- HTTP request module and middleware for handling asynchronous actions are under middleware -folder
- Models are defined at models -folder
- Redux reducers are under store -folder
- UI components are at view -foler
- Angular app module declarations and base app component are at app -folder
In a very high level this app can be split into two parts: store (manages the app state), and UI components. Let's start by store.
Redux store is a source of truth, a place where all the app data lies and from where the components get the state. Redux store is immutable in a way; you can't manipulate the data in store directly. However, you can dispatch actions, and provide data within them. Those actions will flow through Redux middleware, where a handlers called reducers handle the action. The action contains at least a type attribute, so the reducers can determine which action has been dispatched. In this application, also data can be passed in the action, which the reducers will handle. The reducers receive the old store with the action, and they return a new store. Thus, they create the new store by manipulating the old one and possibly mix in some action data. I.e all HTTP requests flow through Redux middleware and reducers, so that the app state can be kept updated when receiving new data from back end.
Angular offers many kinds of modules (components, services, directives, pipes), but we're going to focus only to components. Angular components and React components have many similarities. Angular component is a ES6 class, which is assigned to a certain HTML template and CSS file. Angular supports two-way binding, which makes it easy to create dynamic UIs. It is recommended to keep components simple (one-purpose-principle), so that they're easy to maintain. Components can of course be called from another component.
To wrap these two into together, we use objects called Observables. Observables are handy when handling asynchronous data. They remind a bit Promises, but they're more flexible for continuous data flow. When we want to get something from the Redux store, we'll have to declare a selector for the component using the data from the store. The selector is usually a function, and it will return an observable. The observable can then be used in multiple ways. i.e. by subscribing it in UI component constructor and in that way receiving the updated data whenever it changes. When the store is managed correctly, Angular will handle updating the UI when necessary.
- Install dependencies by
npm install - Run the development server by
npm start - Build a production build by
npm run build - Run unit tests by
npm test - Run e2e tests by
npm run e2e
NOTE: (29.12.2017) Tests can't be run at the moment due to some broken configurations during updating all dependencies.
See commands above for each step.
- Install dependencies
- Configure API url at src/environments (default http://localhost:3000)
- Run the development server
- The front end should be available at http://localhost:4200
- Stop the server by Ctrl + C
- ETNA by Krišjānis Mežulis
- Transformed from .otf to .woff and .ttf with Onlinefontconverter
- Billel Moula and Pexels
Original documentation generated by angular-cli below
NOTE: The webpack development configurations have been ejected by running ng eject. Thus, use only npm scripts to run jobs.
This project was generated with angular-cli version 1.0.0-beta.28.3.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class/module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
Before running the tests make sure you are serving the app via ng serve.
Run ng github-pages:deploy to deploy to GitHub Pages.
To get more help on the angular-cli use ng help or go check out the Angular-CLI README.