26 Sep 2019 ComponentsConf 2019
The conference was hosted in Marvel Stadium in Melbourne, and this was my first time there. It was a sunny day and the conference program said the entrance was at Gate 9. I got to Gate 1 and figured Gate 9 shouldn’t be that far away. So I headed towards Gate 2, then Gate 3, and then all the way around the entire stadium until I arrived at Gate 9, which turned out to be right next to Gate 1!
Having arrived a little later than I had planned, the venue already was full of people. I said hi to a couple of my colleagues manning the Shine Solutions booth in the exhibition area, then headed on towards the presentation rooms. There were two rooms, named ‘Hulk’ and ‘Iron Man’. As well as hosting a bunch of interesting presentations over the course of the day, these are probably the best room names I have ever seen at a conference!
The first session I went to was Rodolfo Dias talking about using React and Styled Components to build the Luna UI component library. This was to solve a real-world problem: colleagues of his had re-built the same component three times in one week, each time using different approaches and styling.
To avoid repeating themselves again, and to also ease the ongoing maintenance burden of their projects, they refactored everything into a single library, which they called Luna UI. They did this rather than using an existing component library like material-ui because their company already had component UI designs, and it was going to be easier from them to implement these designs from scratch. This reminded of my team’s motivations for creating an in-house component library as well.
Vue Composition API
The next presenter I saw was Natalia Tepluhina from Gitlab, talking about the new Composition API coming to VueJS 3. This API is used to extract complex logic from components to functions, making it easier for code to be organised by logical concerns in large-scale projects. As Vue 3 is still in development, Natalia used Vue 2 with the @vue/composition-api module, which back-ports the API from Vue 3 to Vue 2.
Moving along, Mozilla Tech Speaker Jennifer Wong’s presentation Translating React dove into how React translates JSX under the hood. Jennifer did some code spelunking, starting with how raw
React.createElement calls generate
ReactElement objects, then showing how JSX is really just syntactic sugar for the same code. To make React and JSX work together, React provides a default set of syntax transforms that ship with Babel.
Next, Jennifer explained how React state is the main differentiator between a React component and a React element. She then moved onto the React reconciler (where all the React magic lives) and React Fiber. To finish, Jennifer encouraged us to do our own code spelunking to illuminate what we are learning and where we are going day-to-day. I totally agree with her, and this is a practical approach to understand how those things working under the covers.
In a lightning presentation, Diana MacDonald from Culture Amp talked about how virtual DOM affects assistant technology such as screen readers. In order to improve accessibility, ARIA live regions can be used to announce dynamically updated content elsewhere on the page without moving the screen reader’s focus from where they are. The takeaway is you can’t conditionally render a div at the same time as adding the message, because it won’t be monitored by a screen reader or a browser. So you have to have a persistent region and add your dynamic content to it.
Normally when you add updates to a live region, only the changed parts will be announced unless you add
aria-atomic=true to the live region, which forces the screen reader to reread the entire paragraph. If you want to manage dynamic content easily, use double announcer regions and skip
aria-atomic. You can update to the regions alternately. This could help me to bring accessibility support of our apps to the next level.
In the lunch break, I went back to the exhibition room and saw lots of people standing around the Shine booth, waiting to join Shine’s CSS Golf competition. Shine’s Erin Zimmer (who had presented a workshop at ComponentsConf the previous day) had set the challenge for people to use HTML and CSS to render Shine’s Frontend Guild logo. Those who could create the logo closest to the original image with the least code would win the competition.
[Image: Screenshot of Shine’s CSS Golf competition]
Data-Driven Frontend Components
After lunch, Wilson Mendes from Atlassian talked about Data-Driven Frontend Components and the new Jira Navigation. He shared the story of how they use a data-driven approach at the component level to reduce Jira navigation loading time. The first step is to better understand bundle size. With the help of webpack-bundle-analyzer and bundlephobia, they realised the major part of the code in the bundle comes from their navigation package, @atlaskit/navigation-next.
Moving to EcmaScript modules (ESM) made the bundle tree shakable. They then used babel-plugin-transform-input to change entry points to improve the developer’s experience. For example, when importing @atlaskit/navigation-next/NavigationProvider, the code is actually imported from @atlaskit/navigation-next/esm/NavigationProvider. This helps make code organisation-agnostic, and developers don’t need to know how code is organised internally. With this change, they decreased the main navigation next bundle size from 132.7kB to 10kB!
Finally, by using Webpack DLL (a plugin to reuse the result of one Webpack compilation in another Webpack compilation) to improve cache and bundles, they decreased overall bundle size from 500kB to 30kB, and loading time was reduced by 4 seconds – very impressive! The second step is data monitoring, and using A/B testing.
Technical SEO for JS Web Apps
Next up was Technical SEO for JS Web Apps given by Martin Splitt from Google. He explained how a page get indexed into Google Search. The Search engine has a list of URLs in a Crawl queue. It takes a URL from the queue and send it to the crawler to make an HTTP request. By processing the response HTML, more links can be found and added to the Crawl queue.
[Image: from Martin Splitt’s presentation in ComponentsConf 2019]
Next Yaser showed us just how creative AI in the browser can be, using eye motion to play piano on the screen, and voice to control a game. On a more practical level, we learnt how Airbnb uses AI to detect if an uploaded image contains sensitive data like driving license, and warns users in the browser.
[Image: from Yaser Adel Mehraban’s presentation in ComponentsConf 2019]
[Image: from Craig Spence’s presentation in ComponentsConf 2019]
Amir Rustamzadeh from Cypress presented the last session of the day: Ship Web Apps Confidently: Reliable and Developer Friendly End-to-End Testing with Cypress. Cypress was rated “Adopt” by the ThoughtWorks Technology Radar in April 2019.
Amir showed many cool features available in Cypress in his demo. This included creating a Cypress task to clean up a DB before each test, and a custom Cypress command (called cypress.login) to simplify tests. Because you have direct access to your app code in tests, you can reuse the code you have already written to compose your test. You can also stub network requests with fixtures, and use the
--record option with the Cypress CLI to record results into Cypress dashboard.
As I am keen on the topics of web performance, AI, SSR, SEO, and accessibility, this was a fantastic conference and I enjoyed all the talks I attended. I’m sure the talks I missed would have been awesome too. During the breaks I also got a chance to chat with some of the speakers and get more ideas.