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

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

Embed Size (px)

DESCRIPTION

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

Citation preview

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