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

Tips for effectively managing index positions within a dual ngFor loop in Angular

React router loader is not functioning correctly when trying to fetch data

What is the best way to format this DateTime for a more visually appealing appearance within an Angular Material <mat-card-subtitle>?

Establishing the Redux state using an Express backend

Conceal the Froala editor when blur events occur

The property 'value' is not recognized on the Element type

Unable to retrieve JSON data in Angular2 as expected

What steps can be taken to eliminate repeat categories and prevent the accumulation of endless iterations?

The MSI installer for electron-builder is rejecting the asar file due to its excessive

Tips for writing unit tests for clipboard copy functionality in an Angular application

What is the reason why the [active] attribute does not function properly in <a mat-tab-link> in Angular?

Issue with Angular project: View not being updated when using behaviorSubjects

Ways to update the component's state externally

Unit testing of an expired JWT token fails due to the incorrect setting of the "options.expiresIn" parameter, as the payload already contains an "exp" property

Exploring Angular's Implementation of D3 Force Simulation

Angular2 - Leveraging data to dynamically control radio buttons

Best Practices for Variable Initialization in Stencil.js

Use Typescript in combination with React/Redux to showcase a dynamic table on the

Enabling cookie communication between NestJS server and Next.js frontend

What is the process of registering custom pipes in Angular 17?