웹 개발 기술의 현재와 미래

윤석찬

한국웹표준프로젝트

웹 세상돌아가는 이야기

윤석찬

한국웹표준프로젝트

한국 웹 표준 프로젝트란?

2005년 WaSP의 한국 활동으로 시작

커뮤니티 목록

주요 활동

2005

2010

주요 활동

2014 한국 웹 20주년 콘퍼런스

http://www20.kr

전길남: 웹 기술이 얼마나 오래갈까요?

Håkon Wium Lie: Maybe 500 years?

그러나, 웹 환경은...

폐쇄 소셜웹

모바일 게이트키퍼

5년 주기설

5년 후의 웹, http://blog.creation.net/452

"미래는 이미 와 있다. 단지 널리 퍼져있지 않을 뿐...”

- 윌리암 깁슨 -

The future is already here — it's just not very evenly distributed.

웹 기술의 현재 (2015)

  • Extensible Web

  • API as a Service

  • Microservices

Recap of Front-end

  • 1990   Document

  • 2000  Apps

  • 2010   Frameworks

옛날 옛적에...

<?php 
  echo “<h2>상품 구매 서비스</h2>”; 
  echo “상품명: {$item.name}”;
?> 
<form>
  <input name=“your-name” value="<?=$buyer.name?>"/> 
  <input name=“quantity” /> 
</form> 

Web applications

멀티 페이지 애플리케이션

  • 서버 렌더링 콘텐츠, Ajax/jQuery로 사용자 경험 향상
  • 서버로 부터 HTML 생성 제공
  • SEO 및 접근성 관점에서 높은 만족도
  • 단점
    • UI렌더링 및 로직이 서버와 클라이언트 동기화 필요
    • 중복된 프로그래밍 언어, 프레임웍 및 개발 스택...

클라이언트

HTML/CSS/JavaScript

서버

Java/Python/Ruby

Web Frameworks

싱글 페이지 애플리케이션

  • 클라이언트 기반 렌더링, 로직과 데이터 추출 분리
  • 향상된 상호 작용 및 사용자 인터페이스
  • 모바일 및 오프라인 웹앱 제공 가능
  • 단점
    • SEO 친화적이지 않음 (서버 렌더링 및 URI 구성 필요)
    • 콘텐츠 로딩 시 약간의 지연이 제공

클라이언트

HTML/CSS/JavaScript

서버

Java/Python/Ruby

Isomorphic 애플리케이션

  • 서버 및 클라이언트 기반 렌더링 조합
  • 최초 페이지 서버 기반 렌더링으로 제공
  • 클라이언트 JS앱은 서버의 HTML 스니핏 활용
  • 하나의 코드 베이스 지향
  • 지원 프레임워크

클라이언트

HTML/CSS/JavaScript

서버

Java/Python/Ruby

코드 공유

JavaScript

JS 의존성 상승

신규 웹 기능에 대한 Polyfill Library 증가

HTML5

Polymer

X-Tag

웹 브라우저는 기본 수준(Low-level) API에 집중

웹 개발자는 높은 수준 (High-level) 기능 구현

새로 나온 기능은 웹 표준화 반영 선순환 구조 마련

최근 W3C 웹 표준 제정 방법에 변화 제공

 <script src="apis..."></script>
 <script src="gmap"></script>
 <script src="fb-like"></script>
 <script src="library"></script>

JS 의존성 상승

APIs Growth: 2010-2015

Source: ProgrammableWeb

Open APIs vs. Internal API

내부 API 사용 99%

Netflix embraces a fine-grained Service Oriented Architecture as the underpinning of its Cloud based deployment model. Currently, we run hundreds of such fine grained services that are collectively responsible in handling the customer facing requests via a few "Edge Services" such as the Netflix API Service. A lightweight REST based protocol is the choice for inter process communication amongst these services.

Source: http://techblog.netflix.com/2013/01/announcing-ribbon-tying-netflix-mid.html

Source: Adrian Cockcroft, State of the Art in Microservices

Loosely Coupled

Loosely Coupled

Loosely Coupled

Loosely Coupled

Bounded Context

Bounded Context

Microservices Architecture

Source: Adrian Cockcroft, State of the Art in Microservices

How to build Microservices?

API 기반

빠른 개발

확장성

"미래는 이미 와 있다. 단지 널리 퍼져있지 않을 뿐...”

- 윌리암 깁슨 -

The future is already here — it's just not very evenly distributed.

웹 기술의 미래

  • Extensible Web

  • API as a Service

  • Microservices

분산?

@channyun

http://channy.creation.net

Q&A