{"componentChunkName":"component---src-templates-blog-post-template-js","path":"/2019/11/06/react-advanced-london-2019/","result":{"data":{"mdx":{"id":"1c70f7fc-8e60-5d91-ab35-59ca9b4c09fe","frontmatter":{"title":"React Advanced - London 2019","date":"2019 December 31st","cover":{"id":"d42f5e55-2107-5fd0-872a-91858b00abfc","publicURL":"/static/cover-9e292a79ef6d4e6e7678f488df1d46ae.jpg"}},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"date\": \"2019-12-31T00:00:00.000Z\",\n  \"title\": \"React Advanced - London 2019\",\n  \"tags\": [\"conferences\", \"react\"],\n  \"published\": true,\n  \"cover\": \"./cover.jpg\",\n  \"coverCredit\": \"Photo by Tyler Casey on Unsplash\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar YouTube = makeShortcode(\"YouTube\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"React Advanced London going deep!\"), mdx(\"p\", null, \"Here\\u2019s my recollection of my attendance at React Advanced London 2019\\nsupported with videos from the event.\"), mdx(\"h2\", {\n    \"id\": \"ken-wheeler---react-performance\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#ken-wheeler---react-performance\",\n    \"aria-label\": \"ken wheeler   react performance permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Ken Wheeler - React Performance\"), mdx(\"p\", null, \"Ken\\u2019s keynote didn\\u2019t disappoint! Ken talks about how performance fixes\\naren\\u2019t prescriptive and it\\u2019s more like a puzzle to figure out.\"), mdx(\"p\", null, \"To help with this he prescribed the IMDOPE system!\"), mdx(\"h3\", {\n    \"id\": \"imdope-system\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"href\": \"#imdope-system\",\n    \"aria-label\": \"imdope system permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"IMDOPE System\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"I\"), \"dentify that a problem exists\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"M\"), \"easure your timings\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"D\"), \"evelop a plan\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"O\"), \"pen dev tools\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"P\"), \"lay around until its better\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"E\"), \"njoy newly performant app\")), mdx(\"p\", null, \"Ken detailed an animation running at 60 frames per second and how that\\nappears on the performance tab.\"), mdx(\"p\", null, \"The user Timings API (which I\\u2019ve never heard of) lets you define\\nprecise performance marking that you can name and display in dev\\ntools.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Example:\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"performance.mark('mainthread-start')\\n# do expensive things for performance\\nperformance.mark('mainthread-stop')\\nperformance.measure('mainthread', 'mainthread-start', 'mainthread-stop')\\n\")), mdx(\"p\", null, \"React does not control renders by default, very often problems\\nrelating to performance are related to unnecessary renders.\"), mdx(\"p\", null, \"React is \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"generally\"), \" not great when you have a lot of components\\nrendering and re-rendering at the same time (cough React Memo!)\"), mdx(\"p\", null, \"The React dev tools profiler got a mention and there was a demo of how\\nreact will re-render all the things if you have many components in a\\nview using the React dev tools profiler.\"), mdx(\"p\", null, \"There was an amusing part where when trying to demo the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useCallback\"), \"\\nReact API where Ken missed out the second argument and had to consult\\nthe React docs to clarify.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u201Cas developers almost everything we do is building elaborate lists\\nof shit\\u201D\"), mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u2014 Ken Wheeler\")), mdx(\"p\", null, \"List should be virtualized, check out Brian Vaughn\\u2019s \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/bvaughn/react-window\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"React Window\"), \" or\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/bvaughn/react-virtualized\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"React Virtualized\"), \" he went on to render lists with 10k plus items in\\nthere and demoed the shoddy performance on a rendered list then with\\nreact window.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Web Workers\")), mdx(\"p\", null, \"A particularly interesting section for me (because I didn\\u2019t know it\\nwas a thing), with web workers you can take expensive tasks off of the\\nmain thread.\"), mdx(\"p\", null, \"There are some downsides to this relating to serialization though.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"WASM\")), mdx(\"p\", null, \"He finished up with an auto tune example made with Rust and a Google\\naudio worklet to process a stream of audio to do the Daft Punk \\u201Cone\\nmore time\\u201D vocoder example! Dope!\"), mdx(YouTube, {\n    youTubeId: \"t8svxxtUTl8\",\n    mdxType: \"YouTube\"\n  }), mdx(\"h2\", {\n    \"id\": \"sean-wang---react-with-hooks-from-scratch\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#sean-wang---react-with-hooks-from-scratch\",\n    \"aria-label\": \"sean wang   react with hooks from scratch permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Sean Wang - React (with hooks) from scratch\"), mdx(\"p\", null, \"Bonkers talk from Sean where he recreated React with Hooks and React\\nConcurrency (Fibre) in a \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"CodeSandbox.io\"), \" session.\"), mdx(\"p\", null, \"The talk was a sequel to a previous talk on \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.swyx.io/speaking/react-hooks/\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"React hooks from scratch\"), \"\\nin 29 lines. He started with \\u201Cwe\\u2019re going to re-create concurrent\\nReact in 130 lines of code!\\u201C.\"), mdx(\"p\", null, \"At blazing fast speed he covered many concepts, a lot I was unfamiliar\\nwith relating to React, topics covered:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"React Fiber\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u201CRendering\\u201D\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Linked List Traversal\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Reconciliation vs Commit\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"useState\"), \" hook\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Work loop\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Suspense\")), mdx(\"p\", null, \"First, the POJO! (Plain Old JavaScript Object):\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"const element = {\\n  type: 'h1',\\n  props: {\\n    children: 'Hello world',\\n  },\\n};\\n\")), mdx(\"p\", null, \"Then went on to define what a fiber was, which is an extension on the\\nPOJO:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"const element = {\\n  type: 'h1',\\n  props: {\\n    children: 'Hello world',\\n  },\\n  dom: domNode,\\n  parent: parentFiber,\\n  child: childFiber,\\n  sibling: null,\\n  alternate: currentFiber,\\n  effectTag: PLACEMENT,\\n  hooks: [],\\n};\\n\")), mdx(\"p\", null, \"I\\u2019ll be honest, the speed at which Sean went, although very concise\\nwas quite though to follow at times.\"), mdx(\"p\", null, \"He covered all the main sections along with code examples. TL;DR\\nsuspense with time slicing is here.\"), mdx(\"p\", null, \"The only dependency used in the code was Babel with this \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io/s/reactadvanced-final-uwrx0\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"fetch\\nexample\"), \" where the we\\u2019re using state and reading from a resource which\\nsuspends (or caches) as needed.\"), mdx(YouTube, {\n    youTubeId: \"dFO4m7Y-yhs\",\n    mdxType: \"YouTube\"\n  }), mdx(\"h2\", {\n    \"id\": \"vojtech-miksu---what-a-drag\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#vojtech-miksu---what-a-drag\",\n    \"aria-label\": \"vojtech miksu   what a drag permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Vojtech Miksu - What a Drag\"), mdx(\"p\", null, \"Vojtech (Uber) goes through the history lesson about drag and drop and\\nthe complexities that come with it.\"), mdx(\"p\", null, \"He details the options available and why they implemented their own\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/tajo/react-movable\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"React Movable\"), \" Accessible drag and drop project.\"), mdx(YouTube, {\n    youTubeId: \"y_XkQ2qMTSA\",\n    mdxType: \"YouTube\"\n  }), mdx(\"p\", null, \"Here\\u2019s the same talk from RSCONF 2019:\"), mdx(YouTube, {\n    youTubeId: \"373pc0AbR9M\",\n    mdxType: \"YouTube\"\n  }), mdx(\"h2\", {\n    \"id\": \"daniel-irvine---dont-let-your-unit-tests-slow-you-down\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#daniel-irvine---dont-let-your-unit-tests-slow-you-down\",\n    \"aria-label\": \"daniel irvine   dont let your unit tests slow you down permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Daniel Irvine - Don\\u2019t Let Your Unit Tests Slow You Down\"), mdx(\"p\", null, \"Six ideas that can help improve your testing.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Idea 1:\")), mdx(\"p\", null, \"Always follow \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Arrange Act Assert\"), \", get the variables in place,\\nrender, expected result.\"), mdx(\"p\", null, \"Keep tests simple\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Idea 2:\")), mdx(\"p\", null, \"Test the \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"lifecycle\"), \" of your components.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Idea 3:\")), mdx(\"p\", null, \"Be aware of tests surface areas, good test pinpoint errors.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Idea 4:\")), mdx(\"p\", null, \"Make a mess, then refactor.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Idea 5:\")), mdx(\"p\", null, \"Get out of React components at every opportunity. Testing simple\\nfunctions, simple, React component, not so simple to test.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Idea 6:\")), mdx(\"p\", null, \"Write your own test library! \\uD83D\\uDE31\"), mdx(\"p\", null, \"It will help you understand the DOM better and further your\\nlearning!!!\"), mdx(\"p\", null, \"Library\\u2019s lock you into \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"their\"), \" way of testing things.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Main takeaway for me from this is:\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"No tests are better than bad tests!\")), mdx(YouTube, {\n    youTubeId: \"1vDXRDQ9aJE\",\n    mdxType: \"YouTube\"\n  }), mdx(\"p\", null, \"After this talk I was off to the React native hall to go see some of\\nthe lightening talks as I knew one of the speakers.\"), mdx(\"h2\", {\n    \"id\": \"dave-nicholas---functions-vs-classes\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#dave-nicholas---functions-vs-classes\",\n    \"aria-label\": \"dave nicholas   functions vs classes permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Dave Nicholas - Functions vs Classes\"), mdx(\"p\", null, \"He discussed the migration from classes over to functional components\\nat Tesco.\"), mdx(\"h2\", {\n    \"id\": \"jamie-barton---teaching-and-sharing-awesome-content-101\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#jamie-barton---teaching-and-sharing-awesome-content-101\",\n    \"aria-label\": \"jamie barton   teaching and sharing awesome content 101 permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Jamie Barton - Teaching and Sharing Awesome Content 101\"), mdx(\"p\", null, \"A non technical talk about teaching what you have learned as someone\\nwill benefit from it.\"), mdx(\"p\", null, \"That can be in the form of ANYTHING. It wasn\\u2019t quite as memorable as\\nKen\\u2019s IMDOPE system but it was the message was what was important.\"), mdx(\"p\", null, \"Jamie went on to talk about how the community can benefit from any\\nkind of sharing.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a5977c43c2e8140e1898ffb67e75234f/5b4a1/anything.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"56.317689530685925%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/svg+xml,%3csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'400\\\\'%20height=\\\\'225\\\\'%3e%3cpath%20d=\\\\'M79%20107a13290%2013290%200%2001-3%2014c3%200%203-1%204-3%201-3%202-3%206-3s5%200%206%203c1%202%202%203%204%203%203%200%203%200-3-13-4-11-4-12-7-12-2%200-3%201-7%2011m32%202c0%2011%200%2012%202%2012s2-1%202-8c0-8%200-8%206%201%203%206%205%207%207%207h2v-13c0-12%200-12-2-12s-3%201-3%208v7l-5-8c-3-5-5-7-7-7s-2%200-2%2013m32-12l4%206c2%205%204%208%204%2012%200%205%201%206%203%206s2%200%202-5c0-4%201-6%203-10%206-9%206-10%203-10-2%200-3%201-5%205l-3%204-3-4c-2-4-4-5-5-5l-3%201m29%201c0%201%201%202%203%202l4%201v10c0%2010%200%2010%203%2010%202%200%202%200%202-10v-11h4c2%200%203%200%203-2s-1-2-9-2c-9%200-10%200-10%202m28%2011v12h3c2%200%202%200%202-6v-5h5l5%201v5c0%204%200%205%202%205s3-1%203-13V96h-3c-2%200-2%201-2%205v5h-10v-5c0-5%200-5-2-5h-3v13m34%200v12h5V96h-5v13m19%200c0%2012%200%2012%202%2012s3-1%203-8v-7l5%207c4%207%205%208%207%208s3-1%203-13V96h-2c-3%200-3%200-3%208v8l-5-8c-4-6-5-8-7-8h-3v13m39-12c-7%204-8%2015-2%2021%204%203%2010%204%2015%202%204-2%204-2%204-7v-6h-5c-5%200-5%200-5%203%200%202%200%202%203%202s2%203-1%204c-5%202-8-1-9-7%200-8%206-12%2011-7%202%202%206%202%206%200%200-5-11-8-17-5m-44%2051c-2%200-3%202%200%202v4l1%203%201%201%201%202c2%202%202%202%202%205l1%201c1-1%201%200%200%200l1%203%201%201%201%201c2%200%203%202%201%202-1%201%200%203%201%203%202%200%203-2%202-4l-2-3-1-2c1-1%200-1-1-2l-1-1c1%200%201-3-1-5l-2-4-2-1c-2%200-1-1%201-3v-1l-2-1c1-2%201-2-2-1\\\\'%20fill=\\\\'%23d3d3d3\\\\'%20fill-rule=\\\\'evenodd\\\\'/%3e%3c/svg%3e')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/a5977c43c2e8140e1898ffb67e75234f/60a22/anything.webp 160w\", \"/static/a5977c43c2e8140e1898ffb67e75234f/4c812/anything.webp 320w\", \"/static/a5977c43c2e8140e1898ffb67e75234f/0ba47/anything.webp 640w\", \"/static/a5977c43c2e8140e1898ffb67e75234f/6d405/anything.webp 831w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/a5977c43c2e8140e1898ffb67e75234f/69538/anything.png 160w\", \"/static/a5977c43c2e8140e1898ffb67e75234f/72799/anything.png 320w\", \"/static/a5977c43c2e8140e1898ffb67e75234f/6af66/anything.png 640w\", \"/static/a5977c43c2e8140e1898ffb67e75234f/5b4a1/anything.png 831w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/a5977c43c2e8140e1898ffb67e75234f/6af66/anything.png\",\n    \"alt\": \"anything acronym\",\n    \"title\": \"anything acronym\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n  \"), \"\\n    \")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"YouTube video or video series\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Tutorials\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hackathons, hosting or organising\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Indie Hackers, posting milestones\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Guides\"))), mdx(\"p\", null, \"Something that resonated with me was the quite:\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u201CWrite the guide you needed as a developer when trying to do this.\\u201D\")), mdx(\"p\", null, \"I have been doing this for a long time myself now and it\\u2019s something I\\nbelieve in a lot.\"), mdx(\"h2\", {\n    \"id\": \"lunch\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#lunch\",\n    \"aria-label\": \"lunch permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Lunch\"), mdx(\"h2\", {\n    \"id\": \"siddharth-kshetrapal---design-systems-design-system\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#siddharth-kshetrapal---design-systems-design-system\",\n    \"aria-label\": \"siddharth kshetrapal   design systems design system permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Siddharth Kshetrapal - Design Systems Design System\"), mdx(\"p\", null, \"Sid gave a good overview of making design systems. Or designing design\\nsystems.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u201CWhen I started laying out a system last year I would just call them\\ngray, gray darker and gray darkest.\\u201D\")), mdx(\"p\", null, \"Basically there always a colour that\\u2019s not on there.\"), mdx(\"p\", null, \"Then he came out with this gem!\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"const theme = {\\n  colours: {\\n    grays: {\\n      100: '#fff9f9'\\n      200: '#e6e6e6'\\n      300: '#999999'\\n      400: '#757575'\\n      500: '#242424'\\n      700: '#151515'\\n      900: '#111111'\\n    }\\n  }\\n}\\n\")), mdx(\"p\", null, \"So you can add in more colours if you need them, add a 150, or add a\\n600 here.\"), mdx(\"p\", null, \"Sid then went on to talks about how awesome styled-components was and\\nsome nice touches for that:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import styled from 'styled-components';\\n\\nconst FormLabel = styled.label(\\n  props => `\\n  color: ${props.theme.colors.text.subtle}\\n  font-size: ${props.theme.fontSizes[2]}\\n`\\n);\\n\")), mdx(\"p\", null, \"Looks pretty verbose so you could use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@styled-system/css\"), \" to reduce\\nthat:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import styled from 'styled-components';\\nimport css from '@styled-system/css';\\n\\nconst FormLabel = styled.label(\\n  css({\\n    color: 'text.subtle',\\n    fontSize: 2,\\n  })\\n);\\n\")), mdx(\"p\", null, \"Pretty neat stuff!\"), mdx(YouTube, {\n    youTubeId: \"Dd-Y9K7IKmk\",\n    mdxType: \"YouTube\"\n  }), mdx(\"h2\", {\n    \"id\": \"emma-brillhart---a-more-readable-react-codebase-using-typescript-graphql-and-hooks\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#emma-brillhart---a-more-readable-react-codebase-using-typescript-graphql-and-hooks\",\n    \"aria-label\": \"emma brillhart   a more readable react codebase using typescript graphql and hooks permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Emma Brillhart - A More Readable React Codebase Using TypeScript, GraphQL, and Hooks\"), mdx(\"p\", null, \"Emma\\u2019s talk centered around why TypeScript is awesome and how\\nreadability enables faster onboarding for developers.\"), mdx(\"p\", null, \"Using TypeScript on the client side give built in documentation,\\nbetter navigation, less technical debt.\"), mdx(YouTube, {\n    youTubeId: \"nkJbGgieALI\",\n    mdxType: \"YouTube\"\n  }), mdx(\"p\", null, \"Complete playlist of all the talks on YouTube \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.youtube.com/playlist?list=PLNBNS7NRGKMH7yfpYQD4TrFV25SMOCIPM\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"here\"), \".\"), mdx(\"p\", null, \"Check the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/hashtag/ReactAdvanced\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"hashtag\"), \" on Twitter and also \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/search?q=reactadvanced%20spences10&f=live\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"my coverage\"), \" on Twitter.\"), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/search?q=spences10%20reactadvanced&f=live\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"https://twitter.com/search?q=spences10%20reactadvanced&f=live\")));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"React Advanced London going deep! Here's my recollection of my attendance at React Advanced London 2019\nsupported with videos from the event…","tableOfContents":{"items":[{"url":"#ken-wheeler---react-performance","title":"Ken Wheeler - React Performance","items":[{"url":"#imdope-system","title":"IMDOPE System"}]},{"url":"#sean-wang---react-with-hooks-from-scratch","title":"Sean Wang - React (with hooks) from scratch"},{"url":"#vojtech-miksu---what-a-drag","title":"Vojtech Miksu - What a Drag"},{"url":"#daniel-irvine---dont-let-your-unit-tests-slow-you-down","title":"Daniel Irvine - Don’t Let Your Unit Tests Slow You Down"},{"url":"#dave-nicholas---functions-vs-classes","title":"Dave Nicholas - Functions vs Classes"},{"url":"#jamie-barton---teaching-and-sharing-awesome-content-101","title":"Jamie Barton - Teaching and Sharing Awesome Content 101"},{"url":"#lunch","title":"Lunch"},{"url":"#siddharth-kshetrapal---design-systems-design-system","title":"Siddharth Kshetrapal - Design Systems Design System"},{"url":"#emma-brillhart---a-more-readable-react-codebase-using-typescript-graphql-and-hooks","title":"Emma Brillhart - A More Readable React Codebase Using TypeScript, GraphQL, and Hooks"}]},"timeToRead":4,"fields":{"slug":"/2019/11/06/react-advanced-london-2019/","editLink":"https://github.com/spences10/thelocalhost.blog/edit/authoring/posts/2019/11/06/react-advanced-london-2019/index.mdx"}}},"pageContext":{"slug":"/2019/11/06/react-advanced-london-2019/","previous":{"id":"5cebc425-55bf-5894-b964-37054823e574","excerpt":"I have been a Gatsby user since around  v0 May 2017 , at that time was\nusing a template called  Lumen  and it was just what I needed at the\ntime. Since then I have have gone from using a template to creating my\nblog. Over the years I have made my own…","frontmatter":{"title":"Build a coding blog from scratch with Gatsby and MDX","date":"2019-10-31T00:00:00.000Z"},"fields":{"slug":"/2019/10/31/build-an-mdx-blog/"}},"next":{"id":"e6a0c926-1ae9-51e0-a8c8-37bcf47da573","excerpt":"In this guide I'm going to go through how to track custom events in a\nGatsby site using Fathom analytics. Preamble At the end of last month (November 2019) I started using  Fathom\nAnalytics  in place of Google Analytics. I wanted a simpler way to…","frontmatter":{"title":"Track Custom Events With Fathom Analytics","date":"2020-01-02T00:00:00.000Z"},"fields":{"slug":"/2020/01/02/track-custom-events-with-fathom-analytics/"}}}}}