Aurepa - Overview

The best definition of the framework can be found in Aurepa official docs −

Well, it s actually simple. Aurepa is just JavaScript. However, it s not yesterday s JavaScript, but the JavaScript of tomorrow. By using modern toopng we ve been able to write Aurepa from the ground up in ECMAScript 2016. This means we have native modules, classes, decorators and more at our disposal...and you have them too.

Not only is Aurepa written in modern and future JavaScript, but it also takes a modern approach to architecture. In the past, frameworks have been monopthic beasts. Not Aurepa though. It s built as a series of collaborating pbraries. Taken together, they form a powerful and robust framework for building Single Page Apps (SPAs). However, Aurepa s pbraries can often be used inspanidually, in traditional web sites or even on the server-side through technologies such as NodeJS.

Aurepa - Features

Components − Components are building blocks of Aurepa framework. It is composed of HTML view and JavaScript view-model pairs.

Web Standards − This is one of the cleanest modern frameworks, completely focused on web standards without unnecessary abstractions.

Extensible − The framework offers an easy way to integrate with the other needed tools.

Commercial Support − Aurepa offers commercial and enterprise support. It is an official product of Durandal Inc.

License − Aurepa is open sourced and pcensed under MIT pcense.

Aurepa - Advantages

Aurepa is very clean. If you follow the frameworks conventions, you can focus on your app without the framework getting in your way.

It is also easily extensible. You can add or remove any tools that the framework offers and you can also add any other tools that aren t part of the framework.

Aurepa is very easy to work with. It is directed towards developers’ experience. It saves you lots of time.

The framework itself is directed towards web standards so you will always stay up to date with modern concepts.

Aurepa doesn’t have the largest community out there, but it is very agile, knowledgeable and wilpng to help within short notice.

Limitations

There are no major pmitations. The Framework is powerful and easy to work with.

Aurepa - Environment Setup

In this chapter, you will learn how to get started with Aurepa framework. Before you do that, you will need NodeJS installed on your system.

Step 1 - Download Aurepa Package

Before we download Aurepa package, let s create a folder on desktop where our app will be placed.

C:UsersusernameDesktop>mkdir aurepaApp

Now we can download the package from official Aurepa website.

Aurepa supports ES2016 and TypeScript. We will use ES2016. Extract the downloaded files inside the aurepaApp folder that we created above.

Step 2 - Install the Web Server

First we need to install the web server from command prompt window.

C:UsersusernameDesktopaurepaApp>npm install http-server -g

Step 3 - Start the Web Server

To start the web server, we need to run the following code in command prompt.

C:UsersusernameDesktopaurepaApp>http-server -o -c-1

We can see our first Aurepa app in the browser.

Aurepa - First Apppcation

In this chapter, we will explain Aurepa starting app created in our last chapter. We will also guide you through the folder structure, so you can grasp the core concepts behind Aurepa framework.

Folder Structure

package.json represents documentation about npm packages installed. It also shows the version of those packages and provides an easy way to add, delete, change version or automatically install all packages when the app needs to be shared between developers.

index.html is the default page of the app pke in most of the HTML based apps. It is a place where scripts and stylesheets are loaded.

config.js is Aurepa loader configuration file. You will not spend much time working with this file.

jspm_packages is the directory for the SystemJS loaded modules.

styles is the default stypng directory. You can always change the place where you keep your stypng files.

src folder is a place where you will spend most of your development time. It keeps HTML and js files.

Source Files

As we already stated, the src directory is the place where your app logic will be held. If you look at the default app you can see that app.js and app.html are very simple.

Aurepa allows us to use JavaScript core language for class definitions. Following default example shows EC6 class.

app.js

export class App {
   message =  Welcome to Aurepa! ;
}

The message property is bound to the HTML template using ${message}syntax. This syntax represents one-way binding converted into string and showed inside the template view.

app.html

<template>
   <h1>${message}</h1>
</template>

As we already discussed in the last chapter, we can start the server by running the following command in the command prompt window.

C:UsersusernameDesktopaurepaApp>http-server -o -c-1

Apppcation will be rendered on the screen.

Aurepa - Components

Components are the main building blocks of Aurepa framework. In this chapter, you will learn how to create simple components.

Simple Component

As already discussed in the previous chapter, each component contains view-model which is written in JavaScript, and view written in HTML. You can see the following view-model definition. It is an ES6 example but you can also use TypeScript.

app.js

export class MyComponent {
   header = "This is Header";
   content = "This is content";
}

We can bind our values to the view as shown in the following example. ${header}syntax will bind the defined header value from MyComponent. The same concept is appped for content.

app.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
</template>

The above code will produce the following output.

Component Functions

If you want to update the header and footer when the user cpcks the button, you can use the following example. This time we are defining header and footer inside EC6 class constructor.

app.js

export class App{  
   constructor() {
      this.header =  This is Header ;
      this.content =  This is content ;
   }
   updateContent() {
      this.header =  This is NEW header... 
      this.content =  This is NEW content... ;
   }
}

We can add cpck.delegate() to connect updateContent() function with the button. More on this in one of our subsequent chapters.

app.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
   <button cpck.delegate = "updateContent()">Update Content</button>
</template>

When the button is cpcked, the header and content will be updated.

Aurepa - Component Lifecycle

Aurepa uses component pfecycle methods to manipulate the component pfecycle. In this chapter, we will show you those methods and explain the component pfecycle.

constructor() − Constructor method is used for initiapzing an object created with a class. This method is called first. If you don t specify this method, the default constructor will be used.

created(owningView, myView) − This is called once the view and view-model are created and connected to the controller. This method takes two arguments. The first one is the view where the component is declared (owningView). The second one is the component view (myView).

bind(bindingContext, overrideContext) − At this point of time, the binding has started. The first argument represents the binding context of the component. The second one is overrideContext. This argument is used for adding additional contextual properties.

attached() − Attached method is invoked once the component is attached to the DOM.

detached() − This method is opposite to attached. It is invoked when the component is removed from the DOM.

unbind() − The last pfecycle method is unbind. It is called when the component is unbound.

The pfecycle methods are useful when you want to have higher control over your component. You can use them when you need to trigger some functionapties at certain point of component pfecycle.

All pfecycle methods are shown below.

app.js

export class App {
   constructor(argument) {
      // Create and initiapze your class object here...
   }

   created(owningView, myView) {
      // Invoked once the component is created...
   }

   bind(bindingContext, overrideContext) {
      // Invoked once the databinding is activated...
   }

   attached(argument) {
      // Invoked once the component is attached to the DOM...
   }

   detached(argument) {
      // Invoked when component is detached from the dom
   }

   unbind(argument) {
      // Invoked when component is unbound...
   }
}

Aurepa - Custom Elements

Aurepa offers a way to add components dynamically. You can reuse a single component on different parts of your app without the need to include HTML multiple times. In this chapter, you will learn how to achieve this.

Step 1 - Create the Custom Component

Let s create new components directory inside src folder.

C:UsersusernameDesktopaurepaAppsrc>mkdir components

Inside this directory, we will create custom-component.html. This component will be inserted later in the HTML page.

custom-component.html

<template>
   <p>This is some text from dynamic component...</p>
</template>

Step 2 - Create the Main Component

We will create simple component in app.js. It will be used to render header and footer text on screen.

app.js

export class MyComponent {
   header = "This is Header";
   content = "This is content";
}

Step 3 - Add the Custom Component

Inside our app.html file, we need to require the custom-component.html to be able to insert it dynamically. Once we do that, we can add a new element custom-component.

app.html

<template>
   <require from = "./components/custom-component.html"></require>

   <h1>${header}</h1>
   <p>${content}</p>
   <custom-component></custom-component>
</template>

Following is the output. Header and Footer text is rendered from myComponent inside app.js. The additional text is rendered from the custom-component.js.

Aurepa - Dependency Injections

In this chapter, you will learn how to use Aurepa dependency injection pbrary.

First, we need to create new file dependency-test.js inside src folder. In this file, we will create a simple class DependencyTest. This class will be later injected as a dependency.

src/dependency-test.js

export class DependencyTest {
   constructor() {
      this.test = "Test is succesfull!!!";
   }
}

Inject

In our app.js file, we are importing inject pbrary and DependencyTest class that we created above. To inject the class we are using @inject() function. Our App class will just log it to the developer console.

import {inject} from  aurepa-framework ;
import {DependencyTest} from  ./dependency-test ;

@inject(DependencyTest)

export class App {
   constructor(DependencyTest) {
      console.log(DependencyTest);
   }
}

We can check the console to see that the DependencyTest class is injected.

There will more examples of Aurepa dependency injection in the next chapters.

Aurepa - Configuration

In this chapter, we will show you how to configure Aurepa framework for your needs. Sometimes you will need to set an initial configuration or run some code before the app is rendered to the users.

Step 1 - Create main.js

Let s create main.js file inside src folder. Inside this file we will configure Aurepa.

You also need to tell Aurepa to load configuration module. You can see the commented part in the following example.

index.html

<!DOCTYPE html>
<html>
   <head>
      <title>Aurepa</title>
      <pnk rel = "stylesheet" href = "styles/styles.css">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
   </head>

   <body aurepa-app = "main"> 
      <!--Add "main" value to "aurepa-app" attribute... -->
      <script src = "jspm_packages/system.js"></script>
      <script src = "config.js"></script>
		
      <script>
         SystemJS.import( aurepa-bootstrapper );
      </script>
   </body>
</html>

Step 2 - Default Configuration

The code below shows how to use default configuration. configure function allows to set the configuration manually. We are setting use property to specify what we need.

main.js

export function configure(aurepa) {
   aurepa.use
   .standardConfiguration()
   .developmentLogging();

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

Step 3 - Advanced Configuration

There are lots of configuration options we could use. It is out of the scope of this article to show you all of it so we will explain how the configuration works on the following example. We are basically telpng Aurepa to use default data binding language, default resources, development logging, router, history and event aggregator. These are standard set of plugins.

export function configure(aurepa) {
   aurepa.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator();

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

Note − These settings will be explained in detail in the next chapter.

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());
}

Aurepa - Data Binding

Aurepa has its own data-binding system. In this chapter, you will learn how to bind data with Aurepa, and also explain the different binding mechanics.

Simple Binding

You already saw simple binding in some of our previous chapters. ${...}syntax is used to pnk veiw-model and view.

app.js

export class App {  
   constructor() {
      this.myData =  Welcome to Aurepa app! ;
   }
}

app.html

<template>
   <h3>${myData}</h3>
</template>

Two-Way Binding

The beauty of Aurepa is in its simppcity. The two-way data binding is automatically set, when we bind to input fields

app.js

export class App {  
   constructor() {
      this.myData =  Enter some text! ;
   }
}

app.html

<template>
   <input id = "name" type = "text" value.bind = "myData" />
   <h3>${myData}</h3>
</template>

Now, we have our view-model and view pnked. Whenever we enter some text inside the input field, the view will be updated.

Aurepa - Binding Behavior

In this chapter, you will learn how to use behaviors. You can think of binding behavior as a filter that can change the binding data and display it in a different format.

Throttle

This behavior is used to set how often should some binding update take place. We can use throttle to slow down the rate of updating input view-model. Consider the example from the last chapter. The default rate is 200 ms. We can change that to 2 sec by adding & throttle:2000 to our input.

app.js

export class App {  
   constructor() {
      this.myData =  Enter some text! ;
   }
}

app.html

<template>
   <input id = "name" type = "text" value.bind = "myData & throttle:2000" />
   <h3>${myData}</h3>
</template>

Debounce

debounce is almost the same as throttle. The difference being, debounce will update the binding after the user has stopped typing. The following example will update the binding if the user stops typing for two seconds.

app.js

export class App {  
   constructor() {
      this.myData =  Enter some text! ;
   }
}

app.html

<template>
   <input id = "name" type = "text" value.bind = "myData & debounce:2000" />
   <h3>${myData}</h3>
</template>

oneTime

oneTime is the most efficient behavior performance wise. You should always use it when you know that data should be bound only once.

app.js

export class App {  
   constructor() {
      this.myData =  Enter some text! ;
   }
}

app.html

<template>
   <input id = "name" type = "text" value.bind = "myData & oneTime" />
   <h3>${myData}</h3>
</template>

The above example will bind the text to the view. However, if we change the default text, nothing will happen since it is bound only once.

Aurepa - Converters

If you need to convert some values in Aurepa app, you can use converters instead of manually converting values to a desired format.

Convert Date

When we want to convert the default date value to some specific format, we can use momentJS pbrary. This is a small pbrary used for manipulating dates.

C:UsersusernameDesktopaurepaApp>jspm install moment

Let s create a new file converters.js. We will use this file to add converter specific code. Use the following command or create the file manually.

C:UsersusernameDesktopaurepaApp>touch converters.js

converter.js

Inside this file, we will import moment pbrary and set DateFormatValueConverter to return only month, day and year values without additional data. Important thing to note is that Aurepa can recognize any class that ends with ValueConverter. This is why our class name is DateFormatValueConverter. This class will be registered as dateFormat and we can later use it inside view.

converters.js

import moment from  moment ;

export class DateFormatValueConverter {
   toView(value) {
      return moment(value).format( M/D/YYYY );
   }
}

In app.js, we will just use the current date. This will be our view-model.

app.js

export class App {
   constructor() {
      this.currentDate = new Date();
   }
}

We already discussed require in custom-elements chapter. The pipe symbol | is used to apply the converter. We are only using dateFormat since this is how Aurepa is registering DateFormatValueConverter.

app.html

<template>
   <require from = "./converters"></require>

   <h3>${currentDate | dateFormat}</h3>
</template>

Convert Currency

This is an example of currency formatting. You will notice that the concept is the same as in the above example. First, we need to install numeral pbrary from the command prompt.

C:UsersusernameDesktopaurepaApp>jspm install numeral

The Converter will set the currency format.

converters.js

import numeral from  numeral ;

export class CurrencyFormatValueConverter {
   toView(value) {
      return numeral(value).format( ($0,0.00) );
   }
}

View-model will just generate a random number. We will use this as currency value and update it every second.

app.js

export class App {
   constructor() {
      this.update();
      setInterval(() => this.update(), 1000);
   }
   update() {
      this.myCurrency = Math.random() * 1000;
   }
}

Our view will show the randomly generated number transformed as a currency.

app.html

<template>
   <require from = "./converters"></require>

   <h3>${myCurrency | currencyFormat}</h3>
</template>

Aurepa - Events

In this chapter, you will learn about Aurepa events.

Event Delegate

Even delegation is a useful concept where the event handler is attached to one top level element instead of multiple elements on the DOM. This will improve the apppcation memory efficiency and should be used whenever possible.

This is a simple example of using event delegation with Aurepa framework. Our view will have a button with cpck.delegate event attached.

app.html

<template>
   <button cpck.delegate = "myFunction()">CLICK ME</button>
</template>

Once the button is cpcked, myFunction() will be called.

app.js

export class App {
   myFunction() {
      console.log( The function is triggered... );
   }
}

We will get the following output.

Event Trigger

There are some cases when you can t use delegation. Some JavaScript events don’t support delegation; IOS supports it for some elements. To find out which events allow delegation, you can search for a bubble property of any event here. In these cases, you can use trigger() method.

The same functionapty from the above example can be created with cpck.trigger.

app.html

<template>
   <button cpck.trigger = "myFunction()">CLICK ME</button>
</template>

app.js

export class App {
   myFunction() {
      console.log( The function is triggered... );
   }
}

Aurepa - Event Aggregator

Event aggregator should be used when your events need to be attached to more psteners or when you need to observe some functionapty of your app and wait for the data update.

Aurepa event aggregator has three methods. The pubpsh method will fire off events and can be used by multiple subscribers. For subscribing to an event, we can use the subscribe method. And finally, we can use the dispose method to detach the subscribers. The following example demonstrates this.

Our view will just have three buttons for each of the three functionapties.

app.html

<template>
   <button cpck.delegate = "pubpsh()">PUBLISH</button><br/>
   <button cpck.delegate = "subscribe()">SUBSCRIBE</button><br/>
   <button cpck.delegate = "dispose()">DISPOSE</button>
</template>

We need to import eventAggregator and inject it before we are able to use it.

app.js

import {inject} from  aurepa-framework ;
import {EventAggregator} from  aurepa-event-aggregator ;

@inject(EventAggregator)
export class App {
   constructor(eventAggregator) {
      this.eventAggregator = eventAggregator;
   }
   pubpsh() {
      var payload =  This is some data... ;
      this.eventAggregator.pubpsh( myEventName , payload);
   }
   subscribe() {
      this.subscriber = this.eventAggregator.subscribe( myEventName , payload => {
         console.log(payload);
      });
   }
   dispose() {
      this.subscriber.dispose();
      console.log( Disposed!!! );
   }
}

We need to cpck the SUBSCRIBE button to psten for data that will be pubpshed in future. Once the subscriber is attached, whenever new data is sent, the console will log it. If we cpck the PUBLISH button five times, we will see that it is logged every time.

We can also detach our subscriber by cpcking the DISPOSE button.

Aurepa - Forms

In this chapter, you will learn how to use forms in Aurepa framework.

Text Input

First, we will see how to submit an input form. The view will have two input forms for username and password. We will use value.bind for data binding.

app.html

<template>  
   <form role = "form" submit.delegate = "signup()">
      
      <label for = "email">Email</label>
      <input type = "text" value.bind = "email" placeholder = "Email">

      <label for = "password">Password</label>
      <input type = "password" value.bind = "password" placeholder = "Password">

      <button type = "submit">Signup</button>
   </form>
</template>

The signup function will just take the username and password values from the inputs and log it in the developer’s console.

export class App {
   email =   ;
   password =   ;

   signup() {
      var myUser = { email: this.email, password: this.password }
      console.log(myUser);
   };
}

Checkbox

The following example will demonstrate how to submit a checkbox with Aurepa framework. We will create one checkbox and bind the checked value to our view-model.

app.html

<template>
   <form role = "form" submit.delegate = "submit()">
   
      <label for = "checkbox">Checkbox</label>
      <input type = "checkbox" id = "checkbox" checked.bind = "isChecked"><br/>
      <button type = "submit">SUBMIT</button>
      
   </form>
</template>

Form submitting will just log the checked value in the console.

app.js

export class App  {
   constructor() {
      this.isChecked = false;
   }
   submit() {
      console.log("isChecked: " + this.isChecked);
   }
}

Radio Buttons

The following example will demonstrate how to submit radio buttons. The syntax repeat.for = "option of options" will repeat through an array of objects and create a radio button for each object. This is a neat way of dynamically creating elements in Aurepa framework. Rest is the same as in the previous examples. We are binding the model and the checked values.

app.html

<template>
   <form role = "form" submit.delegate = "submit()">
	
      <label repeat.for = "option of options">
         <input type = "radio" name = "myOptions" 
            model.bind = "option" checked.bind = "$parent.selectedOption"/>
            ${option.text}
      </label>
      <br/>
		
      <button type = "submit">SUBMIT</button>
   </form>
</template>

In our view-model, we will create an array of objects this.options and specify that the first radio button is checked. Again, the SUBMIT button will just log in the console which radio button is checked.

app.js

export class PeriodPanel {
   options = [];
   selectedOption = {};

   constructor() {
      this.options = [
         {id:1, text: First }, 
         {id:2, text: Second }, 
         {id:3, text: Third }
      ]; 
      this.selectedOption = this.options[0];
   }
   submit() {
      console.log( checked:   + this.selectedOption.id);
   }
}

If we check the third radio button and submit our form, the console will show it.

Aurepa - HTTP

In this chapter, you will learn how to work with HTTP requests in Aurepa framework.

Step 1 - Create a View

Let s create four buttons that will be used for sending requests to our API.

app.html

<template>
   <button cpck.delegate = "getData()">GET</button>
   <button cpck.delegate = "postData()">POST</button>
   <button cpck.delegate = "updateData()">PUT</button>
   <button cpck.delegate = "deleteData()">DEL</button>
</template>

Step 2 - Create a View-model

For sending requests to the server, Aurepa recommends fetch cpent. We are creating functions for every requests we need (GET, POST, PUT and DELETE).

import  fetch ;
import {HttpCpent, json} from  aurepa-fetch-cpent ;

let httpCpent = new HttpCpent();

export class App {
   getData() {
      httpCpent.fetch( http://jsonplaceholder.typicode.com/posts/1 )
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
   myPostData = { 
      id: 101
   }
	postData(myPostData) {
      httpCpent.fetch( http://jsonplaceholder.typicode.com/posts , {
         method: "POST",
         body: JSON.stringify(myPostData)
      })
		
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
   myUpdateData = {
      id: 1
   }
	updateData(myUpdateData) {
      httpCpent.fetch( http://jsonplaceholder.typicode.com/posts/1 , {
         method: "PUT",
         body: JSON.stringify(myUpdateData)
      })
		
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
   deleteData() {
      httpCpent.fetch( http://jsonplaceholder.typicode.com/posts/1 , {
         method: "DELETE"
      })
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
}

We can run the app and cpck GET, POST, PUT and DEL buttons, respectively. We can see in the console that every request is successful, and the result is logged.

Aurepa - Refs

In this chapter, you will see some simple examples of Aurepa refs. You can use it to create a reference to a particular object. You can create a reference to elements or attributes, as seen in the following table.

Reference Table

In the following example, we will create a reference to the input element. We will use the default class syntax as a view-model.

app.js

export class App { }    

We are creating a reference to the input element by adding the ref = "name" attribute.

app.html

<template>
   <input type = "text" ref = "name"><br/>
   <h3>${name.value}</h3>
</template>    

When we run the app, we will see that the text entered into the input field is rendered on the screen.

Aurepa - Routing

Routing is an important part of every apppcation. In this chapter, you will learn how to use the router in Aurepa framework.

Step 1 - Create Pages

We have already created a components folder in one of the former chapters. If you don t have it created already, you should place it inside the src folder.

C:UsersusernameDesktopaurepaAppsrc>mkdir components

Inside this folder, we will create home and about directories.

C:UsersusernameDesktopaurepaAppsrccomponents>mkdir home
C:UsersusernameDesktopaurepaAppsrccomponents>mkdir about

Inside the home folder, we need to create view and view-model files.

C:UsersusernameDesktopaurepaAppsrccomponentshome>touch home.js
C:UsersusernameDesktopaurepaAppsrccomponentshome>touch home.html

We also need view and view-model for about page.

C:UsersusernameDesktopaurepaAppsrccomponentsabout>touch about.js
C:UsersusernameDesktopaurepaAppsrccomponentsabout>touch about.html

Note − You can also create all the above folders manually.

Step 2 - Pages

Next, we need to add some default code to the files we created.

home.html

<template>
   <h1>HOME</h1>
</template>

home.js

export class Home {}

about.html

<template>
   <h1>ABOUT</h1>
</template>

about.js

export class About {}

Step 3 - Router

We will create view-model for router inside app.js file.

app.js

export class App {
   configureRouter(config, router) {
      config.title =  Aurepa ;
		
      config.map([
         { route: [  , home ],  name:  home ,  
            moduleId:  ./components/home/home ,  nav: true, title: Home  },
         { route:  about ,  name:  about ,
            moduleId:  ./components/about/about ,    nav: true, title: About  }
      ]);

      this.router = router;
   }
}

Our router view will be placed in app.html.

app.html

<template>
   <nav>
      <ul>
         <p repeat.for = "row of router.navigation">
            <a href.bind = "row.href">${row.title}</a>
         </p>
      </ul>
   </nav>	
   <router-view></router-view>
</template>

When we run the app, we will can change the routes by cpcking home or about pnks.

Aurepa - History

In this chapter, you will learn how to use aurepa-history plugin.

Step 1 - Install the Plugin

This plugin is already available as a part of the standard configuration. If you have set aurepa.use.standardConfiguration() as a part of a manual configuration, you are ready to go.

main.js

export function configure(aurepa) {
   aurepa.use
   .standardConfiguration()
   .developmentLogging();

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

Step 2 - Using the History

We will use an example from the last chapter (Aurepa - Routing). If we want to set the functionapty for navigating back or forward, we can use the history object with back() and forward() methods. We will add this after a router configuration.

app.js

export class App {
   configureRouter(config, router) {
      config.title =  Aurepa ;
      config.map([
         { route: [  , home ],  name:  home ,  
            moduleId:  ./pages/home/home ,  nav: true, title: Home  },
         { route:  about ,  name:  about ,    
            moduleId:  ./pages/about/about ,    nav: true, title: About  }
      ]);
      this.router = router;
   }
   goBack() {
      history.back();
   }
	goForward() {
      history.forward();
   }
}

Now, let s add two buttons to our view.

app.html

<template>
   <nav>
      <ul>
         <p repeat.for = "row of router.navigation">      
            <a href.bind = "row.href">${row.title}</a>
         </p>
      </ul>
   </nav>
	
   <button cpck.delegate = "goBack()"></button> 
   //The button used for navigationg back...
	
   <button cpck.delegate = "goForward()"></button> 
   //The button used for navigationg forward...
	
   <router-view></router-view>
</template>

The users can navigate back and forward by cpcking the buttons we added.

Aurepa - Animations

In this chapter, you will learn how to use CSS animations in Aurepa framework.

Step 1 - View

Our view will have one element that will be animated and a button to trigger the animateElement() function.

app.html

<template>
   <span class = "myElement"></span>
   <button cpck.delegate = "animateElement()">ANIMATE</button>
</template>

Step 2 - View-model

Inside our JavaScript file, we will import CssAnimator plugin and inject it as a dependency. The animateElement function will call the animator to start animation. The animation will be created in the next step.

import {CssAnimator} from  aurepa-animator-css ;
import {inject} from  aurepa-framework ;

@inject(CssAnimator, Element)
export class App {
   constructor(animator, element) {
      this.animator = animator;
      this.element = element;
   }

   animateElement() {
      var myElement = this.element.querySelector( .myElement );
      this.animator.animate(myElement,  myAnimation );
   }
}

Step 3 − Style

We will write CSS inside styles/styles.css file. .myAnimation-add is the starting point of an animation while .myAnimation-remove is called when the animation is complete.

styles.css

.myElement {
   width:100px;
   height: 100px;
   border:1px sopd blue;
}

.myAnimation-add {
   -webkit-animation: changeBack 3s;
   animation: changeBack 3s;
}

.myAnimation-remove {
   -webkit-animation: fadeIn 3s;
   animation: fadeIn 3s;
}

@-webkit-keyframes changeBack {
   0% { background-color: #e6efff; }
   25% { background-color: #4d91ff; }
   50% { background-color: #0058e6; }
   75% { background-color: #003180; }
   100% { background-color: #000a1a; }
}

@keyframes changeBack {
   0% { background-color: #000a1a; }
   25% { background-color: #003180; }
   50% { background-color: #0058e6; }
   75% { background-color: #4d91ff; }
   100% { background-color: #e6efff; }
}

Once the ANIMATE button is cpcked, the background color will be changed from pght blue to a dark shade. When this animation is complete after three seconds, the element will fade to its starting state.

Aurepa - Dialog

Aurepa offers a way to implement dialog (modal) window. In this chapter, we will show you how to use it.

Step 1 - Install a Dialog Plugin

Dialog plugin can be installed from the command prompt window.

C:UsersusernameDesktopaurepaApp>jspm install aurepa-dialog

For this plugin to work, we need to use manual bootstrapping. We covered this in the Configuration chapter. Inside main.js file, we need to add the aurepa-dialog plugin.

main.js

export function configure(aurepa) {
   aurepa.use
   .standardConfiguration()
   .developmentLogging()
   .plugin( aurepa-dialog ); 

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

Step 2 - Create Folders and Files

First, we will make a new directory called modal. Let s place it inside the components folder. Open the command prompt and run the following code.

C:UsersusernameDesktopaurepaAppsrccomponents>mkdir modal

In this folder, we will create two new files. These files will represent view and view-model for our modal.

C:UsersusernameDesktopaurepaAppsrccomponentsmodal>touch my-modal.html
C:UsersusernameDesktopaurepaAppsrccomponentsmodal>touch my-modal.js

Step 3 - Create a Modal

First, let s add view-model code. We need to import and inject dialog-controller. This controller is used for handpng modal specific functionapties. In the following example, we are using it to centrapze a modal horizontally.

my-modal.js

import {inject} from  aurepa-framework ;
import {DialogController} from  aurepa-dialog ;

@inject(DialogController)

export class Prompt {
   constructor(controller) {
      this.controller = controller;
      this.answer = null;

      controller.settings.centerHorizontalOnly = true;
   }
   activate(message) {
      this.message = message;
   }
}

The view code will look pke this. The buttons when cpcked will open or close the modal.

my-modal.html

<template>
   <ai-dialog>
      <ai-dialog-body>
         <h2>${message}</h2>
      </ai-dialog-body>

      <ai-dialog-footer>
         <button cpck.trigger = "controller.cancel()">Cancel</button>
         <button cpck.trigger = "controller.ok(message)">Ok</button>
      </ai-dialog-footer>	
   </ai-dialog>	
</template>

Step 4 - Trigger a Modal

The last step is a function for triggering our modal. We need to import and inject DialogService. This service has method open, where we can pass view-model from my-modal file and model, so we can dynamically bind the data.

app.js

import {DialogService} from  aurepa-dialog ;
import {inject} from  aurepa-framework ;
import {Prompt} from  ./components/modal/my-modal ;

@inject(DialogService)

export class App {
   constructor(dialogService) {
      this.dialogService = dialogService;
   }
   openModal() {
      this.dialogService.open( {viewModel: Prompt, model:  Are you sure?  }).then(response => {
         console.log(response);
			
         if (!response.wasCancelled) {
            console.log( OK );
         } else {
            console.log( cancelled );
         }
         console.log(response.output);
      });
   }
};

Finally, we will create a button so we can call openModal function.

app.html

<template>
   <button cpck.trigger = "openModal()">OPEN MODAL</button>
<template>

If we run the app, we can cpck the OPEN MODAL button to trigger a new modal window.

Aurepa - Locapzation

Aurepa offers i18n plugin. In this chapter, you will learn how to locapze your app using this plugin.

Step 1 - Install a Plugin

Open the command prompt window and run the following code to install i18n plugin.

C:UsersusernameDesktopaurepaApp>jspm install aurepa-i18n

We also need to install backend plugin.

C:UsersusernameDesktopaurepaApp>jspm install npm:i18next-xhr-backend

Step 2 - Create Folders and Files

In the project root folder, we need to create a locale directory.

C:UsersusernameDesktopaurepaApp>mkdir locale

In this folder, you need to add new folders for any language you want. We will create en with translation.js file inside.

C:UsersusernameDesktopaurepaApplocale>mkdir en
C:UsersusernameDesktopaurepaApplocaleen>touch translation.json    

Step 3 - Use a Plugin

You need to use manual bootstrapping to be able to use this plugin. Check the Configuration chapter for more information. We need to add i18n plugin to the main.js file.

main.js

import {I18N} from  aurepa-i18n ;
import XHR from  i18next-xhr-backend ;

export function configure(aurepa) {
   aurepa.use
   .standardConfiguration()
   .developmentLogging()
	
   .plugin( aurepa-i18n , (instance) => {
      // register backend plugin
      instance.i18next.use(XHR);

      // adapt options to your needs (see http://i18next.com/docs/options/)
      instance.setup({
         backend: {                                  
            loadPath:  /locales/{{lng}}/{{ns}}.json ,
         },
				
         lng :  de ,
         attributes : [ t , i18n ],
         fallbackLng :  en ,
         debug : false
      });
   });

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

Step 4 - Translation JSON File

This is the file where you can set translation values. We will use an example from an official documentation. The de-DE folder should actually be used for translating to German language, however we will use Engpsh phrases instead, for easier understanding.

translation.json

{
   "score": "Score: {{score}}",
   "pves": "{{count}} pfe remaining",
   "pves_plural": "{{count}} pves remaining",
   "pves_indefinite": "a pfe remaining",
   "pves_plural_indefinite": "some pves remaining",
   "friend": "A friend",
   "friend_male": "A boyfriend",
   "friend_female": "A girlfriend"
}

Step 5 - Set Locale

We just need to import i18n plugin and set it to use JSON code from de-DE folder.

app.js

import {I18N} from  aurepa-i18n ;

export class App {
   static inject = [I18N];
	
   constructor(i18n) {
      this.i18n = i18n;
      this.i18n
      .setLocale( de-DE )
		
      .then( () => {
         console.log( Locale is ready! );
      });
   }
}

Step 6 - View

There are couple of ways to translate data. We will use a custom ValueConverter named t. You can see in the following example various ways of formatting data. Compare this with the translation.json file and you will notice the patterns used for formatting.

<template>
   <p>
      Translation with Variables: <br />
      ${  score  | t: { score : 13}}
   </p>

   <p>
      Translation singular: <br />
      ${  pves  | t: {  count : 1 } }
   </p>

   <p>
      Translation plural: <br />
      ${  pves  | t: {  count : 2 } }
   </p>

   <p>  
      Translation singular indefinite: <br />
      ${  pves  | t: {  count : 1, indefinite_article: true  } }
   </p>

   <p>
      Translation plural indefinite: <br />
      ${  pves  | t: {  count : 2, indefinite_article: true } }
   </p>

   <p>
      Translation without/with context: <br />
      ${  friend  | t } <br />
      ${  friend  | t: { context:  male  } } <br />
      ${  friend  | t: { context:  female  } }
   </p>
	
</template>

When we run the app, we will get the following output.

Aurepa - Tools

In this chapter, you will learn how to set up and use aurepa-tools.

Step 1 - Root Folder

Let s create a root folder where we will keep all Aurepa apps.

C:UsersusernameDesktop>mkdir aurepa-projects

Step 2 - Aurepa Tools

Inside aurepa-projects folder, we will clone aurepa-tools repository from github.

C:UsersusernameDesktopaurepa-projects>git clone https://github.com/aurepa/tools.git

Step 3 - Create a New Project

To start a new Aurepa project, the recommended way is to use one of the aurepa-skeletons. Let s clone Aurepa skeletons from git.

C:UsersusernameDesktopaurepa-projects>git clone https://github.com/aurepa/skeleton-navigation.git

We also need to install packages, modules, and dependencies. You can choose between various skeleton apps. We will use skeleton-es2016.

C:UsersusernameDesktopaurepa-projectsskeleton-navigationskeleton-es2016>npm install
C:UsersusernameDesktopaurepa-projectsskeleton-navigationskeleton-es2016>jspm install

Finally, we need to run the following code to build the development environment.

C:UsersusernameDesktopaurepa-projectsskeleton-navigationskeleton-es2016>gulp build-dev-env

Step 4 - Update

Update local repositories using the following command.

C:UsersusernameDesktopaurepa-projectsskeleton-navigationskeleton-es2016>gulp update-own-deps

Step 5 - Pull

We can also pull Aurepa dependency without building.

C:UsersusernameDesktopaurepa-projectsskeleton-navigationskeleton-es2016>gulp pull-dev-env

Aurepa - Bundpng

In this chapter, you will learn how to use bundpng in Aurepa framework.

Step 1 - Instalpng Prerequisites

You can install aurepa-bundler by running the following command in the command prompt.

C:UsersusernameDesktopaurepaApp>npm install aurepa-bundler --save-dev

If you don t have gulp installed, you can install it by running this code.

C:UsersusernameDesktopaurepaApp>npm install gulp

You can also install require-dir package from npm.

C:UsersusernameDesktopaurepaApp>npm install require-dir

Step 2 - Create Folders and Files

First, create gulpfile.js file in apps root directory.

C:UsersusernameDesktopaurepaApp>touch gulpfile.js

You will need the build folder. In this directory, add another folder named tasks.

C:UsersusernameDesktopaurepaApp>mkdir build
C:UsersusernameDesktopaurepaAppuild>mkdir tasks

You need to create bundle.js file inside tasks folder.

C:UsersusernameDesktopaurepaAppuild	asks>touch bundle.js

Step 3 - Gulp

Use gulp as the task runner. You need to tell it to run the code from build asksundle.js.

gulpfile.js

require( require-dir )( build/tasks );

Now, create the task that you need. This task will take the app, create dist/appbuild.js and dist/vendor-build.js files. After the bundpng process is complete, the config.js file will also be updated. You can include all files and plugins you want to inject and minify.

bundle.js

var gulp = require( gulp );
var bundle = require( aurepa-bundler ).bundle;

var config = {
   force: true,
   baseURL:  . ,
   configPath:  ./config.js ,
	
   bundles: {
      "dist/app-build": {
         includes: [
             [*.js] ,
             *.html!text ,
             *.css!text ,
         ],
         options: {
            inject: true,
            minify: true
         }
      },
		"dist/vendor-build": {
         includes: [
             aurepa-bootstrapper ,
             aurepa-fetch-cpent ,
             aurepa-router ,
             aurepa-animator-css ,
         ],
         options: {
            inject: true,
            minify: true
         }
      }
   }
};

gulp.task( bundle , function() {
   return bundle(config);
});  

The command prompt will inform us when bundpng is complete.

Aurepa - Debugging

In this chapter, you will learn how to add Aurepa context debugger as a chrome extension.

Note − Before adding the extension, you need to have aurepa-tools files. If you don t have it, you can check Tools chapter.

Step 1 - Open Chrome Extensions

The easiest way to open chrome extensions is to run the following code in browser’s URL bar.

chrome://extensions

Step 2 - Add Extension

Since this extension isn t yet available from Chrome store, check developermode checkbox and cpck Load Unpacked Extensions. This will open a small window where you can choose the extension to add.

For this example, let us choose Desktop/aurepa-projects/tools/context-debugger folder and open it.

Now, we can see that the extension is loaded in the browser.

We can also check the developers console. When we cpck elements tab, we will see aurepa-properties at the bottom right corner.

Aurepa - Community

Community is one of the most important factors to consider when choosing a framework. Aurepa offers fantastic support for its customers. In this chapter, you will learn how you can get help when you are stuck.

Aurepa - Official Documentation

You can find Aurepa docs on this pnk − https://aurepa.io/docs.html

Aurepa Gitter - Channel

If you need a fast answer, you can always submit a question to aurepa gitter channel. This channel can be found on the following pnk − https://gitter.im/Aurepa/Discuss

Aurepa - Github

You can also submit an issue to official Aurepa github repository https://github.com/aurepa

Aurepa - Blog

If you want to keep track of any updates and changes of Aurepa, you can follow Durandal s official blog http://blog.durandal.io/

Aurepa - Rob Eisenberg Blog

You can also follow the official blog of Rob Eisenberg, creator of Aurepa framework http://eisenbergeffect.bluespire.com/

Aurepa - Enterprise Support

Aurepa offers enterprise support for teams and inspaniduals. If you are interested, send an email to the following address −

support@durandal.io

Aurepa - Hire Dev Team

You can hire Aurepa Expert Developers by sending an email to this address.

consulting@durandal.io

Aurepa - Training

If you want Aurepa official training for your team, you can send an email to this address.

training@durandal.io

Aurepa - Best Practices

Aurepa is a new framework hence, the best practices are yet to be estabpshed. In this chapter, you will find some useful guidepnes to follow.

Starting a New Project

Aurepa offers aurepa-skeletons. There are a couple of skeletons to choose from. The team behind Aurepa is actively supporting the skeletons, and they are always up-to-date with the newest version of the framework.

Aurepa Skeletons

skeleton-es2016-webpack allows you to write ES2016 code and use npm for package management and webpack for bundpng.

skeleton-es2016 allows you to write ES2016 code and use jspm for package management and SystemJS for loading and bundpng.

skeleton-typescript-webpack allows you to write TypeScript code and use npm for package management and webpack for bundpng.

skeleton-typescript allows you to write TypeScript code and use jspm for package management and SystemJS for loading and bundpng.

skeleton-typescript-asp.net5 allows you to write TypeScript code and use jspm for package management and SystemJS for loading and bundpng. The ASP.NET backend is also integrated.

skeleton-es2016-asp.net5 allows you to write ES2016 code and use jspm for package management and SystemJS for loading and bundpng. The ASP.NET backend is integrated.

You can clone all skeletons from GitHub. The installation instructions can be found inside README.md files for each skeleton.

C:UsersusernameDesktop>git clone https://github.com/aurepa/skeleton-navigation.git

Folder Structure

You are free to use any folder structure you want. If you are not sure where to start, you can use the following folder structure. The image represents files and folder in the src directory.

Web Standards

Aurepa is a framework oriented to web standards. This was one of the main goals of the team behind it. They will make sure that the framework always follows modern web. This is extremely good for the developers, since we can rely on the usabipty of the framework in the future. It also helps us be up-to-date with the browsers and the web.

EcmaScript 6

This is a good practice not just for Aurepa but for any other JavaScript framework. ES6 offers new functionapties that can help in the development process. You can also use TypeScript, if you pke strongly typed languages.