00:00:16.640
All right, good morning everybody. Thank you so much for coming. I'm really honored to be here.
00:00:20.720
This morning, we'll be talking about client-side UI. This is your client that's running inside the browser and not on the server. Some of you might already be doing this a lot, while others may be doing it a little. But wherever you fall along that spectrum, chances are you're going to be doing more of it as time goes on.
00:00:28.640
My goal here is to share with you some ways that I've come to think about client-side UIs that can help you build user interfaces that are reactive, educational, and ultimately satisfying to your users.
00:00:35.840
What I want to share with you is the power of M. My name is Charles, and I'm a cowboy D on GitHub and Twitter. I work at The Frontside, where we've been working on UI for almost ten years exclusively.
00:00:39.119
When I talk about M, of course, I'm talking about model in MVC. We're all familiar with the MVC pattern—Model-View-Controller. It's what underpins all UIs, at least ostensibly.
00:00:43.600
However, it can actually be pretty notoriously difficult to pin down exactly what MVC is. It's a hard question, and if you ask two people, you're likely to get very different answers.
00:00:46.399
I don't want to go too deep into trying to give you one particular version of MVC. I think there are many definitions.
00:00:49.360
In fact, people ask the question: is Rails MVC? Some people are really stringent about this, insisting that Rails is MVC. I'm more relaxed about it and say yes, Rails is MVC—it's server-side MVC. It's a flavor of MVC.
00:00:54.720
But what I've come to realize is that MVC is kind of like kung fu. There are lots of different schools and many different ways to practice it, each with its own strengths and weaknesses.
00:00:59.600
You need to choose one that's appropriate for the context. Today, we're going to be talking about client-side UI, which is different from server-side MVC.
00:01:03.919
One of the things that really sets client-side MVC apart is that when you're working on the client, you constantly have to manage state. The client is always on, unlike a Rails application where you're essentially setting up the world and then throwing it away with every request.
00:01:09.920
On the client, you are always on, and you have values that relate to each other. When one of those values changes, you have to update the other values to reflect that.
00:01:14.640
When thinking about MVC, I've come to realize that really what you want to do is focus on the model.
00:01:17.360
When you first come to the acronym MVC model, you tend to give equal billing to the letters because they are all there in the acronym. However, I've come to find that while the view and the controller are important, they orbit around the model.
00:01:21.240
I actually draw inspiration from this ancient philosopher, Plato. He had this allegory of a cave that I think really captures this concept.
00:01:27.040
The idea is that living in this world is like being inside a cave, with a fire burning at the entrance. Shapes pass in front of the fire and cast shadows on the wall. We inside the cave can only see those shadows; the shapes and fire are hidden from us.
00:01:34.560
But if we look at the shadows, we can extrapolate the shapes. The shapes we see on the wall take their form purely based on the shapes in front of the fire. They are as they are and no other way because of those true forms and the way they interact.
00:01:45.040
Now, I know this all sounds very abstract. We've covered who I am and talked about an ancient philosopher, which I guess is obligatory. But I really want to give a demonstration of this principle in action.
00:01:51.680
To do this, we're going to explore the concept of a color. It's a simple concept that most of us can perceive easily. We know what it is, but surprisingly, it can be difficult to pin down.
00:02:00.560
There are many ways to represent color, but we are going to use a color that will serve as the basic value in our system.
00:02:03.440
This representation will allow us to see what reflections we can make on that wall.
00:02:06.560
For the first example, we're just going to project this color onto a single div.
00:02:09.120
We can set a color, remove it, or change it.
00:02:10.800
As we do this, the color swatch will update itself.
00:02:13.920
I have a little demo where I have it hard-coded so that when I check this box, the swatch will turn green.
00:02:16.800
I can uncheck it and check it again. It's simple but surprisingly satisfying.
00:02:20.000
While I was putting this talk together, I found myself just clicking it on and off.
00:02:23.920
You can also connect one color to two swatches, demonstrating that there's no reason we can't duplicate this.
00:02:27.680
We can take two swatches and bind them to the same color. There is only one color in the system, but the effect is the same.
00:02:31.520
This is what data binding is. You might hear about data binding and most people equate it with templates, as that’s usually where we first encounter it.
00:02:35.040
We change one value, and the string value updates. But templates are just a special case of data binding. In the abstract, it's really about taking two values and making them occupy the same space in your application. Conceptually, there really is no difference between them.
00:02:44.320
This is different from observation, which is another pillar on which client-side UIs are built. In observation, you can watch for value changes in a model, and when that value changes, you get a callback. But with data binding, you really need to think of it as taking two separate properties and making them overlap.
00:02:48.560
Data binding is built on observation. When we have a model that has some properties, we can use observers to implement the data binding.
00:02:52.640
If a value appears in one observed property, we copy it to the other. This is about the data flowing through your application, similar to how sound travels through particles.
00:02:56.800
This decouples that data flow from your computations so you can compose different models simply by making them overlap at known points.
00:03:00.400
To show this in action, I've created a model called a desaturator. On the left, it takes a color, and at the bottom, there’s a value between zero and one.
00:03:03.760
The color on the right will be a desaturated version of the color on the left. This relationship is pure; no matter what the color on the left is, the right will always be a desaturated version.
00:03:09.280
We can now plug this into our swatch assembly just using data binding.
00:03:13.520
Here's the desaturator with the green turned on. As we increase the desaturation, you can see that it literally just sucks the color right out.
00:03:17.280
When fully desaturated, you're left with gray. If you've never heard the term 'desaturation' before, that's what it means.
00:03:21.680
If I change it to a different color, like black— which is the absence of color—then they are both black because there is nothing to desaturate.
00:03:26.560
But when I shine the color through again, the desaturation remains. This works well for binding colors to colors.
00:03:31.520
But when you have two separate data types, you’ll need another model. What I’ve implemented here is what I call a color syntax.
00:03:35.920
This model has a color on one end and a string on the other. While there’s a bit of complexity inside the model, its composability is simple. It just relates a color and a string.
00:03:40.800
It connects both ways. A color appearing at the top implies a string value at the bottom. Likewise, if a new string value appears on the bottom, that implies a different color value on the top.
00:03:45.680
I can plug this into our assembly and will plug it in twice to speed things up, demonstrating the power of data binding.
00:03:51.120
We have two text inputs which produce strings. Both of these are bound to the same color, which connects to the swatch on the right.
00:03:55.680
Let’s see this in action. I can change the color of one input, and we can see the colors update in the swatch and the desaturated version.
00:04:03.520
For example, if I set it to cyan, I also see a desaturated cyan. This is because I'm only changing that one color value.
00:04:09.440
Similarly, these text fields don't have any specific format because the syntax I implemented is format-agnostic.
00:04:12.320
I can even enter different color representations like use an RGB constructor to create red again.
00:04:18.560
Now that we can change and play around with colors, we can enter RGB values one at a time to see their effects on the mixed color.
00:04:22.640
However, this method doesn’t fully explore individual components, so we can add another model to decompose this color into its RGB values.
00:04:27.680
We again relate a color value on the left to three different coordinates: red, green, and blue, allowing us to see how they connect to one another.
00:04:34.280
I've replaced the desaturator with this RGB selector- let’s see what this looks like.
00:04:39.440
You can see that the sliders are bound to the RGB values. If I bring in red, it will create pure yellow, and I can fade out green until it results in pure red.
00:04:47.760
This allows us to visualize how each individual color affects the final value. Now, we still haven’t seen how the computer actually constructs the color.
00:04:54.040
For that, we can visualize not just the final output in the swatch but also each value for red, green, and blue.
00:05:01.360
I created an RGB visualization component bound to color so that when the color updates, we visualize the individual red, green, and blue values.
00:05:09.600
Here you can see pure green; as I bring in red gradually, it shifts towards yellow. By adding blue, we will see it blend to white.
00:05:13.600
What we're observing is the result of how the color is added by the actual hardware; RGB is an additive model.
00:05:16.640
The part where all circles overlap shows all three colors added together.
00:05:20.240
The other overlaps represent other combinations. For example, with pure cyan— you notice there’s no red present.
00:05:24.960
This allows you to experiment with colors while avoiding distraction from the overall sum.
00:05:30.320
RGB can be difficult for us to grasp as humans because it caters to pixel behavior.
00:05:34.240
The RGB coordinates are simple for monitors since they can easily add those values to emit light. Yet that isn't how we perceive it.
00:05:38.520
There are other color systems more aligned with human perception, unfortunately, these aren’t widely used. RGB is like the assembly language of color—it’s machine-understood.
00:05:43.680
The most popular form for describing colors is HSL, which stands for Hue, Saturation, and Lightness.
00:05:49.440
Hue refers to the degree of how similar or different a stimulus can be from red, green, blue, or yellow.
00:05:52.560
Saturation indicates the colorfulness relative to its brightness. Lightness describes the subjective brightness of color from light to dark.
00:05:57.120
If this is difficult to grasp, know that the vocabulary centers around human perception but can still feel opaque.
00:06:01.520
We can add another model to unpack these coordinates and see how they influence the color values.
00:06:06.240
I’ve developed an HSL selector similar to the RGB selector, allowing us to see the hue, saturation, and lightness.
00:06:09.440
Currently, we have pure green. As I adjust the hue, the colors shift—keeping saturation constant.
00:06:12.320
We can see that as green returns, red decreases until it fully converts to cyan.
00:06:16.800
The same applies when adjusting saturation and lightness—these controls help visualize effects.
00:06:21.920
It's a great hands-on experience revealing how color changes and relationships shift.
00:06:25.440
Each testing holds substantial power in refining our understanding.
00:06:27.680
You can see adjustments cause colors to mix through visualizing their coordinates.
00:06:30.240
Now let's visualize HSL and bind it to our color model.
00:06:33.760
Here’s the HSL space. The color selectors using HSL show a dynamic effect as we make adjustments.
00:06:38.080
You’ll notice how adjusting the hue changes the circle and influences saturation and lightness.
00:06:41.280
The saturation indicates how bright the hue should be—white is at the top.
00:06:43.760
This means manipulating the lightness reveals how our color perception shifts along a gradient.
00:06:47.120
This exercise highlights how binding to a singular value delivers impactful insights.
00:06:50.240
However, values are not limited to the client; servers can be treated as a simple model too.
00:06:52.640
The server can appear as a black box to the client components but behaves like any other model.
00:06:56.560
When a color value enters, it’s processed by the server, which can serialize or manipulate it.
00:07:00.960
Conversely, the server may produce a color value as output.
00:07:04.960
We can develop Colorbook, a social network for color values, demonstrating server-client connections.
00:07:08.240
Using web sockets, I’ll demonstrate a live example using two separate tabs.
00:07:12.320
Now, we will observe bound actions between these tabs, executing simultaneously.
00:07:16.000
This showcases how the connected clients react with one another.
00:07:20.960
One key point I want to highlight is that simplicity in keeping your model coherent allows flexibility.
00:07:25.920
You can build complex applications using simple and composable models.
00:07:30.160
Defining a model simply boils down to values with well-understood relationships. Understanding relationships is the crucial aspect.
00:07:36.240
Plato’s allegory of the cave explains the philosopher's role in understanding reality.
00:07:41.120
Overall, the philosopher’s job is to foretell truths from what is only seen. In software, you take that role as well. Embrace it!
00:07:55.040
Thank you.