FOXX - a Javascript application framework on top of ArangoDB

RWTH Aachen, Computer Science Student on branch mastertriAGENS GmbH, Developer

moon!lum moonbeamlabs

by Lucas DohmenCreate APIs on your database

Aran!oDB Foxx

Sin!le Pa!eWeb Applications

The Idea

• What if we could talk to the database directly?

• It would only need an API

• What if we could define this API in JavaScript?

Sin!le Pa!eWeb Applications

Sin!le Pa!eWeb Applications

This doesn‘t mean its a Rails/… Killer

Client Server DB

Client Server DBwith Foxx

Who is that !uy?

• Aran!oDB Core Team

• Aran!oDB Foxx & Ruby Adapter

• Student on the master branch

• hacken.in & nerdkun.de

Who is that !uy?

• Aran!oDB Core Team

• Aran!oDB Foxx & Ruby Adapter

• Student on the master branch

• hacken.in & nerdkun.de

/\(~( ) ) /\_/\( _-----_(@ @) ( \ / /|/--\|\ V " " " "

What is ?

• Free and Open Source…

• … Document and Graph Store…

• … with embedded JavaScript…

• … and an amazin! query lan!ua!e

More about Aran!oDB at

Ruby UG Munich next week

/\(~( ) ) /\_/\( _-----_(@ @) ( \ / /|/--\|\ V " " " "

• …a feature of Aran!oDB 1.4 (currently in alpha, release: End of September)

• …an easy way to define REST APIs on top of Aran!oDB

• … a toolset for developin! your sin!le pa!e web application

• … not requirin! any special code on the client side – use it with Backbone, Ember, An!ular…

Foxx is…

Why another solution?

• Aran!oDB Foxx is streamlined for API creation – not a Jack of all trades

• There‘s no communication overhead between (serverside) application and database

• It is desi!ned for front end developers: Use JavaScript, you already know that

Foxx.Controller

Foxx = require("org/arangodb/foxx");

controller = new Foxx.Controller(appContext);

controller.get("/users", function(req, res) { res.json({ hello: "world" });});

Parameterizethe routes

• You may want a route like `users/:id`…

• …and then access the value of `id` easily

Foxx = require("org/arangodb/foxx");

controller = new Foxx.Controller(appContext);

controller.get("/users ", function(req, res) { res.json({ hello: });});

req.params("name");

/:name

• In your Foxx.Controller you describe your routes

• But your application can consist of multiple Foxx.Controllers

• … and you also want to deliver assets and files

Manifest.json

{ "name": "my_website", "version": "1.2.1", "description": "My Website with a blog and a shop", "thumbnail": "images/website-logo.png",

"controllers": { "/blog": "apps/blog.js", "/shop": "apps/shop.js" },

"assets": { "application.js": { "files": [ "vendor/jquery.js", "assets/javascripts/*" ] } }}

More

• Define a setup and teardown function to create and delete collections

• Define lib to set a base path for your require statements

• Define files to deliver binary data unaltered

Documentationas a first class citizen

Annotate your Routes

• For Documentation

• But it is also used for validation

controller.get("/users/:name", function(req, res) { res.json({ hello: req.params("name"); });}) .pathParam("name", { description: "Name of the User", dataType: "string"});

/** What's my name? * * This route knows it. */

Automatically !enerateSwa!!er Docs

Models & Repositories

• Foxx also helps you structure the M part of MVC

• We don‘t have time for that today

• But you can see a demonstration in our demo app

• … or come to me later ;)

Foxx Apps Repo

• Look at demo applications

• Install components from a central repository

• Share your ideas

Foxx Demo App:Aye-Aye

Foxx Authenticationhttps://!ithub.com/moon!lum/foxx_authentication

Foxx:The Future

A Glance intothe Future

• Confi!ure filters for your assets:

• U!lifyJS2

• Later: Co"ee, Sass, Client Templates…

• Confi!urable Lo!!in!

• Yo Generator

Thanks

• Please try Aran!oDB Foxx

• We to !et feedback

Contact

• lucas@aran!odb.or!

• @moonbeamlabs on Twitter

Thanks

• Database icon desi!ned by Romeo Barreto from The Noun Project

• Browser icon desi!ned by Fernando Vasconcelos from The Noun Project

• Lo!os from Node.js, Ruby on Rails, Djan!o and Symfony from the respective projects

• All other icons are from Font Awesome