New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Tracking]馃敟Hot Module Replacement with webpack #6398

Open
sis0k0 opened this Issue Oct 11, 2018 · 2 comments

Comments

Projects
None yet
2 participants
@sis0k0
Contributor

sis0k0 commented Oct 11, 2018

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

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

After NativeScript 5.0

The possible improvements are explained in the design doc.

  • {N}-CLI Research ways to sync updates without FS
  • {N}-modules Apply new styles at runtime
  • {N}-modules Apply new UI at runtime
  • {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

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!

@shiv19

This comment has been minimized.

Show comment
Hide comment
@shiv19

shiv19 Oct 21, 2018

Contributor

@tsonevn Navigation state is also not maintained after HMR.

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

Contributor

shiv19 commented Oct 21, 2018

@tsonevn Navigation state is also not maintained after HMR.

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

@sis0k0

This comment has been minimized.

Show comment
Hide comment
@sis0k0

sis0k0 Oct 22, 2018

Contributor

@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.

Contributor

sis0k0 commented Oct 22, 2018

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment