Fore elements explained — Part 1 — <fx-fore>
An introduction to declaratively build webapps with Fore.
If you have never come across Fore before you should have a look at my other articles for background.
This is the first article of a series explaining the main elements of Fore covering each in detail and presenting them in the order of their importance.
I’m not going into the details of the architecture or the setup but present snippets of markup that will point out the features and their potential uses and hopefully assemble into a bigger picture along the way.
To play with Fore you just need a download from github or npm and a text-editor. Links are presented at the end of this article.
Fore Components
As this is the first part i cannot completely hold my promise to not bother you with background and shortly explain their nature.
Fore elements are vanilla Web Components that come as a JavaScript bundle and act together to fulfill a certain task in the browser. They share the prefix `<fx-`.
The <fx-fore> element
Everything starts with a <fx-fore>element.
<fx-fore>
...
</fx-fore>This will create a scope similar to an HTML <form> element. It establishes a logical scope for the enclosed markup. Unlike the <form> element <fx-fore> elements can be nested.
The above example won’t do anything unless it’s given some content or a src attribute.
...
<body>
...
<fx-fore src="my-fore-page.html" class="fancy-style"></fx-fore>
...
</body>The src attribute points to a HTML page containing a <fx-fore> element and acts just like a <img src="">. It will issue a get request to resolve the HTML content, lookup the <fx-fore> element within that page and replace the original element in the DOM with the imported one.
The resulting DOM will look like this:
...
<body>
...
<fx-fore from-src="my-fore-page.html" class="fancy-style">
... content of imported fore element ...
</fx-fore>
...
</body>Though the importing element is replacing the original <fx-fore> element the attributes are preserved and will be accessible within the imported fore element via fore-attr() function.
Let this be the importer:
...
<body>
...
<fx-fore src="import.html" greeting="welcome"></fx-fore>
...
</body>Let’s assume this to be the imported fore element:
<fx-fore>
<div class="imported">
Look, i got a greeting: {fore-attr('greeting')}
</div>
</fx-fore>Will give us:
<html>
<head>
...
<style>
.welcome{
color:blue;
}
</style>
</head>
...
<body>
...
<fx-fore from-src="my-fore-page.html" greeting="welcome">
<div class="imported {fore-attr('greeting')}">
Look, i'm styled by my parent and i'm blue
</div>
</fx-fore>
...
</body>Template Expressions
Despite the plan of working along the elements i need to make a short excursion to Template Expressions as they will be used all over the place within a ‘Fore Scope’.
You probably noticed the curly brackets in the above example. These are Template Expressions that will get refreshed automatically whenever necessary.
But this leads me directly to my next ‘off-topic’.
XPath ?
Fore uses XPath 3.1 as its expression language. That may feel like an odd decision but has some good reasons:
- XPath 3.1 is a well-established W3C standard
- It is much more powerful than the CSS Selector Syntax
- It comes with a huge library of built-in functions
- It’s quite easy to learn for the simple cases but can handle very complex ones
- It’s extensible. In Fore you can define your own custom functions and use them in expressions.
- There’s a decent implementation running in the browser which btw is the only real runtime dependency of Fore
What’s the content ?
The <fx-fore> element can contain all native HTML elements that are allowed in a HTML body, other fx elements and web-components.
The content is NOT in shadowDOM and therefore globally styleable with CSS as usual.
Page exit confirmation
After this excursion i nearly forgot about the last feature:
...
<body>
...
<fx-fore show-confirmation>
... content of imported fore element ...
</fx-fore>
...
</body>Often you have the need to show a confirmation before the user leaves the page. With show-confirmation the users will get the browsers’ page exit confirmation if data have been modified since page load.
But show-confirmation can also get a boolean expression that tests on a custom condition:
...
<body>
...
<fx-fore show-confirmation="count(basked/item) != 0">
... content of imported fore element ...
</fx-fore>
...
</body>count is one of those built-in XPath functions and will tell us if the user left some items in the basket.
Responsibilities of a <fx-fore> element
From a software design perspective i’ve getting used to think about it in terms of ‘responsibilities of a component’.
Ok, here they are for the <fx-fore> element:
- kick-start the lifecycle of Fore
- handle efficient refreshing of the UI
- provide some general functions for different types of messages
- error-handling for its scope
- dispatch some lifecycle events
This is (not) the end
This concludes the first part about Fore elements and doesn’t look like much yet, right? So i’m thankful you made it here and promise it’ll get much more interesting. Next part will be about fx-model which is the very heart of Fore.