Another month, another big and fully remote JavaScript conference. I'll admit that JSNation isn't quite as neatly aligned with my own interests as previous conferences like React Summit, but there are a few speakers scattered across both days that I definitely want to watch. As a result, notes are expected to be a bit more fragmented. With that said: we're off!
[Spatial.chat looks interesting.]
Day One
Gleb Mahmutov: Visual Testing for Your Components
A look at how to visually test React applications using Cypress, specifically using a Sudoku app. Cypress is fully open source so ideal for any projects. There are also plugins like Cypress Image Snapshot that can enable visual diffing, ensuring components remain pixel-perfect to their original design.
How do you cope with animated elements when performing visual diffs or visual tests? Cypress has some nifty APIs to control variable data (including elements like time or randomisation) so that you can "freeze" the component in a specific state, fast-forward it, freeze it again, etc.
Similarly, you need to be careful about testing environments. Different OSes, browsers, devices, and screens will have variation in rendering engine output, pixel blending/density, etc. Ideally, use something like Docker to standardise the test environment and ensure these are always the same.
Interesting to hear that Cypress is specifically designed for interactive visual testing i.e. loading a component and actually simulating user interaction whilst testing the visual state of what's going on. Gleb even suggested that for pure visual diffing alone other tools are better (the Cypress team themselves don't use Cypress for that!).
Overall, it feels like a very useful tool, but the setup appeared to effectively force you to duplicate the entire component code to a separate Cypress file to run. That feels like a lot of duplication. I wonder if you can automate or sync it somehow.
Nader Dabit: Transforming GraphQL
GraphQL. Infrastructure as Code. It's going to be a heavy one 😅
We're specifically looking at AWS Amplify and its GraphQL transform library. Theoretically, Amplify is open source so could be ported, but currently it's only available for AWS. The idea behind Amplify is to massively simplify getting GraphQL APIs up and running, by abstracting away a lot of the actual infrastructure into a simple CLI commands.
Nader was able to set up an API endpoint with mutations, posts, gets etc. all within about five minutes. It automatically spins up useful tools like GraphiQL to test your schema as you go, and contains a very clever looking CLI interface that literally walks you through (as much as you want) the setup process. Super simple, very impressive.
Unfortunately, I had some slight technical difficulties as I went so missed some of the technical bits around the end, but wow that was a lot of impressive stuff in a short time period!
Matteo Collina: 1, 2, 3... Fastify!
Fastify is a web framework that's been around for a few years now. Unfortunately, the rest of the talk was just Matteo live coding a simple login infrastructure using JWT (I say simple... it looked simple, I'd have no idea where to start 😂). It wasn't really something that worked for notes. (or tweets, so I deleted the thread)
Day Two
Natalia Tepluhina: A Quick OverVue of the Composition API
The Composition API was introduced in v3 and – despite some initial confusion – is never going to become the way to create Vue components, it's just a useful and new way to do so. It's intended to complement or replace mixins, in situations where it would be better to do so.
The core problem it's looking to solve is to ensure related code for a specific function is as clearly linked in the codebase as possible. As mentioned, mixins help a lot with this, but they aren't reusable/DRY and can create quite confusing debugging. It's hard to track where a method came from if you are importing multiple mixins.
Scoped functions are also a step in the right direction (where you effectively turn the functionality into a wrapper component), but these tend to be much less performant and can have their own debugging roadblocks. Hence, the Composition API was developed.
It sits within a new lifestyle method – setup() – and allows you to abstract code into "composable" files. These feel a lot like utility scripts or custom Hooks that I'm used to in Gatsby. They can import and export functionality just like you would expect and are then called in a similar way to Hooks e.g. useSearch(). They are utilised before the data() and options() lifestyle methods, so make sure you aren't trying to reference computed variables from later in the chain, but otherwise provide a simple way to set up much clearer functionality abstractions.
Critically, there isn't any reason to move from the Options API if it's already working for you, but moving forward the Vue team would recommend that you look to Composition first (so basically it's a similar line to Hooks in React).
Orta Therox: How Does the TypeScript Team Try to Avoid Negative Effects on the JS Ecosystem
Honestly, I wasn't planning on watching Orta's talk as I'm yet to dive into TypeScript, but he spoke so well in yesterday's round-table that I felt it would be silly not to.
The gist was: we aren't trying to "replace" or "usurp" JavaScript. Far from it, the core team have a common goal to reduce the negative impact on the wider JavaScript ecosystem. He actually spent a fair bit of time explaining why Microsoft deciding to go after JavaScript would be a terrible move for their user base, their publicity, and their new open-source ethos. Put simply, it just wouldn't make any commercial, ethical, or business sense, so stop worrying about it.
Microsoft's history of handling open source is not exactly 'squeaky clean'
You can undo TypeScript by running your code... through TypeScript
Caleb Porzio: Say No to Complexity with AlpineJS
I did also listen to Caleb Porzio giving a demo of AlpineJS. It's an extremely lightweight JS framework that gives you component-like behaviour, but where you place the JavaScript directly within your HTML markup. For lightweight, progressively enhanced applications I can see this being a very neat system that gives you two-way data binding incredibly easily. It almost feels like a jQuery-like take on React: simple, intuitive, building on web paradigms and extending them in small but powerful ways. Looks very slick 👏
Love that creating a "click off modal to close" functionality is just:
<div @click.away="open: false">Modal text</div>
I mean, there's some more to it, but that @click.away is such a neat way of extending the onClick event logically.
"It's my JavaScript swiss army knife. It's 7.5kbs and it's available direct from a CDN."
[no tweet thread as I missed set up]
Overall, I enjoyed the talks that I managed to catch but just due to life reasons I found it harder to properly attend JSNation. Still, given me some food for thought, all for free, so can't ask for much more than that. Oh, and Bruce Lawson's shirts were on point 👀👍
