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

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

• 1.
  5년간의 네이버웹엔진 개발/삽질기 그리고… 김효 NAVERLABS
• 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) gearfit, 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 Apachecordova - phonegap adobe initiative - phonejs jquery, knockout UI - telerik(icenium) cloud design, build, publishing, testing hybrid app
• 13.
  Devices Wearables android wear, pebble IoT hdmiadapter, 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 지배력에 초점 androidwebview 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 BrowserEngine : 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 Chrome54 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 SLINGUser Agent (unknown UA) Open source (webkit) bugs Plugin(flash) support JavaScriptCore Platform features (media engine, extension, …) Risks
• 33.
  몇번의 browser를 만들었나 WebkitAndroid browser Android thin client browser Sling on WIN32 Sling on QT 그리고...
• 34.
  Desktop browser Chromium based Slingtab 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