Server-side rendered micro-frontends

on AWS Lambda

Context is important

Server-side rendered micro-frontends

onon AWS Lambda

unsplash-logo Alex Iby
Rob Agnes
Vitali John

Server-side rendered micro-frontends

on AWS Lambda


                            <!DOCTYPE html>
                            <html lang="en">
                            <head>
                                <meta charset="UTF-8">
                                <title>Document</title>
                            </head>
                            <body>
                                <div data-ng-app="angular.Module"></div>
                            </body>
                            </html>

SPA - more problems:

  • How to earn money?
  • Google: 5 honorable jobs
  • Bing:

Back to the SERVER!

SSR

  1. Common part, e.g. React component: 
    
                            export default () => {
                                const [random, setRandom] = useState(Math.random().toString());
                                useEffect(() => {
                                    let interval: number | undefined;
                                    interval = window.setInterval(() => {
                                        setRandom(Math.random().toString());
                                    }, 1000);
                                    return () => window.clearInterval(interval);
                                });
                                return <h1>Hello {random}! Nice SSR we got here!</h1>
                            };
  2. Rendering on the server: 
    
                                ReactDOMServer.renderToString(<Hello />);
  3. "Refreshing" in the browser: 
    
                                ReactDOM.hydrate(<Hello />, document.getElementById('root'));

[demo]

Tools - hypernova

[demo]

Server-side rendered micro-frontends

on AWS Lambda

micro-frontends.org

  1. Be Technology Agnostic
  2. Isolate Team Code
  3. Establish Team Prefixes
  4. Favor Native Browser Features over Custom APIs
  5. Build a Resilient Site

How?

[demo]

Server-side rendered micro-frontends

on AWS Lambda

Server-side rendered micro-frontends

on AWS Lambda

aws-in-plain-english 


                        module.exports.batch = (event, context, callback) => {
                          hypernova(
                            event,
                            {
                              getComponent(name) {
                                switch (name) {
                                  case 'Tiles':
                                    return renderComponent(renderReactWithApollo, name);
                                  case 'Search':
                                    return renderComponent(renderVue, name);
                                  default:
                                    return null;
                                }
                              }
                            },
                            callback
                          );
                        };
                    

                        module.exports.home = async (event) => {
                          const name = 'Morty';
                          const jobs = {
                            Search: {
                              input: name
                            },
                            Tiles: {
                              name
                            }
                          };
                          return {
                            statusCode: 200,
                            headers: {
                              'Content-Type': 'text/html'
                            },
                            body: html(await renderer.render(jobs))
                          };
                        };

[demo]

Moar

  • Same stuff, but AWS S3 for the client part: link
  • Other great articles by @felipegaiacharly
    • hypernova-vue
    • hypernova-lambda

Thanks!