Cada vez mais ferramentas, softwares e devices possuem soluções baseadas no WebKit. Contudo, poucas pessoas sabem o que ele é de verdade, como ele funciona internamente, seu potencial e o que ele oferece. Veremos seus core, discutiremos como é possível usar o WebKit para fazer o seu browser ou usá-lo dentro de sua aplicação e entenderemos seu funcionamento e suas ferramentas disponiveis. Ainda, veremos como funciona a interpretação e run do JavaScript dentro da engine V8

1. NAS ENTRANHAS
DO
WEBKIT E DO V8
ZAEDY SAYÃO @zaedysayao

2. Zaedy Dantas Sayão
@zaedysayao
@javamanrj
@javamanrj
@WORKS
http://about.me/zaedy

5. BÁSICO

7. CONCEITO

8. O QUE É?

9. BROWSER

11. X

12. USER INTERFACE
BROWSER ENGINE
RENDER ENGINE
NETWORK
I/O
JAVASCRIPT
ENGINE
GRAPHICS
STACK

13. USER INTERFACE
BROWSER ENGINE
RENDER ENGINE
NETWORK
I/O
JAVASCRIPT
ENGINE
GRAPHICS
STACK
W
EBKIT

14. WEBKIT
NÃO É UM
BROWSER

15. WEBKIT
⊑

16. BROWSER
ENGINE

17. RENDER
ENGINE

18. ENGINE?

19. CONJUNTO
DE LIBS
CÓDIGO

20. FAZ O QUE?

22. C
Ó
D
I
G
O

23. C
Ó
D
I
G
O

24. C
Ó
D
I
G
O

25. C
Ó
D
I
G
O

26. C
Ó
D
I
G
O
42

27. C
Ó
D
I
G
O

28. C
Ó
D
I
G
O
HTML
CSS
JS
SVG

29. C
Ó
D
I
G
O
PAINT
HTML
CSS
JS
SVG

30. C
Ó
D
I
G
O
PAINT
HTML
CSS
JS
SVG
LAYOUT

33. PAST

34. HISTÓRIA

35. 2001

36. KHTML

37. 2005

39. CONTRIBUTOR

40. CONTRIBUTOR

41. CONTRIBUTOR
COMMITER

42. CONTRIBUTOR
COMMITER

43. CONTRIBUTOR
COMMITER
REVIEWER

44. APPLE
ENVIA
CONTA SVN

45. ONDE
RODA?

47. EVERYWHERE

50. APPLE
GOOGLE
NOKIA
BLACKBERRY
IGALIA (GNOME)

51. GETTING
CODE

52. svn checkout https://svn.webkit.org/repository/webkit/trunk
git clone git://git.webkit.org/WebKit.git

53. svn checkout https://svn.webkit.org/repository/webkit/trunk
git clone git://git.webkit.org/WebKit.git
1.2GB

54. svn checkout https://svn.webkit.org/repository/webkit/trunk
git clone git://git.webkit.org/WebKit.git
1.2GB
80% TESTES

55. BUILD

56. WebKitTools/Scripts/build-webkit
--qt for Qt,
--gtk for Gtk+
--debug for “Debug” mode

57. RUN

58. WebKitTools/Scripts/run-launcher
--qt for Qt,
--gtk for Gtk+
--debug for “Debug” mode

60. PORTS

61. SAFARI
IOS ≠WINDOWS

62. APPLE
PORT DO
COREFOUNDATION
PARA O WINDOWS

63. CHROME
CHROMIUM

64. ANDROID

65. QTWEBKIT

66. WEBKITGTK+

67. WEBKIT
NIGHTLY
MAC PORT -> SAFARI

68. PORTS

69. INTERFACE

70. IMPLEMENTAÇÃO

73. <input type=”number”/>

74. <input type=”number”/>
WEBKIT

75. <input type=”number” />
WebKit
ursday, November 3, 2011
<input type=”number”/>
WEBKIT

76. <input type=”number” />
WebKit
ursday, November 3, 2011
<input type=”number”/>
PINTA
PARA MIM
WEBKIT

77. <input type=”number” />
WebKit
ursday, November 3, 2011
<input type=”number”/>
PINTA
PARA MIM
WEBKIT
PORT

78. <input type=”number” />
WebKit
ursday, November 3, 2011
<input type=”number”/>
PINTA
PARA MIM
input type=”number” />WEBKIT
PORT

79. <input type=”number” />
WebKit
ursday, November 3, 2011
<input type=”number”/>
PINTA
PARA MIM
input type=”number” />
EU SEI FAZER!
WEBKIT
PORT

80. <input type=”number” />
WebKit
ursday, November 3, 2011
<input type=”number”/>
WEBKIT
123

81. <input type=”number” />
WebKit
ursday, November 3, 2011
<input type=”number”/>
WEBKIT
123
AQUI

82. <input type=”number”/>
input type=”number” />
PORT
123

83. <input type=”number”/>
input type=”number” />
PORT
123
BLZ!

84. <input type=”number”/>
input type=”number” />
PORT
123
BLZ!

85. WEBKIT SABE
COMO
DESENHAR

86. RESPONSABILIDADE
É DO PORT
(COREGRAPHICS)

89. QTWEBKIT
QNETWORKACESSMANAGER

90. KDEWEBKIT
KDE NETWORK LAYER

91. NETWORK
INTERFACE
NADA DE HTTP, SSL...
MAS TEM CHAMADAS PARA
ENVIO DE DADOS

92. IMPLEMENTAÇÃO
LIB DO SISTEMA

93. SE QUISER FAZER
UM PORT?

94. IMPLEMENTE AS
INTERFACES

95. SE NÃO
IMPLEMENTAR?

96. fillRoundedRect()
BOTÃO
QUADRADO

97. SE WEBKIT
->
MENOS UM
BROWSER PARA
TESTAR
#1

99. NOVA FEATURE
->
DISPONÍVEL EM
TODO PORT
#2

102. WEBKIT
TAMBÉM É UMA
API

103. WEBKIT2
MULTI-PROCESS

104. JAVASCRIPTCORE
ENGINE

105. WEBCORE
CSS, HTML, DOM,
RENDER

106. WTF
WEB TEMPLATE
FRAMEWORK

109. PROPÓSITOS

111. WEBCORE

112. LOADING
PARSING
LAYOUT
PAINT
HTML EDITING
JS BINDINGS

113. LOADING
PEGANDO DADOS

114. COMPLICADA!!!

115. WEBKIT
WEBCORE
WEBCORE/LOADER
WEBCORE/PLATFORM/NETWORK
FRAMELOADERCLIENT

116. 2 PASSOS
FRAMES E RESOURCES

117. LOADING A
FRAME
CLASSE FRAMELOADER

118. 1)POLICY STAGE
BLOCK POP-UP
CROSS-PROCESS NAVIGATION

119. 2)PROVISIONAL
STAGE
DOWNLOAD OU COMMIT
EX: LINK

120. 3)COMMITED
STAGE
START PARSING

121. LOADING
SUBRESOURCES

122. DOCLOADER
CACHE

123. DOCLOADER
PEGA UMA URL
VERIFICA NO CACHE OU
LOADER
RETORNA UM
CACHEDRESOURCE

124. CACHEDRESOURCE
RESPONDE CALLBACK
PRODUZ UM OBJETO
(IMAGEM, FONTE...)

125. PARSING

126. HTML x XML
HTMLTOKENIZER E HTMLPARSER
XMLTOKENIZER
OUTRAS TASKS:
PRE-LOAD SCANNING
(CARREGAMENTO DE CSS ANTES
DO PARSE)

128. DOM TREE
RENDEROBJECT TREE
RENDERSTYLE TREE
RENDERLAYER TREE
LINEBOX TREE

129. LOADING -> SOURCE
PARSING -> DOM TREE
attach() -> RENDEROBJECT TREE
STYLE RESOLUTION -> RENDERSTYLE
TREE
LAYOUT -> RENDERLAYER TREE
LINEBOX TREE

130. DOM TREE
<html>
<head>
<title>
foo
</title>
<head>
HTMLDocument
HTMLHTMLElement
HTMLHeadElement
HTMLTitleElement
Text(“foo”)

131. RENDER TREE
LAYOUT
PAINTING
HIT TESTING

132. RENDER TREE
RENDEROBJECTS
RENDERSTYLE
RENDERLAYERS
INLINEBOXES

133. RENDEROBJECT
class RenderObject {
virtual void layout() = 0;
virtual void paint(PaintInfo) = 0;
virtual IntRect repaintRect() = 0;
Node* node();
RenderStyle* style() const;
RenderLayer* containingLayer();
.....
}

134. RENDEROBJECT
RenderBlock(<div>, <p>)
RenderInline(<span>, <b>, <i>)
RenderImage(<image>)
RenderText(#text)
RenderTableCell (<td>)

135. OBJETOS DA
ENGINE JSString
Array
Number
Prototypes
.__proto__
.callee
__defineGetter__
.toString()

138. ABERTAS
FECHADAS

139. SPIDER MONKEY
JAVASCRIPTCORE (JSC, NITRO)
V8

140. V8

141. PARSER RUNTIME
INTERPRETER

142. PARSER

143. TOKENIZE
var answer = 42;

144. TOKENIZE
var answer = 42;
keyword

145. TOKENIZE
var answer = 42;
keyword identifier

146. TOKENIZE
var answer = 42;
keyword identifier
sinal igual

147. TOKENIZE
var answer = 42;
keyword identifier
sinal igual
número

148. TOKENIZE
var answer = 42;
keyword identifier
sinal igual
número
ponto e
vírgula

149. TOKENIZER
NOV8
src/scanner.*

150. KEYWORD
X
IDENTIFIER

151. #1
PERGUNTA 1

152. instanceof - instanceComponent
#1
PERGUNTA 1

153. instanceof - instanceComponent
#1
PERGUNTA 1

154. instanceof - instanceComponent
#1
PERGUNTA 1

155. #2
PERGUNTA 2

156. A G H J K L M O P Q XY Z
#2
PERGUNTA 2

157. GRAMÁTICA

158. SouceElement :: (Statement)*
FunctionDeclaration ::
‘function’ Identifier ‘(‘FormalParameters’)’
‘{‘FunctionBody’}’

159. SYNTAX TREE

160. IDENTIFIER LITERAL
CONSTANT
VARIABLE
DECLARATION
answer 42

161. CONSEQUÊNCIA
ALTERNATIVA
BRANCH
VELHO
NOVO
CONDIÇÃO
idade > 60

162. PARSER NOV8
src/parser.*

163. CODE TRACE
(EVAL)
SCRIPT :: COMPILE
SCRIPT :: NEW
INTERNAL :: COMPILER :: COMPILE
INTERNAL :: MAKEFUNCIONINFO
INTERNAL :: PARSEAPI :: PARSE

164. INTERPRETER

165. var answer = 42;

166. var answer = 42;
Declare um objeto local
Chame esse objeto de “answer”
Crie um número 42
De “assign” do número ao objeto

167. IDENTIFIER LITERAL
CONSTANT
VARIABLE
DECLARATION
answer 42

168. VELOCIDADE

169. BYTECODE
SERIALIZA EM UMA
LISTA DE “AÇÕES”

170. COMPILA O
BYTECODE
PARA ASSEMBLY
JIT (=JUST-IN-TIME) COMPILE

171. shell --print-code
shell --expose-debug-as deb

172. shell --print-code
shell --expose-debug-as deb
deb.Debug.disassemble(f)

173. LAZY

175. foobar = function(x, y, z)
{
...
}
foobar(x, y, z);

176. foobar = function(x, y, z)
{
...
}
foobar(x, y, z);
Analiza sintaxe
Guarda posição da função

177. foobar = function(x, y, z)
{
...
}
foobar(x, y, z);
Analiza sintaxe
Guarda posição da função
Compila e roda

178. foobar = function(x, y, z)
{
...
}
foobar(x, y, z);
Analiza sintaxe
Guarda posição da função
foobar = function(x, y, z, run)
{
...
}
foobar(x, y, z, false);
Compila e roda

179. foobar = function(x, y, z)
{
...
}
foobar(x, y, z);
Analiza sintaxe
Guarda posição da função
foobar = function(x, y, z, run)
{
...
}
foobar(x, y, z, false);
HACK
Compila e roda

180. RUNTIME

181. Date.now()
código
nativo
código
JavaScript

182. BRIDGE
BRIDGING

183. C++
Primitive
Date
Object
Array
Function
External

184. Handle<FunctionTemplate> systemObject = FunctionTemplate::New();
systemObject->Set(String::New(“exit”)),
FunctionTemplate::New(system_exit)->GetFunction());
static Handle<value> system_exit(const Arguments& args)
{
int status = args[0]->Int32Value();
::exit(status);
return Undefined();
}
EXPONDO
FUNÇÃO

185. JSLINT
JSBEAUTIFY
YUI COMPRESSOR

187. OBRIGADO!
@zaedysayao