slides.md

title: Better APIs and smarter AIs output: index.html theme: theme controls: false logo: theme/logo.png

--

Better APIs and smarter AIs

YYCJS summer finale

-- sponsors

Our Sponsors

--

How it all began...

--

This year

• 9 years of JavaScript
• React in the real world
• Modular JavaScript & ArangoDB
• Ruby vs. JS - Building an API and making it real-time
• The perfect JavaScript project
• Learning JavaScript
• HTML500
• Back to the future

--

Brought to you by

-- presenter

Cory Smith

• corymsmith
• @smixx

-- presenter

Eric Kryski

• ekryski
• @ekryski
• erickryski.com

-- presenter

David Luecke

• daffl
• @daffl

-- presenter

SAM

• daffl/samjs.ai

-- centered

Built with...

BrainJS

node-natural

--

Express

// npm install express body-parser
var express = require('express');
var bodyParser = require('body-parser');

var app = express()
  .use(bodyParser.json())
  .use('/', express.static(__dirname))
  .post('/todos', function(req, res, next) {
    var todo = req.body;
    res.json(todo);
  });

app.listen(8080);

--

Feathers Services

var feathers = require('feathers');
var bodyParser = require('body-parser');

var app = feathers()
  .use(bodyParser.json())
  .use('/', feathers.static(__dirname))
  .configure(feathers.rest())
  .configure(feathers.socketio())
  .use('/todos', {
    find: function(params, callback) {},
    get: function(id, params, callback) {},
    create: function(data, params, callback) {},
    update: function(id, data, params, callback) {},
    patch: function(id, data, params, callback) {},
    remove: function(id, params, callback) {}
  });

app.listen(8080);

--

A MongoDB REST and real-time API

10 lines, no generators, no magic

// npm install feathers feathers-mongodb body-parser
var feathers = require('feathers');
var bodyParser = require('body-parser');
var mongodb = require('feathers-mongodb');

var app = feathers()
  .configure(feathers.rest())
  .configure(feathers.socketio())
  .use(bodyParser.json())
  .use(feathers.static(__dirname))
  .use('/todos', mongodb({
    collection: 'todos'
  }));

app.listen(8080);

app.service('todos').create({
  text: 'A Todo created on the server'
  complete: false
});

--

Client use

feathers-client is a JavaScript client that connects to REST or real-time Feathers services. Use it on other NodeJS servers, with libraries like jQuery or client side frameworks like React, Angular or CanJS:

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="socket.io/socket.io.js"></script>
<script src="node_modules/feathers-client/dist/feathers.js"></script>
<script type="text/javascript">
  var socket = io();
  var app = feathers().configure(feathers.socketio(socket));
  var todos = app.service('todos');

  todos.on('created', function(todo) {
    console.log('New Todo created: ' + todo.text);
  });

  todos.create({
    text: 'Todo created on the client',
    complete: false
  });
</script>

-- centered

Real-time proxy for existing APIs

--

Demo: React real-time Todos

--

Demo: Android and iOS real-time Todos

--

Demo: A voice controlled shopping list

--

Programming the future

-- centered

--

COBOL (1959)

DISPLAY "Enter First Number      : " WITH NO ADVANCING
ACCEPT Num1
DISPLAY "Enter Second Number     : " WITH NO ADVANCING
ACCEPT Num2
DISPLAY "Enter operator (+ or *) : " WITH NO ADVANCING
ACCEPT Operator
IF Operator = "+" THEN
  ADD Num1, Num2 GIVING Result
END-IF
IF Operator = "*" THEN
  MULTIPLY Num1 BY Num2 GIVING Result
END-IF
DISPLAY "Result is = ", Result

--

JavaScript/ES6 (2015)

import readline from 'readline';

const rl = readline.createInterface({
  input: process.stdin, output: process.stdout
});

rl.question("Enter First Number", num1 => {
  num1 = parseInt(num1, 10);
  rl.question("Enter Second Number", num2 => {
    num2 = parseInt(num2, 10);
    rl.question("Enter Operator (+ or *)", operator => {
      let result = -1;

      if(operator === '*') {
        result = num1 * num2;
      } else if(operator === '+') {
        result = num1 + num2;
      }

      console.log('Result is = ' + result);
      rl.close();
    });
  });
});

--

More teaching. Less coding.