Node.js - Web APIs

Slides for the Hackerstolz Hackschool Karlsruhe Workshop. Contains basic information about Web APIs done with Node.js & restify.

GitHub: https://github.com/hackerstolz/hackschool-nodejs-webapi
Hackschool Karlsruhe: www.meetup.com/Hackschool-KA

Transcript

1. Node.js - Web APIs
   Martina Kraus, Manuel Rauber
   

   View Slide

2. Introduction
   Martina Kraus
   Passionate JavaScript Developer @Onwerk
   Lecturer HS Mannheim
   kraus.martina.m@googlemail.com
   @wing121
   http://codekittey.github.io
   Manuel Rauber
   Cross-Platform Developer @ Thinktecture AG
   manuel.rauber@thinktecture.com
   @manuelrauber
   https://manuel-rauber.com
   Microsoft MVP
   2
   

   View Slide

3. Who are you & what do you expect?
   3
   

   View Slide

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

   View Slide

5. Web APIs
   5
   

   View Slide

6. 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
   

   View Slide

7. Server-side rendering
   7
   

   View Slide

8. View Slide

9. 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
   

   View Slide

10. 10
    Web APIs - Overview
    

    View Slide

11. 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
    

    View Slide

12. 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
    

    View Slide

13. 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
    

    View Slide

14. 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
    

    View Slide

15. 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
    

    View Slide

16. 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
    

    View Slide

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

    View Slide

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

    View Slide

19. 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
    

    View Slide

20. 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
    

    View Slide

21. Web APIs - Cross-Origin Resource Sharing
    21
    

    View Slide

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

    View Slide

23. Demo
    23
    

    View Slide

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

    View Slide

25. Thank you!
    25
    

    View Slide

26. 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/
    

    View Slide