Live Reload with the Smart UI SDK

mbarben · 2021-10-21T12:14:02+00:00

There was an error rendering this rich post.

Hi There,

I have noticed that there has been an up-rev in the yeoman and grunt tooling with the new 21.4 SDK which is good 😁 (no more build problems with Node LTS).

However, it would be nice (and I would imagine an improvement to a developer's workflow) to have some form of live reload - that is, you start a dev command like npm run dev and it will run a http server - however when you save a file it will automatically reload the result.

I have created a basic version of this here https://medium.com/driver-lane/smart-ui-beginners-guide-eab9c7c34bd0

I understand that it is a small thing - but any reduction of the friction for new developers can only be a good thing

Regards,

Matthew

Find more posts tagged with

Comments

Hari Prasad Dontu

checked this and is awesome !!! Thanks for your contribution !!!

Ferdinand Prantl

I am happy to see your effort to "teach the old dog new tricks" :-)

I see the idea great for pages focused on one feature, like a control, widget, or model, which work right away after the page is loaded. It also advocates creating smaller development pages, when a new feature should be added or much code changed.

When a little code needs to be changed, developers use a debugging app.html simulating the full /app. Then they usually need a couple of clicks to test the target scenario. The live-reload will not help this use case, because reloading the whole application takes a couple of seconds and the effect of the immediate change on the screen will be gone.

Ferdinand Prantl

There would be an another interesting idea to explore - live module replacement. Instead of reloading the whole page, just the modified file - a RequireJS module - could be pushed to the browser. RequireJS allows undefining a module and then defining it again. This would be a lot faster than reloading the whole page and would improve performance of development pages, which need to load many modules.

The challenge would be how to get replaced not only the single RequireJS module, which was updated, but also all its dependants, because they retain the old module exports in their local variables. And another challenge how to re-render controls, which were already put to DOM.

mbarben

Yep - it is important to understand the use case - this was more of a workflow improvement suggestion for when you are developing components - keeping in mind that the alternative here is to:

Make the Change
Refresh the browser

This is doing nothing more than saving some RSI 😎.

I would imagine that if you are simulating the entire /app you are not doing active development per se as you are either performing e2e testing or attempting to replicate an issue. And should a change the context then you either need to adjust your component to read from a 'live' state and react (which could keep the browser context intact) or refresh the page to load in the code changes.