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


Agenda

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


Overview


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


UX crosses service boundaries

• Control layer• State machine• Fluid performance


Unstoppable force vs. Immovable object


Harmonious Synchronicity


MVC for Control


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

concerns• Implements a control

layer


The MVC components• Models map to

microservices• Views are HTML and JS

rendered from dynamic pages

• Controllers manage state and routing/actions


MVC for Web Microservices• Cleanly adapts to

microservices• Many MVC options

available• Hardest part is control


Maintaining Session State


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

them appropriately


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


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


Routed


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


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


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


Conclusion


Questions?

building a web frontend with microservices and nginx plus

Technology