swuecho/angular-movies

A Angular Movies App Optimized for Performance

angular-movies

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

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.js	2.5 MB
runtime.js	12 KB
styles.css	8.54 KB
Initial Total	2.52 MB
Names	Size
app_pages_movie-detail-page_movie-detail-page_component_ts.js	58.67 KB
app_pages_person-detail-page_person-detail-page_component_ts.js	45.81 KB
common.js	37.43 KB
a-4d8953.js	36.55 KB
default-node_modules_rx-angular_template_fesm2022_template-if_mjs.js	28.2 KB
app_pages_account-feature_list-detail-page_list-items-edit_list-items-edi-13eb42.js	26.27 KB
app_pages_movie-list-page_movie-list-page_component_ts.js	24.04 KB
app_pages_account-feature_list-create-page_list-create-page_component_ts--1f481e.js	21.58 KB
app_pages_account-feature_account-list-page_account-list-page_component_ts.js	20.36 KB
app_app-shell_account-menu_account-menu_component_ts.js	20.2 KB
app_pages_account-feature_list-detail-page_list-image_list-image_componen-cb4b89.js	16.83 KB
app_pages_account-feature_list-detail-page_list-detail-page_component_ts--a2c81d.js	14.71 KB
app_pages_account-feature_list-detail-page_list-remove_list-remove_compon-a10eb2.js	11.1 KB
app_pages_not-found-page_not-found-page_component_ts.js	6.95 KB
app_pages_account-feature_list-detail-page_list-detail-page_routes_ts.js	3.4 KB
app_pages_account-feature_account-feature-page_routes_ts.js	2.65 KB
app_pages_account-feature_list-detail-page_list-movies_list-movies_component_ts.js	2.55 KB

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 angular-movies locally:

  git clone https://github.com/tastejs/angular-movies.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.production.ts
2. Get your TMDb API key
3. Get your TMDB API read access token
4. Enter the details into the src/environments/environment.production.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 size listed from dist folder
• 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
• Enea Jahollari
• Matthieu Riegler

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

License

MIT