/Michael-Hladky-angular-movies

A Angular Movies App Optimized for Performance

Primary LanguageHTMLMIT LicenseMIT

angular-movies

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

angular-and-rx-angular

Demo

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

Performance Optimizations

angular-movies--after-before

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

Measures before optimization angular-movies-before_michael-hladky

Measures after optimization angular-movies-after-optimization_michael-hladky

Bundle Stats

Names Size
main.a46302155c8385e9.js 341.34 KB
styles.95074ad981542eac.css 6.15 KB
runtime.b3ca251565e7c678.js 3.73 KB
Initial Total 351.22 KB
Names Size
app_pages_movie-detail-page_movie-detail-page 15.96 KB
app_pages_person-detail-page_person-detail-page 11.38 KB
common.f5f41f37f0a6603d.js 11.21 KB
app_pages_account-feature_list-detail-page_list-items-edit_list-items-edi-393246.00f00fc36b0c62ff.js 7.01 KB
app_app-shell_account-menu_account-menu_component_lazy_ts.ab73c8ee922f225b.js 4.75 KB
app_pages_account-feature_account-list-page_account-list-page 4.22 KB
app_pages_account-feature_list-detail-page_list-detail-page 3.94 KB
app_pages_account-feature_list-detail-page_list-remove_list-remove 3.34 KB
app_pages_account-feature_list-detail-page_list-image_list-image 2.77 KB
app_pages_not-found-page_not-found-page 1.85 KB
app_pages_account-feature_list-detail-page_list-movies_list-movies 837 Bytes

Comparison to next and nuxt

angular-vs-next-vs-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.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-and-rx-angular

Measures:

Authors

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

License

MIT