SlideShare a Scribd company logo
1 of 59
Download to read offline
World
 Wide
 Web 
Kim
 Min
 Tae
 @
 NCSOFT
Web Components Web Graphics 
Service Worker 
Web Animations 
WebRTC Web Socket 
Transpiler  ASM.js 
Javascript 
Framework
vs. Native Platform
C! 
o! 
n! 
t! 
e! 
n! 
t! 
s 
Document 
Application 
Service
Web 
Application
Web 
Application 
“좋지 않은 부분”
WebApplication
WebApplication
WebApplication
WebApplication
https://www.flickr.com/photos/storm_tk431/5508754853/
Web Components
Template 
Shadow DOM 
Custom Elements 
HTML Imports
Template
Shadow DOM
Shadow DOM
Custom Elements
HTML Imports
vs. Native Platform
How 
Browser 
Works
http://daviddemar.files.wordpress.com/2012/06/chrome_vs_firefox.jpg
Rendering
Minimizing browser reflow
http://blogs.nvidia.com/blog/2009/12/16/whats-the-difference-between-a-cpu-and-a-gpu/ 
Multiple cores vs. Hundreds of cores
http://msdn.microsoft.com/ko-kr/library/dn479430%28v=vs.85%29.aspx
Web Components Web Graphics
Service Worker

More Related Content

What's hot

Building a Single-Page App: Backbone, Node.js, and Beyond
Building a Single-Page App: Backbone, Node.js, and BeyondBuilding a Single-Page App: Backbone, Node.js, and Beyond
Building a Single-Page App: Backbone, Node.js, and Beyond
Spike Brehm
 
Amsterdam.js talk: node webkit
Amsterdam.js talk: node webkitAmsterdam.js talk: node webkit
Amsterdam.js talk: node webkit
Fabian Jakobs
 
Isomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master ClassIsomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master Class
Spike Brehm
 
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsIn Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
Spike Brehm
 

What's hot (20)

Building a Single-Page App: Backbone, Node.js, and Beyond
Building a Single-Page App: Backbone, Node.js, and BeyondBuilding a Single-Page App: Backbone, Node.js, and Beyond
Building a Single-Page App: Backbone, Node.js, and Beyond
 
Firebase and AngularJS
Firebase and AngularJSFirebase and AngularJS
Firebase and AngularJS
 
Angular vs React: Building modern SharePoint interfaces with SPFx
Angular vs React: Building modern SharePoint interfaces with SPFxAngular vs React: Building modern SharePoint interfaces with SPFx
Angular vs React: Building modern SharePoint interfaces with SPFx
 
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and BackboneJavascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
 
Amsterdam.js talk: node webkit
Amsterdam.js talk: node webkitAmsterdam.js talk: node webkit
Amsterdam.js talk: node webkit
 
Grokking #9: Building a real-time and offline editing service with Couchbase
Grokking #9: Building a real-time and offline editing service with CouchbaseGrokking #9: Building a real-time and offline editing service with Couchbase
Grokking #9: Building a real-time and offline editing service with Couchbase
 
Polymer and web component
Polymer and web componentPolymer and web component
Polymer and web component
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
 
Isomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master ClassIsomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master Class
 
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsIn Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
 
[D2 오픈세미나]2.모바일웹디버깅
[D2 오픈세미나]2.모바일웹디버깅[D2 오픈세미나]2.모바일웹디버깅
[D2 오픈세미나]2.모바일웹디버깅
 
The fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose ReactThe fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose React
 
AngularJS + React
AngularJS + ReactAngularJS + React
AngularJS + React
 
DevPira2019 - Blazor
DevPira2019 - BlazorDevPira2019 - Blazor
DevPira2019 - Blazor
 
Korea linuxforum2014 html5game-sangseoklim
Korea linuxforum2014 html5game-sangseoklimKorea linuxforum2014 html5game-sangseoklim
Korea linuxforum2014 html5game-sangseoklim
 
Angular 2 vs React. What to chose in 2017?
Angular 2 vs React. What to chose in 2017?Angular 2 vs React. What to chose in 2017?
Angular 2 vs React. What to chose in 2017?
 
A team 43 C
A team 43 CA team 43 C
A team 43 C
 
JSConf US 2014: Building Isomorphic Apps
JSConf US 2014: Building Isomorphic AppsJSConf US 2014: Building Isomorphic Apps
JSConf US 2014: Building Isomorphic Apps
 
Custom Elements with Polymer Web Components #econfpsu16
Custom Elements with Polymer Web Components #econfpsu16Custom Elements with Polymer Web Components #econfpsu16
Custom Elements with Polymer Web Components #econfpsu16
 
Building Isomorphic Apps (JSConf.Asia 2014)
Building Isomorphic Apps (JSConf.Asia 2014)Building Isomorphic Apps (JSConf.Asia 2014)
Building Isomorphic Apps (JSConf.Asia 2014)
 

Viewers also liked (7)

외계어 스터디 3/5 function and object
외계어 스터디 3/5   function and object외계어 스터디 3/5   function and object
외계어 스터디 3/5 function and object
 
외계어 스터디 4/5 Event & Library
외계어 스터디 4/5 Event & Library외계어 스터디 4/5 Event & Library
외계어 스터디 4/5 Event & Library
 
Svn에서 git으로 이주하기
Svn에서 git으로 이주하기Svn에서 git으로 이주하기
Svn에서 git으로 이주하기
 
[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함
[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함
[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함
 
Git - Level 2
Git - Level 2Git - Level 2
Git - Level 2
 
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
 
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git버전관리를 들어본적 없는 사람들을 위한 DVCS - Git
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git
 

Similar to 웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스

20130423 webcast desarrollo en azure con visual studio
20130423 webcast desarrollo en azure con visual studio20130423 webcast desarrollo en azure con visual studio
20130423 webcast desarrollo en azure con visual studio
Ricardo González
 
Http/2 - What's it all about?
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?
Andy Davies
 
Front end optimization
Front end optimizationFront end optimization
Front end optimization
Abhishek Anand
 
Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022
NAVER D2
 
MS Day EPITA 2010: Visual Studio 2010 et Framework .NET 4.0
MS Day EPITA 2010: Visual Studio 2010 et Framework .NET 4.0MS Day EPITA 2010: Visual Studio 2010 et Framework .NET 4.0
MS Day EPITA 2010: Visual Studio 2010 et Framework .NET 4.0
Thomas Conté
 

Similar to 웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스 (20)

20130423 webcast desarrollo en azure con visual studio
20130423 webcast desarrollo en azure con visual studio20130423 webcast desarrollo en azure con visual studio
20130423 webcast desarrollo en azure con visual studio
 
Change by HTML5
Change by HTML5Change by HTML5
Change by HTML5
 
Http/2 - What's it all about?
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?
 
Will Web 2.0 applications break the cloud?
Will Web 2.0 applications break the cloud?Will Web 2.0 applications break the cloud?
Will Web 2.0 applications break the cloud?
 
Front End Optimization, 'The Cloud' can help you!
Front End Optimization, 'The Cloud' can help you!Front End Optimization, 'The Cloud' can help you!
Front End Optimization, 'The Cloud' can help you!
 
Isomorphic Javascript - nodebr
Isomorphic Javascript - nodebrIsomorphic Javascript - nodebr
Isomorphic Javascript - nodebr
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
 
LA RubyConf 2009 Waves And Resource-Oriented Architecture
LA RubyConf 2009 Waves And Resource-Oriented ArchitectureLA RubyConf 2009 Waves And Resource-Oriented Architecture
LA RubyConf 2009 Waves And Resource-Oriented Architecture
 
Concocting an MVC, Data Services and Entity Framework solution for Azure
Concocting an MVC, Data Services and Entity Framework solution for AzureConcocting an MVC, Data Services and Entity Framework solution for Azure
Concocting an MVC, Data Services and Entity Framework solution for Azure
 
Front end optimization
Front end optimizationFront end optimization
Front end optimization
 
6. DISZ - Webalkalmazások skálázhatósága a Google Cloud Platformon
6. DISZ - Webalkalmazások skálázhatósága  a Google Cloud Platformon6. DISZ - Webalkalmazások skálázhatósága  a Google Cloud Platformon
6. DISZ - Webalkalmazások skálázhatósága a Google Cloud Platformon
 
Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022
 
URL Design
URL DesignURL Design
URL Design
 
Gaming across multiple devices
Gaming across multiple devicesGaming across multiple devices
Gaming across multiple devices
 
Kentico CMS: A Case Study in Building for Today’s Web
Kentico CMS: A Case Study in Building for Today’s WebKentico CMS: A Case Study in Building for Today’s Web
Kentico CMS: A Case Study in Building for Today’s Web
 
Analyzing the Performance of Mobile Web
Analyzing the Performance of Mobile WebAnalyzing the Performance of Mobile Web
Analyzing the Performance of Mobile Web
 
MS Day EPITA 2010: Visual Studio 2010 et Framework .NET 4.0
MS Day EPITA 2010: Visual Studio 2010 et Framework .NET 4.0MS Day EPITA 2010: Visual Studio 2010 et Framework .NET 4.0
MS Day EPITA 2010: Visual Studio 2010 et Framework .NET 4.0
 
Single Page Applications – Know The Ecosystem system
Single Page Applications – Know The Ecosystem systemSingle Page Applications – Know The Ecosystem system
Single Page Applications – Know The Ecosystem system
 
JSFoo-2017 Takeaways
JSFoo-2017 TakeawaysJSFoo-2017 Takeaways
JSFoo-2017 Takeaways
 
Global domination with kentico
Global domination with kenticoGlobal domination with kentico
Global domination with kentico
 

More from 민태 김

외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements
민태 김
 
외계어 스터디 1/5 - Overview
외계어 스터디 1/5 - Overview외계어 스터디 1/5 - Overview
외계어 스터디 1/5 - Overview
민태 김
 
비개발자를 위한 Javascript 알아가기 #7.1
비개발자를 위한 Javascript 알아가기 #7.1비개발자를 위한 Javascript 알아가기 #7.1
비개발자를 위한 Javascript 알아가기 #7.1
민태 김
 
비개발자를 위한 Javascript 알아가기 #7
비개발자를 위한 Javascript 알아가기 #7비개발자를 위한 Javascript 알아가기 #7
비개발자를 위한 Javascript 알아가기 #7
민태 김
 
비개발자를 위한 Javascript 알아가기 #6.1
비개발자를 위한 Javascript 알아가기 #6.1비개발자를 위한 Javascript 알아가기 #6.1
비개발자를 위한 Javascript 알아가기 #6.1
민태 김
 
비개발자를 위한 Javascript 알아가기 #6
비개발자를 위한 Javascript 알아가기 #6비개발자를 위한 Javascript 알아가기 #6
비개발자를 위한 Javascript 알아가기 #6
민태 김
 
비개발자를 위한 Javascript 알아가기 #5.1
비개발자를 위한 Javascript 알아가기 #5.1비개발자를 위한 Javascript 알아가기 #5.1
비개발자를 위한 Javascript 알아가기 #5.1
민태 김
 
비개발자를 위한 Javascript 알아가기 #5
비개발자를 위한 Javascript 알아가기 #5비개발자를 위한 Javascript 알아가기 #5
비개발자를 위한 Javascript 알아가기 #5
민태 김
 
비개발자를 위한 Javascript 알아가기 #4
비개발자를 위한 Javascript 알아가기 #4비개발자를 위한 Javascript 알아가기 #4
비개발자를 위한 Javascript 알아가기 #4
민태 김
 
비개발자를 위한 Javascript 알아가기 #3
비개발자를 위한 Javascript 알아가기 #3비개발자를 위한 Javascript 알아가기 #3
비개발자를 위한 Javascript 알아가기 #3
민태 김
 
Waterfall과 agile의 불편한 동거 public
Waterfall과 agile의 불편한 동거 publicWaterfall과 agile의 불편한 동거 public
Waterfall과 agile의 불편한 동거 public
민태 김
 
AWS 구축 경험 공유
AWS 구축 경험 공유AWS 구축 경험 공유
AWS 구축 경험 공유
민태 김
 
Knockout.js Overview
Knockout.js OverviewKnockout.js Overview
Knockout.js Overview
민태 김
 

More from 민태 김 (20)

외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements
 
외계어 스터디 1/5 - Overview
외계어 스터디 1/5 - Overview외계어 스터디 1/5 - Overview
외계어 스터디 1/5 - Overview
 
비개발자를 위한 Javascript 알아가기 #7.1
비개발자를 위한 Javascript 알아가기 #7.1비개발자를 위한 Javascript 알아가기 #7.1
비개발자를 위한 Javascript 알아가기 #7.1
 
비개발자를 위한 Javascript 알아가기 #7
비개발자를 위한 Javascript 알아가기 #7비개발자를 위한 Javascript 알아가기 #7
비개발자를 위한 Javascript 알아가기 #7
 
비개발자를 위한 Javascript 알아가기 #6.1
비개발자를 위한 Javascript 알아가기 #6.1비개발자를 위한 Javascript 알아가기 #6.1
비개발자를 위한 Javascript 알아가기 #6.1
 
비개발자를 위한 Javascript 알아가기 #6
비개발자를 위한 Javascript 알아가기 #6비개발자를 위한 Javascript 알아가기 #6
비개발자를 위한 Javascript 알아가기 #6
 
MEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overviewMEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overview
 
비개발자를 위한 Javascript 알아가기 #5.1
비개발자를 위한 Javascript 알아가기 #5.1비개발자를 위한 Javascript 알아가기 #5.1
비개발자를 위한 Javascript 알아가기 #5.1
 
비개발자를 위한 Javascript 알아가기 #5
비개발자를 위한 Javascript 알아가기 #5비개발자를 위한 Javascript 알아가기 #5
비개발자를 위한 Javascript 알아가기 #5
 
비개발자를 위한 Javascript 알아가기 #4.1
비개발자를 위한 Javascript 알아가기 #4.1비개발자를 위한 Javascript 알아가기 #4.1
비개발자를 위한 Javascript 알아가기 #4.1
 
비개발자를 위한 Javascript 알아가기 #4
비개발자를 위한 Javascript 알아가기 #4비개발자를 위한 Javascript 알아가기 #4
비개발자를 위한 Javascript 알아가기 #4
 
비개발자를 위한 Javascript 알아가기 #3
비개발자를 위한 Javascript 알아가기 #3비개발자를 위한 Javascript 알아가기 #3
비개발자를 위한 Javascript 알아가기 #3
 
비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2
 
비개발자를 위한 Javascript 알아가기 #1
비개발자를 위한 Javascript 알아가기 #1비개발자를 위한 Javascript 알아가기 #1
비개발자를 위한 Javascript 알아가기 #1
 
Waterfall과 agile의 불편한 동거 public
Waterfall과 agile의 불편한 동거 publicWaterfall과 agile의 불편한 동거 public
Waterfall과 agile의 불편한 동거 public
 
AWS 구축 경험 공유
AWS 구축 경험 공유AWS 구축 경험 공유
AWS 구축 경험 공유
 
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
 
Knockout.js Overview
Knockout.js OverviewKnockout.js Overview
Knockout.js Overview
 
스마트미디어 크로스플렛폼 개발 전략
스마트미디어 크로스플렛폼 개발 전략스마트미디어 크로스플렛폼 개발 전략
스마트미디어 크로스플렛폼 개발 전략
 
CANVAS, SVG, WebGL, CSS3, WebEvent
CANVAS, SVG, WebGL, CSS3, WebEventCANVAS, SVG, WebGL, CSS3, WebEvent
CANVAS, SVG, WebGL, CSS3, WebEvent
 

웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스