Watch the webinar on demand at: nginx.com/resources/webinars/web-microservice-controlled-stateless-and-connected While many articles and books have been written about service design, there is a scarcity of information about how to integrate rich, user-experience-based web development onto a microservice-based application. In many respects the web frontend is the most complex part of the application, but it needs to scale and interface with your system just like any other microservice. The question is, how will your frontend system access your backend microservices? What will you do to make the frontend as stateless and ephemeral as the rest of your microservices? How will you provide your JavaScript application components with access to your microservices? Watch this webinar to learn how to: * Build your frontend using Model-View-Controller frameworks * Implement session state as a cached component in an attached resource * Use NGINX Plus routing and load balancing to give JavaScript access to microservices

1. Building a Web Frontend
with Microservices and
NGINX Plus
Wednesday March 2, 2016

2. MORE INFORMATION AT
NGINX.COM
Christopher
Stetson
Chief Architect,
Professional Services
NGINX

3. MORE INFORMATION AT
NGINX.COM
Agenda
• Overview
• MVC for control
• Session state
• Routing
• Conclusion

4. MORE INFORMATION AT
NGINX.COM
Overview

5. MORE INFORMATION AT
NGINX.COM
Web apps are
very complex
• Client and display logic
• JavaScript
• Design and UX
JSPsandServlets
AkamaiEdge-Caching
eComm
Associate
eComm
Customer
HTML5/CSS3
JQuery
Angular.JS
BrightCovePlayerFluid/ResponsiveElements
Internet
Scene7Image
Server
BrightCoveVideo
Streaming
UtilityJSlibs
eComm
plug-ins

6. MORE INFORMATION AT
NGINX.COM
UX crosses service boundaries
• Control layer
• State machine
• Fluid performance

7. MORE INFORMATION AT
NGINX.COM
Unstoppable force vs. Immovable object

8. MORE INFORMATION AT
NGINX.COM
Harmonious Synchronicity

9. MORE INFORMATION AT
NGINX.COM
MVC for Control

10. MORE INFORMATION AT
NGINX.COM
Model-View-
Controller
• Been around for a while
• Very good for separating
concerns
• Implements a control
layer

11. 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

12. MORE INFORMATION AT
NGINX.COM
MVC for Web
Microservices
• Cleanly adapts to
microservices
• Many MVC options
available
• Hardest part is control

13. MORE INFORMATION AT
NGINX.COM
Maintaining
Session State

14. MORE INFORMATION AT
NGINX.COM
Not simple call
and response
• Complex interactions
• Cross service boundaries
• Tracking and handling
them appropriately

15. 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

16. 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

17. MORE INFORMATION AT
NGINX.COM
Routed

18. MORE INFORMATION AT
NGINX.COM
Web apps are
multi-layered
• Logic (PHP)
• Display (HTML/CSS)
• Interactive Logic (JS)
JSPsandServlets
AkamaiEdge-Caching
eComm
Associate
eComm
Customer
HTML5/CSS3
JQuery
Angular.JS
BrightCovePlayerFluid/ResponsiveElements
Internet
Scene7Image
Server
BrightCoveVideo
Streaming
UtilityJSlibs
eComm
plug-ins

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

20. MORE INFORMATION AT
NGINX.COM
JavaScript has
limitations
• Routes at the origin
• Load balancing
• Rate limits

21. MORE INFORMATION AT
NGINX.COM
Conclusion

22. MORE INFORMATION AT
NGINX.COM
Questions?