26 Sep 2019 ComponentsConf 2019
A couple of weeks ago I attended ComponentsConf 2019 in Melbourne, Australia. This conference focuses on JavaScript frameworks and libraries, and I was pretty excited to attend it. This is because over the last year I have been working on a component library to be shared across a number of projects. It needs to work in everything from Drupal to Angular, and we’re still trying to find the best foundation to build it on. A conference that is framework-agnostic seemed like a good place to learn more about the options that are available.
Getting there
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!
Luna UI
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.
Translating React
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.
Accessibility
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.
Lunchtime!
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.
In the modern world, with client-side JavaScript applications, there may be no links, and less content in the HTML, so the Search engine adds the HTML to the Render queue. Later the Web Render Service (WRS) in the container takes the HTML from queue and opens up a headless browser to run the JavaScript. When the rendering is complete, it passes back full HTML back into the processing. When the processing is complete, the page is indexed. Martin then introduced the concept of having a “crawler budget”, and gave us some tips regarding SEO, web app architecture and tools for SEO.
[Image: from Martin Splitt’s presentation in ComponentsConf 2019]
AI and JavaScript
Yaser Adel Mehraban from Readify’s talk on AI and JavaScript started with the question: why do AI in the browser? Yaser listed a few solid points including wide distribution, interactivity, sensor availability, and privacy (data stays on the client). He introduced tensorflow.js and showed us some demos. The first demo was BodyPix, a tensorflow.js model which can separate a person from the background in the browser using a web cam, in real-time.
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]
Angular Universal
The second-last talk I went to was about Angular Universal brought by Craig Spence from Spotify. In the beginning Craig explained how we use server-side rendering (SSR) so a page can be indexed by all search engines, whether or not they support JavaScript. SSR can also help with page loading performance, specifically Time to First Byte, Time to First Paint, and Time to Interactive.
Then he showed us a simple demo of Angular Universal, and what a server-side rendered page looks like when JavaScript is disabled in the browser, compared to client-side rendering. This was followed by a second, more complex demo, showing the thousands of asteroids circling the earth, which was amazing. Even more amazingly, he was then able to switch it to use server-side rendering.
[Image: from Craig Spence’s presentation in ComponentsConf 2019]
Cypress
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.
Wrapping Up
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.
To me, this conference was a great opportunity for learning both technology skills and presentation skills. It will definitely inspire me in my future work with JavaScript frameworks and component libraries. I highly recommended it to people who have similar interests, and am looking forward to ComponentsConf next year.
No Comments