A few weeks ago I had the good fortune to attend JSWorld in Amsterdam, one of the world’s leading conferences focused on JavaScript web development. This was my first time attending a tech conference and it was a great experience. The three days were packed with dozens of talks from industry leaders, and I had the opportunity to chat about them with people from all across the globe. Theatre Amsterdam was a spectacular venue – its 500m2 movable screen has to be seen to be believed! I was swivelling my head as if watching a tennis match to read the text when they were using the full width of the screen.
In this blog, I’m going to be highlighting my favorite talks and discussing some of the wider industry trends I picked up while I was there.
“Type safety is eating the world”
At Caplin we began migrating parts of our codebase to TypeScript last year as part of a wider initiative to isolate our modern packages and separate them from legacy code. I’ve often seen it quoted that over 50% of the React community are now using TypeScript, but it was startling to see almost the entire theatre raise their hands when asked if their company had adopted it, with a scarce few reporting to be still coding in pure JavaScript. This is further backed up by this year’s State of JS survey.
Astro creator Fred Schott did a deep dive into the topic of type safety in Astro and provided this latest variant of the “eating the world” proclamation. And indeed it seemed to ring true as the days went on: more and more presenters detailed how they have been improving type safety within their libraries and frameworks. From type-safe routes in the Vue Router to the API type safety provided by frameworks like Remix, Next and Nuxt, and even cross-language type safety provided by Protobuf, the value of type safety and the speed at which the industry is embracing it was one of my biggest takeaways from the conference.
Caplin has already seen huge improvements in code quality and developer experience since our move to TypeScript, but we are keen to take it even further this year. Currently, we generate a lot of our backend APIs from static definitions. There have been a few projects over the years extending this concept to generate front-end code from the same sources, but nothing has made it beyond the experimental stage as of yet. We’d like to bring full end-to-end type safety to our stack, and I’m excited to try out technologies like Protobuf-ES which was demoed at JSWorld by Buf, and find out if they can help us achieve this.
“Playing your tests Wright”
At Caplin our products are complex, highly configurable and in some cases have over a dozen client variants. In order to maintain quality and prevent regressions, we invest heavily in automated test coverage and are constantly looking for ways to improve in this area. There were two testing technologies shown off at JSWorld this year that caught my attention.
First is the end-to-end testing framework Playwright, demoed by Debbie O’Brien from Microsoft. She showed how to install Playwright, configure it and create a suite of tests simply by recording the actions you perform in your browser, all in just 7 minutes. The idea of tests being generated for you in this way seemed pretty magical, and I’m looking forward to seeing if it can work with our products.
At Caplin we’ve recently migrated from the Selenium based Webdriver.io to Cypess. While we have seen a lot of benefits in DX from Cypress, a lot of the classic “flakiness” synonymous with end-to-end testing has still plagued us and we are consistently having to improve the robustness of our tests with guards and waits. On top of this, the Cypress team has started releasing new major versions with breaking API changes at a somewhat alarming rate and we’ve had some major pain points upgrading to the newer versions due to long-running open issues.
A talk on day one by Jocelyn Yeen titled “How browser automation works behind the scenes” improved my understanding of the technical differences between the various e2e testing technologies and has left me very curious to try Playwright. She explained how, unlike Cypress or Webdriver, it communicates with the browser using a WebSocket connection and the Chrome DevTools Protocol. This means that Playwright can wait, for example, to click an element until it receives a message from the browser that the element is ready and interactable. We will see how well this works in practice for us. Ultimately, if it’s not as smooth as the demo indicated, then it would be hard for us to justify switching from Cypress, but I’m excited to give it a shot.
Lower in the testing pyramid, I was surprised by the great looking testing features coming in Storybook 7. It’s been 2.5 years since the last major Storybook release and it’s looking like there will be many great improvements in this new version, particularly in documentation features which we’ve begun to utilise heavily.
For unit and acceptance testing at Caplin, we have been reluctant to embrace the widely used Jest, and instead favour Jasmine and Karma Test Runner. Due to the high complexity of our components and features, we highly value the ability to run, watch and debug tests directly in the browser. Karma however is no longer a well-supported test runner and we had serious difficulty integrating it with newer technologies such as Vite. We already use Storybook extensively for developing and documenting our components, so it seems like Storybook’s new testing features could be a great opportunity for us to move away from Karma without sacrificing the level of debugging tools we are used to.
A different Vue on React
At Caplin we’ve been all-in on React since around 2018 and there was a lot of great React content at this year’s JSWorld, such as from Metas’ Aashima Ahuja who opened the show by demonstrating all the new features of React 18. However, there was also a lot of content centred around Vue. In fact, I was somewhat surprised when the show was introduced on day 2 as “Day 1 of Vue Amsterdam”!
Knowing there would be a lot of Vue content, I had taken the opportunity beforehand to study up a little. It was interesting to see the similarities and differences it has with React, and how their development trajectories mirrored each other, which the Composition API introduced in Vue 3 as an alternative to the Options API following React’s introduction of hooks and the shift from class components to function components.
Ultimately, I was left with the feeling that while there are many things to admire about Vue, I doubt it will make sense for us to use it in favour of React any time soon as they are too similar for it to be worth the investment. Also, judging by the two talks centred around solving performance problems caused by excessive re-rendering (a familiar story for us), it seems that the grass isn’t necessarily always greener.
That being said, one thing that did make a big impression on me was the new Vapor mode shown by Evan You during his “State of the Vuenion” address. This is an experimental compilation mode inspired by frameworks like SolidJS and Svelte which does away with the Virtual DOM in favour of a compilation step that transforms Vue code into optimised plain JavaScript that can surgically update the DOM. Although not all features are available in this mode, by doing away with the runtime cost of maintaining a Virtual DOM it should make it easier for developers to create lightning-fast applications in situations where performance is of great importance. I had previously thought that the Virtual DOM was too fundamental a part of React for the team to ever consider moving away from it, but now I will be curious to see if they respond to this growing trend of trading build time performance for runtime performance.
Final shoutouts
I’d like to end by highlighting a few more talks that I really enjoyed and would recommend people check out once they are uploaded to YouTube.
- “Building Age Of Empires 2 with React” by Joe Hart – Joe is a comedian in addition to being a developer, and this retrospective on his journey recreating the classic RTS game felt like half conference talk, half standup routine. He had the audience in the palm of his hand. But there was also a valuable takeaway to be had on the benefits of pursuing fun side projects and the unexpected things that can be learned from them.
- Another big theme of the show for me was how the amount of JavaScript we are asking users to download has increased over the years and then how certain technologies are now pushing back on this. For more on this topic, check out Elian van Cutsem’s infectiously enthusiastic introduction to Astro and its Island Architecture, along with Giorgio Boa’s talk on Qwiks which has a novel approach to serving javascript only at the point it needs to be executed.
- Vite seems to have really exploded in popularity over the last year, with most now treating it as their go-to build tool when starting a new project. I’d recommend checking out the panel on Vite run by creator Evan You and several core team members, which was full of great insights.
You can find the full program from this year’s event here, and videos of the talks will be uploaded to the JSWorld YouTube channel at some point in the near future.