by
Michael Hackstein
@mchacki
Build a SPA in 30min
Michael Hackstein
@mchacki
• Member of ArangoDB
Core Team
• web front-end
• graph features
• Organizer of cologne.js
• Mas...
Single Page
Web 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 i...
Single Page
Web Applications
This doesn‘t mean its a Rails/… Killer
Client Server DB
Client Server
(optional)
DB
with Foxx
What is ?
• Free and Open Source…
• … Document and Graph Store…
• … with embedded JavaScript…
• … and an amazing query lan...
/
(~(
) ) /_/
( _-----_(@ @)
(  /
/|/--| V
" " " "
• … a feature of ArangoDB since 1.4
• … an easy way to define REST APIs on top of
ArangoDB
• … a toolset for developing you...
Why another solution?
• ArangoDB Foxx is streamlined for API
creation – not a Jack of all trades
• There‘s no communicatio...
Live Coding
Controller
var FoxxApplication = require("org/arangodb/foxx").Controller;
var controller = new FoxxApplication(applicationContext);
v...
Foxx.Repository and
Foxx.Model
Domain Models Persistence
Foxx.Model Foxx.Repository
Foxx.Model Foxx.Repository
• Representation of the data
• Convenience Methods
• Validation
• Save and Retrieve Data
• Simp...
Why this separation?
• It doesn‘t violate the SRP like ActiveRecord
• In a lot of cases you can use the standard
Repositor...
Live Coding
Model & Repository
Modelvar Foxx = require("org/arangodb/foxx");
var Hero = Foxx.Model.extend({
// instance properties
},{
attributes: {
"_id...
Repository
var Foxx = require("org/arangodb/foxx");
var Heroes = Foxx.Repository.extend({
random: function() {
return this...
Thanks
• Please try ArangoDB Foxx
• www.arangodb.org
• We to get feedback
Contact
• mchacki@arangodb.org
• @mchacki on Twitter
Thanks
• First Slide version by Lucas Dohmen
• Andreas Streichardt and Julian Steiner for
giving an AngularJS & Foxx Train...
Nächste SlideShare
Wird geladen in …5
×

Building a spa_in_30min

1.353 Aufrufe

Veröffentlicht am

In this talk we present the Foxx Framework embedded in ArangoDB.
This talk contains a lot of live-coding and how to write the backend for a Single Page Application in 30 minutes live and on stage.

Veröffentlicht in: Internet
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.353
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
62
Aktionen
Geteilt
0
Downloads
9
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Building a spa_in_30min

  1. 1. by Michael Hackstein @mchacki Build a SPA in 30min
  2. 2. Michael Hackstein @mchacki • Member of ArangoDB Core Team • web front-end • graph features • Organizer of cologne.js • Master’s Degree
 (spec. Databases and
 Information Systems)
  3. 3. Single Page Web Applications
  4. 4. 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?
  5. 5. Single Page Web Applications This doesn‘t mean its a Rails/… Killer
  6. 6. Client Server DB
  7. 7. Client Server (optional) DB with Foxx
  8. 8. What is ? • Free and Open Source… • … Document and Graph Store… • … with embedded JavaScript… • … and an amazing query language
  9. 9. / (~( ) ) /_/ ( _-----_(@ @) ( / /|/--| V " " " "
  10. 10. • … 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…
  11. 11. 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
  12. 12. Live Coding Controller
  13. 13. 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");
  14. 14. Foxx.Repository and Foxx.Model
  15. 15. Domain Models Persistence Foxx.Model Foxx.Repository
  16. 16. Foxx.Model Foxx.Repository • Representation of the data • Convenience Methods • Validation • Save and Retrieve Data • Simple Queries • Define your own queries
  17. 17. 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
  18. 18. Live Coding Model & Repository
  19. 19. 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;
  20. 20. Repository var Foxx = require("org/arangodb/foxx"); var Heroes = Foxx.Repository.extend({ random: function() { return this.collection.any()._key; } }); exports.Repository = Heroes;
  21. 21. Thanks • Please try ArangoDB Foxx • www.arangodb.org • We to get feedback
  22. 22. Contact • mchacki@arangodb.org • @mchacki on Twitter
  23. 23. 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

×