angular-movies

This is a Movies App built using Angular and RxAngular.
As data source the The Movie Database (TMDB) API is used.

powered by

Demo

A live deployment of this app is available to try it out.

Performance Optimizations

For now you can search the codebase for "Perf Tip" later on there will be propper documentation here.

Measures before optimization

Measures after optimization

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
• next
• nuxt

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:

  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
• rx-angular

Measures:

• Bundle sice listed fron dist
• Comparison videos with webpagetest
• Lighthoure reports with lighthouse-metrics
• User-flows created with @push-based/user-flow

Authors

• push-based.io
• Michael Hladky
• Kirill Karnaukhov
• Julian Jandl
• Vojtech Mašek

Based on the original angular-movies foundation by @clamarque.

License

MIT