Angular 2: Musing on the potential of Hot Module Replacement and the power of @ngrx/store

Question

Angular 2: Musing on the potential of Hot Module Replacement and the power of @ngrx/store

If you're just getting started, this link might be helpful: understanding the purpose of HMR.

When it comes to managing and designing large projects, I'm still in the early stages and haven't grown a wise beard yet. So, I'm seeking advice from experienced individuals like yourself.

Exploring the Seed

I've been exploring the Angular 2 seed project and wondering if implementing HMR is a feasible option for developing a large application effectively.

These are just my initial thoughts, and I'm eager to have a discussion with others to make an informed decision. Learning from each other's experiences is crucial :-)

Data Structure Discussion

Considering the example below:

 (component code snippet)

Utilizing appState allows components to be dynamically reloaded and data injected. However, should we rely on objects like localState within components? Is this practice manageable in large applications?

On the other hand, utilizing localStorage solely for tracking data required by HMR seems like a straightforward approach.

Data Storage and @ngrx/store

In terms of storage, I also utilize @ngrx/store as a Redux implementation where the state serves as the application's localStorage. While this setup sounds promising, integrating @ngrx/store with HMR poses some challenges given that existing connectors may be outdated.

Aligning Angular services with reducers and finding ways to update HMR's state presents further considerations.

While @ngrx/store and HMR are recognized technologies within the Angular community, resources on combining them are limited. Therefore, I seek insights based on practical experiences and potential pitfalls that may not be immediately evident.

Final Thoughts

Is HMR deployment-ready for production environments?
Is storing substantial information within @ngrx/store advisable?
A crucial question: How well do these technologies integrate?

These inquiries echo similar discussions found at this link.

angular typescript redux ngrx webpack-hmr

Answer 1

Answer №1

In Summary - HMR is primarily a development tool that helps speed up the process without requiring you to fully understand its inner workings. If issues arise, simply refresh the page. In the long run, it will save you time...

Building Angular apps can be time-consuming due to their size (a few megabytes). HMR is utilized during development to reduce compilation times, allowing you to see changes instantly without delay. It operates by leveraging existing loaders like webpack and systemjs. Most likely, this information isn't new to you (;

I recently developed a personalized HMR solution based on Systemjs (using systemjs-hmr). The fundamental principle involves: notifying the loader of code changes and reloading those changes. Additional adjustments are necessary to ensure your app remains functional...

The core features of my HMR include:

reloading modified app code (components, services, pipes...),
recreating <app-root>, as depicted here,
disposing of the previous app with NgModuleRef.destory(),

bootstrapping the new app using:

platformBrowserDynamic().bootstrapModule(AppModule).then(module => window['__HMR__'] = module)

obtaining the initial value of @ngrx/store

This is the script I implemented:

import { Store } from '@ngrx/store';
export function get__HMR__state() {
  let state = {};
  if (window['__HMR__']) {
    const module = window['__HMR__'];
    const store = module.injector.get(Store);
    store.take(1).subscribe(s => state = s);
  }
  return state;
}

@NgModule({
  imports: [
    StoreModule.provideStore(AppReducer, get__HMR__state())
  ]
})

I refrain from storing unnecessary data in my app's AppState (ngrx/store). Input values and attributes should be managed more effectively like this.

The functionality works efficiently; after initiating my custom gulp build workflow at the beginning of the day, I rarely encounter issues thereafter (; An occasional hiccup may occur, especially when adjusting project structure and dependencies, but a quick F5 resolves the problem. Reloading promptly functions well when editing templates and styles, which significantly reduces downtime.

For "project management," I rely on angular-cli, and while using its ng serve feature (powered by webpack), the rebuild time ranges between 3-8 seconds + 2-4 seconds for the reload with each code alteration. Conversely, with Gulp+HMR (implemented on the same cli project), the rebuild time diminishes to 50-400ms + 200-500ms reload. That disparity prompted me to develop a tailored build solution (; Should complications arise, pressing F5 ensures the app runs smoothly within 2-4 seconds.

In conclusion, I highly recommend incorporating HMR for individuals spending several hours per day coding (; While it may not be flawless, no tool is, yet it ultimately saves substantial time in the grand scheme. Nevertheless, do not adjust your app solely to accommodate the tool. Write code as you normally would without HMR. Custom enhancements are possible if additional functionalities are required since, essentially, it's just JavaScript (;

Answer 2

In Summary - HMR is primarily a development tool that helps speed up the process without requiring you to fully understand its inner workings. If issues arise, simply refresh the page. In the long run, it will save you time...

Building Angular apps can be time-consuming due to their size (a few megabytes). HMR is utilized during development to reduce compilation times, allowing you to see changes instantly without delay. It operates by leveraging existing loaders like webpack and systemjs. Most likely, this information isn't new to you (;

I recently developed a personalized HMR solution based on Systemjs (using systemjs-hmr). The fundamental principle involves: notifying the loader of code changes and reloading those changes. Additional adjustments are necessary to ensure your app remains functional...

The core features of my HMR include:

reloading modified app code (components, services, pipes...),
recreating <app-root>, as depicted here,
disposing of the previous app with NgModuleRef.destory(),

bootstrapping the new app using:

platformBrowserDynamic().bootstrapModule(AppModule).then(module => window['__HMR__'] = module)

obtaining the initial value of @ngrx/store

This is the script I implemented:

import { Store } from '@ngrx/store';
export function get__HMR__state() {
  let state = {};
  if (window['__HMR__']) {
    const module = window['__HMR__'];
    const store = module.injector.get(Store);
    store.take(1).subscribe(s => state = s);
  }
  return state;
}

@NgModule({
  imports: [
    StoreModule.provideStore(AppReducer, get__HMR__state())
  ]
})

I refrain from storing unnecessary data in my app's AppState (ngrx/store). Input values and attributes should be managed more effectively like this.

The functionality works efficiently; after initiating my custom gulp build workflow at the beginning of the day, I rarely encounter issues thereafter (; An occasional hiccup may occur, especially when adjusting project structure and dependencies, but a quick F5 resolves the problem. Reloading promptly functions well when editing templates and styles, which significantly reduces downtime.

For "project management," I rely on angular-cli, and while using its ng serve feature (powered by webpack), the rebuild time ranges between 3-8 seconds + 2-4 seconds for the reload with each code alteration. Conversely, with Gulp+HMR (implemented on the same cli project), the rebuild time diminishes to 50-400ms + 200-500ms reload. That disparity prompted me to develop a tailored build solution (; Should complications arise, pressing F5 ensures the app runs smoothly within 2-4 seconds.

In conclusion, I highly recommend incorporating HMR for individuals spending several hours per day coding (; While it may not be flawless, no tool is, yet it ultimately saves substantial time in the grand scheme. Nevertheless, do not adjust your app solely to accommodate the tool. Write code as you normally would without HMR. Custom enhancements are possible if additional functionalities are required since, essentially, it's just JavaScript (;

Answer 3

Answer №2

Upon exploring this repository, I found it to be incredibly insightful.

The codebase utilizes Angular 2, HMR, @ngrx/store, and more. Through reviewing the code, I have gained valuable knowledge. The approach of using @ngrx/effects alongside @ngrx/store and HMR is impressively straightforward, especially evident in the app.module.ts. Thanks to AngularClass/hmr-loader, everything is conveniently consolidated here:

hmrOnInit(store) {
    if (!store || !store.rootState) return;

    // restore state by dispatching a SET_ROOT_STATE action
    if (store.rootState) {
      this._store.dispatch({
        type: 'SET_ROOT_STATE',
        payload: store.rootState
      });
    }

    if ('restoreInputValues' in store) { store.restoreInputValues(); }
    this.appRef.tick();
    Object.keys(store).forEach(prop => delete store[prop]);
  }
  hmrOnDestroy(store) {
    const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
    this._store.take(1).subscribe(s => store.rootState = s);
    store.disposeOldHosts = createNewHosts(cmpLocation);
    store.restoreInputValues = createInputTransfer();
    removeNgStyles();
  }
  hmrAfterDestroy(store) {
    store.disposeOldHosts();
    delete store.disposeOldHosts;
  }

Answer 4

Upon exploring this repository, I found it to be incredibly insightful.

The codebase utilizes Angular 2, HMR, @ngrx/store, and more. Through reviewing the code, I have gained valuable knowledge. The approach of using @ngrx/effects alongside @ngrx/store and HMR is impressively straightforward, especially evident in the app.module.ts. Thanks to AngularClass/hmr-loader, everything is conveniently consolidated here:

hmrOnInit(store) {
    if (!store || !store.rootState) return;

    // restore state by dispatching a SET_ROOT_STATE action
    if (store.rootState) {
      this._store.dispatch({
        type: 'SET_ROOT_STATE',
        payload: store.rootState
      });
    }

    if ('restoreInputValues' in store) { store.restoreInputValues(); }
    this.appRef.tick();
    Object.keys(store).forEach(prop => delete store[prop]);
  }
  hmrOnDestroy(store) {
    const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
    this._store.take(1).subscribe(s => store.rootState = s);
    store.disposeOldHosts = createNewHosts(cmpLocation);
    store.restoreInputValues = createInputTransfer();
    removeNgStyles();
  }
  hmrAfterDestroy(store) {
    store.disposeOldHosts();
    delete store.disposeOldHosts;
  }

Angular 2: Musing on the potential of Hot Module Replacement and the power of @ngrx/store

Exploring the Seed

Data Structure Discussion

Data Storage and @ngrx/store

Final Thoughts

Answer №1

Answer №2

Similar questions

Revamping an npm package on GitHub

Utilize puppeteer and web-vitals in NextJS to retrieve the web performance metrics of a website

Issue: Unable to find solutions for all parameters in (?, ?)

Access the CSV file using Office365 Excel via a scripting tool

Unexpected Behavior when Passing @Input() Data Between Parent and Child Components in Angular 2 Application

How can I effectively make properties accessible in my template to facilitate form validation in Angular?

The event triggered by the tinymce editor does not immediately refresh the Angular Component

The sequence of execution in React hooks with Typescript

Obtaining a Slick Component Instance with the help of View Child

Having trouble with downloading a zipped folder on the client side in an Angular and Node.js (MEAN) application

Aligning the React Navigation header component's bottom shadow/border width with the bottom tabs border-top width

Tips and tricks for accessing the state tree within effects in @ngrx/effects 2.x

The child component fails to inherit the data types provided by the parent component

Tips on switching the default camera with ngx-scanner-qrcode library in Angular

Incorporating npm packages into an Angular2 (v2.0.0-rc.1) application

Can we set a specific length for an array passed in as a prop?

After installing Node.js on a Windows machine, the program 'npm' is not identified as an internal or external command, and cannot be executed as an operable program or batch file

When using Typescript, I am encountering an issue where declared modules in my declaration file, specifically those with the file

Retrieve information from two distinct observables from within the resolver function

Why isn't the class applying the color to the Angular span element?