Building a spa in 30min
Transcript of Building a spa in 30min
![Page 1: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/1.jpg)
by Michael Hackstein
@mchacki
Build a SPA in 30min
![Page 2: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/2.jpg)
Michael Hackstein @mchacki
• Member of ArangoDB Core Team
• web front-end
• graph features
• Organizer of cologne.js
• Master’s Degree(spec. Databases andInformation Systems)
![Page 3: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/3.jpg)
Single Page Web Applications
![Page 4: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/4.jpg)
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?
![Page 5: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/5.jpg)
Single Page Web Applications
This doesn‘t mean its a Rails/… Killer
![Page 6: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/6.jpg)
Client Server DB
![Page 7: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/7.jpg)
Client Server (optional)
DB with Foxx
![Page 8: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/8.jpg)
What is ?
• Free and Open Source…
• … Document and Graph Store…
• … with embedded JavaScript…
• … and an amazing query language
![Page 9: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/9.jpg)
/\ (~( ) ) /\_/\ ( _-----_(@ @) ( \ / /|/--\|\ V " " " "
![Page 10: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/10.jpg)
• … a feature of ArangoDB since 1.4
• … an easy way to define REST APIs on top of ArangoDB
• … a toolset for developing your single page web application
• … not requiring any special code on the client side – use it with Angular, Backbone, Ember,…
Foxx is…
![Page 11: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/11.jpg)
Why another solution?
• ArangoDB Foxx is streamlined for API creation – not a Jack of all trades
• There‘s no communication overhead between (serverside) application and database
• It is designed for front end developers: Use JavaScript, you already know that
![Page 12: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/12.jpg)
Live Coding Controller
![Page 13: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/13.jpg)
var FoxxApplication = require("org/arangodb/foxx").Controller; var controller = new FoxxApplication(applicationContext); var db = require("internal").db; var Heroes = require("repositories/heroes").Repository; var Hero = require("models/hero").Model; var heroes = new Heroes(db.heroes, Hero); /** Load random * * Load a random hero */ controller.get("random", function(req, res) { res.json(heroes.random()); }); /** Load hero * * Load a specific hero */ controller.get("superheroes/:id", function(req, res) { res.json(heroes.byId(req.params("id")).forClient()); }).pathParam("id", { type: "string", description: "The key value of a hero" }); /** Replace a hero * * replace a hero with new values */ controller.put("superheroes/:id", function(req, res) { var hero = req.params("hero"); if(hero.get("_key") !== req.params("id")) { throw new Error("Id missmatch"); } heroes.replace(hero); res.json(hero); }).pathParam("id", { type: "string", description: "The key value of a hero" }).bodyParam("hero", "The new values for a hero", Hero) .errorResponse(Error, 400, "Id missmatch");
![Page 14: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/14.jpg)
Foxx.Repository and Foxx.Model
![Page 15: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/15.jpg)
Domain Models Persistence
Foxx.Model Foxx.Repository
![Page 16: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/16.jpg)
Foxx.Model Foxx.Repository
• Representation of the data • Convenience Methods • Validation
• Save and Retrieve Data • Simple Queries • Define your own queries
![Page 17: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/17.jpg)
Why this separation?• It doesn‘t violate the SRP like ActiveRecord
• In a lot of cases you can use the standard Repository or Model and don‘t need your own
• It‘s great for testing
• You can mock the collection and the model prototype to test your Repository
• You don‘t need to mock anything to test your model
![Page 18: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/18.jpg)
Live Coding Model & Repository
![Page 19: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/19.jpg)
Modelvar Foxx = require("org/arangodb/foxx"); var Hero = Foxx.Model.extend({ // instance properties },{ attributes: { "_id": "string", "_key": "string", "name": "string", "comment": "string" } }); exports.Model = Hero;
![Page 20: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/20.jpg)
Repositoryvar Foxx = require("org/arangodb/foxx"); var Heroes = Foxx.Repository.extend({ random: function() { return this.collection.any()._key; } }); exports.Repository = Heroes;
![Page 23: Building a spa in 30min](https://reader035.fdocuments.in/reader035/viewer/2022062504/589069591a28ab0c098b544b/html5/thumbnails/23.jpg)
Thanks• First Slide version by Lucas Dohmen
• Andreas Streichardt and Julian Steiner for giving an AngularJS & Foxx Training with me and elaborating the Idea for the App
• Database icon designed by Romeo Barreto from The Noun Project
• Logos from Node.js, Ruby on Rails, Django, AngularJS and Symfony from the respective projects
• All other icons are from Font Awesome