Performance on the web with Houssein Djirdeh

Sep 15, 2020

Ask episode

Chapters

Transcript

Episode notes

Houssein Djirdeh joins us to talk about performance on the web. We touch on a lot of different topics like bundle size, framework size and much more.

Sponsors:

Level Up Tutorials brings you cutting-edge, focused & high quality video tutorials for web developers and designers. Support the show and check out the Svelte For Beginners as well as Sapper for Beginners courses.
You? Svelte Radio is currently looking for another sponsor! Send me a message at sponsor@svelte.school.

Links:

Picks:

Kevin: MX Vertical - I was talking about forearms, not underarms 😭
Shawn: YouTube Premium
Houssein: Dark Sky
Antony: System76 Laptop

Transcription:

[00:00:00] KA: Hello, everyone. Welcome to another episode of Svelte Radio. As always, we’ll start with introductions. I’m Kevin, and I ran a site called Svelte School where I teach people about Svelte as well as other fun stuff around the web. Yeah.

[00:00:16] SW: Hey, everyone. I’m Shawn. I work on, I guess, on a bunch of things, but currently I’m a senior developer advocate at AWS.

[00:00:24] AJ: Hey, everyone. I’m Anthony. Yeah, I also work in a bunch of things, but I can only run my own startup called Beyonk, which I’m the CTO. And I’m also a Svelte maintainer.

[00:00:34] KA: Awesome. So, today we have an awesome guest on the show. Can you introduce yourself?

[00:00:40] HD: Yeah, absolutely. My name is Houssein. I am a web developer advocate on Google, on the Google team. So I work with Chrome, but I also work in the focused web as a whole.

[00:00:50] SW: That’s awesome. It’s kind of my idea to bring in Houssein on the podcast, because I thought he’d be a good guest. Houssein has basically dabbled in every framework ever. I didn’t know you started out in Angular actually, but I dug through your blog and I was like, “This guy did Angular?” I first met you at Boston, React Boston, where you gave a really good talk that turned into this kind of semi-viral blog post on React performance. And now you’re dabbling in Svelte, and then between you and your twin. You cover all the frameworks. I think that’s a strategy somewhere. So, yeah. I mean, I figured you’d be a really good guest, because you have a cross-framework perspective that most people don’t.

[00:01:30] HD: Yeah. No. Thanks for having me. And I’m glad you mentioned that, because I like I’ve never actually properly used Vue, but my twin brother hasn’t. He’s been really involved in that space [inaudible 00:01:39].

[00:01:41] KA: So you started out with Angular. So, can you like talk us through the history of like the frameworks you’ve used?

[00:01:48] HD: Yeah. Yeah, for sure. Absolutely. I only gone into web development about 4, 5-ish years ago. And that happened right after I graduated from university. I was in my first job and I was just trying to get my footing and like my first sort of role. And then I sort of joined the web development, and we were building a pretty large insurance platform. And we were using AngularJS. And this was pre-component AngularJS. So we’re talking model view controllers. We’re talking root scope, and bindings, and dependency injection, and services. So that was kind of my first hurrah into the frameworks world, which is interesting, because I think we see a lot of discussion on Twitter and the like about how a lot of people think it’s better to just first understand JavaScript, the basics of JavaScript before you jump in to a framework. There’re a lot of other people who think it doesn’t really matter. Learning is learning.

I think that for me was a forcing function for me to just learn JavaScript, because I had no idea what was going on in the beginning. So I felt really lost for at least a few months. Funny story, it was me and my twin brother at the same job sitting side-by-side working on the project for a year.

[00:03:02] KA: I can really relate to getting forced to learn JavaScript by doing frameworks.

[00:03:08] HD: Right? Exaxctly.

[00:03:08] KA: Same thing for me. Yeah.

[00:03:09] HD: Right? Exactly. But I think after a few months, I started actually also spending some time learning JavaScript on my own, but also trying to understand how AngularJS worked. Like things started clicking and I was like, “Okay. Wow! Now, I can see why it makes sense to use a framework.” And then from then on, it just kept growing where I tried dabbling in Angular 2 when it was brand-new and I started learning how to use Angular 2+. And then about a year after that, I started using React. I actually started using React Native before React, because I was like it might be cool to just build a mobile app, and I had an idea for a mobile app. So whatever time that I had in the side, like I was still doing my day job, but I would go home and I was like, “Let me try to build a mobile app.” It took a long time. I did it and it’s super cool. And then I only used React for the web after I used React Native, which is I think an interesting direction. But I think it was also cool took, because it actually showed me how the framework worked.

[00:03:59] KA: Yeah. Most people usually do it the other way around, right? They start with React, and then React Native.

[00:04:04] HA: Exactly. Exactly.

[00:04:05] SW: Yeah. Well, you wrote the book on React Native too. That’s fun.

[00:04:09] HA: Yeah. So I worked with Devin, who at the time was at Airbnb, but now he does freelancing and a lot of contracting work. And then I worked for Fullstack.io. They’re a publishing company. But I wrote an Angular book with them first. So like a modern AngularJS book. Yeah. And it was an interesting idea at the time, because Angular 2+ is already out. And, Nate, one of the main organizers in the publishing company was like, “Maybe we should actually talk about actually building AngularJS apps using all the new tooling in AngularJS ecosystem.” How do you build component AngularJS subs? How do you migrate to Angular 2+? It’s a very interesting idea, and I actually saw the merit behind it, because I’ve seen large AngularJS apps in a lot of com...