Ep. #51, Community Over Code with Shawn Wang of Netlify

Brian Douglas: Welcome to another installment of JAMstack Radio.

On the line we've got Shawn Wang, which I actually didn't even know what your last name was until we signed up to do this, because I always call you Swyx. So, do you want to say "Hello?"

Shawn Wang: Yeah. Hi, everyone. Thanks for having me.

My initials are S-W-Y-X and I've just had that nickname since I was 13, so I'm perfectly comfortable going by that.

Also, there's another Shawn at Netlify, so I don't want to confuse people and I just went with Swyx.

Brian: That's awesome. I didn't even realize that. Not even knowing what your real name was, I didn't even know that those were your initials.

I thought that was like-- I was going to ask you what the background was for that, because I think whenever somebody talks about you online or even in person, they always say "Swyx."

They don't actually ever say "Shawn." For the longest time I didn't even know your first name was Shawn until you joined Netlify. So, small world.

Shawn: I like how some people actually ask me how it's pronounced and they never get it wrong , so I'm like "There's no other way to pronounce it."

Brian: Shawn, do you want to say what's your day job, what you do? And why you're here today?

Shawn: Sure. I work in Netlify's developer experience engineer, which is basically your old job, Brian.

I'm not doing as much as you used to do, because you used to be responsible for everything. Now we have six people on this team.

Brian: That's awesome. Six people, that's what my legacy is.

Shawn: The job is basically a mix of developer advocacy, and internal and external.

It's external in the sense of telling people that Netlify exists and what it's good for, and why you might want to use it, and show them how to use it with demos and stuff.

Then internally, it's more about advocating for what users want in the products, building open-source tooling and maintaining open source tooling.

For example, I've been picking up on Go True, which is the Netlify identity library, and writing React wrappers around it, so it's very easy for React users to use that.

Most recently I did a four hour "Here's how to do everything on Netlify tutorial."

Brian: Yeah, that's right.

Shawn: Which took me a month.

Brian: All those four hours are a month 's worth of your time. That's awesome.

Shawn: And it's editing, and it's deciding what the content is, deciding how to frame and weight the content.

It's not too much on any particular thing, because people can look up stuff themselves. You just need to know what exists.

So, you did a similar thing. I think it was an hour or two hours where you just went through Netlify.

It was a prepared presentation, but also a live demo. You did that in one take in your garage.

Brian: Yeah.

Shawn: I could not do that.

Brian: Some of the sections were more than one take. I did take some liberty there, but I powered through on a Friday.

Shawn: I'm aspiring to do that. I'm only about two years into this job, but it's definitely a very rewarding job.

Brian: Awesome. I wanted to mention, for the sake of the listener, we had Divya on seven episodes ago to chat about developer experience in general and then also chat a bit about Vue in the community as well.

So if you want to listen to episode 44, definitely check that out.

Shawn: We split things by community, and we all speak to different parts of the community. Sara runs the team, so Sara and Divya speak to the review community.

I was actually the only React guy for a long time because I also helped to moderate the r/React subreddit on Reddit.

But recently we hired Jason Lengstorf, so now I'm no longer needed.

Then we also hired Sara on Angular, and Phil is so always on the indie web/vanilla HTML and js train.

So yeah, we try to just address different people as they come into JAMstack.

Brian: Y That's awesome. Because I personally don't know everything about every front end JavaScript framework, as well as even -- I do have one site that I have in production that I leveraged a lot, which is an HTML/indie web that Phil would touch.

But I'm by no means an expert, which is why I have you here today to talk about Svelte.

Another thing that I've known about for a long time, I believe Rich Harris is the creator and I think-- Did it used to be something else? Or, where did Svelte come from?

Shawn: Rich actually had a previous framework called Ractive, and that was the original idea for reactive reactivity in frameworks. I think it was around at the same time as React.

So Ractive actually was responsible before a number of innovations, and most well-known is probably the idea that you should have single file components that encapsulate styling as well as templating, and all the other JavaScript logic components.

Obviously React has not adopted that, but basically every other framework has that.

Svelte is a reinvention of that approach, basically adopting a compiler approach, and that's a lot of the reason for its performance and bundle size. We can get into all that later--

Brian: Wait, a compiler, as in like Elm? Like how they have a compiler that compiles JavaScript?

Shawn: Less intense, but philosophically the same thing. Elm is a full language, Rich Harris also refers to Svelte as a language but it's more akin to HTML than it is to Haskell.

Elm is basically very much inspired by Haskell. And by the way, if anyone's interested definitely go to Evan Czaplicki's Harvard undergrad thesis.

I don't even remember my own thesis, but I read his and I was like, "This is the most clear elucidation of functional programming I have ever read." And this guy, this kid wrote it.

Anyway, there are a number of approaches to frameworks and me being a primarily React person, my day job is still React and I've made my career and reputation on React.

I still think it's worth exploring other frameworks, and Svelte has a very different approach which is compiler-based, and we can talk a little bit about that.

Brian: Yeah, I'd love to hear more about that too. I'm thinking in my head, "Did I have Elm on the podcast?"

I Googled it and I had Elm on the podcast episode 19, so if you want to go down that rabbit hole in compilers definitely check that out.

But yeah, tell me more about Svelte. It's compiler-based but more towards the HTML side, what are some other wins?

Shawn: The thing about Svelte is that every single component looks like a mini HTML file.

There's a style section if you want it, there's a script section if you want it, and then there's just regular old HTML elements .

Then there's some template syntax for inserting, and then very similar to how Angular and VUE might have it.

But the compiler approach basically allows Svelte to cheat at this tradeoff between having batteries included and bundle size.

Obviously bundle size is very important for the web, but for developer experience you want to have as much provided out of the box as possible.

Historically, if you just had everything in the JavaScript bundle then adding features means adding weight in JavaScript.

By taking a compiler approach, as far as being able to say "OK. We're going to provide a first class feature for animations, but if you don't use it we won't include it."

Same thing for first state management, same thing for CSS. It's very much that it's able to do batteries included without the cost of JavaScript embedded in that. So, I really like that.

Brian: That's interesting. You don't hear many frameworks that have batteries included that also care about bundle size, which is interesting that you can get both of those wins.

Because even React, though you get Create React App most people either eject or don't start with Create React App at this point.

Maybe most people do, I haven't talked to most people to be honest. But it's those two things, the age old programming intro to algorithms questions .

There's three things, but you can only have two of them, you can't have all three. Is Svelte, is it all three bundled in one?

Shawn: I don't know. What are the three?

Brian: Yeah , I was trying-- I was stumbling through. Complexity, time, performance ? I don't know.

Shawn: T he analogy is strained because we're talking about creating apps for the web instead of traditional programming, so I'm very heavily involved in the React ecosystem and I know I'm on top of this because I help beginners on r/React we have a monthly beginners thread, something like 500 questions and answers every month.

I hosted one recently, and it's confusing for beginners to have to go and seek out all of these things.

So let me just give you a quick list of what people in React land typically have to deal with and what is first class in Svelte.

Static scope styling, you typically have to pick from style components, astroturfers, land area in motion in React, but in Svelte it's first class.

You'd use the style tag just like you would in regular HTML . For transitions, you might use something like a React transition group. In Svelte, it's just a transition directive.

For animations, you might use React spring, or frame or motion. Svelte again, first class. Head management, you might use React Helmet.

Class toggling, you might use the class names tag. State management, you might use Redux and Mobx. All of these have first class citizens.

I also really like the accessibility, because the compiler goes through the ASD of your entire app, you can actually just build accessibility warnings into your build instead of having to import a separate tooling.

There is this whole idea of collapsing your entire toolchain. You're going to have a build step anyway, especially with the JAMstack . You're going to have a build step, let's actually just stick as much in there in a single pass as possible.

The result is that typically if you do Create React App, that's the default standard way to start to a React App.

Typically it takes about five minutes of installing NPM packages and running them, do the same thing for Svelte and you'll see how much quicker it is.

Just because there's so much that's baked in and it doesn't duplicate, and it just is designed for speed.

Brian: That's awesome . In my mind, as I 'm crafting where Svelte fits with an ecosystem. React being on the right side, where I've got Create React App, you've got everything.

You've got adoption and you've got a lot of documentation at this point, and then Svelte being on this side where it 's go t a compiler built in as well.

It seems like it's almost, rather than not even Svelte being in the middle rather, and then Vue being on the other side.

Because a lot of these things that you're mentioning, adding tags to your components for opting in functionality, it sounds like a lot of stuff that I like about Vue, and a lot of stuff that I've heard about VUE as well.

Shawn: I actually put Svelte on the far end, even beyond Vue. Because for example, SSR metaframework.

A lot of JavaScript frameworks only take care of JavaScript rendering. But for SEO and performance you want to do some server-side rendering, Vue doesn't handle that first class.

You have to rely on something like a Vue press or Nux which are third party teams that are maintaining that. Same for React, you have Gatsby and XJS.

But Svelte actually recommends Sapper as a first party thing, like the same core team maintains that.

That severe degree of vertical integration throughout the entire stack goes even into the SSR metaframework, which is important for tooling to nobody.

Brian: Is there an option, if I'm a React dev today and I'm doing a bunch of React at sites and I'm Reacting every weekend on side projects, is there an option to piecemeal and transition into Svelte? Or try it out? What are the resources out there?

Shawn: The resources are primarily the Svelte tutorial. The docs are actually pretty good for something that is a side project of like 4 people.

If you compare, the Vue core team is 30-something people and the React team is like 8 people full-time on this thing.

Let's face facts, it's a side project of certain people, but the docs are actually really good.

They have a full tutorial that steps you through a Repl, because every compiler should have a Repl showing you the before and after of what you write.

It's literally like any other framework. I would say React and VUE, every framework does this. Where you just give it element to amount on and it just takes over from there.

If you want to inter-operate between frameworks, that's the way to do it. I actually preach the other approach where you should start most pages with Svelte first, and only add React once you need it.

Because React has the heavier runtime, and it's about 100 kilobytes uncompressed. Whereas Svelte, you can get it down to as low as 9.

That's a very nice way to think about, "How do you want to set up your sites?"

Typically my current tagline for what I would recommend people is to say, basically Svelte for sites and React for apps.

If you're primarily building something where you're giving people information and just a little bit of interactivity, save for a log in system or a check out persisting some options, use Svelte because the bundle size is so much smaller.

But if you're going to have that runtime, if you're going to make a progressive web app or a React native thing across multiple platforms, go ahead and use that. To me, that makes a lot of sense.

Brian: That's a good tagline. Hopefully that makes it in the tagline section for JAMstack, the radio site.

That makes a lot of sense, and it's encouraging to hear that because at the moment I'm not really building a lot of apps.

I'm building a lot of one-off sites in leveraging a lot of APIs to produce data, and add some functions to keep that data alive.

At the moment that's my jam, because everything I do is a side project at this point at my current role. So, really cool to hear.

Shawn: Yeah. We're talking about JAMstack Radio, and I feel like I've been doing this job for 2 years and you've been doing it longer.

There are just very different concerns when you think about building sites versus building apps.

Once you start building apps, actually these concerns about JavaScript weight don't really matter because the alternative is a very heavy native app.

Load the full featured runtime with the ecosystem that's heavily supported, but if you're doing sites then obviously performance.

Especially on low end mobile devices, you got to care about. But I do want to make it just about performance, I think Svelte-- The syntax is the lowest that I've ever seen.

For example, I've been transitioning some React apps that I used to have, like personal apps, and I just rewrote them in Svelte just to get a feel and to learn. You typically get about 20 - 30 % less code, just because Svelte embraces triggers, syntax and mutability.

So for example, in React you have to use a React use state hook, and then you have to set state somewhere and it's asynchronous, and it's this whole callback process.

In Svelte, you just assign. The variable equals new value. That's it. It just logically cannot get less than that. The less syntax you have, the less code that you write, the less bugs.

That's a lot of what Rich Harris is preaching. For me actually, the sugar syntax is more important.

React, for example, must choose two -way binding. It's data down, events up for example, which means that for writing forms it's hard in React.

Anyone who's written a good form in React is like, "All right. I need a full management library for this."

That's why you reach for Redux Form or Formic, in Svelte it's just two-way binding all the way, and then you just validate and submit in your submission handlers and that's about it. It is what it used to be, I think.

Brian: It sounds like maybe Svelte had some time to make a decision that everybody's been struggling with, and say "OK. Let's not go down this rabbit hole."

Shawn: Yeah. One of the things that I'm actively exploring is some of these ideas don't have to belong to Svelte alone.

A lot of Vue took the idea of single file components from Svelte.

I think we can take this idea of a compiled language to React to say, "All right. These are super common cases and we end up having to import so many libraries just to handle this stuff, what if we just introduce a bit more syntax and make our lives a lot easier?"

So that's something I'm actively exploring as well.

Brian: I'm curious, going back to your mention of the maintainers of Svelte being their side project.

I'm curious, who are these people and who is using Svelte today knowing that this may or may not be a side project for some of these maintainers?

Shawn: That is a fair concern. It's actually a bunch of Brits, it's Rich Harris and his gang. Obviously, Rich and his entire desk at The New York Times use it.

If you see any data of his in The New York Times, it's probably Svelte. You see obviously performance, especially on mobile, is a big concern for them.

And Rich has a long history, because he's also responsible for roll-up and some other smaller libraries. It's the same group of maintainers that follow along their philosophy.

Brian: OK. I didn't know the correlation between roll-up and Svelte. I know a maintainer on roll-up, but I didn't know Rich was behind it.

Shawn: Yeah, he created it.

Brian: Excellent.

Shawn: Obviously there's a good team of people. I actually don't know their real names, I only know their GitHub handles.

Brian: Fair enough.

Shawn: They're pretty awesome , and it's growing. I've been criticizing Svelte as well, because they used to be a small core team of 4 people, but now they've expanded a lot as well.

It is what it is. I actually have been thinking about this, no matter how good you are at code you can write the best framework in the world, but if only you use it then it's not going to have that much impact.

At some point you have to start instilling community beyond code, and it's about maintaining and triaging issues. The really boring stuff that just has to get done.

Documenting, having meetups, demos, doing talks. All that meta language, this is what a member of the reason core team calls it, it's the meta language around the language.

So I was definitely entering that phase, where it's starting to go to more than code.

Brian: Having thirty thousand stars on a project that I've known of but never tried for quite a few years is pretty surprising. I'm just checking out the repo now.

Shawn: Yeah, there are other users. I actually don't know them off the top of my head, but on the community side we maintain a bunch of "Who uses Svelte?"

It's just a bunch of logos, but it doesn't really tell you much. Apple actually has recently started hiring people specifically for Svelte.

Brian: Interesting.

Shawn: There's a Twitter handle, @SvelteJobs, where you can see the people who are actually specifically hiring for this stuff.

Something that is really close to heart, because on some level it doesn't matter what framework you use. As long as you get stuff done, it doesn't matter.

But for devices that are low power that actually need that performance, the bundle size of Svelte starts actually mattering a lot.

One of the use cases that Rich Harris talks about in his 12/03 talk, Rethinking Reactivity. You should definitely that in the show notes.

But basically, he was talking about how you measure payments provider in Brazil, using this embedded devices to provide a nice UI. That is all Svelte.

Brian: And then you alluded to, you are part of the Svelte community as well?

Shawn: I guess informally, yes.

I run it, but it's weird because this is not my job. I'm doing this for fun because I think that it's more challenging for me at my stage in my career to think about community rather than code, and I think that's something that I actually got from you.

Where you're like, "OK. I'm a developer advocate for GitHub. You can go around the world doing talks all the live long day, but that's not going to scale. You only have 365 days a year."

But how do you extend the community work beyond that so that you enable other people to do that work? It's more authentic coming from them if it's just fellow users, GitHub pays your checks and you're an expert.

You might not be able to speak to certain communities just because you no longer belong to those or you never were , so I think enabling other people to speak about your stuff is actually a good goal for someone who is organizing a community.

So, that's what I did. I helped to set up the Svelte community site and also in New York, helping to set up the Svelte Society Meetup, which is basically a conference and a meetup series , and just trying to get more people excited and creative.

I think that's something that I really enjoy about the community, because every other framework a lot of people have to learn the framework for work, and so they're very interested in enterprise.

We call this "Enterprise React." We actually take React, add typescript onto it, add redux and add all that junk. It's no longer fun, people just don't mess around with stuff.

Svelte is very much focused on light, quick and easy to get going. It's got animations built in, and then you can make very delightful apps, and it's just a joy to play with.

Brian: You mentioned the Svelte docs around where to learn, like if I want to get started with Svelte today, and I'm a listener, where's my first step?

Shawn: Svelte.dev, that's the main site that you land on.

You'll quickly go into the tutorials, so you can either check out the tutorials or if you learn a different way, if you're more of a " I want to see what the big idea is,"definitely check out his talks.

Rich give three talks last year detailing all the elements of Svelte and how it compares other frameworks, and I'm the guy who learns from the big picture down, so if you' re that guy look out for Rethinking Reactivity from Rich Harris.

Then also you can join us in the community, so Discord is where most of the users hang out.

The community site for Svelte is where people show Repls and third party libraries and stuff like that.

Svelte Society is the meetup series, there are events happening all over the world, and obviously contribute on GitHub.

Brian: Excellent. What was a thing you kicked off with? Svelte for Sites and React for Apps?

Shawn: Yeah.

Brian: I'm definitely going to try out Svelte this weekend for sure , on one of my projects I'm working on.

Shawn: Nice. You should check it out.

Brian: So with that being said, we're going to transition the picks. These are jam picks, things that we're jamming on. It could be music, food, etc.

But with that being said, I'll go ahead and go first because I got 3 picks actually that I'm super excited about.

First off, I just launched a site on one of the projects I'm working on at GitHub. It's called GitHubHackathon.com, and it's going to be focused around GitHub actions.

If you are at all familiar with GitHub actions or not, definitely check it out. It is a JAMstack site too as well, so it's my first public-facing JAMstack site that I get to be a part of. Check out GitHubHackathon.com.

I also want to mention this new documentary on Netflix called Hip Hop Evolution, and I came back from Brussels which sounds really funny to say out loud, but I was there for FOSDEM.

I downloaded this documentary on hip hop evolution and I was blown away, because if anybody's seen my talks in the last couple of years, they're very heavily Hip-Hop influenced.

There's this talk where I talk about GraphQL in gangsta rap and going through that, and the crazy par t is if you took the GraphQL out of that it's basically episode 2 of this documentary.

So, episode 2 and 3. I was just blown away, all this context that I've been trying to talk about code with. It's right here in this series.

But with that being said, I also realized I got some things wrong, so if you do go into my talk where I talk about the history of hip hop, I missed some very key figures that I had no idea existed.

The thing I like about this series is that it actually talks about the beginning, the non recorded hip hop which is something that I forget existed.

They go into even that detail, because I only know all the stuff that was on my Napster in middle school. I missed all that stuff

So with that being said I got one more thing, which is MutualFun.io which is a TLD that I've owned for way too long and I finally am doing something with it, and I am live streaming so thanks to Jason Lengstorf, I had been up doing a live stream with him on GitHub actions and got super excited about getting back into live streaming again.

So I've been live streaming building one of my projects, and it's a MutualFun.io that I am building a JAMstack site again.

It's live and it's open source as well, so the goal is to start doing a lot of my work live streaming the stuff that I can.

If you want to help me build a community around watching me code, and hopefully and also have other people on, so if you want to come on and live stream with me I'll do that a bit.

But I think I'm mainly not going to encroach on Jason's space, and mainly just be working on my projects and open source. So, Shawn do you have any picks?

Shawn: Yeah, sure. I do think that we should all build more sites with Svelte.

I actually wrote a static site generator and it's called SSG, because I have learned how to name squat on NPM. It's actually disturbingly easy.

I don't think it should be this easy, but you just send NPM a request like "No one's using this. Can I have it?" And they give it to you.

Brian: Yeah, I think there was a blog post about this. The whole name squatting, but yeah. For sure.

Shawn: It stands for Svelte Site Generator, but whatever. I just got the name SSG, so my site's in it at Swyx.io and you can see how lightly a Svelte site can be.

I also have been recently getting into styling scroll bars, this is actually the subject of today's blog post.

I'm trying to blog every day, so I'm not a streamer and blogging is just less stress for me.

Did you know that you can style scroll bars? Did you know that you can put little hearts on them?

If you go to my site right now, I put a little hearts on my scroll bars and then I made my actual button for the scroll bar transparent so you can see through it.

It's just a really nice fancy effect. I picked this up from CSS tricks, and I just think that it's a under-utilized part of the platform.

Brian: I would say that I haven't styled a scrollbar since MySpace.

Shawn: Why not, right? Then for my fun pick, I'm going to pick Tiny Desk concerts. There are people who don't know about them, and they are missing out, because it's NPR.

It's live, unplugged performances from really top line singers and performers. I'm ashamed to admit that's where I discovered Lizzo.

Brian: Sorry, I'm laughing because her Tiny Desk Concert, it's so much different from her summer that she had last year, with all her songs. It was really good.

Shawn: That's the thing. You get to see the stars, the huge stars who are typically on a giant stage with 50,000 fans.

You see them in a tiny room with a tiny desk, and like 30 people. It's a very intimate setting and I really love that.

Brian: I highly recommend it as well, because there was one where Dave Chappelle introed as one of his friends who plays harmonica. That was amazing.

Shawn: But it has a good diversity, it's not just American, it's also Middle Eastern stuff and African stuff, which I don't even remember the name of it but I loved it.

Because they just bring their joy, and music speaks to everyone without having a language, which is awesome.

Brian: Yeah, it's pretty awesome. There's a local Oakland artist, Fantastic Negrito. Anyway, he was local.

I'd ever heard of him and then I saw him on Tiny Desk and then I'd end up seeing him around Oakland, which was super funny.

I highly recommend that. That's my Saturday morning cleaning YouTube.

Shawn: It's probably the top perk of working at NPR, that you get to go to Tiny Desk in person.

Brian: Also, the T-Pain one too, as well. If anybody knows T-Pain.

Shawn: He can sing. What?

Brian: Yeah. He's been lying to us all these years. But yeah, he ended up singing acoustic, like Buy Me a Drank.

Shawn: He started, and he was like "Yeah, I got the auto-tune in my throat now." So, that's my jam.

Brian: Excellent. Shawn, thanks for coming on and talking about Svelte and also sharing your picks.

I'm going to be definitely hooking up to your RSS, and listeners keep spreading the jam.