Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

19
Sails : Framework MVC pour Node.js 26 Mars 2014 - Sup’Info Montparnasse - Sylvain PONTOREAU

description

Simple presentation of the MVC framework Sails. Presentation made for Sup'Info Paris student (Montparnasse Tower)

Transcript of Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

Page 1: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

Sails : Framework MVC pour Node.js

26 Mars 2014 - Sup’Info Montparnasse - Sylvain PONTOREAU

Page 2: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

Sommaire

1 - Rappel sur Node

2 - Solutions MVC pour Node.js

4 - Sails in action3 - Présentation de Sails

5 - Conclusion

Page 3: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

1 - Piqure de rappel sur…

… Node.js !

- Mono-Thread asynchrone piloté par event- JavaScript (Harmony features)- Google V8- Module HTTP

- Node Package Module

Page 4: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

2 - Les Stacks MVC …

… et leur popularité !

1.5k 2.4k

5.5k12kMeteor

Kraken

Page 5: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

3 - Présentation de …

… Sails.js !

- Conçu par et pour les développeurs- Orienté application d’entreprise - Affinité pour les données- Inspiré par Ruby on Rails

- Idéal pour les applications temps réel

Page 6: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

3 – Caractéristiques …

… techniques !

- Convention over Configuration- Stack RoR Like- Automatic Rest Back-end - ORM inside (Waterline)

- Database Adapter- Action sur requête HTTP et WebSocket - Gestion des accès- Asset bundling

- Sails CLI

Page 7: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

3 – Qu’y a-t-il …

… dans le stack !

Waterline GruntWindson

Page 8: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

4 - Sails in …

… action !

Installation npm install sails -g

Créer un projet sails new myNewProject

cd myNewProjectnpm update

Lancer l’applicationsails lift

Page 9: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

4 - Définition d’un …

… modèle ! sails generate person

Person.js :

module.exports = { attributes : { }

};

attributes: { name : 'STRING',age : {

type : 'INTEGER',required : true

},birthDate : 'DATE'

}

Types disponibles : string, text, integer, float, date, time, datetime, boolean, binary, array, json

Validateurs disponibles : empty, required, email, url, ip, notNull, regex, contains, minLength, maxLength …

Page 10: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

4 – Configuration …

… des adapters Waterline !

npm install sails-mongo --save

config/adapter.js :

module.exports.adapters = {default : 'mongo', mongo : {

module : 'sails-mongo', host : 'localhost', port : 27017, user : 'username', password : 'password', database : 'Person' }};

Page 11: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

4 – Automatic …

… Rest Backend !

Requête POST valide => {

"name" : "sylvain","age" : "30" , "birthDate" : “05/28/1983"

}

Response :

{ "name": "sylvain", "age": 30, "birthDate": "05/28/1983", "createdAt": "2014-03-24T10:11:46.358Z", "updatedAt": "2014-03-24T10:11:46.358Z", "id": "533004e24510daf41d7de305"}

Requête POST non valide => {

"name" : "sylvain","age" : “30" , "birthDate" : “pasundate"

}

Response :

{ "status": 500, "errors": [{ "ValidationError": { "birthDate": [ { "data": "pasundate", "message": "Validation error: \"pasundate\" is not of type \"date\"", "rule": "date" }] } } ]}

Page 12: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

4 – Automatic …

… Rest Backend !

Requête GET => http://localhost:1337/Person

Response :

[ { "name": "sylvain", "age": 30, "birthDate": "05/28/1983", "createdAt": "2014-03-24T10:11:46.358Z", "updatedAt": "2014-03-24T10:11:46.358Z", "id": "533004e24510daf41d7de305" }, { "name": "bill", "age": 58, "birthDate": "10/28/1955", "createdAt": "2014-03-24T10:29:45.131Z", "updatedAt": "2014-03-24T10:29:45.131Z", "id": "533009194510daf41d7de306" }, … ]

Requête GET => http://localhost:1337/Person?name=sylvain

Response :

{ "name": "sylvain", "age": 30, "birthDate": "05/28/1983", "createdAt": "2014-03-24T10:11:46.358Z", "updatedAt": "2014-03-24T10:11:46.358Z", "id": "533004e24510daf41d7de305"}

Page 13: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

4 - Socket.io …

… inside !

Test dans chrome :

Page 14: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

4 - Création d’un contrôleur

… et ses actions !

PersonController.js :

module.exports = { _config: {}};

module.exports = { getAll : function(req, res){ Person.find().exec(function(err, data){ res.render('person/getAll', {persons : data}) }); },

_config: {}};

config/routes.js :

module.exports.routes = { '/': { view: 'home/index' },

'/persons' : { controller : 'PersonController', action : 'getAll' }};

sails generate person

Page 15: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

4 - Les vues …

… avec EJS !

views/layout.ejs :

<!DOCTYPE html><html> <head> <title><%- title %></title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> </head> <body> <%- body %> <script type="text/javascript" src="/js/socket.io.js"></script> <script type="text/javascript" src="/js/sails.io.js"></script> <script type="text/javascript" src="/js/app.js"></script> </body></html>

views/person/getAll.ejs :

<ul> <% for(var i=0; i < persons.length; i++) {%> <li> <%= persons[i].name %> - <%= persons[i].age %> - <%= persons[i].birthDate %> </li> <% } %></ul>

Page 16: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

4 – Policies …

… et contrôle des accès !

api/policies/isAuthenticated.js :

module.exports = function(req, res, next) { if (req.session.authenticated) { return next(); } return res.forbidden('You are not permitted to perform this action.');};

config/policies.js :

module.exports.policies = { //'*': true, PersonController: { '*': false, getAll : 'isAuthenticated', otherFunction : ['isAuthenticated', 'isAdmin'] }};

Page 17: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

4 – Grunt …

… et l’asset bundlinggruntfile.js :

module.exports = function (grunt) { grunt.initConfig({ concat : { dist : { src : 'asserts/js/*.js', dest : 'asserts/js/myApp.js' } }, uglify : { dist : { src : '<%= concat.dist.dest %>', dest : 'public/js/myApp.min.js' } } }); …}

gruntfile.js :

grunt.loadNpmTasks('grunt-contrib-concat');grunt.loadNpmTasks('grunt-contrib-concat');

grunt.registerTask('default', ['concat' , 'uglify' ]);

grunt

Page 18: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

5 – Conclusion …

- Un Framework MVC efficace- Nombreuses features out of the box- ORM adaptable- Développement de Backend in no time !

- Essayez le !

… le poulpe c’est bon, mangez en !

Page 19: Sails presentation by DCube at Sup'Info Paris (Montparnasse Tower)

Merci…

26 Mars 2014 - Sup’Info Montparnasse - Sylvain PONTOREAU

… à tous et bon pot !

Source disponible sur GitHub ! https://github.com/Vtek/SailsDCubeExemple