Workshop’s repository: https://goo.gl/cjR7EL
Learn Backend JavaScript
Workshop with sample
repository.
Workshop’s repository: https://goo.gl/cjR7EL
About me
● Tsuyoshi Maeda
● A student of Code Chrysalis.
(Freelance engineer)
● I started programming at 21
years. (Junior university student.)
● What I like
○ Playing futsal (soccer)
○ Tsukemen (dipping noodles)
○ Watching video games on youtube
and Niconico.
Workshop’s repository: https://goo.gl/cjR7EL
After this meetup
● You will
○ Understand back-end programming with JavaScript.
○ Be able to set up back-end environment.
■ DB
■ Web Server
○ Create API server.
○ Be able to become a full-stack engineer. (If you are already familiar
with front-end JavaScript.)
Workshop’s repository: https://goo.gl/cjR7EL
Outline
● Advantages of JavaScript as a backend.
● Database with JavaScript
● Web server with JavaScript
● Create a API server together. (Workshop)
Today’s Repository: https://goo.gl/cjR7EL
Workshop’s repository: https://goo.gl/cjR7EL
Advantages of JavaScript as a backend.
● Don’t have to switch your brain between Front-end and Back-end.
● For web front engineers, They can start Back-end programming without
learning new programming language.
● Shortest way to become a full stack engineer. (Learning only one
programming language.)
Workshop’s repository: https://goo.gl/cjR7EL
Disadvantages of JavaScript as a backend.
● Many knowledge of back-end JavaScript are not matured compared to
other server side language.
○ NodeJS: 2009.
■ JavaScript was born on 1995 but it is not for server-side.
■ JavaScript for browser cannot handle server resources.)
○ Ruby on Rails: 2004. (Ruby: 1995)
○ PHP: 1995
■ Ruby and PHP are for server-side. (Then can handle server resources.)
● Tend to grow faster and come out new information.
○ It is hard to follow new knowledge.
Workshop’s repository: https://goo.gl/cjR7EL
Database with JavaScript
● Driver/Adapter
○ “pg “ for PostgreSQL
○ “mysql” for MySQL
○ “sqlite3” for SQLite3
● ORM (Object-relational mapping)
○ Sequelize (Most numerous of downloads and stars on Github.)
○ Bookshelf with knex (Second largest numerous of downloads and stars.)
○ https://npmcompare.com/compare/bookshelf,knex,objection,orm,sequelize
Workshop’s repository: https://goo.gl/cjR7EL
Driver/Adapter
Web Server DB
pg
mysql
sqlite3
driver/adapter
Return raw data
Communicate with DB like client
on shell.
Workshop’s repository: https://goo.gl/cjR7EL
ORM
Web
Server
DB
pg
mysql
sqlite3
connector/adapter
Return raw data
Communicate with DB like client
on shell.
ORM
● Return raw data
● Convert to data that
is easy to
manipulate.
Workshop’s repository: https://goo.gl/cjR7EL
ORM
● Instead of using raw SQL, ORM offers some methods that translate into
SQL.
○ e.g.) Code snippets of Sequelize to manipulate Todos table.
■ Todo.findAll({...}) => SELECT ...
■ Todo.create({...}) => INSERT ..., UPDATE ...
■ Todo.findAll({include: [{model: ‘User’}...]}) => Join
■ and so on …
● You don’t have to care about each dialect of DB.
● Just change adapter when you want to change DB.
Workshop’s repository: https://goo.gl/cjR7EL
Web server with JavaScript
● Express (Most popular node http framework and we will use this for
today’s workshop.)
○ Middlewares
○ Router
● Other JavaScript web frameworks
○ Socket.io
○ Hapi.js
○ Sails.js
Workshop’s repository: https://goo.gl/cjR7EL
Middleware
● Middleware converts request to what you can handle easily.
○ Check if user is logged in or not.
○ Log HTTP requests
○ Parse request body of Json to object of JavaScript.
● The Express middleware modules maintained by the Expressjs team.
○ https://expressjs.com/en/resources/middleware.html
Workshop’s repository: https://goo.gl/cjR7EL
Web Server
Middleware
DBClient
Middleware
process 1
process 2
...
process n-1
router
Connect to DB if a process has a code
that communicate with DB.
Request /api/data
Response /api/data
Workshop’s repository: https://goo.gl/cjR7EL
Middleware
● Example code of middleware
// req: Includes req object and can modify req object
// res: Includes res object
// next: callback function to call next middleware or router.
function(req, res, next) {
req.body = …; // You can add any properties
res.statusCode = …;
// If you want to stop this process, do not call `next` callback.
if( condition ) return false;
next();
}
Workshop’s repository: https://goo.gl/cjR7EL
● Router handle each request and direct the request to proper process.
○ GET /path/to/something
● You can map one URL to each HTTP methods.
○ “GET” for getting data.
○ “POST” for creating new data.
○ “PUT” for updating stored data.
○ “DELETE” for deleting stored data.
● CRUD
○ Create, Read, Update, Delete
Router
Workshop’s repository: https://goo.gl/cjR7EL
Web Server
Router
DBClient
Connect to DB if a process(controller)
has a code that communicate with DB.
Router
GET
POST
PUT
DELETE
Controller
fetchData
createData
updateData
deleteData
Request /api/data
Response /api/data
Mapping request to controller/handler by
HTTP methods.
Workshop’s repository: https://goo.gl/cjR7EL
Router, Controller
● Example code of router
const router = require('express').Router();
const controller = require('./api.controller');
router.route('/todos')
.get(controller.getTodos)
.post(controller.postTodo)
.put(controller.putTodo)
.delete(controller.deleteTodo);
● Example code of Controller
module.exports = {
getTodos(req, res) {...},
postTodos(req, res) {...},
putTodos(req, res) {...},
deleteTodos(req, res) {...}
};
Workshop’s repository: https://goo.gl/cjR7EL
Web Server
Middleware and Router
DB
Client
Router
GET
POST
PUT
DELETE
Controller
fetchData
createData
updateData
deleteData
Request:
GET /api/data
Response:
GET /api/data
Middleware
process 1
process 2
...
Workshop’s repository: https://goo.gl/cjR7EL
DB
Web Server
Client
Router
GET
POST
PUT
DELETE
Controller
fetchData
createDat
a
updateDat
a
deleteDat
a
Middleware
process 1
process 2
...
pg
mysql
sqlite3
ORM
ORM, Middleware and Router
Workshop’s repository: https://goo.gl/cjR7EL
● DB
○ What is a driver/adapter?
○ What is a ORM?
● Web server
○ What is a middleware?
○ What is a router?
○ When user request to server, how does the data flow works?
Recap
Workshop’s repository: https://goo.gl/cjR7EL
Let’s create a API server together!!!
https://goo.gl/cjR7EL
Workshop time
Workshop’s repository: https://goo.gl/cjR7EL
My contacts
● Twitter: @duyoji
● Github: duyoji
● Blog
○ http://duyoji.hatenablog.com/ (Written in Japanese and not only Tech blog.)
○ http://tsuyoshi-maeda.hatenablog.com/ (Written in English and only Tech blog.)

Learn backend java script

  • 1.
    Workshop’s repository: https://goo.gl/cjR7EL LearnBackend JavaScript Workshop with sample repository.
  • 2.
    Workshop’s repository: https://goo.gl/cjR7EL Aboutme ● Tsuyoshi Maeda ● A student of Code Chrysalis. (Freelance engineer) ● I started programming at 21 years. (Junior university student.) ● What I like ○ Playing futsal (soccer) ○ Tsukemen (dipping noodles) ○ Watching video games on youtube and Niconico.
  • 3.
    Workshop’s repository: https://goo.gl/cjR7EL Afterthis meetup ● You will ○ Understand back-end programming with JavaScript. ○ Be able to set up back-end environment. ■ DB ■ Web Server ○ Create API server. ○ Be able to become a full-stack engineer. (If you are already familiar with front-end JavaScript.)
  • 4.
    Workshop’s repository: https://goo.gl/cjR7EL Outline ●Advantages of JavaScript as a backend. ● Database with JavaScript ● Web server with JavaScript ● Create a API server together. (Workshop) Today’s Repository: https://goo.gl/cjR7EL
  • 5.
    Workshop’s repository: https://goo.gl/cjR7EL Advantagesof JavaScript as a backend. ● Don’t have to switch your brain between Front-end and Back-end. ● For web front engineers, They can start Back-end programming without learning new programming language. ● Shortest way to become a full stack engineer. (Learning only one programming language.)
  • 6.
    Workshop’s repository: https://goo.gl/cjR7EL Disadvantagesof JavaScript as a backend. ● Many knowledge of back-end JavaScript are not matured compared to other server side language. ○ NodeJS: 2009. ■ JavaScript was born on 1995 but it is not for server-side. ■ JavaScript for browser cannot handle server resources.) ○ Ruby on Rails: 2004. (Ruby: 1995) ○ PHP: 1995 ■ Ruby and PHP are for server-side. (Then can handle server resources.) ● Tend to grow faster and come out new information. ○ It is hard to follow new knowledge.
  • 7.
    Workshop’s repository: https://goo.gl/cjR7EL Databasewith JavaScript ● Driver/Adapter ○ “pg “ for PostgreSQL ○ “mysql” for MySQL ○ “sqlite3” for SQLite3 ● ORM (Object-relational mapping) ○ Sequelize (Most numerous of downloads and stars on Github.) ○ Bookshelf with knex (Second largest numerous of downloads and stars.) ○ https://npmcompare.com/compare/bookshelf,knex,objection,orm,sequelize
  • 8.
    Workshop’s repository: https://goo.gl/cjR7EL Driver/Adapter WebServer DB pg mysql sqlite3 driver/adapter Return raw data Communicate with DB like client on shell.
  • 9.
    Workshop’s repository: https://goo.gl/cjR7EL ORM Web Server DB pg mysql sqlite3 connector/adapter Returnraw data Communicate with DB like client on shell. ORM ● Return raw data ● Convert to data that is easy to manipulate.
  • 10.
    Workshop’s repository: https://goo.gl/cjR7EL ORM ●Instead of using raw SQL, ORM offers some methods that translate into SQL. ○ e.g.) Code snippets of Sequelize to manipulate Todos table. ■ Todo.findAll({...}) => SELECT ... ■ Todo.create({...}) => INSERT ..., UPDATE ... ■ Todo.findAll({include: [{model: ‘User’}...]}) => Join ■ and so on … ● You don’t have to care about each dialect of DB. ● Just change adapter when you want to change DB.
  • 11.
    Workshop’s repository: https://goo.gl/cjR7EL Webserver with JavaScript ● Express (Most popular node http framework and we will use this for today’s workshop.) ○ Middlewares ○ Router ● Other JavaScript web frameworks ○ Socket.io ○ Hapi.js ○ Sails.js
  • 12.
    Workshop’s repository: https://goo.gl/cjR7EL Middleware ●Middleware converts request to what you can handle easily. ○ Check if user is logged in or not. ○ Log HTTP requests ○ Parse request body of Json to object of JavaScript. ● The Express middleware modules maintained by the Expressjs team. ○ https://expressjs.com/en/resources/middleware.html
  • 13.
    Workshop’s repository: https://goo.gl/cjR7EL WebServer Middleware DBClient Middleware process 1 process 2 ... process n-1 router Connect to DB if a process has a code that communicate with DB. Request /api/data Response /api/data
  • 14.
    Workshop’s repository: https://goo.gl/cjR7EL Middleware ●Example code of middleware // req: Includes req object and can modify req object // res: Includes res object // next: callback function to call next middleware or router. function(req, res, next) { req.body = …; // You can add any properties res.statusCode = …; // If you want to stop this process, do not call `next` callback. if( condition ) return false; next(); }
  • 15.
    Workshop’s repository: https://goo.gl/cjR7EL ●Router handle each request and direct the request to proper process. ○ GET /path/to/something ● You can map one URL to each HTTP methods. ○ “GET” for getting data. ○ “POST” for creating new data. ○ “PUT” for updating stored data. ○ “DELETE” for deleting stored data. ● CRUD ○ Create, Read, Update, Delete Router
  • 16.
    Workshop’s repository: https://goo.gl/cjR7EL WebServer Router DBClient Connect to DB if a process(controller) has a code that communicate with DB. Router GET POST PUT DELETE Controller fetchData createData updateData deleteData Request /api/data Response /api/data Mapping request to controller/handler by HTTP methods.
  • 17.
    Workshop’s repository: https://goo.gl/cjR7EL Router,Controller ● Example code of router const router = require('express').Router(); const controller = require('./api.controller'); router.route('/todos') .get(controller.getTodos) .post(controller.postTodo) .put(controller.putTodo) .delete(controller.deleteTodo); ● Example code of Controller module.exports = { getTodos(req, res) {...}, postTodos(req, res) {...}, putTodos(req, res) {...}, deleteTodos(req, res) {...} };
  • 18.
    Workshop’s repository: https://goo.gl/cjR7EL WebServer Middleware and Router DB Client Router GET POST PUT DELETE Controller fetchData createData updateData deleteData Request: GET /api/data Response: GET /api/data Middleware process 1 process 2 ...
  • 19.
    Workshop’s repository: https://goo.gl/cjR7EL DB WebServer Client Router GET POST PUT DELETE Controller fetchData createDat a updateDat a deleteDat a Middleware process 1 process 2 ... pg mysql sqlite3 ORM ORM, Middleware and Router
  • 20.
    Workshop’s repository: https://goo.gl/cjR7EL ●DB ○ What is a driver/adapter? ○ What is a ORM? ● Web server ○ What is a middleware? ○ What is a router? ○ When user request to server, how does the data flow works? Recap
  • 21.
    Workshop’s repository: https://goo.gl/cjR7EL Let’screate a API server together!!! https://goo.gl/cjR7EL Workshop time
  • 22.
    Workshop’s repository: https://goo.gl/cjR7EL Mycontacts ● Twitter: @duyoji ● Github: duyoji ● Blog ○ http://duyoji.hatenablog.com/ (Written in Japanese and not only Tech blog.) ○ http://tsuyoshi-maeda.hatenablog.com/ (Written in English and only Tech blog.)