웹 개발 기술의 현재와 미래

윤석찬

한국웹표준프로젝트

웹 세상돌아가는 이야기

윤석찬

한국웹표준프로젝트

한국 웹 표준 프로젝트란?

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

http://webstandards.or.kr

커뮤니티 목록

주요 활동

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

Source: http://www.slideshare.net/spikebrehm/jsconf-us-2014-building-isomorphic-apps

Web Frameworks

싱글 페이지 애플리케이션

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

클라이언트

HTML/CSS/JavaScript

서버

Java/Python/Ruby

Source: http://www.slideshare.net/spikebrehm/jsconf-us-2014-building-isomorphic-apps

Isomorphic 애플리케이션

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

클라이언트

HTML/CSS/JavaScript

서버

Java/Python/Ruby

코드 공유

JavaScript

Source: http://www.slideshare.net/spikebrehm/jsconf-us-2014-building-isomorphic-apps

JS 의존성 상승

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

WebComponent

HTML5

Polymer

X-Tag

#ExtensibleWeb

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

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

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

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

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

JS 의존성 상승

#API as a Service

Source: http://www.slideshare.net/jmusser/kpis-for-apis

APIs Growth: 2010-2015

Source: ProgrammableWeb

Source: http://www.slideshare.net/jmusser/kpis-for-apis

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