Jails is a javascript micro-framework for building simple applications and large scale applications without a huge stack dependencies.
Good projects should rely on good architectures, and Jails aim to solve architecture and organization problems.
It's event driven and follows the DOM event pattern, lowering the learning curve and trying to be predictable.
Check out more information about Jails
Let's get a message from a <form />
and send it a list <ul />
.
You just have to create a name for component and set it on markup.
<form class="form" data-component="form-message">
<input type="text" name="message" class="message" />
</form>
Now we have to match that markup with the javascript Function
mixin.
jails.component('form-message', function( form, annotation ){
this.init = ()=>{
this.on('submit', send)
}
let send = (e)=>{
var msg = form.querySelector('.message')
self.emit('post', { message :msg.value })
form.reset()
e.preventDefault()
}
})
We need a component to handle the messages adding actions:
jails.component('list-messages', function( list, annotation ){
this.init = ()=>{}
this.add = ( message ) =>{
list.innerHTML += `<li>${message}</li>`
}
})
Public methods can be executed using events by other wrappers structures, like controllers.
Components knows nothing about other components, so we need a controller to make that relationship with form-message
and list-messages
.
Controllers deal with Business logic and Components relationships. The controller below listen
to a bubling dom event emmited
by form-message
component, gets a reference of the list and fire up the add
public method using event emitting.
jails.controller('box-message', function(section, data){
let list
this.init = ()=>{
list = this.x('.list')
this.listen('form-message:post', onPost)
}
let onPost = (e, option) =>{
list('add', option.message )
this.publish('message:added', option.message)
}
})
After that, controller publishes
a message globally, to any other controllers/apps in the page. In this case, the app
subscribe to that global publish event and logs it:
jails.app('home', function(body, data){
this.init = ()=>{
console.log('App home loaded', body)
this.subscribe('message:added', logMessage)
}
let logMessage = (e, message)=>{
console.log('Message added => ', message)
}
})
jails.start()
- Very small learning curve, only 6/7 methods to learn.
- Jails is short, minimalistic, and it weights almost nothing.
- Works pretty well with small projects and also with large scale applications.
- Doesn't depend on jQuery, events are native with
Event Delegation
support :
jails.component('my-component', function( ulElement, annotation ){
this.init = ()=>{
this.on('click', '.my-link', onClick)
}
let onClick = (e)=>{
alert( 'Hey You click meeee' )
e.preventDefault()
}
})
-
Community dependent, Jails grows with community, you don't have to wait for a new Jails version to get a fresh and new
view
module, you can implement your owncomponent
and share it. -
Simplicity, it'll work very well with other libraries or micro-libraries.
-
You don't have write html sintax on your js file, keep your js logic away from html markup.
And many others advantages...
In the example above we made everything from scratch, but the idea is to write and save your components and reuse them later.
Jails-org
already has some components and modules ready to use.
You can also compose several components in the same markup, if you want to build a modal component which will only deal with DOM modifications to open a dialog and after that updating the content with Virtual DOM
, you can do it just like that:
<div class="modal" data-component="litemodal, riot-view">
<h1>My name is {username}</h1>
</div>
// Importing from Jails-org repository
import 'jails-components/riot-view/riot-view'
import 'jails-components/litemodal/litemodal'
import jails from 'jails'
jails.controller('my-controller', function(){
var modal = this.x('.modal')
this.init = ()=>{
this.on('click', 'a[rel=modal]', openModal)
}
let openModal = ()=>{
modal('update', { username :'Clark Kent' }) // Executes this.update() from riot-view component.
modal('open') // Executes this.open() from litemodal component.
}
})
Your controller should only deal with integration, and business logic. It should delegate DOM issues to components.
There's so much about Jails, please, check out the Documentation and Demos to get the principles and fundamentals.
Jails works really well with Riot.js for Virtual DOM templates, and Redux Pattern.
There's a TodoApp already using Riot.js
+ Jails
+ Redux
.
Jails supports IE9+, but it can support IE8 if you use jQuery
and then add the simple Adapter already available in Jails-org
modules.