TheCodingMachine

Web Architecture
basics & API
[NOOBS 2023 #2]
Thibault Balmette
Web architecture basics
From client request to server response
 SUMMARY

01 02 03
DNS TCP HTTP
Resolution Protocol Protocol

04 05
Server Technologies
treatment
01
DNS
RESOLUTION
01 DNS Resolution 02 03 04 05

DOMAIN NAME SYSTEM

● Translates domain names to the

numerical IP addresses
● Designed for humans
● www.thecodingmachine.com is a
domain name
01 DNS Resolution 02 03 04 05

FROM CLIENT REQUEST TO SERVER RESPONSE

www.thecodingmachine.com Root DNS DNS Server

/etc/hosts in charge of “.com”
Server (ISP)

DNS Server in charge of

thecodingmachine.com
The Client
your computer
02
TCP
PROTOCOL
01 02 TCP PROTOCOL 03 04 05

THE BASICS OF HTTP AND THE WEB

3 ways handshake
03
HTTP
PROTOCOL
01 02 03 HTTP PROTOCOL 04 05

WEB COMMUNICATION

Extension of the TCP protocol

[Cmd] [URL] [Version]

HEADERS
Body

CLIENT SERVER
Your browser

Status
HEADERS
Body
01 02 03 HTTP PROTOCOL 04 05

REQUEST / RESPONSE EXAMPLE

General information
(URL, method, status…)

Response headers

Request headers

Always keep your “Network” tab open when you are working!
(and don’t forget to filter your XHR requests for example)
01 02 03 HTTP PROTOCOL 04 05

THE METHODS

GET / PUT / DELETE / POST

•GET :
Used to get data
The parameters are directly encoded in the URL

•POST / PUT / DELETE

Used to submit data
The parameters are in the body of the request
If the HTTPS protocol is used, the body and the header are encrypted
04
SERVER
TREATMENT
01 02 03 04 SERVER
TREATMENT
05

CONNECTION TO THE DATABASE & SESSION MANAGEMENT

Session

APACHE PHP
(example)

Database
05
TECHNOLOGIES
01 02 03 04 05 TECHNOLOGIES

COMMON WEB TECHNOLOGIES USED AT TCM

HTML Apache + PHP (Symfony, Laravel…)

Less
Bootstrap CSS NodeJS (Express, NestJS…)
Sass

Front-end (Client) Back-end (Server)

MySQL RabbitMQ / SQS

jQuery React / Next.js
MongoDB SocketIO
JS
VueJS / NuxtJS Angular Elasticsearch Mailer …

DB Others

Exercice: describe the architecture of your project

01 02 03 04 05 SUM UP

SUM UP

DNS

CLIENT

SERVER
API
Integration architecture
 SUMMARY

01 02 03
API REST - Web GraphQL
service

04 05 06 07
OAUTH2 POSTMAN PHP - VCR Asynchronous
tasks
01
API
01 API 02 03 04 05 06 07

APPLICATION PROGRAMMING INTERFACE

Standardized set of classes, methods or functions that serves a front through which software offers
services to other software.

It is offered by:

● A software library (for example the Geolocation API in JavaScript exposed by

your browser)
● A web service (what interests us here)

It is (usually) bundled with a description (documentation) which specifies how

consumer programs can make use of the functionality of the supplier program.
01 API 02 03 04 05 06 07

APPLICATION PROGRAMMING INTERFACE

ABC Salles example

MEDIA
FRONT media.abcsalles.com
abcsalles.com

ADMIN API MySQL Elasticsearch

admin.abcsalles.com api.abcsalles.com

MongoDB RabbitMQ …
MOBILE
02
REST
Web service
01 02 RESTFUL API
03 04 05 06 07

DEFINITION

It’s a type of architecture/protocol that uses HTTP and mainly the JSON (or XML) format.

It respects the following constraints:

● Client-Server : The two are separate and can evolve independently.

● Stateless : Each request must contain all the information necessary to
allow the server to understand the request
● Caching possible
● Hierarchical layer system : the application states are identified by
individual resources
● Code on demand (optional)
● Uniform interface : resource identification (URI), resource
manipulation, ...
01 02 RESTFUL API –
Manage resources
03 04 05 06 07

URL GET PUT POST DELETE

Collections: Replace an entire Add an object to the Delete the entire

List objects
http://api.website.com/x.x/object collection by another collection collection

Return the Update the object or Add an element in a

Object:
representation create it if it does not sub collection of an Delete the object
http://api.website.com/x.x/object/12
of an object exist object (rare)

The goal of a “RESTful API” is to contain the maximum of meaning without needing a
specific (and external) documentation

Exercice: what is the

purpose of this call?
01 02 RESTFUL API –
Exercice
03 04 05 06 07

EXERCICE : WHAT IS WRONG WITH THESE METHODS?

1 2

3 4
01 02 RESTFUL API
03 04 05 06 07

RETURNED CODES ARE IMPORTANT

• 2XX : Success • 3XX : Redirection

o 200 : OK • 4XX : Client Error
o 201 : Created o 400 : Bad Request
• 5XX : Server Error o 401 : Unauthorized
o 500 : Internal Error o 403 : Forbidden
o 501 : Not Implemented o 404 : Not found
o 503 : Service Unavailable o 409 : Conflict

AS WELL AS THE HEADERS SENT

• Content-Type : application/json
• Authorization : Bearer 0b79bab50daca910b000d4f1a2b675d604257e42
01 02 WS-* 03 04 05 06 07

SOAP Web Service

● These web services expose the same functionalities in the form of remotely executable services.

● Their specifications are based on SOAP and WSDL standards.

SOAP WSDL
• Object oriented RCP (Remote Procecedure • Web Services Description Language is an
Call) protocol, build on XML XML grammar used to describe a web
• Transmission of messages between services. It contains the definition of objects
remote objects, allows an object to invoke (classes) and methods.
methods of objects physically located on
another server
01 02 WS-* 03 04 05 06 07

Example of a SOAP Web Service using PHP

01 02 REST > WS-* 03 04 05 06 07

ADVANTAGES AND DISADVANTAGES OF THE REST PROTOCOL

• The application is easier to maintain because the • The client must locally store all the data
client and the server are independent necessary for the smooth running of the
• Lack of client state management on the server application
o No permanent connection • Higher bandwidth consumption
o Distribution of requests on several servers
• Allows caching
• Use of HTTP (header, descriptive return code)
• Universal Element Identification System (URI)
03
GRAPHQL
01 02 03 GraphQL
04 05 06 07

GRAPHQL IS A PROTOCOL

It is not :

● A new trendy database

● A database query language such as SQL

GraphQL is a challenger for these other protocols :

● REST
● SOAP/WSDL based web services

It is developed by Facebook and was used for the first time in the Facebook API

GraphQL is strongly typed

01 02 03 GraphQL
04 05 06 07

WHAT PROBLEM DOES GRAPHQL SOLVE ?

Your API changes often

You are developing a new feature but your API does not exactly meet your needs.

For example: you are developing a marketplace. You need a page to display a product, as
well as company information.

REST (under fetching)

/api/product/42 /api/company/35
01 02 03 GraphQL
04 05 06 07

AN ALTERNATIVE (STILL REST)

/api/product/42 (over fetching)

01 02 03 GraphQL
04 05 06 07

ANOTHER ALTERNATIVE (STILL REST)

/api/product/42?with_company=true Flags hell 😨!

Probably one flag by API consumer
01 02 03 GraphQL
04 05 06 07

The client requests the list of fields they want

GET /graphql?query= single endpoint

the name of the query is “product”

lists of fields requested

01 02 03 GraphQL
04 05 06 07

● Another possible query on the same "query" with a different set of fields

GET /graphql?query=

No need to change the server side code!

All data is in one API call!

● GraphQL can also make mutations (to change the state of the DB)
Cf. GraphQLite presentation!
https://drive.google.com/open?id=0B33pp5vqFdJhN3hJQmxZZDZwX00
04
OAUTH2
01 02 03 04 OAUTH2
05 06 07

ABSTRACT PROTOCOL FLOW

1. Authorization Request
USER
2. Authorization Grant
(Resource Owner)

APPLICATION 3. Authorization Grant

(Client) Authorization
4. Access Token Server

5. Access Token
Resource
6. Protected Resource Server
05
POSTMAN
01 02 03 04 05 POSTMAN 06 07

Postman is a software that can be used to test API

(especially REST but also GraphQL). It is very easy to use.
06
PHP - VCR
01 02 03 04 05 06 PHP - VCR 07

THE NEED

● My project interfaces with third-party systems

API calls
WS calls
…
● I need a stable environment to test

And

● I always need to get the same results when I request for my integration tests

But …

I don't have control over the API

01 02 03 04 05 06 PHP - VCR 07

POSSIBLE SOLUTION :

Create an API “mock”

TOO LONG!
01 02 03 04 05 06 PHP - VCR 07

THE SOLUTION

PHP-VCR!

A PHP package that we install in the project.

composer require --dev phpvcr/phpvcr

PHP-VCR records the requests made, and is able to replay them.

GitHub : https://github.com/php-vcr/php-vcr
01 02 03 04 05 06 PHP - VCR 07

IN PRACTICE : 1ST RUN

Performs a query to Ok then, let’s perform

http://foo.com/bar?baz=42 the request

PHP-VCR
My PHP
foo.com
code
Do I have this request
in my « cassette »? No!

Note: PHP-VCR can « hijack » any call that uses curl, http sockets or SoapClient!
01 02 03 04 05 06 PHP - VCR 07

IN PRACTICE : 1ST RUN

PHP-VCR
Returns the response Let’s get the response
My PHP
foo.com
code
Store the response
in the cassette
01 02 03 04 05 06 PHP - VCR 07

IN PRACTICE : 2ST RUN

Performs a query to
http://foo.com/bar?baz=42

PHP-VCR
Returns the response
My PHP
foo.com
code
Do I have this request
in my « cassette »? Yes!
01 02 03 04 05 06 PHP - VCR 07

USAGE

Start PHP-VCR:

Stop PHP-VCR (write the cassette):

07
ASYNCHRONOUS
TASKS
01 02 03 04 05 06 07 ASYNCHRONOUS
TASKS

BATCH
● Script allowing to carry out important / expensive treatments
○ Importing data
○ Updating data across the whole database
● Planning with CRON
● PHP : Symfony Console / Mouf Console and different configuration (php.ini)

WARNING
● VOLUMETRY
● MEMORY CONSUMPTION / RUN TIME
● RESUME ON ERROR
● REPORTING OF EACH COMMAND
01 02 03 04 05 06 07 ASYNCHRONOUS
TASKS

RABBITMQ

RabbitMQ is a message broker based on the AMQP standard in order to communicate with different
customers.

It allows for example to:

● Deport the execution of a task asynchronously (ex: send mail, upload file,
delete cache...)
● Perform a task in several specific services (Publish/Subscribe)
● Manage errors and downtime

When working with AWS stack: SQS (Simple Queue Service)

01 02 03 04 05 06 07 ASYNCHRONOUS
TASKS

Work queue: Publish/Subscribe:

amq.gen-RQ6…
C1
C1
P
C2 P X
C2

Routing: amqp.gen-S9b…
amq.gen-As8…

type=direct
r C1
erro
P : Producer
P X info amq.gen-Ag1… C : Consumer
er
wa ror
rnin X : Exchange
g C2
01 02 03 04 05 06 07 ASYNCHRONOUS
TASKS

RABBITMQ: THE MANAGEMENT INTERFACE

01 02 03 04 05 06 07 SUM UP

SUM UP

● There isn’t a typical web architecture, each application has its own requirements and its own
specificities

● APIs are the core of any application (especially the growing ones) : REST is the most common one.
More modern protocols exist : GraphQL, gRPC…

● Many tools exist to ease the development of web services

● In order to handle heavy treatments asynchronously, a queue service (RabbitMQ/SQS) can be set up

At TCM, we work with every technology described in this presentation (and many others !)
Thank you!
Any questions?

Thibault Balmette
[email protected]

[email protected]
www.thecodingmachine.com

TheCodingMachine
56 rue de Londres - 75008 - Paris
 56 rue de Londres 35 Rue de Marseille
75008 Paris 69007 LYON

20/F, Tower 535 Rua da Palma, 219, 3ºEsq

Causeway Bay, Hong Kong 1100-391 Lisboa
Spécialisée depuis 2005 dans le développement Open Source, nous assurons l’ensemble des
projets qui sont au cœur de votre stratégie digitale.

Nous intervenons depuis la mise en place jusqu’à la livraison (et même au-delà)
en nous adaptant à vos besoins que ce soit en mode Agile ou au Forfait.