Express Workshop at DevCamp UP Diliman

Transcript

1. Fast, unopinionated, minimalist web framework for Node.js
2. About Me Johnny M. Estilles Engineering Manager Freelancer.com johnny@freelancer.com or johnny@ngmanila.org @JohnnyEstilles facebook.com/johnny.estilles
3. About Freelancer We’re hiring! http://www.freelancer.com
4. About the Angular Manila Developers Group contact@ngmanila.org @ngManila facebook.com/ngmanila.org meetup.com/ngmanila
5. Objectives • Describe Express, its uses and history • Learn how to create an REST API using Express • Learn how to use MongoJS to connect Express to a Mongo Database • See how an Angular SPA can connect to an Express RESTful API
6. Why Express?
7. Express: History • Has been around since 2009 • Rights to manage acquired by StrongLoop on June 2014 • StrongLoop was acquired by IBM on September 2015 • Adopted by the Node.js Foundation Incubator on January 2016 • Current version of Express is 4.14.1 • Express 5.0 is still in the alpha release stage
8. Express: Web Applications Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
9. Express: APIs With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy.
10. Express: Performance Express provides a thin layer of fundamental web application features, without obscuring Node.js features that you know and love.
11. What does Express offer you? • Syntactic sugar on top of Node.js HTTP server • Declarative routing • Basic middleware pattern
12. Express: Frameworks
13. The Workshop
14. Prerequisites • Node.js (https://nodejs.org/en/) • mLab Account (https://mlab.com/) • git (https://git-scm.com/) • Postman Chrome App (https://www.getpostman.com/) • Know JavaScript!!!
15. Step 1 - Initial Setup $ git clone https://github.com/JohnnyEstilles /up-express-tasklist.git $ git branch -a $ git checkout origin/step-1
16. Step 2 - Basic Express Server • Create server.js • Using basic middleware • Create basic routers • Use/Mount basic routers • Starting the Server
17. Using Middleware var express = require('express'); var bodyParser = require('body-parser'); // Set Static Folder app.use(express.static(path.join(__dirname, 'client'))); // Body Parser MW app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: false}));
18. Creating Basic Router var express = require('express'); var router = express.Router(); router.get('/', function(req, res, next){ res.send(‘Hello World!’); }); module.exports = router;
19. Using/Mounting Routers var index = require('./routes/index'); app.use('/', index);
20. Starting the Server app.listen(port, function(){ console.log('Server started on port '+port); });
21. During development use Nodemon $ npm install -g nodemon $ nodemon
22. Step 3 - Basic API • Render HTML template • Create API endpoints • Basic mongo-js usage
23. Render an HTML file router.get('/', function(req, res, next){ res.render('index.html'); });
24. Creating API endpoints // Get All Tasks router.get('/tasks', function(req, res, next){ db.tasks.find(function(err, tasks){ if(err){ res.send(err); } res.json(tasks); }); });
25. Basic MongoJS // Open a DB var db = mongojs('username:password@example.com/mydb', ['mycollection']); // find everything db.mycollection.find(function (err, docs) { // docs is an array of all the documents in mycollection });
26. Basic MongoJS // find a document using a native ObjectId db.mycollection.findOne({ _id: mongojs.ObjectId('523209c4561c640000000001') }, function(err, doc) { // doc._id.toString() === '523209c4561c640000000001' }); // find all named 'mathias' and increment their level db.mycollection.update({name: 'mathias'}, {$inc: {level: 1}}, function () { // the update is complete });
27. Testing your API using Postman
28. Step 4 - Angular 2 App • Quick Angular 2 overview • Stores data in memory • Data does not persist across reloads
29. Step 5 - Link Anguilar 2 app with Express API • Create an Angular 2 service that calls the API • Import service provider into the App component • Use the service within the Task component
30. Thank you!