A new web front-end design Feb 2016
JET is going to need a web interface. In fact, it’s likely that a major part of the total development effort will end up being poured into this “front-end” aspect of the system.
We do, however want a very capable development context, able to create an UI which is deeply responsive (”reactive”, even), and can keep everything on the screen up to date, in real-time.
Here is the set of tools selected for upcoming front-end development in JET:
- WebPack - transparently builds and re-builds code during development
- Hot Reload - an incredible way to literally edit a running app without losing context
- ImmutableJS - a new trend in ReactJS, coming from Clojure and other FP languages
- PureCSS (probably) as a simple and clean grid-based CSS styling framework
This front end will be called JET/Web and has been based on the
template on GitHub. It has all the main pieces in place for a truly fluid mode
of development. A very preliminary setup can be found in the “
inside the JET repository - but note that the
current code still has sample content from the template project.
If you’re new to any of the tools mentioned above - you may well find that there’s an immense amount of functionality to learn and get familiar with. This is completely unlike programming with a server-side templating approach, such as PHP, Ruby on Rails, or Django. Then again, each and every one of these tools is incredibly powerful - and it’s guaranteed to be fun!
That’s the consequence of today’s breakneck speed and progress w.r.t. web development. But these choices have not been made lightly. Some considerations involved in these choices were:
- a low-end (even under-powered, perhaps) server, which can’t handle a lot of processing
- the desire to have everything on a web page updated in real-time, without page refreshes
- the hub’s web server can’t be restarted, at least not for work on the web client software
In its current state, JET/Web is next to useless. It doesn’t even connect to the MQTT server yet, so there’s no dynamic behaviour other than inside the browser itself (see for yourself, the demo is quite interesting, especially when you start to look into how it’s all set up in the source code).
One final note about these “decisions”: obviously, you have to pick some set of software tools to be able to implement anything meaningful. But with JET, “big” decisions like these are actually quite inconsequential, because many different front ends can easily co-exist: anyone can add another JetPack, and implement a completely different (web or native) front end!