/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.0b98b46fafc21ccf.js 349.22 KB
styles.587a48cd73a27b6a.css 6.14 KB
runtime.8d5e4df4814b048c.js 4.04 KB
Initial Total 359.41 KB
Names Size
app_pages_movie-detail-page_movie-detail-page_component_ts.62d292586c19dd9e.js 15.58 KB
app_pages_person-detail-page_person-detail-page_component_ts.c55af4dd7793fae1.js 11.05 KB
app_pages_account-feature_list-detail-page_list-items-edit_list-items-edi-13eb42.9beb6965e5b3c14a.js 6.75 KB
common.621f6c63c31f0f8f.js 5.68 KB
app_pages_account-feature_list-create-page_list-create-page_component_ts.92ec77577723a03c.js 5.23 KB
app_app-shell_account-menu_account-menu_component_lazy_ts.5c66953af9b58865.js 4.65 KB
app_pages_account-feature_account-list-page_account-list-page_component_ts.b608cc4d7ef7b629.js 3.78 KB
app_pages_account-feature_list-detail-page_list-remove_list-remove_component_ts.a65e20ddb4cb67b3.js 3.1 KB
app_pages_account-feature_list-detail-page_list-detail-page_component_ts.e926a60f713ea600.js 2.81 KB
app_pages_account-feature_list-detail-page_list-image_list-image_component_ts.56dfb26d43616416.js 2.55 KB
app_pages_not-found-page_not-found-page_component_ts.db2be1846fc8a777.js 1.65 KB
app_pages_account-feature_list-detail-page_list-detail-page_routes_ts.d7e2c90a1f032c1b.js 1.57 KB
app_pages_account-feature_account-featuer-page_routes_ts.71de5f44cacc5fac.js 841 Bytes
app_pages_account-feature_list-detail-page_list-movies_list-movies_component_ts.cb400ff482b3ca53.js 641 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