Modular Fronted Architecture With ROCA¶
About Me¶
Gaurav Sehrawat¶
Global Solutions Architect/Tech Lead @Verifone¶
🌎: Website: https://igauravsehrawat.com/¶
🧑💻Github: https://github.com/igauravsehrawat¶
🕊Twitter: https://twitter.com/Root3d¶
🤝 LinkedIn: https://linkedin.com/in/igauravsehrawat¶
Agenda¶
- What is Architecture And Why care for it?
- Different Frontend Architecture?
- Modular Vs Monolith Frontend?
- How to Integrate Modular Frontend?
- Client Side Integration
- Edge Side Integration (Cache/CDN)
- Server Side Integration
- Recap
- Questions?
In [ ]:
Talk is indepedent of framework, technology or tooling¶
Why This Talk?¶
- It's just a different paradigm to be aware of
- It won't solve all the problems you have
- But it might solve few
Why Do We Need A Good Architecture?¶
Problem statement?¶
We Need Speed¶
What All Can Be There?¶
Frontend Monolith¶
Frontend Self Contained Service¶
Frontend Modules/Micro¶
Why Modular?¶
- If multiple teams can work on same UI
- Can be broken down into concerning domain logic
- Change in domain can be implemented by modifying and deploying just one service
Which Architecture Is Better Suited For Frontend Integration?¶
Presenting You....¶
ROCA (Resource Oriented Client Architecture)¶
- Set of recommmendation for frontend modularization and integration
Benefits¶
- Loose coupling
- Logic and UI in one microservice/domain
- Free choice of frontend technology
Let's say you did the modularized your Frontend with¶
- Self Contained Services
- Micro-Frontend
- Or Anyhow 😄
How To Do Frontend Integration¶
- Client Side Integration
- Server Side Integraiton
Integration (Demo Time )¶
Links And Client Side Integration¶
- Case study of https://crimson-portal.herokuapp.com/ from INNOQ
- Credits INNOQ
Integration with Redirects¶
Show example for redirect
<a href="https://crimson-postbox.herokuapp.com/m50000/messages"
class="preview" data-preview="enabled"
data-preview-title="Notifications"
data-preview-selector="table.messages-overview"
data-preview-error-msg="Postbox unreachable!"
data-preview-count="tbody>tr" data-preview-window>Case study of https://crimson-portal.herokuapp.com/ from INNOQ
From common styleguide component
https://github.com/ewolff/crimson-styleguide/tree/master/components/preview
Render The Content Of The Link¶
$(document).ready(function() {
$("a.embeddable").each(function(i, link) {
$("<div />").load(link.href, function(data, status, xhr) {
$(link).replaceWith(this);
});
});
});Other Integration Method¶
Server Side Integration¶
Edge Side Includes - ESI¶
- It's a language https://www.w3.org/TR/esi-lang
- assemble resources in HTTP clients.
- CDN/Cache implements ESI
- improve end-user perceived performance, reduce processing overhead on the origin server, and enhanced availability
How Do We Implement?¶
Varnish¶
Varnish is mainly used for optimizing web servers:
- It intercepts the HTTP requests to web servers.
- Manipulate ESI
- It then caches the responses.
It forwards only those requests to the web servers that are not in the cache.
More About Varnish: https://book.varnish-software.com/4.0/chapters/Introduction.html
Sample ESI¶
<html>
<head>
...
<esi:include src="/common/header"></esi:include>
</head>
<body>
<div class="container">
<esi:include src="/common/navbar"></esi:include>
...
</div>
<esi:include src="/common/footer"></esi:include>
</body>
</html>In this example, the attempt is to fetch an ad. If the ad fetch fails, a static link will be included instead.¶
<esi:try>
<esi:attempt>
<esi:comment text="Include an ad"/>
<esi:include src="http://www.example.com/ad1.html"/>
</esi:attempt>
<esi:except>
<esi:comment text="Just write some HTML instead"/>
<a href=www.akamai.com>www.example.com</a>
</esi:except>
</esi:try>An Example Of Varnish Configuration¶
vcl 4.0;
backend default {
.host = "order";
.port = "8080";
}
backend common {
.host = "common";
.port = "8180";
}
sub vcl_recv vcl_recv {
if (req.url ~ "^/common") {
set req.backend_hint = common;
}
}
sub vcl_backend_response{
set beresp.do_esi = true;
set beresp.ttl = 30s;
set beresp.grace = 15m;
}Case Study example here: https://github.com/ewolff/SCS-ESI
- Credits Educative
Also Server Side Integration (SSI)¶
Zolando Architecture (Mosiac)¶
Tailor¶
Tailor is a layout service that brings microservices to the frontend by composing a website out of various Fragments (such as Header, Product, and Footer).
Tailor achieves impressive Time to First Byte, as it asynchronously fetches multiple fragments, assembles their response streams, and outputs the final response.
An example of SSI¶
# custom log format
log_format timed_combined '[$time_local] '
'"$request" $status $body_bytes_sent '
'"$http_referer" "$http_user_agent" '
'ReqTime: $request_time UpstreamTime: $upstream_response_time $pipe';
access_log /var/log/nginx/scs-commerce.dev.access.log timed_combined;
upstream landing-page {
server landing-page:3000;
}
upstream products {
server products:3001;
}
upstream order {
server order:3002;
}
upstream assets {
server assets:3003;
}
proxy_cache_path /tmp/nginx levels=1:2 keys_zone=my_zone:10m inactive=60m;
proxy_cache_key "$scheme$request_method$host$request_uri";
server {
listen 80;
server_name scs-commerce.dev;
ssi on;
ssi_silent_errors off;
# set $some_var "...";
location / {
proxy_pass http://landing-page/;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass_header Set-Cookie;
}
location /products/ {
proxy_pass http://products/;
proxy_redirect off;
proxy_set_header Host $host:$server_port$uri;
# proxy_cache my_zone;
# proxy_cache_valid 200 1M;
# proxy_ignore_headers Expires Cache-Control Set-Cookie;
# add_header X-Proxy-Cache $upstream_cache_status;
}
location /order/ {
proxy_pass http://order/;
proxy_redirect off;
proxy_set_header Host $host:$request_uri;
proxy_pass_header Cookie;
}
location /assets/ {
proxy_pass http://assets/;
proxy_redirect off;
proxy_set_header Host $host:$server_port$uri;
}
}Learn More about Mosaic¶
Benefits of ROCA¶
- Clean Architecture
- Browers optimization can be exploited
- HTTP GET can be cached
- Low Bandwith
- High speed
- High resilence
ROCA vs SPA
- SPA allows redudant logic on frontend
- SPA is better suited for complex UIs
ROCA is good frontend integration technique for microservices based architecture
Challenges¶
- UI Infrastructure
- Uniform look and feel
- Interfaces in Frontend Integration
- UI changes impact mutliple module
Again Why Do We Need A Good Architecture?¶
