• Home
  • About
    • 기근화 photo

      기근화

      A man who want to be Batman

    • Learn More
    • Github
  • Posts
    • All Posts
    • All Tags
  • Projects

google IO

13 Jul 2019

Reading time ~3 minutes

I/O extended Webtech

img

Puppeteer : Interacting with UI

How to use?

  • chrome/mium controll API library

  • Nodejs 기반
  • e2e test : 유저플로우 테스트 가능
  • SPA prerendering
  • Web site Crawling
  • generating PDF

replaced by PhantomJS / prerender.io / cherrio/ selenim

puppeteer.lauch({headless}:true) : headless option

Puppeteer tips

셀렉터로 click,type 등을 함

waitfornavigation : navigating까지 기다림

waitforSelector : selector가 나타날 떄까지 visible: true 까지 기다림

page.evaluate $eval : 결과가 includes(“strign”)으로 값이 있는 지 체크가능 / 브라우저 상에서 eval이 실행되는 로직 두 번쨰 값으로 인자로 넘겨준다

$eval : select -> eval 인자로 실행

`$$eval : queryselectorAll 여러개의 selector evaluate :

waitfornavigation / waitforselector가 더 정확함 time보단

Jest

lifecycle method를 통해 테스트 가능

createIncogniteBrowserCOntext = > context 로그인 /로그아웃을 같은 컨텍스트에서 테스트 가능 jest와 pupeeteer https://github.com/smooth-code/jest-puppeteer

react-snap

SPA를 위한 prerenderer

SEO /Meta tag pre-render

React 및 Vue에서 사용가능

import {hydrate} from 'react-dom'

ChildNode가 있다. Server에서 랜더링한 경우이기에 hydrate를 통해 pre-render

web.dev

react-snap을 어떻게 쓰면 되는 지 나옴

https://hyunseob.github.io/2019/05/26/google-io-2019-day-3/

Portalis

micro frontends : micro achi를 frontend에 도입한 경우

레거시가 많은 경우 다른 서비스를 붙이기 힘들기 떄문에 이를 하나의 마이크로서비스화시키는 것

페이지 이동을 부드럽게 하는 html element

  • chrome에서만 지원 정말 부드럽게 페이지 이동이 가능함 micro frontend에서 적용 용이함

Post message

도메인끼리 데이터를 주고받을 수 있음

iframe과 호스트가 데이터를 주고받을 수 있게 함

portalog

chrome canali

chrome flags : portal enabled 적용해야 함

Capabilities for web

  1. perception toolkit

    npm install perception-toolkit


<script type="ld+json">
{
"arTarget":{
    "@type":""
}
}
</script>

  1. wakelock

    화면이 잠기지 않도록 하는 거

  2. Badge API

    어플리케이션 형태로 배포가 됨

    뱃지 API를 통해서 상태변화를 rendering 할 수 있음

WebAssembly

  1. why webassembly
    • Emscripten
      1. Emscripten C -> javascript SDK
      2. 이 javascript로 컴파일된 코드는 JIT 컴파일러에 최적화된 코드
      3. C - > Emscripten -> optimized javascript
    • asm.js?
      1. 고수준 언어에서 제공하는 Object,Closure 같은 걸 제거하고,
      2. 메모리를 직접 제어한다고 보장한다면
      3. Assembly와 비슷한 성능이 나올 수 있음

    Web을 위한 Assembly 기계어와 일대일 대응되는 명령어의 집합

    WebAssembly is a binary instruction format

    상당히 빠른 코드

    기존 C/C++ 의 코드를 재사용이 가능하다

  2. C++ ?

    Image Compression Algorithm

    squoosh.app

    C/C++ 및 rust도 컴파일이 가능하다

    C를 컴파일하면 WAT라는 코드가 binary로

    wasmboy : typescript로 asssemly 코드 구현

    AssemblyScript : typescript subset

    binaryen 사용하여 컴파일을 함

    ## 웹어셈블리의 다음 지원?

    1. Thread / Shared Memory Support

    2. ECMAScript Module Integration

    3. Garbage Collection

    4. 더 많은 language support 가능

  3. replace for javascript?

어떤 케이스의 경우 자바스크립트보다 느린 경우가능함

그리고 브라우저 상관없이 일정한 퍼포먼스

무거운 알고리즘에 유용할 뿐~

PWA

Web / App

  1. 디바이스 의존성
  2. offline에서 차이
  3. 우리의 인식 : 쓴다 / 소유

PWA는 Web과 App의 장점들을 가져와 개발

native app을 훨씬 많이 쓴다

UI / Launcher Icon / System Integration

같은 코드베이스로 다른 플랫폼들을 지원이 가능하다

Web App Manifest / Service Worker –> offline 상태에서도 사용경험이 가능하다

  1. webapp manist ``` html
    <link rel=”manifest” href=/manifest.json” crossOrigin=>

``` json

{"display":"standalone"}

{"display":"fullscreen"}

다양한 사이즈의 아이콘 대용 가능
{"icons":[{},{}]}
  1. service worker

“install”

“activate”

“fetch” : cached data

push 등 테스트 가능

workbox : cache 만료에 대한 API도 제공

hulu –> PWA

lighthouse

https://developers.google.com/web/tools/lighthouse/?hl=ko

웹사이트 퍼포먼스 / 접근성 / 검색엔진 최적화/ PWA 지원정도에 대한 monitoring 앱

60fps 내의 퍼포먼스를 내는 앱?…ㅎㅎㅎ

throlt를 걸고 해야 함 3G, 4x CPU를 체크하면 안 좋은 퍼포먼스의 웹사이트에 대한 사이트 테스트 가능

archive.org

분석기준?

FCP : 최초 페인팅 타임 // paint timing specification을 스펙으로

Opportunities

remove unused CSS

DOM size : 1500개


google I/Oweb-tech Share Tweet +1
repo="ghk829" issue-term="pathname" theme="github-dark" crossorigin="anonymous" async>