This slides are for meetup event from below link. https://www.meetup.com/ja-JP/CodeChrysalis/events/245248864/ This mainly explains how backend program works in general and I implemented sample project with express and sequelizejs that are nodejs modules and PostgreSQL for a database. You can see sample project (learning material of backend with JavaScript) from below github link. Repository for this slides: https://github.com/duyoji/creating_api_with_express_and_postgresql

1. Workshop’s repository: https://goo.gl/cjR7EL
Learn Backend JavaScript
Workshop with sample
repository.

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

3. 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.)

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

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

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

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

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

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

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

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

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

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

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’s create a API server together!!!
https://goo.gl/cjR7EL
Workshop time

22. 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.)