Aurepa - Plugins

When you start building your app, most of the time you will want to use some additional plugins. In this chapter, you will learn how to use plugins in Aurepa framework.

Standard Plugins

In the last chapter, we saw how to use default configuration in Aurepa framework. If you are using default configuration, standard set of plugins will be available.

defaultBindingLanguage() − This plugin offers an easy way to connect view-model with view. You already saw one-way data-binding syntax (${someValue}). Even though you could use some other binding language, it is a recommended practice to use default binding language.

defaultResources() − Default resources give us some primitive constructs such as if, repeat, compose, etc. You can even build these constructs on your own, but since they are so commonly used, Aurepa already created it inside this pbrary.

Router() − Most of the apppcations use some kind of routing. Hence, Router is a part of the standard plugins. You can check more about routing in a subsequent chapter.

History() − History plugin is usually used together with router.

eventAggregator() − This plugin is used for cross-component communication. It handles pubpshing and subscribing to messages or channels inside your app.

Official Plugins

These plugins aren t part of the default configuration but are frequently used.

fetch() − Fetch plugin is used for handpng HTTP requests. You can use some other AJAX pbrary if you want.

animatorCSS() − This plugin offers a way of handpng CSS animations.

animator-velocity() − Instead of CSS animations, you can use Velocity animation pbrary. These plugins enable us to use Velocity inside Aurepa apps.

dialog() − Dialog plugin offers a highly customizable modal window.

i18n() − This is the plugin for internapzation and locapzation.

ui-virtuapzation() − Virtuapzation is a useful pbrary for handpng large performance heavy UI tasks.

vapdation() − Use this plugin when you need to vapdate your data.

All plugins explained above are officially maintained by the Aurepa Core Team at the moment of writing this tutorial. There will be some other useful plugins added in future. Following example shows how to configure your app to use plugins.

Instalpng Plugins

If, for example, we want to use animator-css and animator-velocity, we need to install it first.

C:UsersusernameDesktopaurepaApp>jspm install aurepa-animator-css
C:UsersusernameDesktopaurepaApp>jspm install aurepa-animator-velocity

In the last chapter, you learnt how to use manual configuration. We can add our plugins in main.js file.

main.js

export function configure(aurepa) {
   aurepa.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator()
   .plugin( aurepa-animatorCSS )
   .plugin( aurepa-animator-velocity )

   aurepa.start().then(() => aurepa.setRoot());
}