https://github.com/push-based/ws-angular-performance
An Angular project prepared to learn about performance optimizations
https://github.com/push-based/ws-angular-performance
Last synced: 3 months ago
JSON representation
An Angular project prepared to learn about performance optimizations
- Host: GitHub
- URL: https://github.com/push-based/ws-angular-performance
- Owner: push-based
- License: mit
- Created: 2022-05-03T21:40:31.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-05-05T11:27:42.000Z (about 3 years ago)
- Last Synced: 2023-08-12T22:16:07.183Z (almost 2 years ago)
- Language: HTML
- Size: 1.02 MB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.MD
- License: LICENSE
Awesome Lists containing this project
README
# angular-movies
This is a Movies App built using [Angular](https://angular.io) and [RxAngular](https://github.com/rx-angular/rx-angular).
As data source the [The Movie Database (TMDB)](https://www.themoviedb.org/) API is used.
[](https://www.rx-angular.io/)
powered by
## Demo
A [live deployment](https://angular-movies-a12d3.web.app/list/category/popular) of this app is available to try it out.
## Performance Optimizations
[](https://www.webpagetest.org/video/compare.php?tests=220216_BiDcPP_CVM,220216_AiDcBN_ETK)
For now you can search the codebase for "Perf Tip" later on there will be propper documentation here.
[Measures before optimization](https://lighthouse-metrics.com/checks/9ddeb46e-2c28-453c-b719-cf080a01b13c)
[](https://lighthouse-metrics.com/checks/9ddeb46e-2c28-453c-b719-cf080a01b13c)
[Measures after optimization](https://lighthouse-metrics.com/checks/6a888a17-b17b-46a6-abc9-e605b73a530c/runs/503701ad-36aa-43ad-8de3-cb40e775c770)
**Bundle Stats**
| Names | Size |
| --- | --- |
| main.3be9aa83a5fc0ab3.js | 333.7 KB |
| styles.be05b375b7ddee56.css | 6.14 KB |
| runtime.2ebee702aaf70ea8.js | 3.73 KB |
| **Initial Total** | **343.57 KB** |
| Names | Size |
| app_pages_movie-detail-page_movie-detail-page | 15.43 KB |
| app_pages_person-detail-page_person-detail-page | 10.94 KB |
| common.fa88d42376be556b.js | 10.69 KB |
| app_pages_account-feature_list-detail-page_list-items-edit_list-items-edi-393246.a07ece70117839f4.js | 6.93 KB |
| app_app-shell_account-menu_account-menu_component_lazy_ts.dbb1672cdc5020df.js | 4.32 KB |
| app_pages_account-feature_account-list-page_account-list-page | 4.01 KB |
| app_pages_account-feature_list-detail-page_list-detail-page | 3.93 KB |
| app_pages_account-feature_list-detail-page_list-remove_list-remove | 3.23 KB |
| app_pages_account-feature_list-detail-page_list-image_list-image | 2.77 KB |
| app_pages_not-found-page_not-found-page | 1.84 KB |
| app_pages_account-feature_list-detail-page_list-movies_list-movies | 837 Bytes |
## Comparison to next and nuxt
- [angular](https://angular-movies-a12d3.web.app/list/category/popular)
- [next](https://movies.zaps.dev/?category=Popular&page=1)
- [nuxt](https://movies.jason.codes/movie/category/popular)
[](https://www.webpagetest.org/video/compare.php?tests=220216_AiDcBJ_EAA,220216_BiDcER_CDY,220216_BiDc68_CDZ)
## Contributing
Contributions are always welcome!
For large changes, please file an issue to discuss your proposed changes with us before working on a PR :)
## Installation
Clone and install the dependencies for `ws-angular-performance` locally:
```bash
git clone https://github.com/push-based/ws-angular-performance.git
cd angular-movies
npm install
```
## Quick setup
1. Take a copy of `src/environments/environment.local.example.ts` and re-name to `src/environments/environment.prod.ts`
2. Get your TMDb API key
3. Get your TMDB API read access token
4. Enter the details into the `src/environments/environment.prod.ts` file
## Running locally
* `npm run build:dev`: dev build
* `npm run build:prod`: production build
* `npm run build:prod:ssr`: production build for SSR
* `npm run start`: serve the project locally for development
* `npm run start:ssr:dev`: serve the project locally SSR for development
* `npm run start:ssr:prod`: serve the project locally SSR for production
* `npm run analyze:bundlesize`: bundle size analysis
## Tech Stack
Built with:
* [Angular](https://angular.io)
* [rx-angular](https://github.com/rx-angular/rx-angular)
[](https://www.rx-angular.io/)
Measures:
* Bundle sice listed fron dist
* Comparison videos with [webpagetest](https://www.webpagetest.org)
* Lighthoure reports with [lighthouse-metrics](https://lighthouse-metrics.com)
* User-flows created with [@push-based/user-flow](https://www.npmjs.com/package/@push-based/user-flow)
## Authors
- [push-based.io](https://push-based.io)
- [Michael Hladky](https://github.com/BioPhoton)
- [Kirill Karnaukhov](https://github.com/Karnaukhov-kh)
- [Julian Jandl](https://github.com/HoebbelsB)
- [Vojtech Mašek](https://github.com/vmasek)
Based on the original `angular-movies` foundation by [@clamarque](https://github.com/clamarque/angular-movies).
## License
[MIT](https://choosealicense.com/licenses/mit/)