Get the Newsletter

Introducing SpoonX Community Plugins

Posted by AureliaEffect on October 25, 2016

Today, I'm happy to introduce to you another Aurelia community group that's built at least a dozen amazing plugins for our community. Read on to learn more...

SpoonX is a company that has its focus mainly on architecture and infrastructure in a consulting fashion, open source work and supplying commercial support.

Community

SpoonX has a lot of open source projects, and has chosen Aurelia as their framework of choice when it comes to front-end application development. With this in mind, they set out to supply some essential plugins to the community. They're a company with dedicated focus on the community, including a full-time community manager who helps actively maintain the projects.

They've spent almost a year on developing, perfecting, testing and documenting their plugins, which are now stable and available to use.

Essential Plugins

The following plugins are considered the most matured, and essential plugins. They have been used in production for at least 6 months now, are fully documented and have support for all bundling techniques.

aurelia-api

Talking to your API shouldn't be difficult. You shouldn't have to repeat yourself. You shouldn't need nuclear power plants to make it easier. You should just be able to say "give me that thing!" and be done with it.

aurelia-api comes with a set of cool features that makes talking to APIs easy and fun. aurelia-api is a module wrapped around aurelia-fetch-client that allows you to:

  • Perform the usual CRUD
  • Supply criteria for your API
  • Manage more than one endpoint
  • Add defaults
  • Add interceptors
  • More!

Github | Docs

aurelia-orm

Working with endpoints and client-side entities is unavoidable when doing API driven development. You end up writing a small wrapper for your XHRs / websocket events and putting your request methods in one place. Even though your endpoints are important, you still end up neglecting them. Enter aurelia-orm. This module provides you with some useful and cool features, such as:

  • Entity definitions
  • Repositories
  • Associations
  • Simple decorators
  • Validation
  • Type casting
  • Self-populating (multi/single) select element
  • Uses aurelia-api, so those benefits apply here as well
  • More!

This makes it easier to focus on your application and organize your code.

Github | Docs

aurelia-authentication

aurelia-authentication makes local and third-party authentication easy. If your server is setup right, it can be as simple selecting your server endpoint from your aurelia-api setup and adding your third-party client id. Then you are ready to go. Basically, aurelia-authentication does not use any cookies but relies on a JWT (json web token; other token formats have basic support) stored in the local storage of the browser.

Do you have multiple endpoints? No problem! In the recommended setting, aurelia-authentication makes use of aurelia-api which sets up multiple endpoints easily. Just specify in your aurelia-authentication configuration which endpoints you want to use and your access token will be sent along with your requests automatically.

Github | Docs

aurelia-notification

aurelia-notification is a very simple plugin which allows you to display notifications in your application. It translates messages using aurelia-i18n and setting it up is as simple as configuring notification types and setting the style to use.

Github | Docs

Shiny Plugins

These modules are newer, but also already being used in production. Most of them also come with a fair amount of documentation. The community members responsible for the plugins have written a small introduction for each.

swan-example

By @doktordirk and @RWOverdijk .

We needed a place to demo our plugins, and so we created swan-example.

SWAN is a nifty little stack, which stands for Sails Waterline Aurelia and Node. It comes with a cli tool , which isn't much yet, but does help you define a project structure and get started quickly using our opinionated aurelia-skeleton and auth-ready node server. We've used this tool to build the swan-example, which you can see by clicking here .

  • Username: example
  • Password: example

Github

aurelia-view-manager

By @bas080 .

Components often require some HTML. We at SpoonX tend to use bootstrap for styling and templating. But we also want to make it easy for people that might use other CSS frameworks. aurelia-view-manager allows you to easily overwrite the HTML template of components that use aurelia-view-manager's @resolvedView decorator. If you want to make your component CSS framework independent, head over to the usage section.

Github | Docs

aurelia-form

By @bas080 .

aurelia-form makes your life easier by letting you define and generate forms based on data. It does so by using something named a schema.

A schema is a collection of objects that describes the form you want. The schema consists out of basic javascript data types which every programmer understands and knows how to manipulate. A simple example:

    
    this.loginSchema = [{
      type: 'email',
      key : 'email'
    }, {
      type: 'password',
      key : 'password'
    }];
    
    this.credentials = {};
  
  
  

You can then use this schema and the object that holds the data like this:

    
    <schema-form schema.bind="schema" model.bind="credentials"></schema-form>
  
  
  

This plugin is especially useful when combined with aurelia-orm , as it generates the form based on your entity schema using the custom component <entity-form />.

Github | Docs

aurelia-pager

By @VMBindraban .

aurelia-pager is a component that handles pagination for your application.

Besides the basic functionality of a paginator like setting the amount of items for each page, it also supports:

  • Data from an array
  • Data from a resource (using aurelia-orm )
  • Criteria (using a resource with sailsjs/waterline or express)
  • Page range, for example 3 4 [5] 6 7
  • Your own custom template (defaults to bootstrap)

Github

aurelia-filter

By @VMBindraban .

aurelia-filter is a basic GUI criteria selector, it generates a search/filter criteria object. You can easily generate criteria based on AND or OR conditional blocks. Based on the field you have selected, it can transform the input field into the proper type, for example a number or date. It supports all the sailsJS/waterline operators. There is also support for entities (using aurelia-orm ).

Github

aurelia-datatable

By @jeremyvergnas .

aurelia-datatable is probably one the most common components you can find within interactive applications. It allows you to have an overview of your data and manipulate them, in a user-friendly manner.

aurelia-datatable has been made to provide you an easy and powerful way to implement datatables in your Aurelia application(s). In combination with aurelia-orm, aurelia-view-manager and aurelia-pager, you will get, out of the box, a datatable component ready to use, with the following features:

  • Custom columns (with aliases and value converter)
  • Sorting
  • Searching
  • Pagination
  • Custom criteria
  • Optional edit/remove actions on your rows
  • Custom actions on your rows
  • Custom footer on your datatable

Github | Docs

aurelia-config

By @doktordirk .

With the increasing number of plugins, plugin initialization and configuration has become somewhat tedious. Currently, one might have something like this, a long list of plugins and their configs:

    
    aurelia.use
        .plugin('aurelia-api', aureliaApiConfig)
        .plugin('aurelia-authentication', aureliaAuthenticationConfig)
        .plugin('aurelia-notification', aureliaNotificationConfig)
    //      ...
  
  
  

Using aurelia-config, that becomes easier and more organized. We have just a single namespaced config object with all the configuration options and aurelia-config does all those plugin calls for us with the appropriate namespace section. Here's a simple example:

    
    // Example config
    let appConfigOverwrites = {
      'aurelia-api': {
        endpoints: [
          {name: 'api', url: 'http://127.0.0.1:1337/'}
        ]
      },
      'aurelia-authentication': {
        endpoint: 'api'
      }
      'aurelia-notification': {
        baseClass: 'custom-notifications'
      }
    };
    
    // Configure function
    export function configure(aurelia) {
      aurelia.use
        .standardConfiguration()
        .plugin('aurelia-config', [
          'aurelia-api',
          'aurelia-authentication',
          'aurelia-notification',
        ], appConfigOverwrites);
    }
  
  
  

That's the main feature of aurelia-config, but there's more to it.

  • Initialize and configure you plugins in one place with a single namespaced configuration object.
  • Automatically load and merge defaults which can be directly loaded from plugins by aurelia-config itself.
  • Access the merged config by using our resolver or injecting aurelia-config everywhere.
  • Since the merged settings are an instance of homefront, all it's method are available, too.

Homefront

By @Rawphs .

Homefront is a module that allows you to merge, flatten, expand, search in, fetch from, remove from, put in and work with objects easily. It was started as an educational project but has made its way into wetland, aurelia-config and json-statham . It is fully tested, and makes working with objects a lot more fun.

Github

aurelia-charts

By @bas080 .

aurelia-charts is a plugin that allows you to use the chart library you like most. It has a simple API and standardizes the way charts are used in your projects. It does so by letting others define sane defaults.

It allows for you to write your own plugins, or use an existing one (for example aurelia-charts-c3 ).

This project is being used by us, but isn't labeled "stable" yet, as is visible by the lack of documentation.

Github

Bonus: Wetland

By @RWOverdijk .

For the past two months we've been working on a brand new nodeJS orm. For now it lacks documentation, but has neat features. It's based on the JPA spec (which took some reading ) and took inspiration from the way doctrine implemented it. It obviously required some changes to fit the node.js world, but those were kept to a minimum.

A glossary of its features to date:

  • Abstracted principles (repositories, entities, hydrators)
  • Unit of work using proxies
  • Nested joins
  • Nested persist
  • Mapping
  • Transactions
  • Migrations
  • Great performance (smart hydrator and state management)
  • Strict typing (written in typescript)

Feel free to browse the code , and if you're interested leave a star so you can track the progress.

Github

Conclusion

We're very happy with the work we've done. The plugins are stable and the documentation has proven to be very helpful.

  • If you have questions, suggestions, wish to contribute, add a plugin to the stack or if you have a need for banter, feel free to join us on gitter .
  • If you like our work, help us out and star our repositories.