GDG Google I/O 2016 Extended - What’s next for the web?

구글 I/O Extended 두 번째 세션 - What’s next for the web?

document기반과 Web app 기반 두 가지 형태가 존재한다고 생각한다고 하셨다.

새로 나온 기능들

• Promise

최근 웹 API 표준안들이 Promise를 기반으로 구성

콜백 지옥에서 벗어나고자 하는 이유다.

가급적으로 사용하고, 학습해둬야 한다.

• Fetch

리소스를 패칭 하기 위한 도구이며, Promise 기반으로 구성 된다.

더 빠른 지는 아직 모른다. 하지만, 다른 기능과 결합하면 더 강력해진다는 장점.

예를 들어 서비스 워커와 함께….

아직은 패칭 API를 웹 브라우저들이 아직 구현하지 않는다.

• Stream

  하나의 요청에 대한 버퍼가 채워지는 대로 바로 렌더링을 구현하기 시작한다. ( 속도면에서 더욱 증가 한다. )
  스트림이 없다면, 응답에 대한 전체를 받고 나서 렌더링을 시작함.

네트워크 퍼포먼스 이슈등 문제가 아직 남아 있다.

• RequestIdleCallBack

큰 자바스크립트 동작을 하게 되면, 브라우저 렌더링이 블럭이 되는 경우를 막기 위해 생겨남.
렌더링 작업 이외에 해당 기능을 동작시켜서 다른 작업을 진행시킴으로 렌더링 작업이 블럭 상태가 되는 것을 막아준다.
큰 작업이라면, 해당 콜백이 떨어지면 웹 워커를 통해 큰 작업을 처리 하면 된다. 쉬운 작업은 아니라고 하셨다.

• PassiveEnventListner

Remove delay by preventDafualt()

리스너 옵션으로 {passive: true} 를 추가해준다.
해당 옵션을 추가하므로써 lack을 없앨 수 있다.
다만, 모든 웹브라우저가 지원해주지는 않는다. ( 현재 최신안 )

• Intersection Observer

현재 페이지를 보고 있는지에 대한 모니터링

• Resource Hints

검색하여 참조합시다.

Canvas.toBlob()

캔버스에서 적은 용량으로 큰 데이터를 처리 가능하다.

• CreateImageBitmap

latency없이 캔버스에 비트맵 이미지를 표현할 수 있다. ( 올 ㅋ )

• MediaRecorder

인코드 오디오 and 비디오 스트림을 브라우저 상에서 작동

• Media Session

락 스크린 상태에서도 웹 앱의 통신이 가능해짐
락 스크린 상태에서도 미디어 컨트롤이 가능함

• CSS Variables

CSS 자체에 변수를 적용 할 수 있도록 함.
SASS에서 제공했던 개념을 네이티브 CSS에서 제공

• CSS Containment`

렌더링까지 되는 레이아웃 됨. 그리고 렌더링 작업에 대한 속도 절감을 위한 레이아웃의 스코프를 제어
잘 쓰면 개좋음 못쓰면 뺨 맞음

• CSS Font Loading API

Update FontFace Set to Confirm the latest spec.`
한글의 폰트를 서비스 워커로 적용해서 다중 폰트를 적용시켜여 한다.

• Web MIDI

웹 MIDI를 자동으로 디바이스와 웹과 연동이 가능함.

• Web Bluetooth

웹에서 블루투스를 사용할 수 있다.
크롬 OS를 사용하는 디바이스에서 OS 레벨에 있던 기능을 크롬 브라우저로 가져 온 것.

• Web USB
  특정 벤더사 제품만 연동 되거나 특정 USB만 가능하도록 할 수도 있다.
  현재 논의 중 규격에 대한 정보.

• Physical Web

물리 장비를 통해 웹 트리거를 연동하여 웹 앱을 연결 할 수 있다.
아직은 이용에 대한 확장이 모호함.
31byte에 대한 Shorten URL을 사용할 수 있다.
HTTPS로 요청 해야 함