[145]5년간의네이버웹엔진개발삽질기그리고 김효

1. 5년간의 네이버웹엔진
개발/삽질기 그리고…
김효
NAVER LABS

2. CONTENTS
1. Web engine을 만들자.
2. Why?
3. Web browser engine
4. Webkit
5. Naver web browser engine : Sling
6. Web browser?
7. Naver web browser : ?
Q&A

3. 1.
Web Engine을 만들자

4. 5년전…
Web Portal=
Web에서 생존하는 회사

5. Web engine을 만들자
Web에서 생존하는 회사의 기술
= Web을 표현하는 근본 기술
= Web platform (web engine)

6. Engineer를 모아라
부제 : 대형 System Software 의 꿈

7. 2.
Why?

8. 무엇을 얻고 싶은가?

9. Browser
자체 엔진
chrome, safari, IE, firefox
변형 엔진
opera mini, puffin, UC, QQ
UX/feature
dolphin, mercury, maxthon, swing, opera

10. Web OS
Tizen (linux/webkit)
gear fit, gear, TV, phone
chrome
chrome book, chrome store, phone?
fireOS (AOSP/chrome)
kindle fire

11. Contents
viewer, renderer
컨텐츠에 특화된 것이 필요한가?
- App
- device
- browser
organizer

12. App engine
cross platform
Apache cordova
- phonegap adobe initiative
- phonejs jquery, knockout UI
- telerik(icenium) cloud design, build, publishing, testing
hybrid app

13. Devices
Wearables
android wear, pebble
IoT
hdmi adapter, apple TV, chromecast
tablet
kindle
Big screen

14. Web platform을 만든다는 건?

15. 3.
Web Browse Engine

16. Webkit
Apple 주도
Mac port 위주
Samsung EFL(Tizen)
WebkitGTK+
제품
Mac Safari
단점
32bit 최적화 안함
Windows/android 없음

17. Chromium
Google
chrome 지배력에 초점
android webview powered by chrome 문제
Naver Higgs engine
단점
복잡한 코드 구조
Google 위주의 폐쇄적인 진행

18. Mozilla
gecko (firefox)
구조적 한계
포팅 제품 없음
servo
차세대 엔진
장기 프로젝트

19. 4.
Webkit

20. Naver Webkit
그나마 많은 engineer
할 수 있는 것이 많다
더 나은 architecture
windows/android port 부재
새로운 cross platform 시도
경량화 가능
webkit base 개발 경험
Tizen 경험

21. Naver Webkit : cross platform
Android/windows webview
- 세계 최초의 webkit2 기반
android/windows engine
- java/win c++ interface 동시
생성
Droid Framework (JAVA)
Android Platform C++ APIs
Droid Framework (C++)
JNI TemplateJNI
Native Droid Framework
WebKit2 Interface (WK)
WebPag
eProxy
WebContext
WebProces
sProxy
Network
Process
Proxy
Connection MessageHandler MessageReceiver
WTF::RunLoop Shared Memory Native Event
WebProces
s
WebPage
Network
Process
DB
Process
WebCore
DB
Process
Proxy
PluginProc
essProxy
Plugin
Process
JavaScriptCore
WebCoreSupport
Android Windows
Framework
Web Process
Core
OS
3rd Party Lib.
UI Process
IPC
cURL CairoFreeType HarfBuzz ICU Sqlite

22. Naver Webkit : thin client
Thin client browser
MarioNet, Amazon Silk, Puffin
CPU는 서버 자원을
small device에서 rich web 가능
seamless handoff
Client WebKit
UI
Process
Android
Webview
Server WebKit
Web
Process
Network
Process
Database
Process
Plugin
Process
Droid Framework
JAVA C++
Server Webkit

23. Naver Webkit : browser
Desktop용 web browser를 만들자
Higgs
Engine
: solve current
problem
Naver
Webkit
: thin client
web engine
Browser
: next
generation
web browser
Devices
App Engine Web OS

24. Naver Webkit : browser tasks
Save Page
Copy & Paste & Selection
Download Manager
Settings
Combo Box
Touch Magnifier
Double Tapping Zoom
HTTP Authentication
SSL Certification
Favicon
File Chooser
Visited Link
NPAPI Plugins
HomeScreen Webapp
Auto Complete
theme 지원
개발자 도구
Multi process per tab
Canvas/Rendering
Javascript FTL
asm.js
Scroll
Compositing
Test framework
Test Gardening
Network
3rd party library - jpeg-turbo
IndexedDB
Network Information API
Geolocation
Multimedia
FileSystem API
CORS
Animation Timing API
FullScreen API
Page Visibility API
Form New Controls
WebGL
Media Capture Stream (getUserMedia)
WebRTC
Web Audio API
Notifications API
Web SQL storage
Device Orientation and Motion
Web Speech API

25. 5.
Naver Web Browser Engine
: SLING

26. Naver Webkit : SLING
SLING architecture
Sling Framework <Natives>
Sling Framework <Managed>
ONIG
3rd-party Libraries
WebKit
os
POSIX
view media webkit

27. Webkit  웹엔진
 대부분의 WebKit 개발에 크로스플랫폼이 고려됨
• 같은 소스 기반으로 Windows/Android 빌드 유지
• 다른 OS/플랫폼으로의 이식이 용이하도록 구성
 이후 웹엔진의 확장을 고려한 설계
• 각 컴포넌트가 독자성을 가질 수 있도록 함
• 웹엔진이 자체적인 어플리케이션이 될 수 있도록 함

28. SLING ONIG
크로스플랫폼 개발의 기초적인 빌딩 블록
Java = Java + JNI + C/C++
Java와 C++의 합의점을 찾는다
better than SWIG
Java의 구조와 개념에 충실
Object-oriented Native Interfaces Generator
크로스플랫폼 개발에서 많은 시간과 노력을 절약

29. 새로운 접근
한계를 넘기 위하여
WebKit2
Sling-WebPlatform
SWK (Sling WebKit) APIs
WebNetwork WebScript WebGraphics WebExtension
Chromium
Network Stack
Curl ChakraCore JSC Moz2D Cairo
Chrome
Extension
Safari
Extension
Sling Port

30. SLING status
Sling Chrome 54
JetStream 139.79 134.77
Sunspider 170.2 ms 211.1 ms
Kraken 1328.5 ms 1231.7 ms
JSBench 21.96 ms 128.05 ms
Octane 22755 24804
Sling Chrome 54
DavidRousset-sprite 3715 3050
GUIMark2-chart 58 50
GUIMark2-game 58 58
Bunnymark 57 57
MarineBlue 110 110
JS engine Graphics
Test Environments
- OS : Windows 10
- CPU : intel i5-2500
- Memory :4GB
- Graphics : AMD Radeon HD 6450

31. 6.
Web Browser?

32. SLING Desktop browser
SLING User Agent (unknown UA)
Open source (webkit) bugs
Plugin(flash) support
JavaScriptCore
Platform features (media engine, extension, …)
Risks

33. 몇번의 browser를 만들었나
Webkit Android browser
Android thin client browser
Sling on WIN32
Sling on QT
그리고...

34. Desktop browser
Chromium based
Sling tab
Chromium의 coverage
높은 browser baseline
Chromium + naver tech
Sling experience
Sling open source project

35. 7.
Naver Web Browser
: Whale

36. 다양함
기술최신성
커스터마이징
빠르고
가벼움
흐름

37. 익숙함을 넘을 수 있을까?
흐름
체감할 수 있는 효익은?
사용자가 진정 원하는 것은 무엇일까?

38. 정의
Multitasking
What’s Next?

39. WHALE is
omni-tasking
browser

40. Too many tabs (over-tabber)

41. 웨일 스페이스

42. 웨일 벨리

43. 퀵서치

44. 사이드바

45. Too many popups

46. 스마트 팝업

47. Technology
JS engine
tuning
Security
Memory/power
saving

48. Technology

54. whale.naver.com

55. Q&A

56. Thank You