Explaining Jails
Jails is a component library that will work in generated html and augment its features. So it will work well on Server Side Rendered, Static Site Generated systems, and very suitable for creating event driven systems and island architecture.
It will mount on a specific dom element, create a snapshot of its html content that can have some directives and will provide you helpers functions to facilitate the use of events, optimistic dom changes and component communication.
There are a showcase to ilustrate some of the features mentioned on this document: https://stackblitz.com/@Javiani/collections/jails-organization
The majority of the sites are just static with some content that needs to change / update when user interact with it. That's why, Jails focus on making the js code separated from the html, because it just need to mount on specific area and use the html with directives in order to do such optimistic updates.
That will unlock possibilities since it doesn't require javascript running on server-side, so you can focus only on client-side problems while choose the language to render html, it can be: Wordpress, Laravel, PHP, Ruby on Rails, .NET Razor, Node, etc.
Jails uses some event patterns to solve communication relationship between components and to track user interaction.
The most basic pattern used internally is Event Delegation in order to track user interaction with html elements inside a component tree.
It will improve performance by attatching dom events only to the component element. That also make possible to change inner html elements without having to reattatch events to the new elements in the component tree.
This way, component can react to every not only to native DOM events, but also custom events emitted by some Javascript third-party libraries.
The most popular way to deal with UI changes is to separate state from UI and use some optimistic algorithm to update the DOM.
Jails does that and makes it optional. You can use state helper function in order to update component html and use a very small set of directives such as: html-for, html-if, html-inner...
Plus, html-* directive can be used to execute javascript expression and replace a default attribute value when state change:
<img src="loading.svg" html-src="data.url" /> <!-- It will replace loading.svg by data.url on state call -->
The html updates using an optimistic algorithm can restrict you to be able to operate with other libraries that needs to update html dynamically.
That's why Jails gives you a easy way to bypass the diff algorithm in some area of your component tree, that makes Jails compatible with any other Vanilla Javascript Libraries out there that also does DOM updates like a Slider, Carousel, Lazyload Image library etc.
It's just a matter of marking a container element with html-staticproperty.
The most important part of any component library is how to make communication between them. There are 2 ways to communicate with component using Jails.
Every state changes on parent will update child components that will receive props from parent by default. In the vast majority of times that will not be a issue on performance.
You can use publish and subscribe helper functions in order to make communications around your entire system using this simple and powerfull pattern.
