Server-side rendered micro-frontends

on AWS Lambda

Perspektywa... ma znaczenie :)

Server-side rendered micro-frontends

onon AWS Lambda

unsplash-logo Alex Iby
Robert Agnieszka
Vitaliy Janek

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>

Dalsze problemy SPA:

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

Potrzebny powrót do SERWERA!

SSR

  1. Kod wspólny dla serwera i dla klienta, np. React: 
    
                            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. Wyrenderowanie na serwerze: 
    
                                ReactDOMServer.renderToString(<Hello />);
  3. "Odświeżenie" w przeglądarce: 
    
                                ReactDOM.hydrate(<Hello />, document.getElementById('root'));

[demo]

Narzędzia - hypernova

POST http://localhost:9092/batch

                        {
                            "content": {
                                "name": "Hello",
                                "data": {
                                    "welcome": "Hallo"
                                }
                            }
                        }
                    

                        {
                            "content": {
                                "name": "Tiles",
                                "data": {
                                }
                            }
                        }

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

Jak?

[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]

Więcej

  • To samo, tylko jeszcze integracja z S3: link
  • Sporo artykułów w temacie: @felipegaiacharly
    • hypernova-vue
    • hypernova-lambda

Dzięki!