Nativescript: [Tracking] 🔥 Hot Module Replacement with webpack

[sis0k0]

Overview

Hot Module Replacement (HMR) is a feature provided by webpack. It makes it possible to replace modules in a bundled application while the application is running.

Integrating HMR within NativeScript will improve the development experience by:

• reducing the time to apply the updates when changing files;
• preserving the application state between reloads.

Design

Implementation details and motivation of the feature can be found in its design document.

Tasks

NativeScript 5.0

• [x] Demo applications.
  
  
  
  • [x] JavaScript https://github.com/NativeScript/js-ns-hmr
  
  
  • [x] Angular https://github.com/NativeScript/ng-ns-hmr
  
  
• [x] {N}-webpack Integrate the HotModuleReplacement plugin with nativescript-dev-webpack.
• [x] {N}-webpack Template for HMR runtime and logic that triggers the hot update on change.
• [x] {N}-webpack Loaders for invoking reloadPage on changes in JS/TS-only applications.
• [x] {N}-webpack Add Vue template. https://github.com/NativeScript/nativescript-dev-webpack/pull/676
• [x] {N}-CLI Flag for enabling HMR.
• [x] {N}-CLI Sync the backup files and restart the application when the hot update fails.
• [x] {N}-CLI Integrate with tns preview.
• [x] Integrate with NativeScript Playground.
• [x] {N}-Angular Modify the bootstrap API to allow for dynamic module refetching.
• [x] {N}-Angular Application logic for bootstrapping on changes.
• [x] {N}-Angular Research the Angular compiler API for ways to improve the application reload logic in NativeScript Angular application.
• [ ] [5.4] Livesync tests.
• [ ] Benchmark tests.
• [ ] [5.4, all flavors] Provide a guide on persisting the application state between reloads.
• [x] Documentation.
  
  
  
  • [x] Update the {N}-webpack article.
  
  
  • [x] Mention the hmr flag in the {N}-CLI section.
  
  

After NativeScript 5.0

The possible improvements are explained in the design doc.

• [x] [5.2] {N}-webpack Loaders for dynamically inserting the reload logic in NativeScript Angular applications: https://github.com/NativeScript/nativescript-dev-webpack/pull/788
• [ ] {N}-Vue Avoid unexpected navigation on a script change: https://github.com/nativescript-vue/nativescript-vue/issues/388
• [ ] {N}-Vue Apply deletion of styles: https://github.com/nativescript-vue/nativescript-vue/issues/425
• [ ] {N}-Vue HMR stops listening on changes: https://github.com/NativeScript/nativescript-cli/issues/3927
• [ ] {N}-CLI Research ways to sync updates without FS
• [x] {N}-modules Apply styles at runtime
  
  
  
  • [x] [5.2 - all flavors] Application styles - app.(css|scss): https://github.com/NativeScript/NativeScript/issues/6645
  
  
  • [x] [5.4 - JS/TS only] Page styles - main-page.(css|scss), etc.: https://github.com/NativeScript/NativeScript/issues/6953
  
  
• [x] [5.4 - JS/TS only] {N}-modules Apply new UI at runtime
• [x] [5.4 - JS/TS only] {N}-modules Improve the reload strategy when the root view is not Page, but TabView, SideDrawer, etc.
• [ ] {N}-modules Come up with a reload strategy for custom components.
• [ ] {N}-Angular Research ways to preserve the last route between reloads.
• [ ] {N}-modules/{N}-Angular Research ways to preserve the navigation history between reloads.

Known issues

• [ ] {N}-modules Currently if you add a new -page.css, -page.xml or -page.ts/js file it won't be accepted as it will trigger an update in the ./ sync recursive... item in the bundle which is not being accepted, so this will make the CLI restart the app to apply the change
• [x] [5.2] nativescript-dev-sass Changes in app.scss are not applied in Angular applications
• [ ] {N}-Angular Changes in plugin do NOT apply in angular projects:
  https://github.com/NativeScript/nativescript-dev-webpack/issues/914

Contributing

HMR provides us with so many possibilities!
If you want to work on a task from the list, tell us and we will do our best to help you!
If you have another great idea on how to make HMR even cooler, share it in the comments!

Discussion

Please, don't report problems here. Instead, open a new issue and link it to this one.
Let's use this discussion for suggestions and improvement ideas. We would love to hear from you!

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[shiv19]

@tsonevn Navigation state is also not maintained after HMR.

do you want me to create a new issue to track it?

[sis0k0]

@shiv19, 10x for the feedback! You don't need to log an issue. I will add Research ways to persist nav history to the list of possible improvements.

TLDR;
This is the expected behavior of the reloadPage function that's used for applying the changes.

[larssn]

Is HMR _supposed_ to tear down the entire angular app when reloading? Thought it was supposed to maintain the state? We're seeing ngOnDestroy getting called for everything on reloads, and it's causing problems.

Can anyone clarify?

(I'll create an issue if it's not supposed to do that)

EDIT: So module['hot'] is always undefined, even with tns run android --hmr, which seems to be the culprit? Solution: Outdated webpack.config.js (still seeing the above behavior though)

EDIT2 Found our particular issue:
https://github.com/NativeScript/nativescript-dev-webpack/issues/708

[MarkPieszak]

Typically when trying to do HMR like this, you might need to check for module['hot'] and dispose the previous one.

(As an example I do for aspnetcore & angular integration with HMR)

// // Enable either Hot Module Reloading or production mode
if (module['hot']) {
  module['hot'].accept();
  module['hot'].dispose(() => {
    modulePromise.then(appModule => appModule.destroy());
  });
} else {
  enableProdMode();
}

[vchimev]

Updated for 5.2 release.

[hettiger]

[ ] {N}-modules Improve the reload strategy when the root view is not Page, but TabView, SideDrawer, etc.

Are there any workarounds? When can we expect this to work out of the box?

[vchimev]

Hey @hettiger,

This has been implemented for NativeScript applications with JavaScript and TypeScript:

• related issue: https://github.com/NativeScript/NativeScript/issues/7145
• available with tns-core-modules@next
• official release with NativeScript 5.4.0

[shiv19]

I tried it today and it works like a dream! Love it <3

[vahidvdn]

Hey guys. When I close the app and open it again, every changes with --hmr is gone. But this doesn't happen without --hmr. Any idea?

[vchimev]

Hey @vahidvdn,

There was a regression in some of the next versions of nativescript-dev-webpack and that could be the reason. Could you please make sure you use the most recent latest or next version?

Let me know if still experience this problem.

[lambourn]

I understand that {N} + Angular + HMR means that the application will bootstrap on change.

Does this imply that objects created by Angular's DI / bootstrap mechanisms will get recreated from scratch? Or will a @Injectable object be "the same" before and after HMR executes?

Right now I see lots of (non-UI) objects getting re-created after HMR.

[vahidvdn]

Hi @vchimev
This still happens in nativescript 6.1. I just update my cli and created a project with Angular tab template.
Now hmr is enabled by default. I save some changes, close the app, then I open it, I don't see the changes. And due to closing the app, I can't save new changes anymore.

[Jonatthu]

@vahidvdn mine used to do the same until I removed the come on maint.ns.ts that used to listen for hmr module flag.

[vahidvdn]

@Jonatthu Thanks, but I'm afraid I didn't catch on you. You just turned off the hrm?

[Jonatthu]

If you have a code like this just comment it out

[vahidvdn]

@Jonatthu You are just falling back to the legacy one. Actually that is not a solution. The legacy reloader dropped in version 6.0

It's a bug with hmr and by deleting it we miss the advantages of it.

[Jonatthu]

@vahidvdn I was having problems with my hmr until I commented out this piece of code.
After I removed this legacy code, my start working with 6.1