Angular: Support a form of hot reloading in AngularDart

[martaver]

I just saw Flutter's hot reloading feature and was immediately jealous - I would love to see feature parity in AngularDart. The Typescript team's angular 2 can roll hot reloading on Webpack pretty easily - but I'm yet to see anything near sub-second on big projects. I venture that an angular 2 hot reloading solution using dart's core features would be fearsome.

[kulshekhar]

It might be possible when using DDC. I think there was a quick demo of using DDC with webpack to do hot reloading in Vijay Menon's talk at the Dart Dev Summit.

[martaver]

I missed the first day's videos unfortunately... :( I'm waiting for them to post the individual talks to see this. Very interesting...

[kwalrath]

Vijay's talk is now up: https://www.youtube.com/watch?v=oH6czEQwHdE&index=4&list=PLOU2XLYxmsILKY-A1kq4eHMcku3GMAyp2

[martaver]

Very interesting! Vijay's demo code is available here: https://github.com/vsmenon/dart-jsinterop-quill

I've been wondering what the best way to get hot module reloading in the Dart ecosystem would be, given the tools we have to work with : DDC, Bazel etc. Bazel and Webpack seem to crossover a bit. I could imagine DDC would fit as a webpack loader, but in Vijay's demo he seems to just detect changes on the generates JS files and reload them.

I think that Bazel could take responsibility for the build steps that Webpack normally handles - so the only real role of Webpack is to wrap the code in hot-swappable modules, run the dev server and listen for pushed changes.

[kwalrath]

cc @vsmenon

[vsmenon]

Yes, my demo had DDC and Webpack at arms length. It was more a proof of concept. (Though it certainly ought to be possible to code up DDC as a webpack loader.)

We're really leaning on Bazel for build scalability, so I like the idea of building as much of this functionality there as we can.

[martaver]

Webpack is good because it can hot reload styles as well as scripts. With some fiddling you can even preserve state across updates. It bundles everything (even your CSS) as JS and pushes it from its dev server. We should aim to provide the same experience.

If Bazel is already module aware, knows what's changed incrementally & we have pub serve, it seems a waste to run Webpack's change detection & dev server.

I wonder how difficult a dart-only solution would be? And would it be worth it?

[matanlurey]

We'd like to do this - but it's likely to happen further in 2017.

We'll have more roadmap information by EOY.

[martaver]

Great news that it's on the roadmap!

Out of curiosity, do you think that the hot reloading solution would stick
to Bazel and DDC or Webpack as per Vijay's demo?

On Mon, Nov 21, 2016 at 8:26 PM Matan Lurey [e-mail]
wrote:

We'd like to do this - but it's likely to happen further in 2017.

We'll have more roadmap information by EOY.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/dart-lang/angular2/issues/160#issuecomment-262024024,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF1wMgFXn1Fj1_8b1j6LhsIAGN0pM6FPks5rAeJggaJpZM4KjdlI
.

[matanlurey]

I am not sure at this point. We are experimenting with Bazel today.

[martaver]

Hey guys - it's been a while now, any updated on this front?

[edwinhos]

@Martaver probably by EOY

[kindlychung]

By end of 2017?

[matanlurey]

We have not started any real work in this area. It will require the DartDevCompiler (DDC) to be rolled out completely to external users, and vetted a bit (we want your feedback) before we invest a lot of resources here.

That being said if there is anyone that is _extremely_ motivated in this area, please reach out to me - perhaps we could start experimenting together.

[martaver]

Do you think, given what's been achieved with Flutter, that stateful,
order-of-millisecond hot reloading is possible for AngularDart using
DDC/Bazel etc? As in, is it technically feasible?

On Fri, May 12, 2017 at 3:34 AM Matan Lurey [e-mail]
wrote:

We have not started any real work in this area. It will require the
DartDevCompiler (DDC) to be rolled out completely to external users, and
vetted a bit (we want your feedback) before we invest a lot of resources
here.

That being said if there is anyone that is extremely motivated in this
area, please reach out to me - perhaps we could start experimenting
together.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/dart-lang/angular2/issues/160#issuecomment-300952523,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF1wMsvl8IRh1VhtBHNwQK6lFbP13Y5kks5r46kLgaJpZM4KjdlI
.

[martaver]

I suppose with the release of dart 1.24 opens up a few doors in this area?

[matanlurey]

Potentially. It's too early to guarantee anything.

The best thing, as a user, you could do, is start using DDC today and give us high quality feedback about usability/performance, so we can make sure it is solid. When I have something I can share about plans for hot reloading I will do so!

[kwalrath]

Here's the DDC doc:
https://webdev.dartlang.org/tools/dartdevc
https://webdev.dartlang.org/tools/dartdevc/faq

[eredo]

I did some tests this weekend and I was able to support an update of a component if the parent view was re rendered by navigating using the router. I setup a server which listened for changes propagated by a custom builder using a simple HTTP call. The server used the webkit inspection protocol to update the .ddc.js file using Debugger.setScriptSource.
I wasn't able to figure out how to completely re render a component from scratch in an existing view.

Is this going to be the purpose of the DDC extension #872 ?

[gops]

Do we have a technical feasibility for flutter like reloading with current build system ?

[vsmenon]

@jakemac53 and @samogot are investigating this.

We've had some success inside Google with simple coarse-grain hot restart of AngularDart apps.

Rather than reloading the entire page, it patches modified code and restarts the app (which is basically what my webpack demo above did). It's not really stateful (otherwise than the DOM potentially), but it's quite a bit faster than reloading the entire page.

[martaver]

Sound really exciting, any roadmap to releasing this to general public?

[jakemac53]

@samogot is working on it now - about to publish the first step towards this which is "live reload" (basically, just refresh the whole page after each build). Next step is actually swapping out only the affected modules.

[matanlurey]

Hey @jakemac53 I've assigned to you for triage so we can get this documented in the next release.

[jakemac53]

Sounds good, once build_web_compilers 0.4.2 is published then the --live-reload portion will be available in both webdev and build_runner.

[matanlurey]

I am going to close this, as its "done" in build_runner+friends.

[johnpryan]

AngularDart does not directly support this feature, so you would need to add the top level hooks in your app to destroy the root component and re-invoke main.

Are there examples of how to use this? What do you mean by "done"?

[alorenzen]

It is "done" in the sense that we do not currently have any worked planned in AngularDart for this.

All the work is being done in https://github.com/dart-lang/build, so you should look there for docs / examples.

[natebosch]

Here are the docs: https://github.com/dart-lang/build/blob/master/docs/hot_module_reloading.md

You can file issues on the build repo if the docs need improvement.

[johnpryan]

For posterity upgrading to build_runner and build ^1.0.0 and changing main to the following worked for me. (Your milage may vary.)

ComponentRef _app;

void main() {
  _app = runApp(generated.AppShellNgFactory);
}

Object hot$onDestroy() {
  _app.destroy();
  main();
}

[samogot]

@johnpryan You don't need to run main on destroy, because it will be run in context of old module.
Rerun main is a default action, so you probably don't need anything. I'm not sure will it leak a lot/fast if not to call destroy, but at least with your current code it still leaks

[johnpryan]

but at least with your current code it still leaks

Ok thanks - I've taken out the call to main(). Is there something else required to avoid a memory leak?