Nativescript-cli: Feature Request: Hot Reload

[NickIliev]

_From @bnussey on February 20, 2018 23:55_

Currently styling and polishing NativeScript UI is incredibly inefficient due to the full app reload necessary for any change. This has added many hours, days, weeks to our NativeScript project and we consider this a significant deterrent in using NativeScript for any new projects.

Both React Native and Flutter have solved this through their hot reload capabilities which preserves state and sees a refresh within milliseconds.

Is this feature coming to NativeScript soon?

_Copied from original issue: NativeScript/NativeScript#5447_

[NickIliev]

_From @NathanaelA on February 21, 2018 0:22_

I agree; this is a extremely important feature that should get some serious development effort. As the bar we should be shooting for is Flutter. You should check out the instant reload with saved state in Flutter; it really makes a huge difference in programmer productivity.

I created this sample for Jen's Cheese repo to learn a little bit about flutter (code is in Jen's repo);

What this image shows; I started the app -- THIS is a SINGLE take; I did NOT pause the recorder, edit, or do any tricks. You see it in realtime, which is why their is delays while I switch over to the code editor and make any changes. Just one small note: The GIF is recorded at like 10FPS, the app is actually buttery smooth 60fps so don't just the app by this GIF, I just didn't want a 100 meg GIF. :grinning:

• This started as the stock standard flutter sample; click to add one to the counter. You can see me click it a couple times.
• Next, I changed the code from counter++ to counter+=5 and you then seem me click; and bam it starts incrementing by 5. No restart needed, state remained...
• Next I pasted in the code I wrote for the list view. Again, bam it instantly connected to Firebase; started downloaded the results as it displayed them. Again, NO RESTART needed! This is 100% live.
• Next I clicked the button to show the detail; and it showed up. Again, still no restart.
• Hit back, still maintained the prior code state.

The entire time I recorded this GIF, I never had to restart the app ONCE. The counter btw, was still 19 in the debugger, so even though I totally replaced the main screen with a whole new main screen, the existing state was always maintained.

Now, there are things you can do in Flutter to cause it to have to restart the app; I've seen it in their code base (assuming it is still valid code) But in my limited testing; I _never_ got it to recommend or do an app to restart. That included completely rewriting the main screen, adding a new second screen, attaching to firebase, revamping the images layout, adding errors, and doing all sorts of other things (that I didn't record) as I was playing with the app and it was using hot reload.

---

This is the bar NativeScript needs to be shooting for; our current delay; build; reload is crazy crazy slow compared to this. And in the event you change a .css/.xml file; the side effects when it reloads the .xml file are quite likely to crash your app on the next click. ;-(

So :+1: on this request!

[NickIliev]

_From @cloudcover on February 21, 2018 0:35_

+1

[montella1507]

+1

[zuohuadong]

+1

[MickaelNeves]

+1

[DrSensor]

Hope the +1 thing does not become like http://bit.ly/silly-plus-1

Based on https://waffle.io/NativeScript/nativescript-cli, seems this feature not being planned right now.
If anyone has an idea/concept/insight how to implement this, feel free to comment below 🙂.
Remember that this issue is being subscribed by other Github users.

[montella1507]

Well.. i just hope Nativescript developers would see importance of having hot module replacement in Nativescript. Because todays... effectivity of development is main part in the decision-making process of selecting technologies.

I really fall in love with Nativescript, however it is breaking my heart anyone would select other framework only - and only because NS is lack of HMR.

[AdamSGit]

Was seriously looking into Nativescript with VueJS to start a new project. Thing is, not having HR made me immediately abandon the idea... When you want your interface to be perfect, and spend a lot of time to polish it, it indeed adds like 4 time the time you would spend to do so in continually building your app. This is just a big no-go for me.

[radeva]

Hi @AdamSGit @montella1507 @DrSensor ,

I would like to assure you that the team is considering HMR a must-have feature for the framework and is working hard to deliver it. We're still exploring the best options for the implementation.

In the meantime, recently we improved the LiveSync for Android and it is now much faster and reliable. I would recommend to give it a try till the HMR becomes available.

[montella1507]

@radeva will do. I am happy you see the importance of HMR, thank you very much.

HMR works like a charm in WebApp in combination with NGRX/Store to prevent state . I use NGRX/Store in nativescript applications too and i am sure i am not alone.

[AdamSGit]

The LiveSync seems promising, I wasn't aware of this feature. I'll look into it.

Also, thanks to consider HR and working on it, let us know the progression.

[sis0k0]

Closing in favor of https://github.com/NativeScript/NativeScript/issues/6398.