New WebUI Framework

[luc-github]

I got feedback from aganov:

@luc-github Do you have any plans for the web ui. My proposal is to use webpack for the build process and then we can use https://github.com/developit/preact (3kb) or https://github.com/choojs/choo (4kb) to organise the UI into components and bring some reactivity. Also we can replace glyph icons with some svg based icons like https://feathericons.com/ for example... What do you think?

here my answer:

Not yet, I was planning to reuse the existing javascript I have wrote for 3.X as I do not want online dependency in case printer is not connected to internet - but I am open to new solutions
I never used these projects do you ?
about glyph currently I use svg extracted from bootstrap, but I am also Ok to change - and there was a request to be able to add new ones so I am fine as soon the size is kept small

To sum up I open to everything but I am not sure I can study all solutions by my own, especially because I do not know them so any proposal is welcome

Because it is a good discussion - lets discuss

[aganov]

I'll try to setup example prototype with preact (or something else) and webpack when I have some spare time. I'll check the bundle size and give you the feedback.

[luc-github]

thank you, I have watched quickly one preact tutorial and it is a complete new world for me...
Even just setup is still not clear - so sample app would be great

[luc-github]

May be embedded page could be a good start for a prototype - it is not complex and could give a size reference also

[aganov]

I've created base app with preact + storeon, feather icons and bootstrap@4

The size of bundled index.html (html + css + js) is 183KB uncompressed and 30K after gzip. You can find the repo here: https://github.com/aganov/esp3d-ui

just run npm install and then npm run start. It will start the webpack-dev-server and open the application.

Build can be done with npm run build. We can introduce some env variables during build process for example LOCALE=de to build a language specific bundles.

I've disabled some of the bootstrap components => https://github.com/aganov/esp3d-ui/blob/master/src/stylesheets/_bootstrap.scss We can bring them back by uncommenting in the scss file.

-> % tree
.
├── components
│   ├── app.js
│   ├── head-movement.js
│   ├── machine-status.js
│   ├── nav-bar.js
│   └── temperatures.js
├── index.html
├── index.js
├── libraries
│   └── hooks.js
├── store
│   ├── index.js
│   ├── positions.js
│   └── temperatures.js
└── stylesheets
    ├── _bootstrap.scss
    └── application.scss

This is the SPA project structure. I'm using React with hooks => https://reactjs.org/docs/hooks-intro.html. Preact is just lightweight 3.4kB implementation of React.js. We will need some global state so I choose to use storeon. It is very lightweight 330B gzipped.

Here is screenshot from the "app"

I've added some random generated properties to illustrate dom rerendering...

  // This should be polled from websocket for example
  useInterval(() => {
    const positions = ["X", "Y", "Z"]
    const tempKeys = ["T1", "B"]

    store.dispatch("positions/update" + positions[Math.floor(Math.random() * positions.length)], Math.floor(Math.random() * 225))
    tempKeys.forEach(key => store.dispatch("temperatures/update", { key, value: Math.floor(Math.random() * 215) }))
  }, 1000)

Btw, if you find React.js a big bite for you, we can use Vue.js + vuex It has short and sweet learning curve but the bundle size will increase a lot (Vuejs is 22.8kB gzipped alone)

[luc-github]

Wow that was fast 🐱 - I need to read all that and digest it
I do not think it is a big bite but I start from 0 - full newbee here so long way to go and no idea how to start - thanks to your prototype I should have a reference to start.

ok going to bootstrap@4 is good.
What is storeon, used for global state, related to a preact : a preact component ? a js library ?

I will test the sample code and read it this afternoon and report - I may have a tons of questions - sorry in advance 😸

[aganov]

storeon is "state manager" so instead of using local scoped useState hook we are using some "global" state. You can read some information about Redux or Vuex. This will give you basic idea of "State Management Pattern"

[aganov]

Btw: Some links to start:

• https://jasonformat.com/wtf-is-jsx/
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

[luc-github]

Thank you - I have started reading several tutorials about Preact, including https://github.com/developit/preact - fall asleep watching last one 😸
I had also to read about VirtualDOM, ES2015 and every word I discover so I need couple of days, I really start from 0 so I need time.

Is Preact very different than React ?- as I found serveral tutorials and books for React
Does it worth I read them to understand the global concept and behavior ?

also @aganov as you seems mastering it, the does the script building can also compress the index.html, I guess yes reading that : https://medium.com/@rajaraodv/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a but did you it already

[aganov]

Almost everything you can find for react will apply to preact. Here you can read about the differences. Keep in mind that after releasing React.js v16.8 (the one with hooks) the whole community is moving from Class to Function components (for good). Actually my example project is using pre-release version of preact in order to use hooks today...

• Functional vs Class-Components in React
  
• https://reactjs.org/docs/hooks-intro.html