building a web frontend with microservices and nginx plus

Building a Web Frontend with Microservices and NGINX PlusWednesday March 2, 2016

MORE INFORMATION AT NGINX.COM

Christopher StetsonChief Architect,Professional Services NGINX

MORE INFORMATION AT NGINX.COM

Agenda

• Overview• MVC for control• Session state• Routing • Conclusion

MORE INFORMATION AT NGINX.COM

Overview

MORE INFORMATION AT NGINX.COM

Web apps are very complex• Client and display logic• JavaScript• Design and UX

JSP

s an

d S

ervl

ets

Aka

mai

Edg

e-C

achi

ng

eComm Associate

eCommCustomer

HTM

L5/C

SS

3

JQue

ry

Ang

ular

.JS

Brig

htC

ove

Pla

yer

Flui

d/R

espo

nsiv

e E

lem

ents

Internet

Sce

ne7

Imag

e S

erve

rB

right

Cov

e V

ideo

S

tream

ing

Util

ity J

S li

bs

eCom

m

plug

-ins

MORE INFORMATION AT NGINX.COM

UX crosses service boundaries

• Control layer• State machine• Fluid performance

MORE INFORMATION AT NGINX.COM

Unstoppable force vs. Immovable object

MORE INFORMATION AT NGINX.COM

Harmonious Synchronicity

MORE INFORMATION AT NGINX.COM

MVC for Control

MORE INFORMATION AT NGINX.COM

Model-View-Controller• Been around for a while• Very good for separating

concerns• Implements a control

layer

MORE INFORMATION AT NGINX.COM

The MVC components• Models map to

microservices• Views are HTML and JS

rendered from dynamic pages

• Controllers manage state and routing/actions

MORE INFORMATION AT NGINX.COM

MVC for Web Microservices• Cleanly adapts to

microservices• Many MVC options

available• Hardest part is control

MORE INFORMATION AT NGINX.COM

Maintaining Session State

MORE INFORMATION AT NGINX.COM

Not simple call and response• Complex interactions• Cross service boundaries• Tracking and handling

them appropriately

MORE INFORMATION AT NGINX.COM

Ephemeral is the way to go

• Web-scale requires your web app to be ephemeral

• The web app instance can appear and disappear on demand

• State cannot be maintained in memory on the instance

MORE INFORMATION AT NGINX.COM

Attached resources are the answer• Using an attached

resource like a Redis cache solves the problem

• Simple design, super fast, atomic transaction

• Instantiate with data from cache

MORE INFORMATION AT NGINX.COM

Routed

MORE INFORMATION AT NGINX.COM

Web apps are multi-layered• Logic (PHP)• Display (HTML/CSS)• Interactive Logic (JS)

JSP

s an

d S

ervl

ets

Aka

mai

Edg

e-C

achi

ng

eComm Associate

eCommCustomer

HTM

L5/C

SS

3

JQue

ry

Ang

ular

.JS

Brig

htC

ove

Pla

yer

Flui

d/R

espo

nsiv

e E

lem

ents

Internet

Sce

ne7

Imag

e S

erve

rB

right

Cov

e V

ideo

S

tream

ing

Util

ity J

S li

bs

eCom

m

plug

-ins

MORE INFORMATION AT NGINX.COM

PHP runs in context

• FPM• NGINX Plus• Load balancing to

services

location /uploader/image { # try to serve files directly, fallback to app.php proxy_set_header Host uploader.mesos.ps.nginxlab.com; proxy_pass http://uploader/image;}

location /uploader/album { proxy_set_header Host uploader.mesos.ps.nginxlab.com; proxy_pass http://uploader/album;}

location /account/users { proxy_set_header Host user-manager.mesos.ps.nginxlab.com; proxy_pass http://user_manager/v1/users;}

MORE INFORMATION AT NGINX.COM

JavaScript has limitations• Routes at the origin• Load balancing• Rate limits

MORE INFORMATION AT NGINX.COM

Conclusion

MORE INFORMATION AT NGINX.COM

Questions?