안드로이드 웹뷰의 모든것
이형욱
NAVER / Whale Core
웨일 브라우저 TL로 웨일 브라우저 개발 및 관련 기술을 연구하고 있습니다. 웹엔진 (WebKit, Blink) 오픈소스 활동을 하고 있으며, 현재 브라우저 렌더링 성능 및 메모리 최적화에 관심이 있습니다.
This document discusses the webdriver.io framework for automated browser testing. The author needed a framework for blackbox testing of a web interface like a user would. Webdriver.io provides JavaScript bindings for Selenium that allow writing tests in a synchronous style using the browser object. Tests can run across multiple browsers and platforms. The framework is easy to set up and use, supports plugins, and allows custom commands. Under the hood, it communicates with Selenium using the WebDriver protocol to automate actual browsers.
Android의 Window와 WindowInsets에 대해서 알아봅니다. System UI 영역에 우리 앱을 draw하거나 풀스크린 모드로 화면을 구성 할 때, Display Cutout 대응 등 WindowInset이 활용되는 경우와 주의해야 할 점들에 대해 알아봅니다. Google 개발자 Chris Banes가 발표한 Becoming a master window fitters(Droidcon NYC 2017)를 기반으로 준비하였으며, 최신사항을 반영하였습니다.
Presentation about new Angular 9.
It gives introduction about angular framework.
Provides information about why we use angular,
additional features and fixes from old versions. It will clearly explain how to create a new angular project and how to use angular commands and their usages.
It will also explain about the key components like angular architecture, routing, dependency injection etc.,
The document discusses the history and architecture of Android's WebView. It describes how WebView has transitioned from using a custom WebKit implementation to being based on the Chromium rendering engine. It also summarizes the threading models of Chrome and WebView and explains how rendering occurs in two phases of painting and compositing layers.
The document provides an overview of React including its introduction, prerequisites, installation, fundamentals, components, life cycle, routing, hooks, Redux, projects, testing, comparison to Angular, and tips for React developers. It discusses key React concepts such as JSX, props, state, events, DOM, and virtual DOM.
The document outlines the agenda for a presentation on Node.js, which includes defining what Node.js is, how it works, examples of its use, how to learn Node.js, and what problems it is well-suited to solve. Key points are that Node.js is a JavaScript runtime built on Chrome's V8 engine, uses non-blocking I/O, and is well-suited for building microservices and real-time applications that require high throughput and scalability. Recommended resources for learning more include nodeschool.io, codewars.com, and nodeup.com.
The document provides an overview of middleware in Node.js and Express. It defines middleware as functions that have access to the request and response objects and can run code and make changes to these objects before the next middleware in the chain. It discusses common uses of middleware like logging, authentication, parsing request bodies. It also covers Connect middleware and how Express builds on Connect by adding features like routing and views. Key aspects covered include the middleware pipeline concept, error handling with middleware, and common middleware modules.
Build over 20 mini JavaScript Projects with full source code
https://skl.sh/3yJdYM0
Web Developer Setup use of Editor for JavaScript Code
JavaScript Projects DOM Interactive Dynamic web pages Introduction web development Course Resource Guide.
Getting started with JavaScript DOM coding and development
Web Developer Setup use of Editor for JavaScript Code
JavaScript Resources to explore more about JavaScript
JavaScript DOM Object Selecting Page elements and more
JavaScript querySelectorAll Get Page Elements Select ALL
Page Events Element Event Listener access page content with JavaScript
JavaScript and Page Input Values from Page Elements
How to use JavaScript Request Animation Frame
JavaScript Starter Projects DOM Simple Projects to Start Coding
How to make Interactive DOM list saving to localstorage
JavaScript Component Create a Star Rating Project
JavaScript Game within the DOM Coin Toss Game Project
JavaScript Typing Challenge Game with JavaScript DOM
JavaScript DOM fun with Page Elements Moving Storing Keypress
JavaScript Combo Guessing Game Exercise
JavaScript Shape Clicker Game Click the shape quickly to win
JavaScript Number Guessing Game with Game Logic
JavaScript DOM Interactive Components and Useful Projects
Pure JavaScript Accordion hide and show page elements
JavaScript Drag and Drop Simple Boxes Component
Dynamic Drag and Drop
JavaScript Email Extractor Mini Project
Create a Quiz with Javascript JSON quiz tracker
JavaScript Image Preview File Reader Example
JavaScript Interactive Dice Game with Page elements
JavaScript Dice Game Challenge Lesson
JavaScript DOM Fun Projects Interactive DOM Elements
JavaScript Tip Calculator Project
Tip Calculator Project Part 1
Tip Calculator Project Part 2
Pure JavaScript Calculator DOM page elements Project
JavaScript Calculator Part 1
JavaScript Calculator Part 2
JavaScript Calculator Part 3
JavaScript Bubble Popping DOM Game Coding project
How to move a Page Element With JavaScript DOM Mover Example
Collision Detection between Page elements with JavaScript DOM
JavaScript DOM Interactive Game
The document provides an overview of Jenkins, a popular open source continuous integration (CI) tool. It discusses what CI is, describes Jenkins' architecture and features like plugin extensibility. It also covers installing and configuring Jenkins, including managing plugins, nodes and jobs. The document demonstrates how to set up a sample job and outlines benefits like supporting Agile development through continuous integration and access to working software copies.
Vue.js is a progressive JavaScript framework for building user interfaces. It focuses only on the view layer and makes no assumptions about the rest of your code. Vue.js allows you to progressively adopt it into existing projects and features simple and flexible APIs. Performance benchmarks show Vue.js to be one of the fastest frameworks available.
The document provides instructions for setting up Kubernetes on two VMs (master and worker nodes) using VirtualBox. It describes the minimum requirements for the VMs and outlines the steps to configure networking and install Kubernetes, container runtime (containerd), and CNI (Flannel). The steps covered include setting up NAT and host-only networking in VirtualBox, configuring the hosts file, installing Kubernetes packages (kubeadm, kubelet, kubectl), initializing the master node with kubeadm, joining the worker node to the cluster, and deploying a sample pod.
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
자동화, 계륵에 살 붙이기
: Evolution of Android Automation Test
송의초경
N Tech Service/ Contents QA
NTS Contents QA 팀에서 근무하고 있는 송의초경입니다. 오디오 플랫폼에서 주로 QA를 진행했고 네이버 뮤직을 거쳐 현재는 오디오 클립 QA를 담당하고 있습니다. 자동화 거버넌스 TF에서 자동화 라이브러리의 유지 보수도 함께 담당하고 있습니다.
This knolx is all about the new features which are introduced in selenium 4.
The differences between selenium3&4,
And how it is better than its competitor Cypress.
This document discusses the webdriver.io framework for automated browser testing. The author needed a framework for blackbox testing of a web interface like a user would. Webdriver.io provides JavaScript bindings for Selenium that allow writing tests in a synchronous style using the browser object. Tests can run across multiple browsers and platforms. The framework is easy to set up and use, supports plugins, and allows custom commands. Under the hood, it communicates with Selenium using the WebDriver protocol to automate actual browsers.
Android의 Window와 WindowInsets에 대해서 알아봅니다. System UI 영역에 우리 앱을 draw하거나 풀스크린 모드로 화면을 구성 할 때, Display Cutout 대응 등 WindowInset이 활용되는 경우와 주의해야 할 점들에 대해 알아봅니다. Google 개발자 Chris Banes가 발표한 Becoming a master window fitters(Droidcon NYC 2017)를 기반으로 준비하였으며, 최신사항을 반영하였습니다.
Presentation about new Angular 9.
It gives introduction about angular framework.
Provides information about why we use angular,
additional features and fixes from old versions. It will clearly explain how to create a new angular project and how to use angular commands and their usages.
It will also explain about the key components like angular architecture, routing, dependency injection etc.,
The document discusses the history and architecture of Android's WebView. It describes how WebView has transitioned from using a custom WebKit implementation to being based on the Chromium rendering engine. It also summarizes the threading models of Chrome and WebView and explains how rendering occurs in two phases of painting and compositing layers.
The document provides an overview of React including its introduction, prerequisites, installation, fundamentals, components, life cycle, routing, hooks, Redux, projects, testing, comparison to Angular, and tips for React developers. It discusses key React concepts such as JSX, props, state, events, DOM, and virtual DOM.
The document outlines the agenda for a presentation on Node.js, which includes defining what Node.js is, how it works, examples of its use, how to learn Node.js, and what problems it is well-suited to solve. Key points are that Node.js is a JavaScript runtime built on Chrome's V8 engine, uses non-blocking I/O, and is well-suited for building microservices and real-time applications that require high throughput and scalability. Recommended resources for learning more include nodeschool.io, codewars.com, and nodeup.com.
The document provides an overview of middleware in Node.js and Express. It defines middleware as functions that have access to the request and response objects and can run code and make changes to these objects before the next middleware in the chain. It discusses common uses of middleware like logging, authentication, parsing request bodies. It also covers Connect middleware and how Express builds on Connect by adding features like routing and views. Key aspects covered include the middleware pipeline concept, error handling with middleware, and common middleware modules.
Build over 20 mini JavaScript Projects with full source code
https://skl.sh/3yJdYM0
Web Developer Setup use of Editor for JavaScript Code
JavaScript Projects DOM Interactive Dynamic web pages Introduction web development Course Resource Guide.
Getting started with JavaScript DOM coding and development
Web Developer Setup use of Editor for JavaScript Code
JavaScript Resources to explore more about JavaScript
JavaScript DOM Object Selecting Page elements and more
JavaScript querySelectorAll Get Page Elements Select ALL
Page Events Element Event Listener access page content with JavaScript
JavaScript and Page Input Values from Page Elements
How to use JavaScript Request Animation Frame
JavaScript Starter Projects DOM Simple Projects to Start Coding
How to make Interactive DOM list saving to localstorage
JavaScript Component Create a Star Rating Project
JavaScript Game within the DOM Coin Toss Game Project
JavaScript Typing Challenge Game with JavaScript DOM
JavaScript DOM fun with Page Elements Moving Storing Keypress
JavaScript Combo Guessing Game Exercise
JavaScript Shape Clicker Game Click the shape quickly to win
JavaScript Number Guessing Game with Game Logic
JavaScript DOM Interactive Components and Useful Projects
Pure JavaScript Accordion hide and show page elements
JavaScript Drag and Drop Simple Boxes Component
Dynamic Drag and Drop
JavaScript Email Extractor Mini Project
Create a Quiz with Javascript JSON quiz tracker
JavaScript Image Preview File Reader Example
JavaScript Interactive Dice Game with Page elements
JavaScript Dice Game Challenge Lesson
JavaScript DOM Fun Projects Interactive DOM Elements
JavaScript Tip Calculator Project
Tip Calculator Project Part 1
Tip Calculator Project Part 2
Pure JavaScript Calculator DOM page elements Project
JavaScript Calculator Part 1
JavaScript Calculator Part 2
JavaScript Calculator Part 3
JavaScript Bubble Popping DOM Game Coding project
How to move a Page Element With JavaScript DOM Mover Example
Collision Detection between Page elements with JavaScript DOM
JavaScript DOM Interactive Game
The document provides an overview of Jenkins, a popular open source continuous integration (CI) tool. It discusses what CI is, describes Jenkins' architecture and features like plugin extensibility. It also covers installing and configuring Jenkins, including managing plugins, nodes and jobs. The document demonstrates how to set up a sample job and outlines benefits like supporting Agile development through continuous integration and access to working software copies.
Vue.js is a progressive JavaScript framework for building user interfaces. It focuses only on the view layer and makes no assumptions about the rest of your code. Vue.js allows you to progressively adopt it into existing projects and features simple and flexible APIs. Performance benchmarks show Vue.js to be one of the fastest frameworks available.
The document provides instructions for setting up Kubernetes on two VMs (master and worker nodes) using VirtualBox. It describes the minimum requirements for the VMs and outlines the steps to configure networking and install Kubernetes, container runtime (containerd), and CNI (Flannel). The steps covered include setting up NAT and host-only networking in VirtualBox, configuring the hosts file, installing Kubernetes packages (kubeadm, kubelet, kubectl), initializing the master node with kubeadm, joining the worker node to the cluster, and deploying a sample pod.
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation TestNAVER Engineering
자동화, 계륵에 살 붙이기
: Evolution of Android Automation Test
송의초경
N Tech Service/ Contents QA
NTS Contents QA 팀에서 근무하고 있는 송의초경입니다. 오디오 플랫폼에서 주로 QA를 진행했고 네이버 뮤직을 거쳐 현재는 오디오 클립 QA를 담당하고 있습니다. 자동화 거버넌스 TF에서 자동화 라이브러리의 유지 보수도 함께 담당하고 있습니다.
[Agenda]
*토크쇼 주제: Cloud Native를 위한 컨테이너 플랫폼 구현과 활용 이야기
1. 시장 및 기술동향 소개 & Container & Kubernetes 소개
2. Red Hat OpenShift를 왜 써야 할까요?
3. OpenShift Infra 구성 방안은 어떻게 되나요?
4. OpenShift와 Kubernetes의 주요 차이점은 무엇일까요?
5. 완전한 오픈소스 기반 OpenShift로 PaaS를 빠르게 구축이 가능 하나요?
6.컨테이너플랫폼의 운영을 효율적으로 하기위한 표준화에는 어떤 것이 필요할까요?
7. Red Hat OpenShift를 이용하여 기존의 시스템을 마이그레이션 하는 방법은 무엇인가요?
8. 개발자와 운영자가 일을 수월하게 할 수 있도록 도움을 준다고 하는데 어떠한 부분인가요?
9. Red Hat OpenShift 구축 성공 사례가 있나요?
사이트 기능 변경 없이 Web Streaming DRM 적용 : Web Keeper를 적용해도 기존의 사이트 운영 방식이 그대로 유지되므로 사이트 관리가 편리
API Hooking 기술 적용 : 당사의 기술은 Windows의 Kernel이나 File System을 변경하지 않기 때문에 Windows OS에 대한 무결성 및 운영성을 보장
다양한 보안 방지 기능 지원 : 마우스, 키보드, 캡쳐 툴을 이용하여 Web 화면의 일부나 전체를 복사해가는 것을 방지 하는 module certificate 검사를 통한 복제 방지등
웹사이트의 무단 링크등 방지 : 웹사이트에 무단으로 링크하여 사용하는 행위 방지가 가능
ZUIX is a design system created by Zigbang's CTO team to standardize design across all of Zigbang's services. It uses React Native for responsive, multi-platform components and includes tools like Storybook for development and a design review infrastructure for validation. The deployment process involves code reviews, CI/CD pipelines, and publishing to a npm registry. Training and documentation is provided through tools like Google Classroom and Notion. The team aims to further develop ZUIX by improving the design review tools, adding end-to-end testing, and analyzing component usage. The goal is to solve Zigbang's unique challenges through an agile, collaborative approach between designers and developers.
This document discusses Kakao's search platform front-end project. It describes the architecture of an integrated search service using microservices and the need for a design system due to fragmented UIs. It introduces the KST (Kakao Search Template) project for creating a design system including 200+ UI blocks and templates. The KST Builder, Logger, and Dashboard are discussed for managing templates, logging usage, and monitoring coverage. Maintaining a consistent design system is important for operating diverse search services and platforms.
This document discusses Banksalad Product Language (BPL), which is a method used at Banksalad to standardize UI text, elements, and components. It allows designers and developers to use consistent terms, while abstracting UI elements to different levels suitable for their roles. Examples of standardized elements are provided, as well as external resources that discuss concepts like tree shaking that are relevant to BPL. While BPL has benefits, the document considers whether there may be better approaches than BPL.
This document summarizes a presentation about using Stitches, a React styling library, and Storybook for component design.
The presentation introduces Stitches as the styling library used for its support of React, easy usage, and themes. Key features of Stitches discussed include creating styled components, variants, and comparisons to other libraries.
Storybook is presented as a way to improve communication between designers and developers by allowing visualization of components alongside their stories. Clean communication through a shared Storybook is emphasized.
Reflections on initially creating a design system note the benefits of consistency and speed but also identify areas for improvement like documentation, process alignment, and understanding each other's roles. Establishing trust and understanding between
비행기 설계를 왜 통일 해야 할까?
디자인 시스템을 하는 이유
비행기들이 다 용도가 다르다...어떻게 설계하지?
맥락이 다른 페이지와 패턴
경유지까지 아직 멀었다... 언제 수리하지?
디자인 시스템을 적용하는 시점
엔지니어랑 얘기해서 정비해야하는데...어떻게 수리하지?
디자인 시스템을 적용하는 프로세스
비행기 설계가 바뀐걸 어떻게 알리지?
디자인 시스템의 전파
The document discusses Kotlin coroutines and how they can be used to write asynchronous code in a synchronous, sequential way. It explains what coroutines are, how they work internally using continuation-passing style (CPS) transformation and state machines, and compares them to callbacks. It also outlines some of the benefits of using coroutines, such as structured concurrency, light weight execution, built-in cancellation, and simplifying asynchronous code. Finally, it provides examples of how to use common coroutine builders like launch, async, and coroutineScope in a basic Android application with ViewModels.
This document contains the transcript from a presentation given by Wonsuk Lim from Naver on tips for debugging and analyzing Android applications. Some key tips discussed include fully utilizing the Android emulator's capabilities like 2-finger touch control, clipboard sharing between the emulator and host PC, and mocking locations. Advanced settings for the emulator like foldable and camera emulation are also covered. The presenter recommends ways to configure developer options and use tools like LeakCanary, the Android profiler, and Stetho for testing app stability. Methods for understanding the Android framework by reviewing system services and managers via AIDL files and logcat dumps are presented. Finally, reverse engineering tools like APK Extractor and decompilers are introduced.
6. Web content in a box
Powers browsers such as AOSP Browser
Displays almost all mobile banner ads
Can be used to create portable HTML-based apps
Often intermixed imperceptibly with native Views
<- Android View
<- Android WebView
1. 안드로이드 웹뷰란 무엇인가?
8. • 안드로이드 제조사에서 경쟁적으로 WebKit을 Customization
• 안드로이드 버전별 서로 다른 WebKit을 사용하고 있음
1) Android 4.3 이전 버전은 WebKit 기반의 렌더링 엔진을 사용
2) Android 4.4 부터는 Blink 기반의 렌더링 엔진으로 교체
• 현재는 사용자 웹뷰 업데이트 유무에 따라 서로 다른 버전을 사용
HTML5 Test.com CSS3 Test.com
삼성 갤럭시 S4 472 59%
삼성 갤럭시 노트 2 404 47%
엘지 옵티머스 G 395 45%
엘지 옵티머스 뷰 395 45%
팬택 베가 No 6 318 45%
갤럭시 넥서스 (AOSP) 267 45%
3. 안드로이드 웹뷰와 파편화
9. 4. WebKit 브라우저 엔진의 역사
KHTML, KJS (1999.05 ~)
Blink (2013.04 ~)
WebKit (2001 ~)
Open Source in 2005
Apple Forks KHTML, KJS in 2001
Google Forks WebKit in 2013
10. 5. 안드로이드 웹뷰의 구조
Blink
(웹엔진)
Content
(멀티 프로세스 지원 레이어)
Content API
Blink
Chromium
Android
WebView
Framework
Browser
Framework
11. Google Chrome Chromium
Logo Colorful Blue
Crash reporting Yes, if you turn it on None
User metrics Yes, if you turn it on No
Video and audio tags AAC, MP3, Vorbis and Theora Vorbis and Theora by default
Adobe Flash
custom (non-free) plugin
included in release
supports NPAPI plugins,
including the one from Adobe
PDF support
custom (non-free) plugin
included in release
downloads and displays with
system PDF viewer
Code Tested by Chrome developers May be modified by distributions
Sandbox Always on Depending on the distribution
Quality Assurance
New releases are tested before
sending to users
Depending on the distribution
6. 크롬과 크로미움의 차이점
12. Chapter 2. How chromium works
[Source: http://alien.slackbook.org/blog/watch-netflix-video-in-your-chromium-browser-this-time-for-real/]
14. DOM: Document Object Model
• Document = HTML, well-formed XML
• Object Model = Data + Method
Standard way for accessing and manipulating
2. HTML Parser
15. CSSOM: CSS Object Model
• DOM과 비슷하게 CSS도 CSSOM이 있음
• CSS는 HTML Element의 스타일을 정의
• 외부 링크로 정의된 경우 렌더링이 블로킹 됨
• Cascade down 개념을 구현하기 위해 트리 구조
3. CSS Parser
17. Recalculate Style의 결과
• Render Tree = DOM Tree + CSSOM Tree
• DOM Tree와 Render Tree는 1:1 관계가 아님
• 화면에 보이는 요소들을 중심으로 구성
5. Render Tree (1/2)
18. 5. Render Tree (2/2)
DOM CSSOM
Render Tree
[Source: Critical Rendering Path By llya Grigorik]
19. Layout 알고리즘
• 각 박스의 넓이는 viewport (ICB)기준
• 각 박스의 높이는 contents (fonts)를 기준
• 윈도우 사이즈를 변경 하거나 폰트 변경 시 Global Layout
• Dirty bit system으로 incremental layout
6. Layout
26. A modern 2D graphics library
SkPicture, SkPicturePlayBack:
Records and replay draw operations.
[http://www.dorothybrowser.com/parallelizing-canvas-rendering/]
8. VSync 기반 멀티 쓰레드 렌더링 (6/6)
27. Chapter 3. How chromium powered WebView works
[Source: https://play.google.com/apps/testing/com.google.android.webview ]