Episode transcript

Ryan Burgess
Welcome to a brand new episode of the front end happier podcast. In this episode, we are joined by Rhian and Carlos to talk with us about the current landscape of web development in 2022. I know in the past, we've definitely covered various years of like where web development is, and it quite frankly, changes so fast that we could probably do this every other month. So it's great to kind of follow up on what's happening in 2022. Rand and Carlos, can you give brief introductions of who you are, what you do and what your favorite Happy Hour beverage is? Rhian Van Esche Cool, I can start. My name is Rhian Van Esche. I'm a software engineer at St. Cloud, which is a company in the Netherlands that handles connections between online store merchants and Postal Services, helping people ship and do returns and things like that. I'm originally from the UK not from the Netherlands, as you might be able to tell and I have a live here with my my husband and my daughter who's almost two which is what keeps me busy these days. My favorite beverage is what I have right here, which is a good old fashioned gin and tonic color. Choice.

Carlos Castro
Nice. Nice. Thank you. So my name is Carlos Castro I work at Netflix as a senior software engineer on the web member platform. I'm originally from Tijuana Mexico. And my favorite Happy Hour drink is just normal beer. But I always try new beers like RT Chanel or anything IPAs, etc. Do

Ryan Burgess
you have a favorite type like is it IPA? Or is it lizard, a certain type that stands out for you?

Carlos Castro
lagger? I'll go with like, or like blonde. Yeah, yeah,

Ryan Burgess
right on. All right. Well, let's also give introduction of today's panelists. Stacey want to kick it off?

Stacy London
Sure. I'm Stacy London. I'm a senior front end engineer on Trello,

Jem Young
Jem Young, engineering manager at

Ryan Burgess
Netflix, and I'm Ryan Burgess. I'm an engineering manager at Netflix as well. In each episode, the front end happier podcasts. We like to choose a keyword that if it's mentioned in on the episode, we will all take a drink. And what did we decide today's keyword is performed on your farm?

Carlos Castro
What if I say perf? Does that count?

Ryan Burgess
It's a good question.

Jem Young
I think so I think historically. Thanks. So concatenation. Yeah,

Ryan Burgess
we do. Can we count that? Or we allow it to pass without a drink?

Jem Young
No, no? Should you be counted have to drink? Well, in this case, Rianne has to drink? I think that's how we've done it.

Ryan Burgess
All right. So perf performance, whatever it is, yes, we will all take a drink. All right, well, let's kick off the topic. First question is, what considerations do you have to make when building a web application in 2022? Because there is a lot out there. When you start a brand new project or web application? What do you think about what do you go do first? Rhian Van Esche Yeah, I can kick off, I think, for me, it's the user who is your user. So as a front end, I always consider like, we're kind of the interface between the back end user, we get to make an enormous amount of technological decisions that affect them. So yeah, when I'm thinking about the user, like, where do they live? What's the infrastructure like? And also, what are we building for them, because that can change the kind of user that you have. So if you're building some kind of massive software as a service, you know, you're gonna get deep engagement, I know something like a JIRA, or a century, or people are doing deep work on it, that's going to be a little bit different kind of users. And if you're building a marketing site, or blog, site or news page, and also key for me is what kind of devices are they on? Is it fast, you know, ideal situation, you've got your MacBook, you're on a wired connection, super fast, everything is amazing. Or are you like, a nice sitting in the metro with your phone out, waiting for the connection to come back when you're in the station, so you can look up where the restaurant is, or something, which I think you know, we've all been there. And then related to that user is also for me, who are your direct competitors, because you've got to be as good if not better than them. So yeah, do some research there, find out how fast their site is, and make sure you're faster. Or that you're considering that when you start to make your tech choices. So for me, it's like, work out all that user stuff first, and then start to make technical decisions, if you have that latitude if you're starting a new project, because obviously we're not some of us have to work on existing things. And that's a bit more difficult than starting something new. That's where I would go first.

Carlos Castro
I love that in like the terms of thinking thinking first of the user, it just made me thought of like from my from my self is what are we trying to achieve? That's the first one like, if this is going to be needed offline is going to be more static. So we need more performance. So you know we need to generate or more dynamic I also since you know I I'm a sucker for front end infrastructure, I naturally start thinking about like build systems, technologies linters, of course, taking into account what the user needs, but always thinking and also, are we going to need SEO? So maybe some server side rendering needs to be in there. All payments, unit stripe integration, PayPal integration. Then another thing is, is this the scale of the application? Is it going to be international? So we need to start thinking about internationalization localization? And of course, accessibility? I mean, always, always think of that. And data acts like what technology we're using, do we have an API already, like rest? Or should be, I don't know, graph, QL, etc? There's honestly like, there's tons of considerations. I don't even know where to start. And hosting. Yeah, Rhian Van Esche I think especially for internationalization, that can be a big, like, you really have to build that in from the start. And you have to choose a tool that will let you do that, because trying to add that in later is a headache. Yeah, and I think also, within the tech choices that you make based on who your user is like, it's like, easy to default to, okay, single page application, single page application, it's like almost the industry default, like you see it. All the hiring posts, you see, it's like five years of framework experience, or whatever. Boot Camps are optimizing, learn, react in six weeks, etc. And I get that because that's exactly what the market is asking for. And I really, I actually love frameworks. I love the developer experience of it I love, especially in big teams, when you can share components and things that's really powerful. Things that are reusable. Some of these tools are fantastic. But if you and your initial user research phase, you were like, Okay, well, I'm building something that has almost no interactivity, and I need it to be super fast, because my competitors are super fast. And it's not going to have a lot of deep, you know, work that I could have shallow engagement, I guess, is what I'm trying to say, then the single page application is maybe not what you should reach for, because, yeah, you're gonna just end up having to refactor all that out. And I know, there's server side rendering. I know there's code splitting. But I do feel that like now in 2022, we're starting to see technologies that are letting us the awareness is really being built that we don't have to just start with create react app, or a new view app or a new Angular app. So that's really exciting to me, this year, I'm really seeing it explode, you know, lots of different groups working on different things that

Stacy London
I was thinking to, you mentioned, components, and the idea that sparked the idea of like, design systems, and maybe like, depending on like the context of where you're building this app, like you're at a company that has a design system already, then you take that into consideration as well, like, does that design system have the kinds of things you need? And you know, what, what like, what kind of thing? Are you building? What? Do you need to build some stuff from scratch? Or can you take advantage of things that exist? If you have a design system? Or do you need to build a design system? Are you like, the first, you know that there's gonna be multiple apps eventually, like you're building some sort of suite of something, and you know that, that's going to be important. So maybe you plan some time out for that as well.

Jem Young
I liked the answer. So far. Rihanna, I like your answer on user research and understanding the use case. And Carlos and Stacy, you're talking about, like, the tooling and what else you need? I think that's all great and lovely. I respectfully, I think the truth is how people decide to build web apps today, as they build with what they're most comfortable with. Like, in an ideal world, we would do all these things like, Hmm, do we need a single page application for this? Probably not, we can build some static HTML, or let's use some easy builder. But the reality is developers and engineers are engineers, and they want the challenge. So what I've seen is like people are aware of like, Yeah, we should probably look into what we should build, like the kind of technology. But what happens is we go with whoever is the loudest person in the room, or whoever is most comfortable with whatever, or I don't know, like some it biases board sorts of developer experience in the user experience. And that's something I've seen pretty consistently. I hope that's changing with like, the availability of tools, but I don't know, I'm a little cynical these days.

Ryan Burgess
Yeah, I'm gonna just say very similar to Jem, too. It's, you know, it's like, I love the approach that you both mentioned, actually, and Stacey, sorry, all three of you, is that, you know, starting out from that user experience, thinking about what's best for the user accessibility design systems, I would say maybe fits in more for like the developer experience, but even for the user experience of like, how do you have consistency and thinking about that, but yeah, oftentimes, I feel like we tend to lean towards like, oh, I want to try this new framework or like this is the latest and greatest or we spend so much time With build systems, right, like, Oh, I've got to have NPM installed all of it. And like, we spent so much time doing that, or it has to be a, you know, single page application, when in fact, really like, maybe a static page is great. Or we try and over, engineer everything. And we could have probably started MVP, getting something out the door, and just getting that minimal viable product to your users to start to iterate on. I think that, to me, is something that I continue to reflect on where I'm like, How can we start to learn faster, versus trying to build the ideal state and in basically in a box, because you haven't really got something out to your users? So I think like, all of what you're saying is where we should be starting. And I want to echo that, I think is all valid, valid points.

Carlos Castro
Yeah, I wouldn't say that. It's definitely aspirational. Like when we think about what to consider, and like, trying to best practices, but like equity jam, like, you end up doing what either your company's doing already, and using the current infrastructure and the current libraries and current design system, because then who's gonna maintain that, right? Like, you're not a single person startup, or it's a company, it's a team. So you got to, you know, do the tools that a lot of people know. So it's maintainable, it's scalable, and you know, other people can pitch in when when you need it. So that's why I keep saying it's aspirational. But reality is a different one.

Ryan Burgess
So design systems have has come up a few times, right? We just have mentioned a couple times now. I'm very curious to hear everyone's thoughts on design systems, not that like, bad or good. But like, I personally, I think they're very great. Like, I think there's a lot of value to them. And companies are doing it better and better. But it is such a huge undertaking. And so I'm maybe curious of like, how do you even start that? Or how do you make it successful? Are there tools or things that are making it easier in 2022?

Carlos Castro
I can speak a little bit about that, because I was paid for leading engineering design systems team. So I love that work. And I love that role. And basically, how it started was that there was a need for consistency across the site. Like we had multiple teams, multiple applications, they started becoming consistent colors, sizes, on typography, you know, etc, etc. So the need for a standardization of common components. What's that, right? Like? How do we declare buttons? How do we declare colors even. So, the like the way right now, I feel one of the things that a lot of people start using, or the face of the design system, of course, is the sign and you know, figma files and designers coming up with these patterns. And also engineering helping you identify these patterns, but then extracting the values that represent the design system, let's say as a generic way, what what is called like design tokens, right? Like the most atomic unit of a color, all the colors on the brand, all the sizes on the brand, whatever the typography is, you express this into a, let's say, agnostic format, like a JSON or a jumble, or a hammer, like a text field. And then you use a transformer, like there's there things like styled style, dictionary, believe and feel, and other like tools that basically grab that JSON and transform that into technology, specific formats, variables, CSS variables, less variables, or Sass, or even swift classes. So in paper, what we did was a design system for cross platform. So basically, we'll explore the tokens for swift classes, Android, XML, and CSS less variables in JavaScript variables. And then from that we build libraries representing the design using the token, so changes could be propagated just a few things, but it's a difficult undertake, like, it was a lot of work and a lot of convincing the teams because there's also the whole, you know, friction between feature work and consistency work, and Ryan is like, and then you know, we were like, Hey, can we please adopt the scientists them? And they're like, oh, but we need to do all these features, like there's no time. So that's also the painful part of making a design system, a scalable Arts Sciences company. Rhian Van Esche Yeah, we're just putting together a design since we've been doing it for a while, actually, and absolutely echo what Carlos said, it's about we got to a point where well, I can remember when we had 41 shades of blue, which are very similar, you know, which have somehow got scattered all across the application. And he's got, oh, no, how did we get to this point? And so at that point, yeah, you can do some cleanup and so on. But then, as you scale up with more teams, which is exactly what happened with us, it all starts to creep back. So at that point, you've got to go okay, we've got it in force this somehow and that's where the design system starts begging, everyone has to use the design system. And that was incredibly helpful. But as you say, it's a massive amount of work because it's almost never done. And you can go back and iterate and say, access it, you know, it's got to be accessible as well. That's not necessarily a straightforward thing to do, depending on how complex your components are. And yeah, for us as well, the battle between feature work, and I guess design debt or tech debt, however you want to look at it, it's a struggle. And making people see the value of this consistency is super important. Because if a user has a consistent user experience, I think it's one of those little things that it's hard to quantify. But it has a real impact on what they feel when they browse through your application or your web page.

Ryan Burgess
I love that you called out the multiple shades of blue, Carlson jam can probably attest to this at the on the Netflix web application. Like for many years, it was like we joke that we had like, especially like 50 Shades of Grey was probably coming out at that time. But we had like 50 Shades of Grey, it was ridiculous. There was so many different in you're like, why like what is this been used for. And there was no rhyme or reason it was just people putting in trying to get the hex value, and it's just a little bit off. And so you throw that in there. And maybe it's a variable, maybe it's not, it's just was, like, inconsistent. And so I think that, yes, design systems make that more consistent, it is hard to see the value at first, it's a it is an investment, I agree that makes the user experience more consistent. But also, I think over time, the velocity of your engineering should be a lot faster to you're not having to reinvent the wheel, you can grab a component that's done, and throw it in, and then iterate on the pieces that are brand new. Also, if you have to change something, you can update that in one spot. And it updates everywhere keeps things consistent, but also, like you're not having to go and do that multiple places.

Stacy London
Yeah, I was gonna say you can also just you don't even have to call it a design system, you can just start by like doing good, like, programmatic practices, like, you know, when you create, put some components and a component folder and call your, you know, button component. And it makes it really easy for people to know where something is and use it. And then, you know, put put some variables for all your colors, but you don't have to like, go, you know, if at the beginning, if you're small, and you're just starting out, maybe you just you don't have to call it a design system. You can just call it like, good, good. Code, hygiene and practices like making variables and sharing things. Rhian Van Esche Yeah, I totally agree, Stacy, it doesn't have to prove this, like, you know, you've got a whole storybook and you've got a whole, you know, separate NPM package, which you can go down that road, and that's fine. But yeah, it can be just CSS variables. And that's the nice thing about the new CSS custom properties, you know, they're easy to inspect on the browser. That's one thing I really like to use. And I'm interested to hear you talk about that with regards to design tokens, Carlos, because I think that's really powerful that you start with a figma file. And then you end up with something that the developer could inspect in the browser, without having to have gone through necessarily some massive process of building out a design system, the tools are really helping us out these days. And also, just a point about, yeah, what people like to do that it makes you it's fast to iterate when you have a design system. 100% agree, because especially what I hear from developers I work with is, you know, these are smart people, they want to work on fun problems. They don't want to build a form for the 20th time, they want to just grab the components they need, put them together and work on the interesting part and get it out to users quickly and hear how it's actually performing. That's what developers are asking for these days. So we should let them do that. By giving them the tools to do that.

Jem Young
I think what, to me, what I'm getting from from this conversation is the tools and technology exists to solve a lot of the problems. We're talking about internationalization, accessibility, performance, better user experience via design systems, chairs, chairs. So all the tooling exists. But we don't make use of these things necessarily. So why is that? Like we we have it still solutions, like we all know, I can look up how to do all this stuff. But there's still sites that are inaccessible, there's still sites that are slow. There's still sites that should have been a static site instead of Spa. So like, why are we still in the state that we're in, even though the solutions exist?

Ryan Burgess
Do you all think it's just like, Is it maybe a bit overwhelming?

Carlos Castro
Probably. I wanted to say that. I think at some point, you start lean and nimble, right, like, very good side. And as new future features come in, and product changes, and I feel like also the way of software development practices we have now it's more volatile than let's say 15 years ago. So we now have more need to change and with change comes editions, bigger bundle sizes, you know, maybe accessibility, I guess, how can we enforce or prevent or be I guess is that from the beginning or maybe we didn't talk about it when we say considerations, but one consideration could be it Starting, when you start that project, maybe put together some performance budgets and accessibility, you know, reporting, you know, as you start, so as you keep going, you don't regress. That's I guess I'm trying to see if we can stop the firehose, but But yeah, I mean, is reality, all sides, you know, become slow at some point they leave enough to be comfortable. Rhian Van Esche Yeah, I agree. I think I think for me, it's a few things. I think, partly it's kind of, you can start in a small startup, you can start a new project, you can kind of do things the way you want maybe to begin with. But once you get to a certain size, maybe other projects, okay, so maybe you can't just make a choice that doesn't affect the other developers and the other projects. Maybe you're already using a design system. Okay. So it's got it, maybe it's a design system that uses React components, okay. So it kind of has to be react. So you kind of don't have a choice now. So there's business needs that you can't just, you can't simply say, I'm going to migrate this project from I don't know, react to view or react to Angular without a massive cost of technical debt. So you've got to maybe train developers, you've maybe got to hire developers, you've got to actually do the work. I've been through a few migrations, I'm sure we have quite a few of us have, it's a huge amount of work. And you can end up with a really nice end result. But that's a feature that doesn't get shipped, that's maybe two features that don't get shipped. So that's an impact. And then I think, also, for a while the landscape has been very much you mentioned it maybe being overwhelming, Ryan, I think I think it is. And I also think we have kind of become quite entrenched in this single page application react. And that took a while to take hold, and it has taken hold. And people are quite comfortable with that. There's great support and community around all of those things, huge amounts of documentation, loads of places, you can look things up. And some of the newer things maybe are not as well documented, or maybe have not taken hold as much. Because, yeah, so you've got to do that they're not by default included in some of these tools. I think that is starting to change. I see next, Jas is doing some really interesting things server side rendering. But wait until that in the defaults. And so it's easy to migrate. I think people will go, Okay, we could do that. But how am I going to persuade my stakeholders that I can actually make this change in? I know, three sprints or whatever. And yeah, that can be quite difficult as a developer to fight against that kind of the push of the product, which is right, because we are doing this for the user. So we should be shipping them features that are useful. It's like a push and pull. It's quite difficult. Yeah, I

Stacy London
agree. i It's, I think the web is such a like forgiving runtime environment, you can really put something together that's very, not like the the output that you get, you know, the resulting HTML can be very poorly formed. And that was on purpose, right? The web was meant to be forgiving on purpose. And it made it very easy for like, lots of people to create for it, which I think is what has become so pervasive, but it's also so forgiving that if you have, you know, say developers that have only learned a framework, but they haven't learned the underlying reasons why, you know, semantic HTML is good for accessibility. And they don't know that they should use a different tag when just a div works. Why would I need to think about? So? I think there's like education stuff, you need to like, have a lot of trading. And so because it's so easy to put something out there that is it performance isn't accessible isn't? There's Yeah, you don't have a compiler saying, Oh, you use the wrong tag there. You can add all that tooling. But again, that takes a lot of time, right? You have to have someone that cares about it enough to add tons of linters or toolings. That's running at build time to catch things. And then even tooling doesn't catch everything, right. Like accessibility, there's like 30% of stuff can be called tooling. But then there's like a whole gamut of stuff that is not cut by tooling. So yeah, it's quite easy to create something bad.

Ryan Burgess
Which I guess to the point, yeah, it is overwhelming. There's so much out there, which is you know, exactly that. But I think it's a lot to take on and learn one thing that's come up a few times now, and I think we've even talked about this in previous episodes, but I am really curious on all of your thoughts. When do you reach for the single page application versus just going static? What What how do you how does the decision tree come together for something like that? Rhian Van Esche Yeah, I think I would look at that engagement. If we know something about the engagement. Is it like you're using something real time like chat or lots of video or? Yeah, highly interactive pages, then yeah, I think single page application is a good choice because if people are willing to have that initial load time, fine, you know, then after that, it's very, it is very fast. We did it for a reason. You know, it feels like an app it feels nice to use. Also, ideally if they have a good connection speed that really helps because The amount of JavaScript you're likely going to be sending them. And then yeah, make sure you're looking at a tool that maybe you do have the options to switch into something like server side rendering if you need it, that gives you some flexibility and future because the worst thing is to get locked in and then think, oh, no, we have to migrate. Because we didn't have we don't have this. And, yeah, whereas if it's something where you think a user is going to come in, maybe they come in via search, they are going to pop in, read what they want, and you'd like them to stay on your site. But realistically, they might not like a new site, we're going to come in, read your article, and probably leave, then I think, make it as fast as possible, try and start static first and try and add the interactivity on top. Maybe use some kind of some of the new stuff out there. I'm quite excited by Astro, which is a new tool, which basically lets you use like framework components, and then turns off all the JavaScript by default, and lets you add it back in. So you could have a one piece on your page maybe needs to be interactive, like, the navigation or something, and you say, yeah, make that piece interactive, I still get to use all my React components. But it just renders static HTML, which quite often is actually what they were just rendering anyway. And maybe, then that's still a good developer experience, you get to use your design system, which is important, as we've said, and you still kind of get the benefit of the static site, but giving you some options for the future. So I think that's probably what I would consider the engagement level of your user. I'm sure there are other considerations, too.

Carlos Castro
Yeah. I wanted to say that exactly. On the engagement part. I feel like also, we've come a long way with the word SBA, feel like, you know, before you even think about it, but when you when you heard the word CA, you thought about this Angular application with like a four megabyte bundle that needed to load initially, and then a bunch of spinners everywhere? Well, the current reality is not like that. Right? You have things like next Jas, which is server side, render the first page and then becomes almost like an SVT an FBA Right? Right, you don't perform full navigations everything is on the client. So I think we've come a long way that you know, as pas now, it's faster but for me, the considerations would be around, you know, if my side is very dynamic, and needs for subluxation, maybe testing and a bunch of like things I'll probably go a little bit more with, with an SBA or like, single page application, because I know I will be calling a bunch of API's on wrong time. Or if I need to deal with like, user's data, like you cannot statically render user data or cache, you know, things like for instance, financial information, that's like No, no, no. So that would make me go to SBA depending also on the need, or wherever the building, right. But in the static sites, for instance, marketing sites, easily static and can be very fast if you do like the whole jam stack. And you put them in the CDN pre render, and like super fast, blogs as well can be maybe static page or static sites. And E commerce as some Ecommerce has not all, but like maybe your small pop up shop, ecommerce that has maybe less than 100 products can make it static and make it super fast. Although when you go deeper into the payment flows and whatnot, you're probably going into a either provider or you gotta do something with an API. What I'm going to say is that right now, I feel like the current landscape has intervened a little bit, the whole SBA dynamic, and the call is static. Having frameworks like niche is which offers you both, you can have certain pages to static, you have certain pages dynamic. So I love it. It's beautiful. Now, you don't have to be like really all static or really all dynamic, you can now intervene and mix the tool. The tooling is allowing you now. All right,

Jem Young
Carl, so Alec, you're called on security, like how you can pre render, say like bank account information. That's something as a JavaScript engineers, I don't think we think of often about security at all. Yet, there's so many vulnerabilities out there that are caused by just bad practices, things like that. That's an aside. Here's something I haven't heard mentioned in a long time. And it was so hyped I was part of the hype train, you know, as a hype boy on stage giving talks about this technology. But I haven't heard about in a while. The old remember progressive web apps. Yeah, what what happened with those remember that glorious future that service workers are going to provide with server push and offline caching and the ability to download an app to your phone or your desktop? Is that still a thing? Is it relevant? 2022? If so, why not? Like, what what's the landscape look like for progressive web applications today?

Carlos Castro
Versus common? But on that term, I feel like yes, and even if you look for like, what are every year if you look 2021 2022 20 2019 What are the trends for web you will see it every single time progressive, progressive, it's like the ever thing that the thing that will ever come. And for my end, honestly like being working wet for a long time and still have to be a pro Per PWA. I mean, you have things like the manifest. So you know, you get stuff like PWA like but like proper offline first service workers, purple pattern pushing from the server, etc. Yes, never Rhian Van Esche I do think there are some tools that provide this out of the box. Now I feel like Angular maybe does I haven't used it myself recently. But I also I know sites do have them because I sometimes open my application tab and in the dev tools and see, you know, lots of stuff that's been cached there. So I think some of it's done out of the box. But I also think it does depend on your market. So I know, I've read quite a few case studies of some people who serve to products in India or Africa without tech super important because of cost of data. For instance. I have to admit, I, I also have done like our internal talk about it. I got super excited hype hype, but I never built one either. I think maybe partly it's because caching data and deciding on those cache strategies, and the service worker can actually get into into some problems. It's not that straightforward. Although I know there are tools like workbooks that are meant to make it straightforward, but I have also seen talks of horror stories of service workers not getting unregistered and yeah, not up to date on it. So that hopefully that's all a thing of the past. But yeah, it is quite complex deciding on those things.

Stacy London
Yeah, on that topic. But yeah, the cashews have been difficult. I think there's, it's really difficult as well for things like going online and offline. And if you have things like WebSockets, and things being pushed down to you now, let's say you go offline, you're missing a particular amount of data, and then doing catch up calls to make sure that the data is remaining fresh, like it's always a lot of complexity there. So I think that's also tough, tougher people to build from scratch.

Ryan Burgess
So another thing that has come up a few times here, or we, you know, we've mentioned technologies, tools, libraries, frameworks, like that's, that's come up quite a bit. And I think that that's always something that we're keeping, keeping on our radar, like, what's new, what's exciting. And maybe, you know, we're talking about trends in 2022. What are you all excited about that you weren't maybe aware of, or just becoming aware of for 2022, Rhian Van Esche I mentioned earlier, but I asked her is really interesting to me, it's. So it uses this kind of concept of island architecture, where you make pieces of the page interactive, rather than the whole page, still using hydration. So it will hydrate, you start with static HTML, and you hydrate the bits, you need to add the interactivity. But what I really like is you basically can use any framework component at all. And I was a little I was curious about it when it started. But it's got seed funding, it's got huge community that's really active, they keep pushing out updates. So that's interesting to me. I'm also interested in I think it's builder.io, they have something called quick, which is sort of, again, the same concept that you start with static HTML. And then it tries to like do a lot of lazy loading code splitting, to basically delay the Java JavaScript as much as possible. And then they have this concept of resumable applications, which I must admit, I need to go and read again to get into my head. But it's, it sounds quite interesting. And they are also looking into using other framework components into it. I think right now they use a quick specific syntax, and it's Q w ik, just in case you search for it. So yeah, that's what I really like is the idea that we can use stuff we're already used to, to build applications or to build small sites, and then we get the benefit of not having to switch frameworks. And then I guess the final one, for me, I think it's already quite popular, or it's quite well known. But remix is interesting, although it is coming from a full stack perspective. But the progressive, I tried it out a few weeks ago, like the progressive enhancement approach that you are essentially writing, I think it's an abstraction over express on the server side. And then you're doing lots of React, essentially writing React components. But you get you write a form component, but it's actually just an HTML form. So it's combining these basic web API's trying to just progressively enhance them. And you can ship no JavaScript, whereas what you're writing looks like you're writing react, but there's just no JavaScript. And it's, it seems really powerful. I think it is combining kind of a lot of concepts in one. So that one, I wonder how long it will take people to start adopting that because of course, it's kind of got react behind it, which is extremely popular. I'm really gonna keep my eye on that one.

Carlos Castro
I'm also very interested on remix. I feel like the thing that they promote about using more of the platform like like forums natively, and on Submit and you know, things are more web platform is something that is actually good, right in terms of performance, performance, and other good UX, but the thing is that I'm excited. Cheers. Yeah, I'm excited about it like A lot of things but like to name a few, I feel like rust in general, like I'm excited about the front end tooling, landscape changing and becoming faster by using rust Rust is a language that I don't know. So now I'm excited. And I want to start learning a little bit more because I feel like it's becoming something very good in mix with the JavaScript ecosystem. Another one is react server components, probably you have mentioned here, but I'm excited because I hate the whole thing about, you know, server side rendering, and then shipping those almost static components into the bundle to start to render again, like, it's like twice the rendering, it's a waste, it's a waste of cycles. So you know, power on the humanity. So I'm hoping that that solves a little bit. Right, like yep, yep. And the tooling vitae. Is it bit or vitae? I don't know, I call it the building tool. By the view guide vitae, and Rome, those two, I feel like Rome has had some bumpiness. But I feel like they're promoting something interesting around, that is a one stop shop for linting. Building everything right? Precure, or formatting.

Jem Young
Running a platform team, I get excited about things that are maybe a little different from you. I'm really excited about turbo repo, like the implementation is just so so easy. And it speeds up our builds by a tremendous amount. I'm excited that there's more focus on that space, rather than just pure UI development. I'm perpetually excited by web assembly, I see the innovations coming from that area. I know it's gonna be nice. For most people, I think this is not diminutive of of UI engineers. It's just like, far to Cody. And there's not a lot of UI involved in it. So I think a lot of people be turned off by the complexity of that. But I think the power there of having your own runtime that is near native speed in the browser, in any browser, and can be run on desktop as well is like, really, really powerful. Definitely not PW A's, and I'm not hyping WebAssembly in the same way, I just think it has a lot, a lot of potential there. What what I've noticed is coming out is you you all mentioned remix. And you mentioned next Jas, it's interesting that those are built on React, which is like, are we in another stage of web development, where we have like the tool bases of React Angular view, you know, some of the other big ones. And now we're building tooling on top of that, because that, just from just my observation here, it does seem like we're kind of leaning in that direction. Now.

Stacy London
Yeah, I think it's really interesting that we were talking earlier about, like the complexity of building something from scratch, and how, how much knowledge you have to have for like the tooling and getting, you know, server side rendering set up, like it's really hard. And it's very interesting to me that there are entire companies or startups that are getting funding, and dedicating all of their effort and time into making that a lot easier. So that you can focus on like building your features and actually solving your business problem and not spend all your time on the technical complexities of it. So I find that really fascinating. It's very interesting to see them betting on react as well.

Ryan Burgess
Yeah, I think it's kind of cool, actually, that it's like taking something like React, which has been amazing, like we've all like, as a community have leveraged that many, many times. It's a great framework or library, whatever you want to call it. But it's it's been great. And I like when there's these add ons, because it's people seeing that there's something that more than it's needed, maybe for their own use case. But instead of going and creating a brand new framework, they're just extending it more. And I think that that's really, really great. Because often in the past, we would just be like, now let's just create a brand new framework. And then we'd all have to do our joy of migrating to that latest and greatest framework, which is so expensive. And so I liked this idea of being a little more just building on top and like being able to swap something out if you really need something different, but not having to start from the ground up. And I think that's huge. I'm really happy to see that direction.

Carlos Castro
I'm gonna say something that I'm excited that it's gonna be controversial. And if you haven't read it, it's the web three, but the certain concepts and practices Okay, hear me out, Jeff. Jamie's already like Cognoa this guy, okay. I'm not excited about the whole blockchain or forcing the blockchain inside everything or if these are sheep, goats or all that stuff. I'm excited about the whole thing about doubts, decentralized autonomous organizations, and you know, proof of stake and economics and governance. I am excited because like for instance, I have seen how they have this whole thing where you know, they have proposal they both have things and people have ownership, even if they don't belong to a proper like, like company, I feel like they have made this whole tooling. Okay, so it's tooling to make decisions in a way that is more a synchronous, and people have stake on it. Right. I feel like sometimes engineering decisions is hard. And this type of things, you know, help on building, you know, governance and all of that. So I'm excited for that, again, not on the underlying, forcing everything, but on the practice of like, decentralized, autonomous organization ownership over the, there's this thing called coordinate, I believe, it's a tool for tiles. And basically, it has things like incentivize participation, reward contributions, and like voting rights, and, you know, you know, members, etc. So that's the thing, maybe how to remove it from the web three Ponzi scheme and shenanigans, and have the the tooling available for engineering groups and make decisions to rewards to like, say things and saying that you'd like something like a token or whatever that will be cool for. That's what I'm excited about.

Ryan Burgess
Jem, what's your rebuttal on that?

Jem Young
No. rebuttal? I think Carlos covered it. Well, it's a shame that the Ponzi ish nature nature of crypto and NF Ts have become intertwined with the Ayios. I agree, I think the potential is there. However, it's what it's tied to, and when it's associated with that will probably that might hinder its own adoption, which is kind of a shame, because like, you're saying, Carlos, it's a good idea. But it's just like that ecosystem that you have to be involved in to become become part of that. It's just, it turns a lot of people off. So if any lesson that I've learned over my years and kind of one doing doing this podcast for six years, and also just being a web developer watching trends is that it's not technology that shapes kind of the future of how we build its people. It's how we behave. And it's how we hype it up. It's what we get excited about. It doesn't matter how great innovative something is, if people can't get behind it, or the the documentation is poor, or the developer experience is poor. Which is something completely different than I would have thought like, I don't know, 1520 years ago, like doing computers that like, oh, no, it's all about the code. It's about the elegance about the performance. It's about all these other things. But really, it's about like the people get behind it. The companies that sponsor it, it, there's a lot of complications. So yeah, I want to believe in technologies like you're talking about, but I don't know if they'll be adopted just because of kind of the history of how they came about. Right? Yep,

Ryan Burgess
that's no additional thoughts on that one. But I like both of your points. We're coming up towards picks. And I thought like, one thing that I often think about is we often have a lot of new engineers to the community. So 2022 might be there, like coming right up, starting out. And we have a lot of listeners that are brand new to the community. What advice would you give someone who's new in 2022? Like, what should they be thinking about? Like we said, there's a lot of things out there that it's overwhelming, there's a lot. Rhian Van Esche For me, it's always focused on your basics, because with the basics, you can do anything. So if you know JavaScript, you're going to be able to understand any framework with a little bit of extra Yeah, and the learning curve. And if you understand performance, I do think that awareness is being built. And I think it can really give you an advantage. Cheers. I think it can really give you an advantage when you're when you're applying for a job, if you can talk, I do quite a lot of hiring and interviewing. And I often ask about that, because it's really interesting to me, both to see kind of take a pulse of what's going on in the community and what developers are knowing about. And it is often something that is, I think, also like accessibility kind of, it's not necessarily prioritized by businesses. So I would say look at your basics, and keep an eye on what's happening with performance in terms of your JavaScript, but also just websites in general. And always remember accessibility because that can really open doors for you. There's quite a few companies, I do not start to see job postings asking for that, which is really nice. And it's we're working for, like I said at the start, we're working for the user, in my opinion, front end developers, as you know, to help the user have a good experience in combination with our UX colleagues and our back end colleagues and all the others and we can make such a difference. So yeah, having that knowledge and awareness you don't have to be an expert just starting to know a little bit about it using your semantic HTML is super powerful.

Carlos Castro
I'm completely completely agree. Agree. Focus on the basics, like the pillars of the web, HTML, CSS, and JavaScript will get you in any framework in any library in anything you don't need. To learn all the libraries like I've been working on this, I probably only work in React now I haven't learned view or ng Well, newer Angular iOS, I have the old one backbone. So they're all the frameworks. I mean, the basics can be translated, and you can learn it easily. And another thing is that like, I guess that just stop being on tutorial Hill, like build something, rather than, you know, being on tutorial hill that will let you practice a lot. I know you love to watch the front end master gym courses. But like, if you build something, it's probably better. And humans learned a lot. I watched them by the way, some time ago. So thank you, Jem. But But basically, building something will help you understand the product things better and practice the skill than just being them tutorial fell. But yeah, don't don't overwhelm the technologies. The basics are good accessibility, don't sleep on it. That's a must like performance as well. Here's everything, everything.

Jem Young
Thanks for the friend and masters plug garlis I'll just plus three that focus on the basics. It's so tempting to get started with like next Jas or create react app, or the million other tools that are out there that can like just kickstart you into this whole web application, you're like, wow, I built this thing. It's really easy. But when you press people on it, they don't understand how it works underneath the hood. And that really is what it takes to be there between a coder and an engineer is understanding how it all comes together. And I also echo, yeah, tutorials are great. But if you just walk down that paved road, that's the only road you're going to know. And then the minute you switch jobs, and they ask you something I saw on a paved road, you're gonna be like, what? Well, I can't, I can't google this. And that's where you get stuck. So yeah, tutorials are great for getting started. Build your thing, build what makes you happy. Stanford, Twitter, Twitter will make you feel bad. It'll make you feel unproductive like, because all you're seeing is people's highlights from the projects they worked on for months. It can really be dis motivating to see that and you're like, I can't even get my app launched. I think the last one would be take advice from mentors and people that are more senior than you. And I know that's like a little condescending as a senior engineer. But the the points that Carlos and Ron were making about like, accessibility and performance. And things like localization, and testing, like all these things you need to build into a good web application that you need to take into account in the beginning, is something that's really easily missed. And a senior engineer will be like, Hey, we should do all these things. Whereas I remember myself as junior I'm like, Yeah, screw you, I want to build this thing. And then like later down the road, it always bites me. So like, don't do better than I did take advice from senior people, when they're like, Hey, we should slow down and plan this out, because it'll save us time in the long run. Because that's, that's the difference when a senior engineer in a in a junior engineer is that knowledge of having been bitten. And that's, that's hard advice to take. And I know, especially if you're starting out, it's really tempting to be like Rhian Van Esche I have one more tip, which is, when you're building a side project, or you're just learning something, I completely agree build something rather than get stuck in tutorial, hell, but also keep your scope small, learn from businesses that do this, you know, MVP, keep it as an MVP, don't let the scope creep and you think, Oh, it should also do this. And I have to say, I'm personally really bad at doing this and my side project, so I don't follow this advice at all. But it is makes your life so much better. When you can see I've shipped something it actually works, and then iterate and then do the next thing. Yeah, that's a piece of advice. I should take myself. But yeah, do with it, what you will,

Stacy London
it's hard to add to this, because you've all given all the advice that I would also give. I think another thing is to always ask why. And you mentioned in the very beginning of the podcast, to really think about your users and, and what they need. And don't start off with like maybe the technical thing, and like, I'm gonna use reacts really popular. I'm super excited about it, and just gonna, I'm just gonna use it. It's more like, but why? Why are you Why do you want to use it? And if you start off with like, yeah, the basics of understanding JavaScript and HTML and CSS, then you can understand, like, I have this problem. And react solves this problem that I have, like, that's why I want to use it. And I think that's really important so that you don't pick just a wild stack of stuff that adds to complexity, but doesn't maybe even solve the problem that for your users and the things you're trying to build.

Ryan Burgess
You all didn't leave me much. You had way too much. Good advice. I'm going to just add and say we all had to start somewhere, right? Like it was not easy. We've all made tons of mistakes. And that's how you learn don't beat yourself up too bad when some error happens, or you have no idea what this framework is doing or whatever it is. I think a lot of the way I've always learned and I know I can share a lot of that from others on this podcast is that you learn by doing so keep doing it and figure out what what works for you. And you know I'm gonna say something on the Twitter piece. I'm like, Twitter's can be helpful. Just find the positive Twitter side. There are people out there that are very helpful on Twitter. There's really great communities around helping each other. But yes, there is some bad so you take it with a grain of salt. All right, we've covered a lot. This is a really great episode, and let's dive into pics we in each episode, we'd like to share things that we found interesting want to share with all of our listeners, Stacy want to start it off?

Stacy London
sure I've got two picks. First one is a song called Bone mics by over mono. Pitchfork described it as familiar traces of UK garage technote to which the brothers add a hint of IDM but it lands in an uncharted territory between all three. The next one is a song called vocoder by floating points. It's one of the heaviest dances tracks that I've ever heard from him. And stereo gum described it as heady, frenetic club music. Good for good for coding and headphones.

Ryan Burgess
All right, that sounds great. Jem, do you on a chair? Your picks?

Jem Young
Yeah, normally I have Valley silicon picks where I pick things that are outrageous and ludicrously expensive only because we all get paid to watch and software engineering. However, I haven't had one in a while, because of inflation. And I really don't know how much things cost anymore. Because, like, you know, inflation, depending on where you are in the world can go up to 30%. So I can't tell it's expensive anymore. So I had to take a pause on that. Until prices settle out. And then I can say like, Hey, that $1,000 pair of boxers is overpriced, but it has Bluetooth. So in, in lieu of my valley, silicon pics, I have a book, which is pretty rare. I don't get a lot of time to read these days. But it's a book by Andres Kluth called Hannibal me, what history's greatest military strategists can teach about successful failure. I've been reading it, it's a kind of a lighter, more entertaining read. Well, it's not super light. But it has an interesting lens of how we view ourselves. And this idea that we have pivotal moments in our lives that have changed who we are and define us. But that's actually not true. Like those are just that's like a human fallacy of like, it's these moments. It's really like everything in between that defines us. And that's much harder to focus on. So we fixate on like these, these bad times good times that we think have changed the course of our lives or careers. But it's really not that and it's like the everyday effort you put in. And it's kind of changed the way I think and the way I manage a little bit. So check that book out. The next one is it's a show on Netflix, this one is going to be very polarizing people. It's called guardians of justice. So it's a superhero show. It's in a mixed media format. So sometimes it's live action. And it's really, really low budget looking live action deliberately. Sometimes it's animated. Sometimes there's claymation. So it tells the story of the superhero in a parallel universe of Earth. In like a very weird format. I'm sure there's like a name for it, and I just don't know it. However, once you get past kind of the the oddity of storytelling, do you realize that by combining all these different mediums, and not just live action, you can tell something really compelling on a on a better budget, and you can do things you can possibly imagine like, why spend a million dollars on this choreographed fight scene when you just animate that, and it tells the story the same. And once you get past that it's a really, really good storyline. I think people just look at it and say like, This is dumb or silly. But to me like you get to the end, and the story is one of the best, more complex superhero stories I've ever seen. And it's outside of that kind of saccharin, Marvel DC Universe kind of area where we're in. I will warn you it is very violent, and is very, is not for children at all. It's one of more violent superhero shows, but that's guardians of justice. It is on Netflix as a Netflix Original. Check it out. And those are my picks.

Ryan Burgess
Great Rianne. What do you have for our listeners? Yeah, Rhian Van Esche first one is a site called patterns dot Dev. It's from Addy Osmani. And our CO collaborator whose name I can't remember right now. And it's a really great resource for design patterns in JavaScript performance patterns. It covers actually a lot of the topics we kind of mentioned today in that area. It's just this fantastic resource. It's really, I wish this had been around years ago because it summarizes it in such a helpful way. So definitely recommend checking that out. And my other two are a bit more frivolous. I have loved watching for years, a d&d d&d campaign that's Dungeons and Dragons called Critical Role, which it's not new. It's on its third season, but it's one of my favorite ways to relax. I do not have time to play Dungeons Dragons. I haven't played it that much in my life. If I had somehow managed to collect a set of source books, just I don't know how to aspirationally wanting to play. And there's something really nice about watching a group of friends play together, having a lot of fun, it's very wholesome. It is a little violent at times, they are, you know, killing things in their d&d campaign. But super fun. I love it. It's kind of a nice, comforting thing to do at the end of the week for me. And then finally, big shout out to my home assistant right now, because my daughter is starting to talk. She really likes hearing animal sounds. And I can now say, I wouldn't say that I want to trigger everyone's home assistant, but I can say what sound does a cat make? And then she will ask for it like again, and again and again. And it's great because she keeps her entertained. And I'm so happy that technology lets us do this. Now we can just ask what a cat sounds like again and again and again. To keep it total happy. So that's saving my life

Ryan Burgess
right now. That's great. And soon she'll be calling it out herself. She'll learn how to call that Google or Amazon assistant, whatever it is, and they'll get responses on their own, which is even better. She Rhian Van Esche is almost that it's terrifying. I think it's gonna start answering casting.

Ryan Burgess
That's awesome. Carlos, what pics do you have for us?

Carlos Castro
I was gonna say that on the system. My daughter already talks to it and ask for it most songs as well. And it's so cool that he can understand Spanish English and any language now. Well, before he was English only and I love it that she's asking like how does a dog do in Spanish and answers back in Spanish, I love it. So for my books, the first one is like a double pig in the sense that like, I love to get like to read articles about what's new in front and center. So two websites that I almost always reaches a Smashing Magazine, you probably have seen it excellent articles and guides and everything. And of course, CSS tricks. That's that's another one that I feel like it's very good to keep up to date and check the things new CSS practices or like new frameworks, etc. So recommend those two for the second is a show at Netflix. It's kind of weird and didn't get a lot of maybe announcement but I really liked it. It's called the house. It's a stop animation. Motion Animation or something like that is one of those weird shows with like, you know, activation any talks about three stories saying it's kinda like dark, greedy, and you know, very, very interesting. I watched it like I was, I loved it. And I keep recommending to everyone like a watch that show is different. It's kind of weird, but it's good. So we recommend that one the house at Netflix. And the last one is a YouTube channel called the pursuit of wonder. It's a channel about like philosophy and like videos about things that are like maybe mental philosophy questions and existentialism, I love things, anything about essentialism, I always think about like, what's the meaning of life? What are we here, things like that. So this channel is about that. And I definitely recommend it if you want to get into that whole train of thought

Jem Young
I watched the house and I guess you can call me a club. I didn't understand it. I watched all the way through and I kept waiting for like some greater meaning and I think I just missed it like what they were going for. I liked the style. But yeah, it just didn't click with me and I wanted to like it. So maybe sometime you can explain like the messages to me, because yeah, I think it could be good. All right,

Ryan Burgess
and I have two picks actually. No, no one's tech related was like both not tech related, but yes, they are. One is so one is a clothing brand that and athleisure type clothing that I feel like a lot of people within my team are or have talked about and so I went and purchased some and very comfy So the brand is called V Ori clothing super comfy and like I've bought in a few things like T shirt pants and like some nice kind of sweatpants super comfortable, highly recommend them a little on the pricey side, but quality is good. So check them out. And then I've got a new light for one of my desks at home that I found really great. It's called the Elgato key light air. It's just perfect for getting like really nice lighting when you're on calls. It's not super bright, but you get nice lighting for yourself and it's not super distracting. You can even control like how bright or the tone that you want like the coloring and everything. And you can control it right from your computer, which is kind of nice so you can turn it on or off. I've really enjoyed it. It's been a great addition to my desk. I want to thank Korean and Carlos thank You so much for joining the episode. This is an awesome discussion. I feel like I said earlier at the top of the episode like we can be talking about this regularly there's so many things are constantly changing. So I'm happy to with you all to join us and talk about it what web development is like in 2022? Where can people get in touch with you?

Carlos Castro
Yeah. My Twitter handle is Carlos cast Rhian Van Esche Yeah, same for me, I'm reinvests on Twitter and also LinkedIn. I do have a personal site, but it hasn't been updated in so long, so I'm gonna leave that but I think it's reinvests.com even. But yeah, Twitter is the best bet.

Ryan Burgess
Awesome. Well, and if you want to find front end happy hour, you can find us on Twitter at @frontendhh. Any last words

Stacy London
something to cheers to so keep it performant Cheers.