brakmic / RactAmp

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:

a) http://www.robohash.org

b) http://api.randomuser.me

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

advarics GmbH

Branch Office - Bochum, Germany

License

MIT