Lenz Weber-Tronic
Lenz Weber-Tronic works as a Senior Staff Software Engineer at Apollo GraphQL, where he is part of the team maintaining the Apollo TypeScript Client.
He is a maintainer of Redux Toolkit and if he’s not currently trying to summon elder gods with weird TypeScript incantations he can usually be found on StackOverflow answering questions on Apollo and Redux usage or opening random PRs on GitHub.
Beyond React Testing Library: Testing React Libraries (and library-like code)
React Day Berlin 2024
Dec 16, 15:10
Beyond React Testing Library: Testing React Libraries (and library-like code)
When it comes to testing library code, the (usually amazing!) "Testing Library" approach quickly hits its limitations: We often need to test hot code paths to ensure additional guarantees, such as a specific order of DOM changes or a particular number of renders.
As soon as we start adding Suspense to the picture, it even gets almost philosophical:
How do we count a render that immediately suspended, and how do we distinguish it from a "committed" render?
How do we know which parts of the Component tree rerendered?
In the Apollo Client code base, we're using the React Profiler to create a stream of render events, enabling us to switch to a new stream-based testing method.
After testing this approach internally for a year, we have released it in a library that we want to present to the world.
I'll also briefly look into other "testing-related" problems far outside the norm that we've come across and share our solutions:
How to test libraries that bundle different code for React Server Components, streaming SSR runs, and the Browser: Testing your growingly complex `exports` fields and ensuring all those environments export the package shape you expect.
We'll even briefly look into rendering React components in different environments to test them in isolation - be it in Server Components, Streaming SSR, or simulating stream hydration in the Browser.
As soon as we start adding Suspense to the picture, it even gets almost philosophical:
How do we count a render that immediately suspended, and how do we distinguish it from a "committed" render?
How do we know which parts of the Component tree rerendered?
In the Apollo Client code base, we're using the React Profiler to create a stream of render events, enabling us to switch to a new stream-based testing method.
After testing this approach internally for a year, we have released it in a library that we want to present to the world.
I'll also briefly look into other "testing-related" problems far outside the norm that we've come across and share our solutions:
How to test libraries that bundle different code for React Server Components, streaming SSR runs, and the Browser: Testing your growingly complex `exports` fields and ensuring all those environments export the package shape you expect.
We'll even briefly look into rendering React components in different environments to test them in isolation - be it in Server Components, Streaming SSR, or simulating stream hydration in the Browser.
Beyond React Testing Library: Testing React Libraries (and library-like code)
React Advanced 2024
33 min
Beyond React Testing Library: Testing React Libraries (and library-like code)
When it comes to testing library code, the (usually amazing!) "Testing Library" approach quickly hits its limitations: We often need to test hot code paths to ensure additional guarantees, such as a specific order of DOM changes or a particular number of renders.As soon as we start adding Suspense to the picture, it even gets almost philosophical:- How do we count a render that immediately suspended, and how do we distinguish it from a "committed" render?- How do we know which parts of the Component tree rerendered?
In the Apollo Client code base, we're using the React Profiler to create a stream of render events, enabling us to switch to a new stream-based testing method.After testing this approach internally for a year, we have released it in a library that we want to present to the world.I'll also briefly look into other "testing-related" problems far outside the norm that we've come across and share our solutions:How to test libraries that bundle different code for React Server Components, streaming SSR runs, and the Browser: Testing your growingly complex `exports` fields and ensuring all those environments export the package shape you expect.We'll even briefly look into rendering React components in different environments to test them in isolation - be it in Server Components, Streaming SSR, or simulating stream hydration in the Browser.
In the Apollo Client code base, we're using the React Profiler to create a stream of render events, enabling us to switch to a new stream-based testing method.After testing this approach internally for a year, we have released it in a library that we want to present to the world.I'll also briefly look into other "testing-related" problems far outside the norm that we've come across and share our solutions:How to test libraries that bundle different code for React Server Components, streaming SSR runs, and the Browser: Testing your growingly complex `exports` fields and ensuring all those environments export the package shape you expect.We'll even briefly look into rendering React components in different environments to test them in isolation - be it in Server Components, Streaming SSR, or simulating stream hydration in the Browser.
The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSRWatch video: The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
React Advanced 2023
28 min
The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
If you use the Next.js app directory, you might not even have noticed it, but you are not only using React Server Components, but you are also using the new streaming SSR feature of React.That means that on first page load, your Client Components will now be server-side rendered, suspense boundary by suspense boundary, and constantly streamed to the client, where they are rehydrated piece-by-piece.
If you combine that with suspense for data fetching in your client components, you will suddenly be facing hydration mismatches - as your client components will start fetching data on the server, but the data will not be transported to the client.
In this talk, I will go over the rocky journey that we had to go through to support suspense for data fetching in Streaming SSR with Apollo Client, looking at all the curious timing problems that come up with these technologies, and how we try to solve them as best as we can - always with the best possible user and developer experience in mind.
If you combine that with suspense for data fetching in your client components, you will suddenly be facing hydration mismatches - as your client components will start fetching data on the server, but the data will not be transported to the client.
In this talk, I will go over the rocky journey that we had to go through to support suspense for data fetching in Streaming SSR with Apollo Client, looking at all the curious timing problems that come up with these technologies, and how we try to solve them as best as we can - always with the best possible user and developer experience in mind.
GraphQL in 2023 - Still Relevant?Watch video: GraphQL in 2023 - Still Relevant?
React Summit 2023
24 min
GraphQL in 2023 - Still Relevant?
With fetching libraries like TanStack Query, swr, or RTK Query becoming more widespread, some of the immediate “selling points” of GraphQL clients seem to be less unique - so it might be a good idea to take a step back and ask the question “is this even still relevant?”. And to already take the answer away - it is “yes”. The unique selling points of GraphQL go far beyond having a smooth data fetching experience by solving many inter-team and architectural problems. While it might not always be immediately evident as a benefit for us as Frontend Developers, GraphQL gives us a lot of freedom and makes us less dependent on backend teams implementing a Backend-for-the-frontend for us. Also, while data-fetching libraries have made it a lot easier to work with REST nowadays, GraphQL still has properties that are just not present in traditional REST APIs, and on top of that GraphQL has kept evolving. New directives like @live or @defer enable developers to create a fantastic user experience with very little work - especially when combined with React’s new suspense features.
Dealing with ADHD as a developer
React Advanced 2022
27 min
Dealing with ADHD as a developer
"Hi, my name is Lenz and two years ago I was diagnosed with ADHD (attention deficit hyperactivity disorder)." Well, this is not going to be a self-help-group, but I think it is important to talk about this wildly underrepresented topic. Since my diagnosis, I have spent a lot of time talking to other developers about it - and many of them also have ADHD, often a late diagnosis. It seems that we are quite the vulnerable population - or rather, it seems like a lot of ADHD people are drawn towards a developer job. In this talk, I want to tell you about myself, how ADHD affected me and how the late diagnosis changed my life. But it didn't only change my life - it also affected everyone around me. As colleagues, we have found a new level of understanding with each other that helped us more than any team-building event. And in the end, made us more productive since we now know how to better use our individual strengths, instead of trying to meet social expectations. I will also talk about general ADHD symptoms and try to give you a rough overview on the topic - what kinds of treatments exist, what kind of coping strategies there are and where the line between "everybody is a bit forgetful" and "ADHD is an illness" lies. You might recognize yourself in this. Or just a close friend or colleague. Either way, this talk will give you awareness & insights how the mind of a neurodivergent person can work differently - or it may even be an important wake-up-call. Disclaimer: while I have an interest in the topic and am personally affected, I am not a trained professional on the topic and everything you hear here can only be an inspiration, but never medical advice.