Nas entranhas do WebKit e do V8 - The Developers Conference 2013 SP - TDC2013
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Nas entranhas do WebKit e do V8 - The Developers Conference 2013 SP - TDC2013

  • 1,874 views
Uploaded on

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......

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,874
On Slideshare
1,862
From Embeds
12
Number of Embeds
1

Actions

Shares
Downloads
13
Comments
0
Likes
2

Embeds 12

https://twitter.com 12

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 3. BÁSICO
  • 4. CONCEITO
  • 5. O QUE É?
  • 6. BROWSER
  • 7. X
  • 8. USER INTERFACE BROWSER ENGINE RENDER ENGINE NETWORK I/O JAVASCRIPT ENGINE GRAPHICS STACK
  • 9. USER INTERFACE BROWSER ENGINE RENDER ENGINE NETWORK I/O JAVASCRIPT ENGINE GRAPHICS STACK W EBKIT
  • 10. WEBKIT NÃO É UM BROWSER
  • 11. WEBKIT ⊑
  • 12. BROWSER ENGINE
  • 13. RENDER ENGINE
  • 14. ENGINE?
  • 15. CONJUNTO DE LIBS CÓDIGO
  • 16. FAZ O QUE?
  • 17. C Ó D I G O
  • 18. C Ó D I G O
  • 19. C Ó D I G O
  • 20. C Ó D I G O
  • 21. C Ó D I G O 42
  • 22. C Ó D I G O
  • 23. C Ó D I G O HTML CSS JS SVG
  • 24. C Ó D I G O PAINT HTML CSS JS SVG
  • 25. C Ó D I G O PAINT HTML CSS JS SVG LAYOUT
  • 26. PAST
  • 27. HISTÓRIA
  • 28. 2001
  • 29. KHTML
  • 30. 2005
  • 31. CONTRIBUTOR
  • 32. CONTRIBUTOR
  • 33. CONTRIBUTOR COMMITER
  • 34. CONTRIBUTOR COMMITER
  • 35. CONTRIBUTOR COMMITER REVIEWER
  • 36. APPLE ENVIA CONTA SVN
  • 37. ONDE RODA?
  • 38. EVERYWHERE
  • 39. APPLE GOOGLE NOKIA BLACKBERRY IGALIA (GNOME)
  • 40. GETTING CODE
  • 41. svn checkout https://svn.webkit.org/repository/webkit/trunk git clone git://git.webkit.org/WebKit.git
  • 42. svn checkout https://svn.webkit.org/repository/webkit/trunk git clone git://git.webkit.org/WebKit.git 1.2GB
  • 43. svn checkout https://svn.webkit.org/repository/webkit/trunk git clone git://git.webkit.org/WebKit.git 1.2GB 80% TESTES
  • 44. BUILD
  • 45. WebKitTools/Scripts/build-webkit --qt for Qt, --gtk for Gtk+ --debug for “Debug” mode
  • 46. RUN
  • 47. WebKitTools/Scripts/run-launcher --qt for Qt, --gtk for Gtk+ --debug for “Debug” mode
  • 48. PORTS
  • 49. SAFARI IOS ≠WINDOWS
  • 50. APPLE PORT DO COREFOUNDATION PARA O WINDOWS
  • 51. CHROME CHROMIUM
  • 52. ANDROID
  • 53. QTWEBKIT
  • 54. WEBKITGTK+
  • 55. WEBKIT NIGHTLY MAC PORT -> SAFARI
  • 56. PORTS
  • 57. INTERFACE
  • 58. IMPLEMENTAÇÃO
  • 59. <input type=”number”/>
  • 60. <input type=”number”/> WEBKIT
  • 61. <input type=”number” /> WebKit ursday, November 3, 2011 <input type=”number”/> WEBKIT
  • 62. <input type=”number” /> WebKit ursday, November 3, 2011 <input type=”number”/> PINTA PARA MIM WEBKIT
  • 63. <input type=”number” /> WebKit ursday, November 3, 2011 <input type=”number”/> PINTA PARA MIM WEBKIT PORT
  • 64. <input type=”number” /> WebKit ursday, November 3, 2011 <input type=”number”/> PINTA PARA MIM input type=”number” />WEBKIT PORT
  • 65. <input type=”number” /> WebKit ursday, November 3, 2011 <input type=”number”/> PINTA PARA MIM input type=”number” /> EU SEI FAZER! WEBKIT PORT
  • 66. <input type=”number” /> WebKit ursday, November 3, 2011 <input type=”number”/> WEBKIT 123
  • 67. <input type=”number” /> WebKit ursday, November 3, 2011 <input type=”number”/> WEBKIT 123 AQUI
  • 68. <input type=”number”/> input type=”number” /> PORT 123
  • 69. <input type=”number”/> input type=”number” /> PORT 123 BLZ!
  • 70. <input type=”number”/> input type=”number” /> PORT 123 BLZ!
  • 71. WEBKIT SABE COMO DESENHAR
  • 72. RESPONSABILIDADE É DO PORT (COREGRAPHICS)
  • 73. QTWEBKIT QNETWORKACESSMANAGER
  • 74. KDEWEBKIT KDE NETWORK LAYER
  • 75. NETWORK INTERFACE NADA DE HTTP, SSL... MAS TEM CHAMADAS PARA ENVIO DE DADOS
  • 76. IMPLEMENTAÇÃO LIB DO SISTEMA
  • 77. SE QUISER FAZER UM PORT?
  • 78. IMPLEMENTE AS INTERFACES
  • 79. SE NÃO IMPLEMENTAR?
  • 80. fillRoundedRect() BOTÃO QUADRADO
  • 81. SE WEBKIT -> MENOS UM BROWSER PARA TESTAR #1
  • 82. NOVA FEATURE -> DISPONÍVEL EM TODO PORT #2
  • 83. WEBKIT TAMBÉM É UMA API
  • 84. WEBKIT2 MULTI-PROCESS
  • 85. JAVASCRIPTCORE ENGINE
  • 86. WEBCORE CSS, HTML, DOM, RENDER
  • 87. WTF WEB TEMPLATE FRAMEWORK
  • 88. PROPÓSITOS
  • 89. WEBCORE
  • 90. LOADING PARSING LAYOUT PAINT HTML EDITING JS BINDINGS
  • 91. LOADING PEGANDO DADOS
  • 92. COMPLICADA!!!
  • 93. WEBKIT WEBCORE WEBCORE/LOADER WEBCORE/PLATFORM/NETWORK FRAMELOADERCLIENT
  • 94. 2 PASSOS FRAMES E RESOURCES
  • 95. LOADING A FRAME CLASSE FRAMELOADER
  • 96. 1)POLICY STAGE BLOCK POP-UP CROSS-PROCESS NAVIGATION
  • 97. 2)PROVISIONAL STAGE DOWNLOAD OU COMMIT EX: LINK
  • 98. 3)COMMITED STAGE START PARSING
  • 99. LOADING SUBRESOURCES
  • 100. DOCLOADER CACHE
  • 101. DOCLOADER PEGA UMA URL VERIFICA NO CACHE OU LOADER RETORNA UM CACHEDRESOURCE
  • 102. CACHEDRESOURCE RESPONDE CALLBACK PRODUZ UM OBJETO (IMAGEM, FONTE...)
  • 103. PARSING
  • 104. HTML x XML HTMLTOKENIZER E HTMLPARSER XMLTOKENIZER OUTRAS TASKS: PRE-LOAD SCANNING (CARREGAMENTO DE CSS ANTES DO PARSE)
  • 105. DOM TREE RENDEROBJECT TREE RENDERSTYLE TREE RENDERLAYER TREE LINEBOX TREE
  • 106. LOADING -> SOURCE PARSING -> DOM TREE attach() -> RENDEROBJECT TREE STYLE RESOLUTION -> RENDERSTYLE TREE LAYOUT -> RENDERLAYER TREE LINEBOX TREE
  • 107. DOM TREE <html> <head> <title> foo </title> <head> HTMLDocument HTMLHTMLElement HTMLHeadElement HTMLTitleElement Text(“foo”)
  • 108. RENDER TREE LAYOUT PAINTING HIT TESTING
  • 109. RENDER TREE RENDEROBJECTS RENDERSTYLE RENDERLAYERS INLINEBOXES
  • 110. RENDEROBJECT class RenderObject { virtual void layout() = 0; virtual void paint(PaintInfo) = 0; virtual IntRect repaintRect() = 0; Node* node(); RenderStyle* style() const; RenderLayer* containingLayer(); ..... }
  • 111. RENDEROBJECT RenderBlock(<div>, <p>) RenderInline(<span>, <b>, <i>) RenderImage(<image>) RenderText(#text) RenderTableCell (<td>)
  • 112. OBJETOS DA ENGINE JSString Array Number Prototypes .__proto__ .callee __defineGetter__ .toString()
  • 113. ABERTAS FECHADAS
  • 114. SPIDER MONKEY JAVASCRIPTCORE (JSC, NITRO) V8
  • 115. V8
  • 116. PARSER RUNTIME INTERPRETER
  • 117. PARSER
  • 118. TOKENIZE var answer = 42;
  • 119. TOKENIZE var answer = 42; keyword
  • 120. TOKENIZE var answer = 42; keyword identifier
  • 121. TOKENIZE var answer = 42; keyword identifier sinal igual
  • 122. TOKENIZE var answer = 42; keyword identifier sinal igual número
  • 123. TOKENIZE var answer = 42; keyword identifier sinal igual número ponto e vírgula
  • 124. TOKENIZER NOV8 src/scanner.*
  • 125. KEYWORD X IDENTIFIER
  • 126. #1 PERGUNTA 1
  • 127. instanceof - instanceComponent #1 PERGUNTA 1
  • 128. instanceof - instanceComponent #1 PERGUNTA 1
  • 129. instanceof - instanceComponent #1 PERGUNTA 1
  • 130. #2 PERGUNTA 2
  • 131. A G H J K L M O P Q XY Z #2 PERGUNTA 2
  • 132. GRAMÁTICA
  • 133. SouceElement :: (Statement)* FunctionDeclaration :: ‘function’ Identifier ‘(‘FormalParameters’)’ ‘{‘FunctionBody’}’
  • 134. SYNTAX TREE
  • 135. IDENTIFIER LITERAL CONSTANT VARIABLE DECLARATION answer 42
  • 136. CONSEQUÊNCIA ALTERNATIVA BRANCH VELHO NOVO CONDIÇÃO idade > 60
  • 137. PARSER NOV8 src/parser.*
  • 138. CODE TRACE (EVAL) SCRIPT :: COMPILE SCRIPT :: NEW INTERNAL :: COMPILER :: COMPILE INTERNAL :: MAKEFUNCIONINFO INTERNAL :: PARSEAPI :: PARSE
  • 139. INTERPRETER
  • 140. var answer = 42;
  • 141. var answer = 42; Declare um objeto local Chame esse objeto de “answer” Crie um número 42 De “assign” do número ao objeto
  • 142. IDENTIFIER LITERAL CONSTANT VARIABLE DECLARATION answer 42
  • 143. VELOCIDADE
  • 144. BYTECODE SERIALIZA EM UMA LISTA DE “AÇÕES”
  • 145. COMPILA O BYTECODE PARA ASSEMBLY JIT (=JUST-IN-TIME) COMPILE
  • 146. shell --print-code shell --expose-debug-as deb
  • 147. shell --print-code shell --expose-debug-as deb deb.Debug.disassemble(f)
  • 148. LAZY
  • 149. foobar = function(x, y, z) { ... } foobar(x, y, z);
  • 150. foobar = function(x, y, z) { ... } foobar(x, y, z); Analiza sintaxe Guarda posição da função
  • 151. foobar = function(x, y, z) { ... } foobar(x, y, z); Analiza sintaxe Guarda posição da função Compila e roda
  • 152. 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
  • 153. 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
  • 154. RUNTIME
  • 155. Date.now() código nativo código JavaScript
  • 156. BRIDGE BRIDGING
  • 157. C++ Primitive Date Object Array Function External
  • 158. 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
  • 159. JSLINT JSBEAUTIFY YUI COMPRESSOR
  • 160. OBRIGADO! @zaedysayao