So, You Want to Be a Front-End Engineer?

So, You Want to Be a Front-End Engineer?

Browsers: The Final Frontier. The most volatile programming platform the world has ever known. You're a seasoned engineer who has mastered the art of server-side dev. You've conquered .NET, Java, and many more. You know a little bit about the strange new world of client-side development and you'd like to take your understanding to the next level. Good! Our mission: to explore the implementation details of the Browser, HTML, CSS, and JavaScript; to examine the tools and techniques that will help you boldly go where few have gone before, from Hacker to Front-End Engineer.

A recording of this presentation is available here: http://www.youtube.com/watch?v=Lsg84NtJbmI

Ead076bf445f9b50e3c094300e4690e9?s=128

David Mosher

May 03, 2012
Tweet

Transcript

  1. So, you want to be a StirTrek 2012, @dmosher front-end

    engineer Thursday, 3 May, 12
  2. “dev”olution designer hacker developer engineer Thursday, 3 May, 12

  3. Hey Look Buddy, I’m an Engineer. That means I solve

    Problems. http://www.youtube.com/watch?v=ipYkuCZ2IYI Thursday, 3 May, 12
  4. http://bit.ly/how-browsers-work Tali Garsiel & Paul Irish Thursday, 3 May, 12

  5. lesson plan 1. Understand Browsers 2. Understand Best Practices Thursday,

    3 May, 12
  6. BROWSERS >> the most volatile programming environment the world has

    ever known. Thursday, 3 May, 12
  7. Paul Irish “As a web developer, learning the inte rnals

    of browse r operations helps you make better decisions and know the j u s t i f i c a t i o n s b e h i n d development best practices.” http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ Thursday, 3 May, 12
  8. browsers: UI Browsing Engine Render Engine Network JS Engine UI

    Backend http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_browser_high_level_structure Thursday, 3 May, 12
  9. MAIN FLOW: Parse HTML http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_main_flow DOM Tree Render Tree the

    rendering engine requests the document in 8k chunks from the network layer. Layout & Paint Thursday, 3 May, 12
  10. parsing in General: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Grammars input lexical analysis syntax analysis output

    Thursday, 3 May, 12
  11. http://en.wikipedia.org/wiki/Backus-Naur_Form parsing: a simple example <symbol> ::= __expression__ input: 2

    + 3 - 1 INTEGER :0|[1-9][0-9]* PLUS : + MINUS : - expression := term operation term operation := PLUS | MINUS term := INTEGER | expression http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#context_free_grammar Thursday, 3 May, 12
  12. parsing HTML: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Grammars document tokenizer tree construction DOM Tree Thursday,

    3 May, 12
  13. you think parsing easy?!? parsing HTML heavy duty... due to

    lack of “context free grammar!” http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#context_free_grammar Thursday, 3 May, 12
  14. html definition: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#HTML_DTD Vocabulary and syntax of html are defined

    in specs created by the w3c. Thursday, 3 May, 12
  15. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_tokenization_algorithm Tokeniser Tree construction DOM parsing algorithm Script Execution document.write()

    Thursday, 3 May, 12
  16. BEST PRACTICE move scripts to the bottom of the page

    Thursday, 3 May, 12
  17. document object model: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#DOM HTMLHtmlElement HTMLBodyElement HTMLParagraphElement HTMLDivElement Text HTMLImageElement

    Thursday, 3 May, 12
  18. PARSING HTML: FORGIVING CONTINUOUS COMPLEX Thursday, 3 May, 12

  19. MAIN FLOW: Parse HTML http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_main_flow DOM Tree Render Tree YOU

    NEVER GET “INVALID SYNTAX” ERRORS ON AN HTML PAGE. BROWSERS FIX INVALID CONTENT AND MOVE ON. Layout & Paint Thursday, 3 May, 12
  20. parsing CSS: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing Flex / Bison Stylesheet Object the css

    spec defines css lexical and syntax grammar. Webkit uses flex and bison parser generators to create parsers from css grammar files. Thursday, 3 May, 12
  21. parsing css much easier. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing Thursday, 3 May, 12

  22. css vocabulary comment \/\*[^*]*\*+([^/*][^*]*\*+)*\/ num [0-9]+|[0-9]*”.”[0-9]+ nonascii [\200-\377] nmstart [_a-z]|{nonascii}|{escape}

    nmchar [_a-z0-9-]|{nonascii}|{escape} name {nmchar}+ ident {nmstart}{nmchar}* http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing “ident” is short for identifier, like a class name. “name” is an element id (that is referred by “#”). Thursday, 3 May, 12
  23. css GRAMMAR ruleset : selector [ ‘,’ S* selector ]*

    ‘{‘ S* declaration [ ‘;’ S*declaration ]* ‘}’ S* ; selector : simple_selector [ combinator selector | S+ [ combinator? selector ]? ]? ; simple_selector : element_name [ HASH | class | attrib | pseudo ]* | [ HASH | class | attrib | pseudo ]+ ; class : ‘.’ IDENT ; element_name : IDENT | ‘*’ ; attrib : ‘[‘ S* IDENT S* [ [ ‘=’ | INCLUDES | DASHMATCH ] S* [ IDENT | STRING ] S* ‘]’ ; pseudo : ‘:’ [ IDENT | FUNCTION S* [IDENT S*] ‘)’ ] ; http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing Thursday, 3 May, 12
  24. RULESET DEFINITION ruleset : selector [ ‘,’ S* selector ]*

    ‘{‘ S* declaration [ ‘;’ S*declaration ]* ‘}’ S* ; http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing div.error, a.error { color: red; font-weight: bold; } Thursday, 3 May, 12
  25. STYLESHEET OBJECT: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#DOM CSSStyleSheet CSSRule Selectors Declaration div.error color a.error

    red Thursday, 3 May, 12
  26. PARSING CSS: AUTOMA TIC SINGLE PASS SIMPLE Thursday, 3 May,

    12
  27. processing resources: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_order_of_processing_scripts_and_style_sheets Synchronous Speculative Order Matters Single Threaded* Thursday,

    3 May, 12
  28. BROWSERS ARE SYNCHRONOUS processing order.... regarding http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_order_of_processing_scripts_and_style_sheets Thursday, 3 May,

    12
  29. browsers render in a single thread BROWSERS ARE SINGLE THREADED?

    Thursday, 3 May, 12
  30. the event loop http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Event_loop while (!mExiting) NS_ProcessNextEvent(thread); The browser main

    thread is an infinite event loop that keeps the process alive. it waits for events and processes them. Thursday, 3 May, 12
  31. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_rendering_engines_threads i have a single main thread that handles processing

    of events in an event loop. i have a separate main thread that lives in a process for each tab that is opened. Thursday, 3 May, 12
  32. happens in a SINGLE THREAD except network operations everything http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_rendering_engines_threads

    Thursday, 3 May, 12
  33. speculative parsing: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Speculative_parsing main thread . {HTMLNodes} . . {external

    js} . {external css} . {external img} . . speculative thread . . . . [load js http] . [load css http] . [load img http] . . Thursday, 3 May, 12
  34. style information scripts ASK for WHAT IF MY http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_order_of_processing_scripts_and_style_sheets during

    parsing? Thursday, 3 May, 12
  35. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Speculative_parsing I block all scripts when a style sheet is

    being loaded and parsed. i block scripts only when they try to access certain style properties that may be affected by unloaded stylesheets. Thursday, 3 May, 12
  36. PARSING RECAP: SPECULA TIVE SYNCHRONOUS ORDER MA TTERS SINGLE THREADED*

    Thursday, 3 May, 12
  37. RENDER TREE: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Render_tree_construction class RenderObject { virtual void layout(); virtual

    void paint(PaintInfo); virtual void rect repaintRect(); Node* node; //the DOM node RenderStyle* style; // computed style RenderLayer* containingLayer; // containing z-index layer } each renderer represents a rectangular area usually corresponding to the nodes css box as described by the css2 spec. Thursday, 3 May, 12
  38. node “display”: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Render_tree_construction switch (style->display) { case NONE: break; case

    INLINE: o = new (arena) RenderInline(node); break; case BLOCK: o = new (arena) RenderBlock(node); break; case INLINE_BLOCK: o = new (arena) RenderBlock(node); break; case LIST_ITEM: o = new (arena) RenderListItem(node); break; ... } Thursday, 3 May, 12
  39. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Render_tree_construction Document html body div p h1 “Hello” “Web page”

    head title “Web page” Viewport Scroll Block Block Block Block Block Text Text DOM tree vs render tree: Thursday, 3 May, 12
  40. style computation: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#style_computation style information comes from browser style sheets,

    user style sheets, author style sheets, inline styles and visual properties (bgcolor) Thursday, 3 May, 12
  41. IS VERY HARD COMPUTATION STYLE http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_order_of_processing_scripts_and_style_sheets Thursday, 3 May, 12

  42. style computation: 1. Style data is VERY LARGE http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#style_computation 2.

    Rule matching is HEAVY 3. CASCADE is COMPLEX Thursday, 3 May, 12
  43. style sources http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_order_of_processing_scripts_and_style_sheets Browser User Author Inline Thursday, 3 May,

    12
  44. cascade priority: the-css-cascade.pdf Browser Normal Important (low) Priority (high) Thursday,

    3 May, 12
  45. BEST PRACTICE Don’t use CSS Resets. (if you must, use

    normalize.css) necolas.github.com/normalize.css/ Thursday, 3 May, 12
  46. cascade priority: the-css-cascade.pdf Browser Normal Important User Author User Author

    (low) Priority (high) Thursday, 3 May, 12
  47. BEST PRACTICE LIMIT !important; bit.ly/css-best-practices Thursday, 3 May, 12

  48. ANATOMY OF A RULE: the-css-cascade.pdf h2 { color: blue; margin:

    1em; } selector declaration property value Thursday, 3 May, 12
  49. conflicting css rules ha ve to deal with browsers the-css-cascade.pdf

    Thursday, 3 May, 12
  50. Specificity: the-css-cascade.pdf a = inline b = ids c =

    classes d = element div, p, a .error #footer <p style=> a > b > c > d Thursday, 3 May, 12
  51. Specificity: the-css-cascade.pdf h2 { color: blue; margin: 1em; } d

    = element specificity: 0001 (abcd) Thursday, 3 May, 12
  52. Specificity: the-css-cascade.pdf #header .island a { color: blue; margin: 1em;

    } specificity: 0111 (abcd) id(1)+class(1)+element(1) Thursday, 3 May, 12
  53. BEST PRACTICE "Classes are your friends. Seeing a lot of

    IDs is very bad. Try to find the middle ground where all the repeating visual patterns can be abstracted. Also, keep specificity as low as possible." http://bit.ly/css-best-practices @stubornella Thursday, 3 May, 12
  54. the same specificity? multiple rules ha ve WHAT IF the-css-cascade.pdf

    Thursday, 3 May, 12
  55. CONFLICT resolution: 1. Importance (!important) the-css-cascade.pdf 2. Origin (Author, User,

    Browser) 3. Specificity (abcd) 4. Source Order Thursday, 3 May, 12
  56. rule of thumb if two declarations have the same importance,

    origin and specificity, the latter specified declaration wins the-css-cascade.pdf Thursday, 3 May, 12
  57. MAIN FLOW: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout Render Tree calculating position and size of

    renderers is called layout or reflow. Parse HTML DOM Tree Layout & Paint Thursday, 3 May, 12
  58. http://www.youtube.com/watch?v=dndeRnzkJDU Thursday, 3 May, 12

  59. The layout Process http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout 1. Parent computes its width 2.

    Iterate over children - place child renderer (x,y) - call child layout if dirty 3. Parent computes its height 4. Parent sets dirty bit to false Thursday, 3 May, 12
  60. what triggers reflow? http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/ font size change screen resize add/remove

    stylesheets user input :hover changing class attr js changing dom offset calcs Thursday, 3 May, 12
  61. BEST PRACTICES http://bit.ly/css-js-perf @stubornella make changes “low” in DOM animate

    fixed/ absolute els avoid inline styles avoid tables for layout Thursday, 3 May, 12
  62. The Box model margin (transparent) border padding content Thursday, 3

    May, 12
  63. 3 box display types http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout block inline none Thursday, 3

    May, 12
  64. how boxes appear http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout inline inline block inline block Thursday,

    3 May, 12
  65. 3 Positioning Schemes http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout normal float absolute position: static; position:

    relative; float: left; float: right; position: absolute; position: fixed; Thursday, 3 May, 12
  66. float: left, right; http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout <html> <p> <img style=‘float: right;’ width=‘100’

    height=‘100’ /> Lorem ipsum dolor sit amet, conseceteur... </p> </html> Thursday, 3 May, 12
  67. position: relative; http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout 1 2 3 <html> <div> <span>1</span> <span>2</span>

    <span style=‘position: relative; left: 5px;’>3</span> </div> </html> Thursday, 3 May, 12
  68. position: absolute/fixed; http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout 1 <html> <div> <span>1</span> <span>2</span> <span style=‘position:

    absolute; top: 5px; left: 5px;’>3</span> </div> </html> 2 3 Thursday, 3 May, 12
  69. The painting Process http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Painting 1. background color 2. background image

    3. border 4. children 5. outline stacking context Thursday, 3 May, 12
  70. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Painting i optimize painting by not adding elements that will

    be hidden beneath other elements on repaint. i optimize painting by saving rectangles in a bitmap and only paint deltas between new and old rectangles on repaint. Thursday, 3 May, 12
  71. MAIN FLOW: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout Render Tree we covered a lot of

    stuff! Parse HTML DOM Tree Layout & Paint Thursday, 3 May, 12
  72. sources bitly.com/dmosher/bundles @dmosher Thursday, 3 May, 12