RactiveJS + AmpersandJS
This demo shows how to utilize RactiveJS views and components together with AmpersandJS models.
At advarics GmbH we use both of them to develop our internal tools and customer services.
As a performant view layer Ractive lets you decide how and by using which of the available "frameworks" you'll control your backend logic. And as a "non-frameworky framework" AmpersandJS is an ideal choice to utilize only certain parts of a (probably) much bigger machinery to solve discrete problems.
Info on Ractive parts
This demo comprises of three Ractive components
a) Footer
b) Sidebar Menu
c) Main Panel
There's a fourth Ractive element which is not a component but rather a "normal" Ractive. Its tasks are creating html-tables and asynchronous communication with two web-services:
Info on Ampersand parts
The logical structures of the sidebar menu and dynamically generated tables are based on AmpersandJS models. The component template t-menu.ract in scripts/advarics/ui contains the model structure of the sidebar menu. The model definitions are in scripts/models/app-models.js
Tables are defined in t-table-view.html and their logic is located in demo-view.js
Ampersand adaptor for Ractive
To make Ractive capable of using Ampersand models, collections and rest-collections we have to inject a proper Adaptor into it. In this case we need the Ampersand-Adaptor. After having added it to the collection of Ractive-Adapters
Ractive.adaptors.Ampersand = require('ractive-adaptors-ampersand');
...we activate it on the Ractive instance which will use Ampersand objects.
Example
[...]
let instance = new Ractive({
el: el,
template: require('./t-table-view.html'),
adapt: ['Ampersand'],
data: function() {
[...]
Loding Ractive components (*.ract files)
There are different ways to declare, maintain and run Ractive components. It can be done via ractive-load, or webpack's ractive-component-loader, or packed in a separate *.ract-file which contains all of the component's styling, UI definitions and logic.
This demo uses the latter strategy by utilizing an npm-package called node-ractify. This package is a Browserify transformer which gets executed during the gulp build.
Here's the corresponding task from the Gulpfile.js where node-ractify gets activated.
gulp.task('js', function () {
var b = browserify({
entries: './scripts/advarics/app.js',
debug: true,
transform: [
ractify,
browserifyCss,
html,
babelify
]
});
node-ractify expects the component files to have a .ract extension. A .ract-file is basically an HTML-file containing markup (CSS), structure (HTML template) and logic (JS) packed inside a single script Tag. The template parts don't have to be standard HTMLs, so we can happily use Mustaches and Partials to make UIs more dynamic.
Here's an example:
<!-- component's styling -->
<style>
.some-class {
margin-left: 0px;
left: 10px;
top: 100px;
width: 200px;
position: fixed;
}
</style>
<!-- component's UI structure -->
<div class="some-class">
<div class="container">
<div class="row">
<div class="col-md-5">
<ul class="pirate-o-matic">
<!--- we can use Mustaches -->
{{#each pirates}}
<li>{{firstName}} - {{lastName}}</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
<!-- component's logic -->
<script>
//we can require other modules too
var someOtherModule = require('some-other-module');
//this is the same like CommonJS exports
component.exports = {
onrender: function() {
someOtherModule.execute();
console.log('Component rendered!');
},
data: function() {
return {
pirates: [
{ id: 1, firstName: 'Elaine', lastName: 'Marley' },
{ id: 2, firstName: 'LeChuck', lastName: '' },
{ id: 3, firstName: 'Guybrush', lastName: 'Treepwood' },
{ id: 4, firstName: 'Largo', lastName: 'LaGrande' },
]
}
}
}
</script>
How to run the demo
First, install all needed node packages via npm.
npm install
Second, let gulp create the structure.
gulp
And finally, start the local node server.
npm start
Screenshot
Video
Created at
Branch Office - Bochum, Germany
License
MIT