My JSNation & React Summit 2023 Day 1 & 2 Roundup (offline attendance)
Janine Lourens
Posted on June 13, 2023
Estimated Read Time: 21 minutes | Word Count: 4951
Table of contents
- Checking In
- The Talks (that I attended)
- JS Nation Talks
- SolidJS: Why All the Suspense?: Ryan Carniato (Netlify)
- React WebGPU AI What Could Go Wrong?: Aria Minaei (CEO TheatreJS)
- Modern Web Debugging: Jecelyn Yeen (Google Chrome Dev Tools)
- Core of TurboPack Explained: Tobias Koppers (Webpack Founder at Vercel)
- State of Passwordless Auth:s Phil Nash (Dev Advocate at SonarSource)
- Building a Web-App The Easy Path and the Performant Path Why Are They Not the Same?: Misko Hevery (CTO at Builder.io)
- Javascript Iteration Protocols: Luciano Mammino
- Lightning Talks
- Ai And Web Dev hype or reality: Wes Bos
- Improving Developer Happiness with AI: Senna Parsa (GitHub Copilot)
- React Summit
- Reactivity There and Back Again: Michel Weststrate (Meta)
- Happy Birthday React!
- Making Interactions Accessible to All users: Anuradha Kumari (Passionate People)
- Principles for Scaling FE App development: Malte Ubl (CTO at Vercel)
- NextJS Metamorphosis: Lee Robinson (VP of DX at Vercel)
- Modern Approaches for creating extremely fast Websites: Brad Westfal
- Lightning Talks
Checking In
I was incredibly thrilled to finally attend an in-person conference again. It had been two years since my last one, which was held in 2019, pre-pandemic. The atmosphere of an in-person conference is simply irreplaceable. The excitement in the air is palpable as attendees and speakers alike are eager to learn and share their knowledge. Attending a conference in person offers a unique opportunity to connect with the speakers and fellow attendees on a deeper level. It's an experience that brings people together from all walks of life and fosters a sense of community in the industry. I was especially looking forward to networking in person and making new connections that I may have missed out on through virtual platforms.
The Venue
This year, both events were held in Amsterdam North at “The Kromhouthal,” a former factory with its original steel-clad pillars and cranes, which provided an industrial atmosphere that added to the ambiance of the events. The venue is located along the picturesque “Ij Kanaal,” adding to the charm of the location. It is a short ferry/metro ride + 10 minute walk from Amsterdam Centraal Station.
The event kicked off with badge collection and complimentary goodie bags, where I queued up with other attendees. After grabbing my badge and bag, I headed straight to the sponsor booths to collect some sweet swag. I entered some of the giveaways (there was so much Lego! But spoiler-alert: I didn’t win anything ), but I made sure to visit every booth and collect goodies such as stickers, shirts, socks, pins, flyers, and, of course, knowledge of new software or tools that could potentially help me and my team.
The sponsor booths were definitely a highlight of the event. I was impressed by the variety of companies and products on display, and the representatives at each booth were knowledgeable and friendly. I even discovered a few new tools that I had never heard of before, which could be really useful for my team's projects. Overall, it was a great way to kick off the event and get in the right mindset for learning and networking.
The Talks (that I attended)
As with any GitNation event there are always multiple tracks, and unless you have the ability to split yourself into multiple doppelgangers, you can’t attend them all. So it was REALLY hard to choose. Between ReactSummit and JSNation there are about a 100~ish talks spread over 4 days so you are definitely spoiled for choice. But there is so much stress to pick which one to view.
Luckily GitNation puts many of their talks online a few months after the event, they have a wonderful “Knowledge Hub” portal where the recordings of their talks become available a few weeks after the events.
and on their YouTube Channels:
https://www.youtube.com/@JavaScriptConferences/featured
https://www.youtube.com/@ReactConferences/featured
Below you’ll find summaries of the talks I attended, and my thoughts on some of them.
JS Nation Talks
SolidJS: Why All the Suspense?: Ryan Carniato (Netlify)
https://twitter.com/RyanCarniato
During the talk that Ryan, the creator of SolidJS, gave on using the Suspense API, he explained how to keep UIs predictable and in sync for the user. With the SolidJS library, you can easily orchestrate data loading, mutation, server rendering, and streaming. Ryan's presentation was especially helpful for me because, before his talk, I had been using Suspense without fully understanding it. His breakdown of the complex topic into simple terms helped me to gain a better grasp of how to use it effectively.
If you want to learn more about SolidJS, you can visit their website at https://www.solidjs.com/.
Additionally, Ryan's talk was accompanied by a related article on dev.to that dives deeper into the topic and highlights why understanding async consistency in JavaScript frameworks is so important.
You can check it out at:
https://dev.to/this-is-learning/why-all-the-suspense-understanding-async-consistency-in-javascript-frameworks-3kdp.
React WebGPU AI What Could Go Wrong?: Aria Minaei (CEO TheatreJS)
https://twitter.com/ariaminaei
Photo by @marcelcutts on twitter.
Aria ‘s goal is to blur the lines between design and development. Giving a breakdown what design+authoring tools existed back in the past, and how back then it was easy to do designing as you develop. With a surprise blast from the past of Macromedia Flash’s UI. He ended the talk with a demo of a setup in https://www.theatrejs.com/ with voice operated GPT4 calls. Despite the usual “Demo Effect” and slow internet causing the Demo to not go as smoothly, Aria stressed and how it could simplify your workflow and bring design back closer to development.
Modern Web Debugging: Jecelyn Yeen (Google Chrome Dev Tools)
Photo by @marcelcutts on Twitter
Jecelyn delivered an entertaining and informative talk on new tools and tricks to make Front-End Development debugging easier. Her talk was filled with humor, memes, and colorful visuals.
Some of the most interesting key points were:
- ✨ SOURCE MAPS! ✨ Now you can keep your client-side code readable even after transpiling, minifying, etc. It’s amazing! Check out https://developer.chrome.com/docs/devtools/javascript/source-maps/
- Hiding irrelevant information in your stack traces, such as unnecessary Node_modules files or library .js files.
- Showing Page sources inside dev tools, resembling the file tree in your code editor!
- Overriding Request Headers directly in the browser! No more downloading shady CORS addons and bugging backend/devops. You can continue your work!
- Emulating focused pages. Have you ever wanted to inspect an input field dropdown or a popper but it disappears when you enter dev tools? Now you can! This received huge applause from the audience.
- JS Snippets. An oldie but a goodie, you can paste snippets inside Chrome and run them from within dev tools. Very useful for running custom scripts such as “DOM element that has the most time spent rendering (LCP).”
There’s an excellent article summarizing the talk available here: https://developer.chrome.com/blog/devtools-modern-web-debugging/#introduction
Core of TurboPack Explained: Tobias Koppers (Webpack Founder at Vercel)
Live-coding can be super stressful, especially when you have an audience of thousands of people. But Tobias totally killed it! During his live-coding sesh, he talked about how webpack apps can get bogged down as your app gets bigger. Then he introduced Turbopack as an alternative to webpack.
Turbopack is all about simple solutions to the most annoying webpack issues. Tobias explained how it works and showed how simple it is to use Turbopack in your own projects.
He also talked about some of the sweet benefits of using Turbopack instead of webpack, like faster app startup times and way better overall performance. It was totally rad watching Tobias work his Turbopack magic in real-time!
State of Passwordless Auth:s Phil Nash (Dev Advocate at SonarSource)
Phil Nash’s talk was one of my personal favorites at JSNation. He breaks down the tradeoffs between user experience and security of common authentication methods. Building off one of the other starting from Passwords, to Password managers, to 2FA methods and finally passworldess authentication and sings songs of love for the browser Credential Manager API. There’s some really cool things becoming more available such as the ability to use your device’s biometric data for logging into your accounts on web apps!
Building a Web App The Easy Path and the Performant Path Why Are They Not the Same?: Misko Hevery (CTO at Builder.io)
When you're building web apps, it can sometimes feel like you have to choose between good developer experience and performance. But Miško asked a question: why not have both? In his talk, he points out that even the biggest and most popular websites, like Amazon, barely pass Performance Lighthouse metrics. He looks into why this is the case and notes that the amount of JavaScript we send to users has only increased over time.
“Resumability” and only sending the users the JS they need
Despite modern front-end apps using server-side rendering and hydration, there still seems to be a tradeoff. But imagine if we could only send the JavaScript that the user needs when they take a particular action. That's where "Resumability" comes in - a clever trick to make apps start faster even on slow networks by exporting event listeners in a smart way and using event delegation to achieve this. It seemed like magic to me but Misko explained it brilliantly and how easy it is to use in your own projects with qwik.
You can read more about it here: https://qwik.builder.io/docs/concepts/resumable/
Javascript Iteration Protocols: Luciano Mammino
https://twitter.com/loige
Picture by @FloorDrees on twitter
I have a confession to make: Even though iterators have been around since 2015 (and coincidentally I have been coding since around that time) I have no idea how they are used, and how they work. Thankfully Luciano shed some light on this topic with extremely cute videogame / sprite visuals that made the talk very informative and entertaining. I walked away now knowing that I can construct Iterables to customize for...of behavior to serve my needs. Overall, Luciano's talk has not only demystified iterators for me but also sparked my enthusiasm to explore and leverage their potential in my future projects.
He explains it a lot more eloquently than I ever could, in his article here: https://loige.co/javascript-iterator-patterns/
Lightning Talks
How to speed up MonoRepos: Juri Strumpflohner (NX)
Juri put the “lightning” in in Lightning talks. In this short but sweet 7 minute talk, he introduces PNPM work-spaces based monorepos with no slides and just some code. Blink and you miss it. He explained how Nx can not only make your life easier but also faster.
Dialogs and popovers: Hidde de Vries
Dialogs, Modals and popovers have been a headache for many a Front-End Dev. But in his lightning talk Hidde shows exciting new proposals and updates to the “popover” attribute to all html elements. Which will allow you to turn anything into a “modal-like” popover even without JavaScript! This is definitely something all devs should check out.
Read more about it here:
https://hidde.blog/dialog-modal-popover-differences/
Maintaining a component Library: Joran Quinten (Jumbo Supermarkten)
https://twitter.com/joranquinten
I'm passionate about component libraries, UI, and creating delightful user experiences, so Joran's talk on Design System approaches and the associated tradeoffs caught my attention.
He explored the Decentralized approach, which allows everyone to contribute and own the Design System, versus the Centralized Approach, where a dedicated team leads the vision but may encounter bottlenecks. At Jumbo, they found a clever solution by implementing a hybrid model. They had dedicated developers working on the Design System while still welcoming contributions from all team members. It's an interesting approach that strikes a balance between efficiency and inclusivity.
He wrote a little bit about it in his blog here:https://www.joranquinten.nl/articles/maintaining-a-component-library-at-scale/
Create AR face filters w/ Chrome: Jorrik Klijnsma (Ordina)
https://twitter.com/Jorrik_Klijnsma
After attending three information-dense lightning talks, I decided to switch tracks and indulge in something more light-hearted. Jorrik Klijnsma's presentation caught my attention, as he showcased some exciting new features in Chrome using the Shape Detection API. You can check out the details of the API here: https://developer.chrome.com/articles/shape-detection/
The Shape Detection API enables developers to leverage the power of the Chrome browser itself to create entertaining augmented reality (AR) filters. Whether you're working with static images, a video feed, or even a webcam, you can now tap into the native capabilities of Chrome without relying on external AI algorithms like Tensorflow.js. This opens up a whole new realm of possibilities for creating impressive and interactive experiences directly on the client side.
Developing for the fun of it
What I found particularly fascinating about Jorrik's talk was his emphasis on building fun things just for the sake of fun, without the pressure of always needing a practical application. It's a refreshing reminder that innovation and creativity can thrive when we allow ourselves to explore and experiment with playful ideas. So, let's embrace the joy of building cool and imaginative projects simply because they bring smiles to our faces!
Ai And Web Dev hype or reality: Wes Bos
Image by @ahmetkapusuz1 on twitter
Wes Bos, co-host of the podcast Syntax.fm, delivered a refreshing presentation that started with a dose of humor. He made it clear that he wasn't an AI or Crypto Web3 enthusiast, which garnered laughs from the audience.
During his talk, Wes showcased how he utilizes AI and custom Front-End code he wrote to boost his productivity. He demonstrated how these tools help him create episode summaries, topic timestamps, and searchable data structures for his podcast episodes. His workflow has significantly improved, allowing him to save time and provide a better user experience on his website.
Wes Bos's presentation highlighted the practical applications of AI in web development, with a focus on tangible productivity improvements rather than empty hype. However, he also acknowledged that implementing AI can come with a hefty price tag.
Improving Developer Happiness with AI: Senna Parsa (GitHub Copilot)
Senna Parsa gave an engaging talk about the features of Github Copilot and how it can enhance pair programming. She even did a live coding demo where she built a Tulip gallery in React with the help of GH Copilot.
One of the highlights of Senna's talk was the interesting questions from the audience, especially regarding company privacy and policy restrictions on using such tools. She provided insightful answers and reassured the audience by mentioning the availability of GH Copilot for businesses. This version ensures that prompts generated within a company's private environment won't be shared with the wider database.
Senna Parsa's presentation not only showcased the practical benefits of Github Copilot in pair programming but also addressed the real concerns developers may have about privacy and policy restrictions. Her explanations were helpful and put the audience at ease.
React Summit
Another Day! Same location, same amazing organizing staff but this time with a different coat of paint. Gone were the yellow signs with yellow and black, in favor of a more cool white background with the familiar atom logo of React. The branding was so clean and I personally like it a lot more.
Since I had gotten my badge from day 1, I could just walk in and make a beeline to the new sponsor booths to see if there was any more swag I could snatch up. A quick walk around and a few stickers richer I headed to the main stage to begin my React Summit Experience.
I noticed there were a whole bunch of colorful rainbow party hats on many seats. Many had donned them already so I put it on not thinking much about it…
Reactivity There and Back Again: Michel Weststrate (Meta)
https://twitter.com/mweststrate
Going in a loop
Michel set the stage for React Summit by delving into the current state of React and how the development "meta" seems to be caught in a loop. He pointed out how the focus has shifted from client-side to server-side, and then back again to server-side rendering. Similarly, the concept of "State" has gone through cycles, starting with mutability, then transitioning to immutable state with libraries like Redux, followed by observable mutability, and now seemingly returning to "Signals." Reactivity has also followed a similar trend, with a shift towards immutable trees, React 2.0, and the emergence of Vue and Svelte.
This begs the question: where is reactivity headed next, and what will be the next trend? And will we keep going in this infinite loop?
Key Takeaways
However, Michel provided three key takeaways from his talk. Firstly, he emphasized that we are not going in circles but rather spiraling towards the next best thing. It's about revisiting and learning from older technologies and incorporating the best aspects into our new tools and libraries. Secondly, as developers, it's crucial to be comfortable acting in the face of uncertainty. The technology landscape is ever-evolving, and being adaptable is key to success. Lastly, Michel stressed that adhering to dogmas stifles innovation. It's essential to avoid getting stuck in old ways of thinking, as progress and improvement come from embracing new ideas and approaches.
In summary, Michel's talk at React Summit shed light on the cyclic nature of development trends while emphasizing the importance of continuous improvement, adaptability, and a willingness to challenge established norms. “Dogmas Kill Innovation”.
Happy Birthday React!
The emcees came on stage and I found out that the party hats were because of the React 10th Anniversary! Bringing out cake and some balloons! We were encouraged to pretend that Michel “Was” the physical embodiment of React and proceeded to sing to him. Poppers exploded at the end of the birthday song and people in the front row were showered in confetti and streamers. I thought it was a fun way to celebrate the Library we all use and love.
Making Interactions Accessible to All users: Anuradha Kumari (Passionate People)
https://twitter.com/miracle_404
Man, accessibility is such a crucial aspect, but it often gets overlooked in many projects. As a fellow dev working on a B2B project, I knew I couldn't afford to miss Anuradha's talk. I practically sprinted to the 2nd track room to catch all the action!
Let me tell you, the first thing that hit me was Anuradha's sheer passion for accessibility. They introduced her as a "fighter" and a true "A11y" warrior. I couldn't help but chuckle at those descriptions, but hey, they perfectly captured the spirit of devs who are all about pushing and endorsing accessible code. It was awesome to see someone so fired up about making technology inclusive for everyone.
The :focus pseudo-tag
In her short talk Anuradha gave various cases where accesibility could be improved and in simple ways. She began by showing how removing certain styling such as focus styles on Button elements would prevent users from knowing where they are in the page when navigating with a keyboard. Too often designers and devs remove the “Blue outline” from buttons because it looks “ugly” but she showed that with a few lines of CSS, it could not only be functional but also look good.
Anchor tags and proper wrapping
She stressed the importance of properly wrapping your elements in anchor tags because they serve an important purpose such as showing the URL in the corner of the browser and <a> tags already come with so many accessibility feautures out of the box with hardly any effort needed. Simply making a <span> or a <div> a url isn’t enough.
Forms and other considerations for the color-blind
Accessibility readers often use <label> tag to associate which form field belongs to which label.
Often times, a design pattern is to use red outlines to mark form errors in fields that have improper values filled in. However Red-green color blindness is is actually the most common type of color blindness*
https://www.colorblindguide.com/post/colorblind-people-population-live-counter
So having a “Red” outline might make it less accessible.
WebAIM the Million Project and the most common accesibility failures
in 2023 WebAim conducted a study and analyzed 1 million websites and their Web Content Accessibility Guidelines (WCAG) and found that the 80% of all websites had low contrast text. These changes are so simple to implement so Anuradha challenged everyone why not to incorporate it in NEW code that you write.
You can read more about it in the link below:
https://webaim.org/projects/million/
How to Convince Management to to consider Accessibility?
A member of the audience asked a difficult question on how to convince upper management to consider accessibility. And Anuradha mentioned several steps on how to go about it:
- Find the “Critical Path” aka the flow of the most important or most used flow of your product.
- Make the buttons or small elements of that flow accesible.
- Instead of aiming for 100% accessible try doing it in small incremental steps.
- Lastly read the laws. There are plenty of laws now in the EU that require certain accessibility.
The last point garnerned a bunch of laughs.
Principles for Scaling FE App development: Malte Ubl (CTO at Vercel)
Malte kicked off his talk by challenging the audience to imagine themselves as the hypothetical "Lead" of the product they're working on. With everyone's attention captured, he went on to outline five key principles for scaling a Front-End application. Let's dive into them:
Principle 1: Teardown Barriers
To foster collaboration and ownership, Malte advocated for migrating to a monorepo. By doing so, you make it super easy for anyone to contribute, understand, and navigate through the app. Now, you might wonder if it's risky to allow "everyone to change anything." Well, fear not! Tools like Vercel Workspaces come to the rescue, providing access restrictions to specific parts within the monorepo.
Principle 2: Make it easy to delete code
In the spirit of keeping things lean and mean, Malte encouraged engineers to have as little code as possible. One method he suggested was moving data calls and filtering inside components instead, taking a similar approach to CSS-in-JS but with a twist: Data-in-JS. This helps minimize the amount of unnecessary code hanging around.
Principle 3: Migrate Incrementally
Malte lightened the mood with a joke about two types of migrations: incremental migrations and, you guessed it, failed migrations. But on a serious note, he emphasized the importance of incremental migrations when scaling an application. Taking small steps and gradually migrating parts of the codebase can mitigate risks and make the process more manageable.
Principle 4: Always get better, never get worse
Addressing technical debt should always be a priority. Malte urged the audience to focus on improving the codebase instead of letting it deteriorate over time. He even mentioned the intriguing insight that if you were to graph eslint errors over time, it might appear as though they spike up. But in reality, this happens when new rules are added, highlighting the continuous effort to raise the code quality bar.
Principle 5: Embrace a lack of knowledge
Malte encouraged documenting everything known about the codebase in a machine-readable format for easy reference. By putting all that valuable knowledge into a readily accessible resource, team members can quickly grasp the intricacies of the codebase and collaborate more effectively.
Principle 6: Eliminate Systematic Complexity
To tackle the challenges people face within your app, Malte recommended maintaining a catalog of difficulties encountered by the team. By identifying common pain points, you can develop strategies, tools, or processes to alleviate systematic complexity. He also praised the use of tools like zod, which helps keep TypeScript types consistent with APIs, making the development experience smoother.
Malte's talk provided invaluable insights into scaling a Front-End application, leaving the audience equipped with practical principles to apply in their own projects. It was a refreshing and informative session that highlighted the importance of collaboration, continuous improvement, and making smart architectural choices.
NextJS Metamorphosis: Lee Robinson (VP of DX at Vercel)
Lee's presentation on NextJS 13.4 was a real eye-opener, instead of slides he showed us some code. He delved into some game-changing updates that not only reduced code complexity but also simplified our mental models when working with NextJS.
One of the tricks he shared, which has become quite popular, is keeping API calls closely tied to the components instead of burying them deep within some distant container or parent component. This approach brings a lot of convenience and clarity to the development process.
But that's not all! Lee also introduced some cutting-edge alpha features in NextJS, such as running functions on the server. Can you imagine the possibilities? It opens up a whole new realm of possibilities for server-side rendering.
If you want to dive deeper into these exciting changes, you can check out the official NextJS blog post at nextjs.org/blog/next-13-2.
Trust me, it's well worth the read. Lee's talk left me buzzing with enthusiasm.
Modern Approaches for creating extremely fast Websites: Brad Westfal
https://twitter.com/bradwestfall
Brad's performance-related talk was exactly what I was looking for as I was in the mood for more ways to improve my apps.
He kicked things off by sharing a common response he receives from developers when asked about speeding up requests. It usually goes something like, "The fastest request is the one you don't make at all." While it may sound cheeky, it didn’ provide much practical guidance. So, Brad took it upon himself to present a more helpful set of guidelines for improving performance.
His first suggestion was to consider the following paradigms when making a request:
- Get only what you need: Minimize the amount of data fetched to reduce unnecessary overhead.
- Fetch things in advance: Anticipate the user's needs and fetch data proactively.
- Get it from "nearby": Utilize caching mechanisms to retrieve data quickly.
- Get multiple things in parallel: Optimize network requests by fetching multiple resources simultaneously.
- Don't let the slow things block the fast things: Prioritize and optimize resource loading to avoid delays.
- Load images only within the fold: Lazy-load images as the user scrolls to improve initial page load time.
- Consider pre-rendering links instantly: Render subsequent pages ahead of time to provide seamless navigation for the user.
The great news is that all these performance tips are easy to implement with Remix, a framework that Brad highly recommended. If you're curious and want to explore Remix further, be sure to visit their website at remix.run.
Brad's talk left us armed with practical strategies to optimize request handling and boost overall performance. It was a valuable session that showcased the importance of thoughtful resource management in delivering exceptional user experiences.
Lightning Talks
Building Pixel Perfect UI Components Using CSS Variables: Sam Sycamore (Developer Advocate at MUI)
Sam's talk was inspired by a tweet he received about the challenges of customizing Material-UI components. A frustrated developer questioned why it was so difficult to customize Material-UI, as it often required overriding numerous classes deep within the component structure.
For instance, if you wanted to customize a Material-UI toggle component, simply changing the size of the "knob" slider circle wouldn't automatically adjust the size of the "track." This discrepancy would result in incorrect sliding animation timing and require modifying additional elements to ensure consistency.
To address this issue, Sam introduced Joy-UI, a sister library to Material-UI designed to provide robust customizable components without being tied to Google's Material design guidelines. The goal of Joy UI was to bring joy to the process of customizing components.
In a nutshell, Joy-UI leverages CSS variables in a clever way. Instead of using CSS variables solely within the CSS rules, the developers behind Joy UI incorporated them into the CSS parameters, offering greater flexibility and ease of customization.
It's important to note that Joy-UI is still in its early stages of development, resulting in a limited selection of available components. However, the potential it holds for simplifying customization is promising. Many attendees, including myself, are eagerly anticipating the growth and maturation of Joy-UI. It has the potential to provide developers with a delightful experience when customizing components, empowering them to create truly unique and tailored designs.
you can check out Joy-UI here:
https://mui.com/joy-ui/getting-started/overview/
Posted on June 13, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
