![Page 1: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/1.jpg)
Building a Web Frontend with Microservices and NGINX PlusWednesday March 2, 2016
![Page 2: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/2.jpg)
MORE INFORMATION AT NGINX.COM
Christopher StetsonChief Architect,Professional Services NGINX
![Page 3: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/3.jpg)
MORE INFORMATION AT NGINX.COM
Agenda
• Overview• MVC for control• Session state• Routing • Conclusion
![Page 4: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/4.jpg)
MORE INFORMATION AT NGINX.COM
Overview
![Page 5: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/5.jpg)
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
![Page 6: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/6.jpg)
MORE INFORMATION AT NGINX.COM
UX crosses service boundaries
• Control layer• State machine• Fluid performance
![Page 7: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/7.jpg)
MORE INFORMATION AT NGINX.COM
Unstoppable force vs. Immovable object
![Page 8: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/8.jpg)
MORE INFORMATION AT NGINX.COM
Harmonious Synchronicity
![Page 9: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/9.jpg)
MORE INFORMATION AT NGINX.COM
MVC for Control
![Page 10: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/10.jpg)
MORE INFORMATION AT NGINX.COM
Model-View-Controller• Been around for a while• Very good for separating
concerns• Implements a control
layer
![Page 11: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/11.jpg)
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
![Page 12: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/12.jpg)
MORE INFORMATION AT NGINX.COM
MVC for Web Microservices• Cleanly adapts to
microservices• Many MVC options
available• Hardest part is control
![Page 13: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/13.jpg)
MORE INFORMATION AT NGINX.COM
Maintaining Session State
![Page 14: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/14.jpg)
MORE INFORMATION AT NGINX.COM
Not simple call and response• Complex interactions• Cross service boundaries• Tracking and handling
them appropriately
![Page 15: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/15.jpg)
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
![Page 16: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/16.jpg)
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
![Page 17: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/17.jpg)
MORE INFORMATION AT NGINX.COM
Routed
![Page 18: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/18.jpg)
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
![Page 19: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/19.jpg)
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;}
![Page 20: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/20.jpg)
MORE INFORMATION AT NGINX.COM
JavaScript has limitations• Routes at the origin• Load balancing• Rate limits
![Page 21: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/21.jpg)
MORE INFORMATION AT NGINX.COM
Conclusion
![Page 22: Building a Web Frontend with Microservices and NGINX Plus](https://reader036.vdocument.in/reader036/viewer/2022062523/586f733a1a28ab10258b56bf/html5/thumbnails/22.jpg)
MORE INFORMATION AT NGINX.COM
Questions?