SilentImp SilentImp

## web-components-trade-offs.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                SilentImp
                / web-components-trade-offs.md
            
            
              Created
              December 23, 2021 13:49
                — forked from just-boris/web-components-trade-offs.md
            
              
                Web Components trade-offs
              
          
    Web Components trade-offs

Desired state

Before we begin talking about the trade-offs, let's look at the desired state, why someone should use Web Components and what benefits it provides. This standard allows you to create framework-independent UI components. Instead of re-inventing the same concept of UI component for every framework, there could be a universal solution using Web Components standard. They will also be more simple and lightweight, as the API is already built into browsers and you do not need to load additional runtime to your web page.
Web Components are defined as custom HTML elements where you can attach your custom behavior. You do not need to learn additional proprietary framework conventions, as you can think about using Web Component same way as you would use <button> or <input>.
Now let's check how these expectations match with the real state.

  
## Avatar.styled.ts
import styled from "@emotion/styled";
import { AvatarProps, UserTypes } from "./Avatar";

interface StyledAvatarProps extends AvatarProps {
  width: number;
  height: number;
  isComplete: boolean;
}

export default styled.img`

## setLoggedIn.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>isLoggedIn API</title>
</head>
<body>
  <header>
    <button id="signin" type="button">Sign-in</button>

## buffer.json
[24,45,198,64,55,87,166,154,106,105,1,8,117,98,7,101,22,49,127,45,76,201,197,140,108,11,24,64,8,245,229,46,153,99,217,244,205,222,60,112,231,184,27,224,181,118,48,23,105,99,183,113,110,30,100,212,87,20,17,44,175,76,238,128,169,67,41,128,65,46,219,141,50,175,199,128,165,200,21,243,176,42,125,168,186,60,66,193,84,120,44,19,127,156,165,218,138,72,61,39,234,18,9,0,7,227,59,130,42,79,209,83,149,126,113,176,29,155,86,112,255,163,241,40,122,9,98,154,192,219,131,50,12,147,191,199,145,60,93,123,18,136,34,190,167,183,195,166,26,58,10,189,20,227,44,3,159,166,137,45,195,76,138,227,206,240,161,204,196,119,241,180,119,8,153,168,4,89,6,10,191,177,219,91,207,61,199,198,84,212,36,65,41,99,87,10,134,178,10,126,36,231,142,141,146,83,237,1,215,218,60,189,15,40,64,81,55,81,62,150,88,63,39,104,241,21,161,84,49,18,163,187,234,74,16,251,83,30,26,128,210,181,32,194,253,180,217,33,213,83,53,176,159,3,91,132,162,103,3,97,147,52,21,231,107,45,200,156,129,36,239,240,56,76,164,246,181,218,32,230,164,87,95,77,133,190,80,127,188,210,189,62,

## docker-compose.yml
version: "3.2"

services:
  rabbitmq:
    image: rabbitmq
    command: rabbitmq-server
    expose:
      - 5672
      - 15672
    networks:

## Dockerfile
FROM node:13-alpine AS base
RUN mkdir -p /var/app && chown -R node /var/app
WORKDIR /var/app
COPY package.json .
COPY package-lock.json .
COPY index.mjs .

ENV NODE_ENV=production
RUN apk add --update bash
RUN npm ci --only=prod --silent

## comment.js
require('dotenv').config();

const fs = require('fs');
const lighthouse = require('lighthouse');
const puppeteer = require('puppeteer');
const cluster = require('cluster');
const numCPUs = require('os').cpus().length;
const DOMAIN = process.env.DOMAIN;

const fetch = require('isomorphic-fetch');

## avarage.js
const fs = require('fs');
const lighthouse = require('lighthouse');
const puppeteer = require('puppeteer');
const cluster = require('cluster');
const numCPUs = require('os').cpus().length;
const DOMAIN = process.env.DOMAIN;

// Count of measurements we want to make
const MEASURES_COUNT = 3;

## cluster.js
const fs = require('fs');
const lighthouse = require('lighthouse');
const puppeteer = require('puppeteer');

const cluster = require('cluster');
const numCPUs = require('os').cpus().length;

const DOMAIN = process.env.DOMAIN;

// build report for single url

## lighthouse.js
const fs = require('fs');
const lighthouse = require('lighthouse');
const puppeteer = require('puppeteer');
const DOMAIN = process.env.DOMAIN;

// build report for single url
const buildReport = browser => async url => {
  const data = await lighthouse(
    `${DOMAIN}${url}`,
    {
	import styled from "@emotion/styled";
	import { AvatarProps, UserTypes } from "./Avatar";

	interface StyledAvatarProps extends AvatarProps {
	width: number;
	height: number;
	isComplete: boolean;
	}

	export default styled.img`
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>isLoggedIn API</title>
	</head>
	<body>
	<header>
	<button id="signin" type="button">Sign-in</button>
	version: "3.2"

	services:
	rabbitmq:
	image: rabbitmq
	command: rabbitmq-server
	expose:
	- 5672
	- 15672
	networks:
	FROM node:13-alpine AS base
	RUN mkdir -p /var/app && chown -R node /var/app
	WORKDIR /var/app
	COPY package.json .
	COPY package-lock.json .
	COPY index.mjs .

	ENV NODE_ENV=production
	RUN apk add --update bash
	RUN npm ci --only=prod --silent
	require('dotenv').config();

	const fs = require('fs');
	const lighthouse = require('lighthouse');
	const puppeteer = require('puppeteer');
	const cluster = require('cluster');
	const numCPUs = require('os').cpus().length;
	const DOMAIN = process.env.DOMAIN;

	const fetch = require('isomorphic-fetch');