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