Solvednativescript cli Feature Request: Hot Reload

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?

Flutter Hot Reload

React Native Hot Reload

Copied from original issue: NativeScript/NativeScript#5447

13 Answers

βœ”οΈAccepted Answer

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. πŸ˜€

  • 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 πŸ‘ on this request!

Other Answers:

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.

More Issues: