Fore —user interfaces in pure HTML
‘Fore’ is an alternative way of building user interfaces without the need for Javascript.
But why should you want that? Aren’t there are dozens of elaborated frameworks out there that cover all needs? Certainly yes — if you can afford them.
The web development hurdle
Entering web development nowadays has become a tough game. An overwhelming variety of JavaScript and CSS frameworks are screaming at us promising to solve all of our problems.
This is where the trouble starts and you are faced with the question of which one is ‘the best’? The answer very much depends on where you’re starting — your level of expertise, your willingness to ‘invest’ and of course the budget.
But provided that you found your way through the decision process and answered all the questions…
- does it fit my needs?
- is it well documented?
- do i find help when running intro trouble?
- will it have ‘a future’?
- does it have the ‘buzz factor’?
- … and so forth.
Are you happy now? Maybe — for a moment — until you realize that you have invited some unpleasant guests to your table: you’re faced with learning about build tools, dependency management, framework abstractions and test practices, automations, linting and so forth.
It might well take years to develop a level of wizardry in all these areas and keep up with ongoing changes of your chosen framework and being productive.
If you have — congratulations and the following is probably not for you.
If not, or you are constantly struggling with that decision you might read on and see how to break free from dependency management, build tools and the requirement for deep JavaScript skills.
There is a huge area of information management in academic, scientific, medical or humanitarian organisations where there’s no web development department around. Nor there are big budgets to buy a team but still there is a need for dynamic, data-driven user interfaces that can be setup with a minimum of time and effort.
HTML to the rescue
While getting into web development with JavaScript can be an obstacle about everyone is able to write some HTML. No special preparations, no npm whatever or other steps to do. Just open an editor and off it goes.
For the very simple cases a pure HTML form might do the trick. But often the simple cases refuse to stay simple:
- users will request new features
- you want to handle structured data, not just key/value pairs
- you have to process several data sources
- you want to validate and calculate values
- you need instant feedback on user interactions
- users need to be informed about errors
The list can go on and very quickly exceeds what HTML has to offer out of the box. You are quickly finding yourself to add some JavaScript to fill the gaps and might wonder how quick this amount grows. —bringing us back to where we started.
Web Components are just HTML
Web Components are not new, are part of the HTML platform and have found their way into all modern browsers. This article is not about explaining what they exactly are and how they work. There are enough articles on that already.
For the purpose of this writing it’s sufficient to say that they allow us to extend the core browser platform and add the functionality we need.
So how does that solve our problem?
Web Components are of course implemented in JavaScript themselves but are hiding away their functionality behind a neat HTML tag usually spiced up with some attributes for configuration. Users do not need to know about the inner workings but just a good reference on how to configure them.
Pure declarative user interfaces
Fore is a set of Web Components with an MVC architecture that allow to write fully dynamic user interfaces in plain HTML. It tries to cover the whole spectrum from the simplest to the complex use cases and allows your application to evolve.
Even if you don’t know what an MVC is or haven’t touched JavaScript ever you can quickly implement quite complex applications.
Time for an (extremely simple) example just to get the taste of it:
<fx-fore>
<fx-control ref=”greeting”>
<label>Hello</label>
<fx-message event=”value-changed”>Hello {.}</fx-message
</fx-control>
</fx-fore>All Fore elements are prefixed with ‘fx-’ which formally makes them Web Components being loaded by the browser. Most prominent is <fx-fore> that establishes a scope just like a HTML <form> does.
Next we have a <fx-control> that references (the ‘ref’ attribute) some data node called ‘greeting’. This node is created and bound to the control. The <fx-control> represents the view part of our MVC in this little example.
When the user changes the control a ‘value-changed’ event is emitted by the control that triggers the `<fx-message>` action (the controller in the MVC) which will display a toast message by default. Fore comes with a set of actions to mutate nodes, insert, replace or delete nodes, trigger submissions, open dialogs etc.
This is what you’ll see after typing ‘Paula’.
Besides the message this would be equivalent to write this in core HTML:
<form>
<input name="greeting">
</form>So what’s the catch? There must be more going on.
When Fore initializes and does not find an explicit <fx-model> element it will create one along with a default `<fx-instance>` element which is the home of your data. What you are actually getting is this:
<fx-fore>
<fx-model>
<fx-instance id="default">
<data>
<greeting></greeting>
</data>
</fx-instance>
</fx-model>
<fx-control ref="greeting">
<label>Hello</label>
<input class="widget" type="text">
<fx-message event="value-changed">Hello {.}</fx-message
</fx-control>
</fx-fore>Except for the simplest use cases you will want to iron out your model explicitly and get access to features like:
- multiple data instances (`<fx-instance>`) of different types like XML, HTML or JSON
- applying constraints like ‘readonly’, ‘required’, ‘constraint’ and ‘relevant’ to data nodes
- handling dependencies between data nodes
- full-stack submission module with chaining capability, response handling
- + many more
What happend to <fx-control> ?
If you watched closely you might have noticed that beyond the model an <input> has been created.
To explain what’s behind i need to mention another corner-stone of the Fore architecture: Fore does not provide a set of ready-made components as many frameworks do. These can often be nice and elaborated but require a lot of effort to build and maintain. Futhermore even with the best ones you run into situations where this single feature you are desiring is not available or easy to have. Also — committing to one set is a serious decision and especially if you only need ‘this and that’ you likely end up with a lot of dependencies.
Instead Fore just wraps controls and calls them ‘widgets’ in its context. This gives you the freedom to use whatever native or third-party control is suitable for your context.
Of course the most common approach is to use a simple native <input type='text'>` which is the default and therefore auto-created for you if no explicit widget is given.
If you need something different you add it as a child and mark it with class='widget'`
<fx-control ref="date">
<label>a date</label>
<input class="widget" type="date">
</fx-control>or
<fx-control ref="date">
<label>a date</label>
<my-component param="foo" class="widget"></my-component>
</fx-control><fx-control>` binds a widget to a node in your data and applies the current state of the model to it. Likewise changes to the widget will be applied to the model and reflected in instance data.
Downsides
Not requiring deep web development knowledge does not mean everybody can use it. A certain level of expertise in HTML and CSS and even in some basics of JavaScript (like how events work) will be needed. If you want to get all out of it some XPath 3 does no harm as it allows complex binding expressions which can be used about everywhere in Fore.
Besides learning the vocabulary you have to learn a new way of thinking about your user interfaces and the solutions to some problems may not be obvious at first. The many demo files in Fore try to address this issue.
Yes, Fore of course is a dependency you have to adopt. So where is it better than using a framework here? Fore builds on the core browser platform and uses no library except fontoXPath (a great XPath 3.1 implementation) which in turn adds one other dependency.
Summary
This article just scratches the very surface of Fore but i don’t want to bore down people with a longish feature list or history but introduce an alternative way of building user interfaces without digging deep into web development.
Must it be mentioned? Fore is Open Source and available from github.
I leave it to the curious reader to explore the many demos being available via the homepage which exceed by far what can be shown in the scope of one article.
Fore is a relatively young project and could use helping hands in any way. If you like the approach leave a star on github. Questions, comments or suggestions are also welcome on our discussion board.