Micro Web Apps

@cosmycx

Cosmin Potocean

Micro web front-ends

 DevNexus, March 2019

Extending microservice honeycomb to front-end applications

|

|

Cosmin Potocean

  • Software Engineer
  • Back-end: Go

@cosmycx

linkedin

github

slides

 

  • Front-end: JavaScript, React
  • Mobile: iOS Swift, Android Java

 

  • Becoming more DevOpsy: Docker, Kubernetes ...

What We Will Cover

  • Monolith
  • Web Apps
  • Microservices
  • Docker

 

  • Micro front-ends
  • Why?
  • How?
  • Benefits
  • Things to consider & potential solutions
  • Example | Demo | Code

Monolith

  • Single large code base
  • Code-heavy
  • Shares code, components
  • Becomes hard to reason about
  • All code deployed at same time

Web Apps

  • Back-end and Front-end are a single program & usually one DB
  • Many intermingled shared components

Monolith, server rendered

 

  • 1 App, 1 running instance, 1 Database
  • Server rendered PHP, SQL App
  • Legacy .NET C# App

Situation:

Web Apps

Single Page App (SPA), client side rendered

  • Angular, React, Vue ...

Server Side Ready (SSR), server side + client side rendered

  • Speed: loads a server rendered HTML page first, 1st request, then client rendered

AJAX

  • Back-end, Front-end, http requests

Microservices

  • Approach to build distributes systems
  • Small decoupled services that work together
  • Architecture becomes more complex
  • For service developer things, code is smaller, more easier to reason

Microservices

| Key Benefits

  • Polyglot, multi technology
  • Resilient, isolation
  • Scaling
  • Smaller deployments
  • Composability
  • Reusability (some %)

Docker

  • Low level virtualization using the resource isolation features of the Linux kernel

`

Docker

  • Docker Image :: Blueprint

https://hub.docker.com/

 

  • Docker Container :: Running instance of the blueprint
 docker --version                                                          5.33G    07:22    03.08.19    100% 
Docker version 18.09.2, build 6247962

Docker

Docker blueprint :: Dockerfile for a front-end

FROM nginx:1.15

MAINTAINER cosmycx

COPY build /usr/share/nginx/html

EXPOSE 80
# build stage
FROM node:latest as builder
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn
COPY . ./
RUN yarn build


# create image stage
FROM nginx:latest

MAINTAINER cosmycx

COPY --from=builder app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

RUN chmod 777 -R /usr/share/nginx/html
EXPOSE 80

Microservices Architecture | Situation

Microservices for UI | Keyword

Micro Front-end

Micro Front-end

Micro Front-end

Micro Front-end | Why?

  • Polyglot, multi technology
  • Resilient, isolation
  • Scaling
  • Smaller deployments

 

  • Composability
  • Reusability (some %)

 

  • Vertically split of work per business domain
  • One dev. to own FE and BE swim lane
  • Robust to change, add-ons

Micro Front-end | Why?

Micro Front-end | How?

  • New projects specify microservices and containers architecture

Micro Front-ends | How?

https://www.cncf.io/

Cloud Native Landscape

Micro Front-ends | How?

Micro Front-ends | How?

Micro Front-ends

| Things to Consider

  • Login Scheme, maybe use JWT
  • Navbar, if one
  • Sharing lots of CSS, maybe have a CSS service
  • Big files, library load times, maybe use CDN

 

  • Sharing (style + functionality) components
  • Single file components

Micro Front-ends

| Potential Solutions

 

  • Sharing (style + functionality) components
  • Single file components
<template>
  <li class="list-group-item">
    {{ person }}
  </li>
</template>

<script>
  export default {
    name: 'PersonListItem',
    props: {
      person: Object
    }
  }
</script>

<style>
</style>

Micro Front-ends

| Potential Solutions

 

  • Make then use a npm shared component 

 

  • Sharing components

 

  • Ownership :: Shared  

Micro Front-ends

| Potential Solutions

Roll your own solution

 

  • Sharing components

https://github.com/cosmycx/react-app-sync

rsync = spawn( 'rsync', [ '-avu', extPath, intPath] )

Micro Front-ends

| Potential Solutions

 

  • Sharing components

Use bitsrc (?) https://bitsrc.io/

10 Things I Regret About Node.js - Ryan Dahl - JSConf EU 2018, https://www.youtube.com/watch?v=M3BM9TB-8yA&vl=en

Micro Front-ends

| Potential Solutions

 

  • Sharing components

Demo Example

docker-compose

version: '3'

services:

  traefik:
    image: traefik:latest
    command: --web --docker --docker.domain=localhost.local --logLevel=DEBUG
    networks:
      - microapps1
    ports:
      - 80:80
      - 443:443
      - 8080:8080
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock

  homeapp:
    image: microapps/homeapp
    labels:
      - "traefik.frontend.rule=Host:localhost"
    build:
      context: ./homeapp/
      dockerfile: Dockerfile
    restart: always
    container_name: homeapp
    networks:
      - microapps1

  reactapp1:
    image: microapps/reactapp1
    labels:
      - "traefik.frontend.rule=Host:localhost; PathPrefixStrip: /reactapp1"
    build:
      context: ./reactapp1/
      dockerfile: Dockerfile
    restart: always
    container_name: reactapp1
    networks:
      - microapps1

  reactapp2:
    image: microapps/reactapp2
    labels:
      - "traefik.frontend.rule=Host:localhost; PathPrefixStrip: /reactapp2"
    build:
      context: ./reactapp2/
      dockerfile: Dockerfile
    restart: always
    container_name: reactapp2
    networks:
      - microapps1

  vueapp:
    image: microapps/vueapp
    labels:
      - "traefik.frontend.rule=Host:localhost; PathPrefixStrip: /vueapp"
    build:
      context: ./vueapp/
      dockerfile: Dockerfile
    restart: always
    container_name: vueapp
    networks:
      - microapps1

networks:
  microapps1:
    driver: bridge

Demo Time

https://github.com/cosmycx/micro-web-apps

What Did We Cover

  • Monolith
  • Web Apps
  • Microservices
  • Docker

 

  • Micro front-ends
  • Why?
  • How?
  • Benefits
  • Things to consider & potential solutions
  • Example | Demo | Code

https://slides.com/cosminp/micro-front-ends/

?

Slides:

Code:

https://github.com/cosmycx/micro-web-apps

Thank you!

Micro Web Apps

By Cosmin P

Made with Slides.com

Micro Web Apps

micro front-ends, for DevNexus 2019

  • 1,637

More from Cosmin P