Arrows (At Length)

Rate this content
Bookmark

Love linking lines? Join me in considering the humble arrow as both a programming problem and a user experience challenge. In this talk, I'll present the many complex problems and solutions that I've encountered when working with arrows in my open source library perfect-arrows and later in tldraw (tldraw.com). With a narrow scope and plenty of animations to guide the way, we'll look at intersections, arrow heads, arrow head angles, and all of the different user interface issues behind authoring and adjusting arrows between shapes, other shapes, and points.

23 min
24 Oct, 2022

Video Summary and Transcription

This talk focuses on arrows and their unique features in diagramming tools. It explores the challenges of arrow positioning and connector selection, particularly with irregular shapes. The talk also discusses alternative arrow intersections and curved lines, as well as the challenges of creating curved arrows. The speaker presents a method for creating arrows and moving handles that always look good. The talk concludes with an invitation to try out the new version of Teal Draw and follow the speaker on Twitter for more arrow content.

Available in Español

1. Introduction to Arrows at Length

Short description:

Welcome to my talk, Arrows at Length. I'm Steve Ruiz, the founder of Teal Draw, a drawing app. Today, we'll focus on arrows and their unique features.

Hello, and welcome to my talk, Arrows at Length. My name is Steve Ruiz and I am on Twitter at SteveRuizOK. You can follow me using this QR code and if you like arrows then you should probably follow me or if you like other kind of visual algorithm stuff. I'm the founder of a, well it used to be a side project, now it's a startup called Teal Draw. And Teal Draw is a tiny little drawing app, you can go to it at TealDraw.com and I'll show you what it looks like. It is, like I said, kind of a drawing app, diagramming app.

You can use it for collaborative white boarding. It's free, it's file based and kind of local first. And we are working on the new version of that app which is kind of designed more to be a developer product platform that you can build these types of apps with. So if you have an idea for a spatial canvas, a kind of a figma for x type of an app, then you could potentially build that on top of teal draw rather than starting from scratch. And it's pretty good you get a lot for free. So who knows maybe I'll be back next year and I can talk about that. But for today, yeah, we're going to be talking about teal draw and specifically we're going to be talking about arrows. There's a lot that we could talk about like we could talk about the minimap or the digital ink both of those things are super complex and interesting I think developer stories to tell. But instead we're going to just talk about the arrows and I've spent a lot of time working on arrows and if you've used teal draw you might notice that the arrows are special, they're considered. There's a lot of different ways that you could do an arrow. I'll show you the ways that we do it and also a little bit of background on why and why we don't do it a different way. So let's jump into it. Let's say hello to arrows, whatever.

2. Understanding Arrows and Connectors

Short description:

An arrow is a line that links two different things, such as points in space or shapes. It can also connect a shape and a place, or a place and a place inside a shape. Most arrows have a specific direction indicated by an arrowhead, which can be used to represent relationships in diagramming frameworks. Arrows can have different shapes, such as elbows, curves, arcs, or splines. Users may find it tricky to adjust these types of arrows. Arrows in diagramming tools connect to specific places called connectors, allowing for connections between certain connectors.

What is an arrow? An arrow is a line. Specifically, it's like a linking line. It's linking two different things. It could be linking two points in space like we see here. It could be connecting two things, like two shapes, like these two rectangles.

It could be connecting a shape and a place or a place and a shape. Or a place and a place inside of a shape. So the idea of indicating a specific area of a specific thing, rather than just the thing itself.

Most arrows are directed in the sense that they go in a certain direction. We indicate that direction with an arrowhead that can go whatever. This way, that way, both ways. And arrowheads can also be used in different kind of diagramming frameworks to represent different things. So maybe you have a graph of entities or servers. Different arrowheads could be used to represent different relationships between those two things. So they can also be labeled. Labels could look like this or like this. Kind of hard to get it right like this, so I do it like this.

And then the arrows themselves can also have different shapes. So you don't always want a straight line. Maybe you want some sort of elbows. Maybe you want some curves along those elbows. Maybe you want an arc or a spline. And the place where this really gets complicated and interesting is when you consider how users author these types of arrows. How do you adjust an elbow line or a spline like this? That's where it really becomes a little tricky, as we'll see.

Most arrows and most diagramming tools connect to specific things called connectors. They are specific places on either side of the shape where the arrows can connect. So let's call them northeast-southwest. In this case we would have east connecting to west. That's pretty straightforward. You want to connect certain connectors to each other.

3. Arrow Positioning and Connector Challenges

Short description:

You don't want situations where the layout of two shapes results in incorrect positioning. Instead, connect the anchor points on the centers and use connectors on the corresponding sides. There are various possibilities for connectors, such as elbows, right angle arrows, or quadratic curves. Choosing the right connector can be complex, and there are edge cases where the arrow's appearance may look odd. When users edit arrows, preserving their decisions can lead to unexpected results. Irregular shapes can also pose challenges when using connectors.

You don't want situations like this where you're west-west based on the layout of the two shapes. That doesn't look right. Instead, you probably want to have a line segment going between the two anchor points on the two centers. See which edges those break, or intersect with, and then use the connectors on those sides. That'll work whether the shapes are of different sizes, or whether they are positioned in different ways.

That's a pretty good rule for which sides to use. But even then, you might want to complicate things. You might want to mix it up a little bit and have elbows so right angle arrows, or maybe you want to turn that into some sort of quadratic curve. Feel free to do so, but you'd still need to pick which connectors to connect. That's not always this. This is maybe like an L-shaped arrow, but you will also run into, if you go down this run into C-shaped arrows and I-shaped arrows, so places where you want to, maybe if the shapes are directly in line, then you want to connect the two closest points. If they are in line, but they are like, too close to each other, then maybe you want to connect the points off to the side. So you end up with this like C-shaped and then yeah, if they're kind of like this, then you end up with like an L shape.

There are a lot of permutations to this and a lot of rules about when to pick which connector, much less where to pick, which elbow to pick, and all that. It gets pretty gnarly and it also doesn't work super well in every case. You get these like edge cases, which is literally like at the edge of a decision space, where it hasn't moved just far enough in order to trigger some other decision route, like, okay, let's connect to different set of arrows or connectors, but it's still wrong, like where you have, for example here, the short end of the elbow arrow, which is shorter than the arrowhead itself, and that'll come up in a lot of apps where this type of thing is used.

Especially if you have users authoring their own arrows, you get into situations like this where you wanna preserve user decisions no matter what they've done. Sometimes that's, I want this to connect to this other shape, but if you have users editing the arrow as well, they may have pulled this side of the arrow off to the right and then When you move the arrowhead into another shape or move that shape that it's connected to and you preserve that right arrowhead or the segment of the arrow that the user has moved, you end up with arrows that look kind of goofy.

You've used an app called Whimsical. Whimsical's a fantastic app and wonderful set of, well, different utilities really. A couple apps in one. But it's arrows, you can get them into some pretty weird states by doing this, by editing the arrow and then also connecting it to something. So it's a little unpredictable. Finally connector arrows or using connectors, there's really no story for, I want to connect this inside of this other shape. Normally, yeah, if there's no connector there, then you just can't connect to it. So this sort of the place in the thing story gets a little hairy. And also if the shape is irregular, then connectors can be a problem. Namely because the connectors are Northeast, Southwest, they are based on the kind of the bounding box of the shape. If the shape is a box and that's perfect because it corresponds. If it's not a box, and if it's not a circle and if it's not like equal on all four sides, then you could get into situations where yeah, they're just kind of hanging out in space.

4. Alternative Arrow Intersections and Curved Lines

Short description:

The more organic the shape, the less the connector seemed to actually connect to the shape. An alternative is intersections. This is what we ended up going with in teal draw. We intersect the line segment at a specific place with the two shapes, rather than just paying attention to which edge is broken. If there is an intersection and that side of the arrow has an arrow head, we kick the arrow head back a little bit. This ensures that the arrow points and intersects at the right place. We aim to achieve an aesthetic decision that a designer would make, getting an arrow that they would put in that position. Let's now explore curved lines.

The more organic the shape, the less the connector seemed to actually connect to the shape. So what's an alternative? That's right. The alternative is a intersections, or at least this is one alternative. This is one that we ended up going with, with a teal drop.

So here's how it works. If you can think of an arrow again, as kind of a line between two anchor points, maybe it's the middle, let's think of that more, it's like a line segment that we can intersect at a specific place with the two shapes. So rather than just paying attention to which edge is broken, we actually look like, okay, where did this intersect with the shape? And then we just draw the line, the arrow in between those two points. Easy.

So that looks fine. It looks a little bit less fine for the arrow head, the, the end of the arrow rather than the beginning of the arrow. So what I did in teal draw is that if there is an intersection and that side of the arrow has an arrow head, I kick the arrow head back a little bit. You can think of this as like intersecting against the expanded bounds of the shape, but it's not really. And I'll tell you why in a second, but this is, this is what you want. This is, this is good. I said like, we're not actually expanding the bounds and then intersecting with that. We're just kicking the arrow back the way it came, the direction it came. Uh, and the reason for that is that with more complicated shapes, yes, you could do the bounds off setting stuff. Like, yeah, you could do this. It's a little tricky. Um, and the, the more organic a shape gets, the trickier it gets. Like you do not want to do, you know, Bezier curve offsetting just in order to get your arrow head be 12 pixels back. You just reverse the arrow. You know, push it back. It's easy. Um, so don't do this, just, just, just do this anyway. Um, what you end up with is an arrow that like points at the right place, intersects with the right place. Um, and is pretty close to the type of arrow you would draw if you were drawing this yourself. And with these sorts of graphical algorithms and such, that's really, really what you're going for is to try and figure out, uh, the, the logic behind an aesthetic decision that you would have made as a, as a designer, or just, you know, um, if you, if you had time to design every frame of that or draw every frame of that yourself, sometimes those rules are a little tricky, but, uh, that's the goal is to get something that would be like, yeah, I would put the arrow there. If I did this myself, I would put the arrow there. So, uh, we talked about different types of lines, like kind of aesthetic types of lines, and we want to get into a curved lines.

5. Curved Arrows and Challenges

Short description:

The algorithm we discussed works for straight arrows and handles shape movements and resizing. However, curved arrows present challenges. In tealdraw v1, we use handles at the start and end, with a middle handle that travels along the arrow's length. The curve doesn't look right when connected to two different shapes. Let's explore better curved arrows that intersect a straight line with the two shapes.

But before we do get into curved lines, let's also point out that this algorithm that we just talked about, where we find the intersections, draw the arrow between that, kick the arrow head back a little bit. Um, that works for the place in a thing. Uh, it also works if the shape moves and resizes. Um, it'll, it'll still point towards the right place, the right anchor. Um, and as we'll see, even with curved lines, uh, the arrow will, will still work and it'll still work, you know, the same situation if things resize or move.

So let's talk about curved arrows. Curved arrows are a little tricky and I'll show you why. So in tealdraw v1, uh, the, the current tealdraw.com, um, the way that we do curved arrows is we have handles at the start and the end, and we can, um, can use a middle handle, which sort of travels along, uh, the, the same distance, the same length of the arrow, but just sort of perpendicular. Uh, and it can travel along that. You can think of it kind of normalized that negative one is all the way to the left and one is all the way to the right. So you can grab the middle handle and pull it up to the top. That would be negative one bendiness. Um, this would be one bendiness. This would be like 0.5 bendiness. Um, and either way, that's the way that you kind of author the, uh, the, the curve. And the problem is that the curve doesn't look right when it's connected to two different shapes.

Okay. I wouldn't draw that. And what's happening is, uh, while this, this algorithm that we had before, right. The little series of steps that would give us our straight arrow that works for straight arrows, but it doesn't really work for bend the arrows. And I'll show you what that looks like exactly. Um, and I'll show you why as well, but this is, this is like the, what children.com looks like. This is the arrows until draw.com. Um, looks fine. Looks pretty good. But the, when the arrows are kind of further apart, it's just not, doesn't look like, uh, doesn't look right. So let's talk about better curved arrows. What would be better if, uh, if our straight arrows look fine and our straight arrows are used, you know, to find the straight arrow, we, we use a straight line. We intersect that with the two shapes.

6. Curved Arrows and Arcs

Short description:

We want to use a curved line to find where the line intersects with the two shapes and base our arrow on the body of space between those two intersections. Instead of putting the handles at the arrowhead, we put them at the anchor point, allowing us to create an arc between those three points. This ensures the arrow looks correct and can be adjusted even when repositioning the end handle. We can also grab the middle handle and preserve the actual distance between the handle and the midpoint of the line between the start and end points. This approach allows us to create the arc and have our arrow.

We intersect that with the two shapes. Um, but it doesn't work well with our curved arrows because we're still using that straight line to find the points where it intersects. We don't want to do that. Instead, we want to use a curved, uh, line to find where that intersects with the two shapes and then base our arrow on the body of, uh, you know, space between those two intersections.

So in other words, the, uh, the model that we had before where we had the two handles of the arrow, uh, the starting the end handle, and then the middle one, we were replacing the start and the end handle at the intersection point. Um, but instead we are going to put those handles at, you know, the whatever, the, the, the actual anchor point, wherever the user has pointed the arrow. Um, so rather than putting them at the actual arrow head, we're going to put them at the, um, the anchor point and still draw the arrow in between the two intersections. But the handles are no longer at the arrow head itself if it's bound to a shape. Uh, and what that allows us to do is create the arc between those three points and then our arrow looks correct. We can, we can draw the arrow as part of the body of that arc. Uh, and that still works if we are repositioning the end handle. So again, here, we're not grabbing on the, the arrow head, the handle is kind of over here. We can still drag it and, uh, it'll look, look correct. The rest of the arc will, will, will happen automatically. Um, we can also grab the middle handle in this situation. And then rather than having it just travel up and down along a path, we, we really just want to look at the distance between the handle and the midpoint of the line or chord between the start and the end point. And that's rather than like represented, uh, as like a normalized value, like a negative one to one. Um, that's like an actual distance and we're going to preserve that actual distance. So based on those three points, we can get our arc and then we have our arrow. Let's look at what that looks like. Much like before I have a straight arrow, but this time the handles are kind of in the middle of the shapes and I can still decide where the arrow points and I can adjust it looking good. Even as I move things, that's what you want.

7. Creating Arrows and Moving Handles

Short description:

No matter what I do, the arrow always looks good. We use three points to create a circle, intersect it with the shapes, and select the closest intersection point to determine the start and end of the arrow. We push the endpoint back if it has an arrowhead. With the circle, center, start and end points, we can draw the arrow and add the arrowhead. When dragging an endpoint, we also move the middle handle by calculating the distance between the handle and the midpoint of the line between the start and end shapes.

Uh, and really the important thing is that no matter what I do, the arrow is still looking good. If it's almost straight, then I just make it straight. So let's talk about, uh, how we actually do this. Like puts what's the math involved and how do we find all these points? Cause, um, yeah, there's kind of a, a lot going on here. Uh, in terms of like, um, programmatically putting these things in the right place and, and creating this curve and creating the arc and all that, and doing the sweep flags and long, long flags, all that.

So you may remember from high school, uh, I kind of missed this in high school, but I learned it late. Uh, if you have three points, you can make a circle. In our case, we have three points to start and of the arrow and the kind of the middle handle of the arrow. And that lets us make a circle. Any three points, as long as they're not in a perfectly straight line can be used to create a circle. If they are in a straight line, then that doesn't work, but you get the idea. Uh, we intersect the circle against the first shape in order to get these two intersection points. And then we pick the intersection point that is closest to the middle handle. And that becomes the start of the arrow. We repeat for the second, uh, shape get those two intersection points, find the one that's closest to the center handle middle handle. And that's the end of the arrow. Um, much like before we want to push that, that end point back a little bit. If it has an arrowhead, in which case we kind of get the length of the arc segment and however far we want to push it back from, et cetera, et cetera. Like, yeah, we just do it. Uh, and that we have the, all the information that we need really to, uh, to draw our arrow. We have a circle, we have a center of the circle, we have a start and an endpoint, um, or at least the start and the end angle, which we can use with the radius to find the point on the circle. And that gives us the body of our arrow. And all we have to do is smack an arrowhead on that and we are done. Perfect.

Um, it gets a little, a little further with, uh, interactions is again, um, when, when you, when we drag like an endpoint, we still have three, uh, three points, but we, we also need to move that middle handle. Um, and, and to do that, we, well, we get the distance that we had before the sort of like bent distance, the distance between the handle and the midpoint to that line between the two, uh, start and end shapes. And then when I drag this one, um, before I actually move this handle, I have, you know, I can find the midpoint and then apply that same distance at a perpendicular. And, and that's where we put the middle handle. Sorry, this slide doesn't really communicate that either way. Uh, that's how we move the start and end points.

8. Creating Better-Looking Arrows in Teal Draw

Short description:

When we move the center point, we've changed the bend distance, which allows us to create a circle. Finding the middle of the cord between the start and end and offsetting it by the bend distance gives us the end handle, allowing us to create a circle, an arc, and our arrow. Teal draw is a diagramming tool that provides a limited set of options that always look good. We haven't discussed arrowheads, anchor point selection, and complex state management for arrow updates. Try out our arrows at tealdraw.com.

When we move the center point, same thing as before, is that we've changed that bend distance, but that Ben's distance, uh, is what allows us to create the circle. Like we, we have, or at least drive the position of those, those three points, the middle point. Um, so now we've changed to spend distance. Um, we do want to put the middle handle back in the middle. Um, next time I select this thing, I, I'm going to expect the middle handle to be in the middle. So there's one last step that we have to do, which is to find the middle of the, well, we angled to the start, the angle to the end, get the middle, uh, angle of that. And then that's where the handle is going to be next time. And then we have our nice arrow that we've adjusted by dragging the middle. So I'll show you what this actually looks like. And I've kind of added some debug information here so that we can, we can actually see it happening. Uh, as I move the two shapes, that's moving the start and end. Uh, point point to the handle when we're then using the kind of the end distance to find the middle middle point of the handle.

So finding the middle of the cord between the start and end and then offsetting it by that bend distance at a perpendicular, uh, that gives us the end handle, which allows us to create a circle, which allows us to create an arc, which allows us to create our arrow. And that is how much better looking arrow is born. I'm using, using a, uh, intersections based on the, uh, that circle. So in the end you have a, an arrow tool in teal job, which is pretty good. Um, like I said, the, when this works, it works because whatever you do, it's going to look good. Um, and, uh, teal draw is as a kind of a diagramming tool, I suppose, is all about giving you a limited set of options that will always look good no matter what you do. Um, try as you might, it'll still be good.

There are other things involved in arrows that we haven't talked about. We haven't talked about these arrowheads, like these little dots here that you see. Um, we haven't talked about, uh, how we kind of pick the anchor points for, uh, for shapes, although it's pretty straight forward. If you can, if you can guess, then you probably have the right answer. Um, and we haven't talked about the kind of the, the complex state management involved in making sure that the arrows update at the right time, um, based on what's changed, it's also pretty gnarly. Um, but yeah, that is arrows in teal draw. I feel like the, uh, the hard parts at least. So thanks again for watching. Uh, you can try out our arrows and two places. First of course, tealdraw.com, um, where you can, uh, try out the, the older set of arrows that I showed, including the kind of the bendy ones that didn't really bend to a way that you'd expect them to. Uh, but since you, uh, have been kind enough to watch this, uh, this talk video, um, you can also check out the new version of our arrows that are kind of, it says beta, it's more like an alpha.

9. Building the New Version of Tealdraw

Short description:

We're building the new version of Tealdraw at LITE.tealdraw.com. Try out both arrows and let me know your thoughts. Follow me on Twitter for more arrows content. Thank you and take care.

Um, this is where we're, we're building the new version of tealdraw and you can check that out. L I T E dot tealdraw.com. Try out both arrows. Let me know what you think. I, uh, I hope it's an improvement.

And, uh, once again, I'm Steve Ruiz. Um, follow me on Twitter. Lots more arrows content and let's just a lot of tweets. Um, so thank you. Uh, take care.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️

Workshops on related topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
TypeScript Congress 2022TypeScript Congress 2022
116 min
Advanced TypeScript types for fun and reliability
Workshop
If you're looking to get the most out of TypeScript, this workshop is for you! In this interactive workshop, we will explore the use of advanced types to improve the safety and predictability of your TypeScript code. You will learn when to use types like unknown or never. We will explore the use of type predicates, guards and exhaustive checking to make your TypeScript code more reliable both at compile and run-time. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Are you familiar with the basics of TypeScript and want to dive deeper? Then please join me with your laptop in this advanced and interactive workshop to learn all these topics and more.
You can find the slides, with links, here: http://theproblemsolver.nl/docs/ts-advanced-workshop.pdf
And the repository we will be using is here: https://github.com/mauricedb/ts-advanced