Tweet
Tweet

Slide 1

Slide 1 text

Node.js - Web APIs Martina Kraus, Manuel Rauber

Slide 2

Slide 2 text

Introduction Martina Kraus Passionate JavaScript Developer @Onwerk Lecturer HS Mannheim [email protected] @wing121 http://codekittey.github.io Manuel Rauber Cross-Platform Developer @ Thinktecture AG [email protected] @manuelrauber https://manuel-rauber.com Microsoft MVP 2

Slide 3

Slide 3 text

Who are you & what do you expect? 3

Slide 4

Slide 4 text

Agenda ● Web APIs ● Do it together: Your first Web API ● Demo ● Do it yourself: Fix the demo 4

Slide 5

Slide 5 text

Web APIs 5

Slide 6

Slide 6 text

Web APIs - Good old days ● Server-side rendered, static web pages ● Transmit the whole page with every click ● Much data, long loading times ● No offline possibility 6 Page Size EDGE max. 384 kBit/s UMTS max. 2 MBit/s LTE max. 100 MBit/s Google.de 500 kB 10 seconds 2 seconds ~0 seconds Twitter 2,5 MB 54 seconds 10 seconds ~0 seconds

Slide 7

Slide 7 text

Server-side rendering 7

Slide 8

Slide 8 text

8

Slide 9

Slide 9 text

Web APIs - Intro 9 ● Transfer data only (mostly JSON) ● Merge data into HTML on client ● Less response time ● Web server can handle more incoming requests

Slide 10

Slide 10 text

10 Web APIs - Overview

Slide 11

Slide 11 text

Web APIs - The Modern Way - REST API, HTTP API, whatever API - Model functional services with dedicated interface - Can use several other services for data aggregation - Secured by tokens - Consumable by every client which speaks HTTP(S) 11

Slide 12

Slide 12 text

Web APIs - Advantages ● Client can be deployed offline ○ Like Apps we use every single day ○ Single-Page-Applications (Angular 2, React) ● Only data is needed after initial loading ● Flexible hosting environments ○ Azure ○ Heroku ○ Digital Ocean 12

Slide 13

Slide 13 text

Web APIs - Basics ● HTTP verbs ○ GET: pull data from the web server ○ PUT: update data on the web server ○ POST: create data on the web server ○ DELETE: delete data on the web server ● HTTP web server ● Uniform Resource Locator (URL) That’s all we need. 13

Slide 14

Slide 14 text

Web APIs - Interface Example: https://localhost/api/blog/11 Our identifier for the data. GET gets the blog article with id 11 PUT updates the blog article with id 11 DELETE deletes the blog article with id 11 POST creates a blog article (in this case the web server creates the id) 14

Slide 15

Slide 15 text

More examples: ● GET /api/blog - gets all blog articles ● DELETE /api/user - deletes all users Possibility to define filters, orders, paging with query parameters: ● GET /api/blog?search=cat - get all blog articles with its content “cat” ● GET /api/blog?orderBy=date&direction=desc - get all blog articles ordered by date descending ● GET /api/blog?page=3 - gets the third page Web APIs - Interface 15

Slide 16

Slide 16 text

Web APIs - Node.js ● Server-side JavaScript powered by Chrome’s V8 JavaScript Engine ● Asynchronous, event-driven I/O API ● Node package manager for reusability ● Cross-platform: Mac OS X, Linux, Windows ● Enterprise proven: Paypal, Netflix, Groupon, Walmart, ... 16

Slide 17

Slide 17 text

Web APIs - Node.js - Features ● ECMAScript 6 ● Experimental ECMAScript 7 ● Classes ● Fat Arrow/Lambda Expressions ● Templated Strings 17

Slide 18

Slide 18 text

Web APIs - Restify ● Small Framework (similar to express) for building Web APIs ○ http://restify.com ● npm module: const restify = require('restify'); 18

Slide 19

Slide 19 text

Web APIs - Restify Server const server = restify.createServer( name: ‘myServer’ ); // For parsing the body automatically to a nice JSON object server.use(restify.bodyParser()); server.listen(1337, () => { console.log(`${server.name} is listening at ${server.url}`); }); 19

Slide 20

Slide 20 text

Web APIs - Restify Routing server.get('api/moo', (req, res) => { res.json(200, { message: 'success' }); }); server.post('api/moos', (req, res) => { if(req.body) { return res.json(200, { message: 'success' }); } res.json(404, { message: 'Empty body is not allowed.' }); }); 20

Slide 21

Slide 21 text

Web APIs - Cross-Origin Resource Sharing 21

Slide 22

Slide 22 text

Do it together Let’s define our own Web API 22

Slide 23

Slide 23 text

Demo 23

Slide 24

Slide 24 text

Do it yourself 24 http://bit.ly/nodejs-webapi-template https://github.com/hackerstolz/hackschool-nodejs-webapi/releases/tag/v1 Template on Shortlink

Slide 25

Slide 25 text

Thank you! 25

Slide 26

Slide 26 text

Resources 26 ● GitHub repo: https://github.com/hackerstolz/hackschool-nodejs-webapi/ ● Node.js: https://nodejs.org ● Restify: http://restify.com ● Web API basics: https://manuel-rauber.com/2016/03/07/node-js-asp-net-core-1-0-a-usage- comparison/ ● CORS: https://manuel-rauber.com/2016/03/29/node-js-asp-net-core-1-0-a-usage-comparison-part-4- cross-origin-resource-sharing/ ● Sample Web API - Star Wars: https://swapi.co/