The DevOps way
Deploy Frontend Service with Ease

Kevin C Chen @ 2018 July Hack Day

API Clients

Frontend

Monolith Server

REST API

Web App Clients

Shipping the monolith

Common Business Logic

Challenging to test and deploy

API Clients

Frontend

Web App Clients

Shipping the frontend + µ-services

+ µ-services

Are we ready for it?

Ship frontend service independently
with ease

Goal

Web App 1

Dependencies

Container 1

Content Server

Multi-Container Frontend Service

BFF

Dependencies

Container

Dependencies

Container

Node.js Server

Multi-Container Frontend Service

GraphQL Server

Dependencies

Container

Dependencies

Container

Content Server

 Frontend Service

BFF

Data

JSON

Backend Services

Static UI

HTML

API Clients

Data

JSON

Data

JSON

BFF

BFF

Content Server

µ-services

Content Server

Multi-Container Frontend Service

BFF

Dependencies

Container 1

Dependencies

Container 2

Data

JSON

Multi-Container Backend Services

Static UI

HTML

API Clients

Data

JSON

Data

JSON

• (UX) Research
  • ​enable rapid prototyping to get user feedback
     
• (DevOps) Development experience
  • ​support live coding with fast feedback
     
• (DevOps) Deployment experience
  • ultimately allow us to experiment on production like environment

With just a few commands...

Deployment
Automation

Benefits

Enable low-risk releases

Reduce Deployment Lead Time

Enable Continuous Deployment

Benefits

Allow us to collect early feedback from customer at design phase, and deliver value to them quickly at release

Questions

?

Appendicies

API Clients

Frontend

Web App Clients

Shipping the µ-services

+ µ-services

µ-service B

µ-service A

µ-service D

µ-service E

µ-service C

Web App 1

Multi-Container Service 1

Prototyping
Dev + Test

JSON Server

Dependencies

Container 1

Dependencies

Container 2

Mock
Data

Web App 2

Multi-Container Service 2

Prototyping
Dev + Test

Hapi Node.js Server

Dependencies

Container 3

Dependencies

Container 4

Mock
Data

Frontend Services