<rAppid:js />

the declarative Rich Internet Application Javascript MVC Framework

"It's like Flex or Silverlight for HTML5. Designed for complex web applications!
Developed and based on the standards of the web - XML & Javascript."

Install it. Try it online. View on GitHub

Follow @rappidjs

Why rAppid.js?

HTML is great for defining views and CSS is great for styling. But don't repeat yourself by writing many tags to define your view. rAppidjs let you encapsulate complexity into components which can be easy used like HTML elements in your application. The result is a clean, readable mark-up offering a quick development and high reuse of code.

View details

Another MVC Framework

Most frameworks use templates to describe their views or try to extend the HTML language within the document markup, which is a dirty style. rAppid.js solves that issue by introducing an eXtendable Application Markup Language (XAML) for defining the application, MV-Bindings and event handling.

XAML

Extensibility

rAppid.js allows you to encapsulate complexity into components which can be used beside HTML. Therefor rAppid.js uses a Shadow DOM, which is rendered as valid HTML in the document body or a specific target. It is completely extendable and works well with other libraries.

More about the Shadow DOM

Quick start

Install the rappidjs command

rAppid.js is installed using npm with just one command. After the installation the rappidjs command-line-interface is ready for use.

sudo npm install -g rAppid.js

Download node with npm.

Installation

Setup a project

Use the rappidjs command to create a project in a specific target dir.

rappidjs create app <Name> [<targetDir>]

Project structure Commmand-line

Run the application

Execute the rappidjs server command and view the application in your web browser.

cd <targetDir>
rappidjs server .

Then open http://localhost/ in your browser.

The basics

Start

The index.html is the start file of a rAppid.js application. The application gets:

bootStrapped
started and after completing this
rendered into the body.

View details

Application Markup

The application structure is defined with XAML in the App.xml file. Within the XML file standard HTML can be combined with custom components. Each application inherits form js.core.Application or from a Code-Behind file like in this case from AppClass.js.

XAML

Application Code-Behind file

The Code-Behind file AppClass.js acts as a kind of a controller for the XAML file. It connects the view with the data model and the business logic.

<!DOCTYPE HTML>
<html>
<head>
    <title>App</title>

    <script type="text/javascript" src="js/lib/require.js"></script>
    <script type="text/javascript" src="js/lib/rAppid.js"></script>

    <meta name="fragment" content="!">
</head>
<body>
<script type="text/javascript">
    rAppid.bootStrap("example/basic/App.xml");
</script>
</body>
</html>

Simple App

Name:

Hello !

Add some business logic

Data-Binding

In rAppid.js data can be bound to components and normal HTML elements. There are three different types of bindings

Model-View-Binding
Two-Way-Binding
Static Bindings

It's also possible to use paths and functions inside a binding.

Bindings

Business logic

The business logic of an rAppid.js application is split and encapsulated into entities, models, collections and injectable services.

Through this encapsulation your view and controller stays clean and understandable.

Bindable Entity

Event handlers

In XAML an event handler is registered like in HTML with an on eventname attribute. In Javascript event handlers can be registered with the bind method.

rAppid.js also supports binding to events on non-existing or changing objects.

<?xml version="1.0"?>
<app:AppClass xmlns="http://www.w3.org/1999/xhtml"
               xmlns:js="js.core" xmlns:ui="js.ui" xmlns:app="example.todo">
    <h2>Todo</h2>

    <div>
        <span>{todoList.numOpenTodos()} of {todoList.size()} remaining </span>
        <span visible="{todoList.hasCompletedTodos()}">
            (<a href="" onclick="archiveCompletedItems">archive</a>)
        </span>

        <ui:ListView items="{todoList}" itemKey="todo" class="unstyled">
            <ui:Checkbox label="{todo.title}"
                         checked="{{todo.completed}}"
                         class="{todo.status()}"/>
        </ui:ListView>
        <form onsubmit="addTodoItem" action="">
            <input type="text" size="30" placeholder="add new todo here"
                   value="{{newTodo.title}}"/>
            <input class="btn-primary" type="submit" value="add"/>
        </form>
    </div>
</app:AppClass>

Todo

0 of 0 remaining

Components

Create

A component is a class defined in a package which inherits fromjs.core.Component. It can be declared either in Javascript or with XAML.

Components can be either visible at runtime and interact with the user or invisible providing services like I18n orRestDataSource.

Create custom view components

Use

Components can be created either declarative using XAML or at runtime via Javascript.

In XAML simply write <prefix:Component /> to create and add a new instance of the component.

At runtime use the createComponent command to instantiate the component and add it with the addChild method.

Publish

Components can be easily published as rAppid.js module using npm publish command.

Create a library project, add the components into a unique package structure and provide the required information in the package.json file.

<ui:View xmlns="http://www.w3.org/1999/xhtml"
         xmlns:js="js.core" xmlns:ui="js.ui"
         componentClass="card" person="">
    <p>
        <small>Name:</small> {person.fullName()}
    </p>
    <p>
        <small>Phone:</small> {person.phone}
    </p>
</ui:View>

Contacts

Data

DataSource

Data sources are designed asynchronous to access every source in the same way. Data is loaded, updated and deleted with the Active-Record-Pattern via methods of the model.

rAppid.js support Single-Instance-Pattern, schemas, format processors and provides an interface to define how to handle sub-models.

Data source

REST

The RestDataSource is a common implementation to access RESTful web-services. Configure the target API, define your models paths and start accessing remote data.

Define processors for special serializing and deserializing of the model data or choose between JSON and XML as exchange format.

LocalStorage

rAppid.js provides a local storage adapter to save data on the client. The LocalStorage-DataSource makes it easy to persist models, even with a complex schema.

Fragmental navigation

History

Navigate back and forth, do internal redirects and process deeplinks from outside - that's what the history do.

The history listen to hash-change-events from the browser and does a fallback polling mechanism for older browsers.

History

Router

The router processes changes from the history using routes and executes handler functions, which also can be asynchronous or interrupted.

The idea is to pass a callback from the application start to all routes and redirects to get notified when the application is completely started.

Router

ModuleLoader

With the ModuleLoader - modules can loaded dynamically when the are needed to reduce the size and loading time of a complex application.

The ModuleLoader interacts with the Router and also executes routes defined in a loaded module after it has been started. This is modularization!

ModuleLoader

About this site

Developed with rAppid.js

This project site has been developed completely with rAppid.js to show how powerful it is.

The site uses the raw-Plugin to require the source code of our examples which is shown highlighted in a CodeView component.

It dynamically loads markdown files from our wiki which is parsed and renderer on the client.

Search Engine Optimizing

View the source code of this page (Ctrl + u) and you'll see what a crawler sees. Almost nothing!

Because this is an ajax page, we use hash-bang urls to tell the crawler the ajax parts of the site. The crawler transforms these urls to special requests, which are handled by our rAppid.js-server.

See this page rendered on node with rAppid.js.

Node Rendering

License

This site has been developed by Tony Findeisen and Marcus Krejpowicz using rAppid.js. The source code of this website is licensed under the MIT License and available at Github.

Inspired by angularjs. Styled with bootstrap.