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

  • 1,615 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,615
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
15
Comments
0
Likes
2

Embeds 0

No embeds

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