dt dev

❄️ Senior software engineer

[dt dev @dtdev_x]

❄️ 40% of users abandon sites that take >3 seconds to load. Want to fix that? Here’s what I learned from a 6-hour @FrontendMasters course taught by @toddhgardner on Web Performance (so you don’t have to). 🧵👇

[dt dev @dtdev_x]

@ivanburazin I would actually not want to work from home of I had an office like this

[dt dev @dtdev_x]

@nexxeln @dillon_mulroy So the same as when working within a team of developers

[dt dev @dtdev_x]

@ChShersh My first programming book was Clean Code. Took me 7 years to finish it

[dt dev @dtdev_x]

@paulswaney3 Holy ratio

[dt dev @dtdev_x]

@juanjovn @levelsio That’s still a lot

[dt dev @dtdev_x]

@ZssBecker Justified crashout

[dt dev @dtdev_x]

@Veigar_v2 Oh no, it might actually become viable…

[dt dev @dtdev_x]

@ZssBecker I’m so happy to hear you say that

[dt dev @dtdev_x]

@xPetu Reached out in the DMs

[dt dev @dtdev_x]

@sudobunni Literally would make you the coolest streamer in the world. Imagine a worm that could code lol

[dt dev @dtdev_x]

@theo My entire feed is telling me I will be replaced by AI tomorrow and I have all the regrets

[dt dev @dtdev_x]

@rafalwilinski Nowhere to go out so we stay in and grind

[dt dev @dtdev_x]

@rebane2001 You did WHAT?!

[dt dev @dtdev_x]

@RyanCarniato Great post

[Ryan Carniato @RyanCarniato]

Of course frontend has a concept of architecture. The short version is we learned what you are suggesting doesn't work well in this space.

The history of web development answers your question. There is a category of data, we refer to as "state", that is ephemeral. Now we can define ephemeral in different ways since everything persists somewhere but the key is that the ownership of this state is very much tied to the User Interface. Focus, selection state, as so on are shallow examples of this, but you can also think of this in terms of projections of those too. This category only gets larger as things become more interactive.

Early web development did not exactly understand this. And when our life began on the server we'd lose this information between actions. POST a form, bye bye state. Now we wised up to that and started serializing it back and forth. https://t.co/D8DrnQDNRz had it's ViewState and so on. But we hit a fork in the road in mid 2000s because keeping ephemeral UI state on the server didn't scale great.

We wanted RESTful backends, so we could spin up microservices. MVC became king. Its simple model fit: Model (persistent data), View (projection of that data), Controller (singleton that wires it up). What is missing is this non-persisted state. This worked pretty well for simple things. But sort of ignored the problem. Which was ok because people wanted quicker interactivity so more and more started moving to the client.

Dawn of SPAs recognized that a more structured approach needed to be taken on the client. So what did we do? We tried to bring our MVC there. Angular, Backbone, Ember, these frameworks followed it. But a pattern started emerging.. we had this thing that had no place. Singleton controllers didn't cut it. `$scope` in angular is the most obvious. And as any early Angular dev will attest became a huge mess, but Ember also started adding all these new concepts, It was more like MVC(insert 12 more letters here).

But this was the problem. In fact the misery that was Angular.js => Angular 2 was IMO motivated almost entirely because of this unreconcilable gap in design.

React wasn't the first to realize this though. MVVM frameworks like Knockout.js replaced Controller singletons with per View (or per Model) instance wrappers as a natural place to hold this ephemeral state. The VM standing for View Models. But I'd say React was the first to consolidate on a pattern that was already happening in the wild. For better or for worse VMs did much more tightly couple things. Pretending these things weren't coupled just made traceability very difficult. React owned it and was like there is a natural split between the Model and the VM but the VM and the V are not benefiting from the seperation. And thus Components were born.

But people early days still really liked their separation. So we built really complicated stores. So we could model all but the most ephemeral state as a sort of hoisted Client model. Early attempts were really awkward because synchronization became really buggy. So work went into making this predictable, singular so that state couldn't get out of sync. Redux comes to mind. But there was this tension. Lifecycles were clearly tied to the UI, so there was this constant issue around either holding too much state that was unnecessary or needing to like register/unregister. Obviously things like Angular had services and DI as their approach. But the problems were the same.

Around the mid 2010s... thanks largely to GraphQL it became better understood that except for where the user was the source we could basically view state as derived from the server. When people started using it, the need for Client side stores shrunk considerably. This evolved eventually into things like React Query.

Now even though the sources no longer needed management, we still have this derived state graph running through our components. It might not be as obvious because of say the way React re-runs components. But by 2018 with the introduction of Hooks you could start seeing it right in front of you. An irony not lost on me because it was like looking at 2010 Knockout.js code.

The result while not realized completely mechanically is an acknowledgement that State and UI are not easily separable, they overlap. Modeling Component === state like early React might have oversimplified things, but something like MVC categorically misses. A lot of the progress in the last 5 years around Signals is based on preserving these 2 graphs(UI, State) ability to co-exist in a way that is natural.

As projects get larger it is the only sane approach to modularity. It's arguable that patterns around strict contracts/regions should be solidified into concepts, and to be fair boundaries around errors and loading(Suspense) do contain these things. We have natural boundaries around nested route sections (tied to URL subpaths). But each graph has their own mostly homogenous primitives so those coordination points are extra concepts, and because of the fluidity of this relationship being too strict here will cause you great pain later.

So architecture is very much at the top of mind of those designing these systems and tools. However, frontend web is also the most accessible platform. So I don't expect every bootcamp dev to know, understand, or appreciate these things.

The structure we have created to allow this modularity and co-location can also be greatly abused. Partially because new devs can be "productive" within their small slice. Which is by design and generally beneficial. But doesn't bestow the same sort of architectural purity and rigor one might expect to find in such large complex systems. To me this is more cultural than an engineering.

The information is out there. We're living in it, but who needs to know? It's hard because people who know a bit more keep respinning on the same expectations of what doesn't work and take few steps in before they realize it. And I think a lot of engineers outside of frontend have no appreciation for it.

[dt dev @dtdev_x]

@dillon_mulroy This is when you close your eyes, pretend your read everything and press approve

[dt dev @dtdev_x]

@marclou So like, life?

[dt dev @dtdev_x]

@thdxr Another day another banger

[dt dev @dtdev_x]

This is the scariest part of for me: “The printing press was going to destroy the church. The locomotive was going to destroy the human body. Electricity was going to destroy sleep. The assembly line was going to destroy craftsmanship. The internet was going to destroy truth. And every single time…”

And every single time it did 😞

[dt dev @dtdev_x]

@robustus Oh boy