GitHub Open Source Friday, 9 Jun 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Why Webpack is Relevant in 2023

Description

🕸️ Curious about the future of web bundling? 🕸️

Join Sean Larkin and Rizel Scarlett at 1 pm ET to explore why webpack remains a crucial tool in 2023.

A

A

A

A

A

Hello, everyone welcome to open source, Friday, I, hope you're having a great Friday. My day is like happily done so I'm excited to head into the weekend. um If you're new to this like live stream, um this is open source Friday. We basically chat with open source, maintainers or core contributors about their projects and efforts for us to learn about like how we can eventually contribute or how we can start our own projects as well.

A

um I want to hear from the icy people in the audience I want to know where you're tuning in from sometimes people are from, like all over the world and I. Think it's really cool one person is hilarious and I said: where are you tuning in from they said from the chat? So thank you for that.

A

um But I won't talk any longer. Today's guest is Sean Larkin and I would love for him to introduce himself.

B

Hey how's it going uh yeah, so I'm, I'm, Sean, Larkin uh I live in Seattle Washington I work at Microsoft uh on the OneDrive SharePoint code base. um I'm a software engineer and my my role there is that I am essentially a monorepo janitor, uh and so we have all of our front end code for the OneDrive SharePoint experiences in a single mono repo and so all of the tooling and infrastructure and everything.

B

um You know, my team that we work on maintains, um but I think you know in the open source world. You all might know me as one of the maintainers of webpack, so I've been on the webpack core team and maintaining it since 2026 uh or I'm, sorry 2016, and um why.

A

Did I say well for that, like I was like wow 2026.

B

Yeah yeah yeah I mean I, know you know with how things are going, I'll probably be maintaining it until 2026 as well, if not longer, but um I also have spent some time on the angular CLI um I helped integrate webpack with that, in addition to maintaining an open source project called Rush stack, which is a monorepo orchestration tool that um my team at ODSP uh maintains, and so it helps you do like handle giant mono repos, you know powered by node.js and typescript, and it's really super cool.

B

um You know maybe I'll spam links later to share all those things but I think yeah. Here today we're going to talk about webpack and I'm. Sure, like you know, chat, there's, probably not a hand. You know up here who will say: I've, never used, webpack, indirectly or directly, so I think that's kind of cool.

A

Yeah, this is awesome. Wait you do a lot of like repo maintenance. It sounds like like in.

B

Your full-time day.

A

Gloves in your maintainer job, what does I know? This is like Off Script, but what does that look like for you, um like just for other people, to get an idea of like what maintaining a repo can look like if they were interested in doing that in the future? Yeah.

B

Yeah, so it's kind of funny you mentioned that, like my day-to-day, so like I'm, I, I'm up really early in the morning, so I get up at 4 30 a.m. I go work out from five to seven and then, um like you know, shower whatever and then so like right in the morning, most of my team's not up until 10 a.m. You know, or maybe 11. so like I, get this nice two and a half hour window to contribute to open to my open source projects right.

B

So you know I'm, not the top contributor of webpack. We have a full-time engineer on the project, but I try to drive like the backlog heartbeat and then, like things that drive me crazy, I'll go in and contribute to you but I think, like every every day, I'll maybe spend about an hour and a half to two hours, just contributing triaging issues. Looking at a project backlog for multiple projects and I think uh you know, and then I start working on our code base at Microsoft.

B

So then I jump into what we call ODSP web and you know I do my day-to-day work there.

B

um You know an example of the one of the things that I just landed in our monorepo uh is you know we just upgraded from just 27 to just 29 and that took you know about a month's worth of work, because you have to fix a lot of broken tests. It's a lot of code that you know.

B

Everyone else knows: they're the product experts but I'm, not so like it's a lot of onboarding into like broken tests that you've never touched before and yeah it's a good time, but I think you know like and then probably by the end of the day, you know, I, hang out with my family. I've got two kids and spend time with my wife. Maybe do a little video gaming but yeah. That's like my my contribution. I! Never do it at night. I. Think, like my worst work comes after work.

A

Interesting wow, you have a very full day very full day and that's interesting that you woke up so early I actually do my best work at night like if it's the morning, I'm like my brain's just mush, um but I will also highlight where, like other people's comments, somebody said OneDrive wow, so I guess they're, really impressed by that people are tuning in from Colombia and India and Romania and um Tigre I hope. We even said that country right um Netherlands all over, like it's really exciting.

A

Oh I see Laura my friend tuning in from um um San Francisco and people from South Africa, so awesome thank.

B

A

I know all over the world. They all came to to tune in about this okay, so we did say that many people would know about webpack that are watching, but.

B

A

Know, there's always developers, maybe tuning in wondering what this is um so would you mind just describing what webpack even is for folks who don't know.

B

Yeah yeah, so um it's it can turn into like a 30 minute explanation. But I'll give like the five minute explanation. So um before the browser was able to support having JavaScript modules right there, we had them in node.js um and then a new spec came out that designed this. Like esm module format, you know Equis script modules um and so what what pack did um before the browser even had support for modules? Was it lets? You write your code using the module syntax um and then using this build tool.

B

It allowed you to bundle them up into something that actually ran into ran in the browser and emulated the same behavior. So like you know, there was a time three or four years ago, where people couldn't even write. Esm modules in the browser- and uh you know webpack- was the only way that you could write that esm module in your source code and then have it run and behave like it should in the browser itself. um But it does so many more things. uh It introduced.

B

This technique uh called code splitting, which allowed you to load only parts of the code or the code that you needed up front and then lazy load. You know additional functionality later and made it really easy to do uh with with like a great developer experience, um uh but it also had support for other, like different types of assets, that you would import into your code. So like this Paradigm of importing CSS or importing like an image or a URL, something that's really canonical.

B

When you use like react, you might import an SVG and use it as react component. You know these are things that uh webpack helped Pioneer and now modern bundlers today, probably all support these features.

A

Interesting. Thank you for that explanation. um Even Laura um I believe blore is a developer. Advocate started off as a technical writer. She said she actually doesn't know webpack and doesn't have much of a webped up background. For me, I do have a software engineering background, but I've always been like what um web hacks just been in the background. I'm like I, know I'm using it I, don't know, what's happening.

A

B

A

B

Sure absolutely yeah.

A

Yeah and I know, like my husband he's, always he's had tickets, where he's like doing stuff with bug pack and I'm like oh, my gosh, looks scary, so I'm excited for this twitch stream, because I think it'll um just to help just help to like demystify some stuff for me and like even just your explanation, helped a lot.

A

um Let's see my other question too and I think you kind of just touched on this a little bit but like why? Why do projects even need a web bundler and in general, what problem does it solve.

B

um You know I think so like technically today, uh if, if you like pop open, you know your Dev tools and you know Microsoft, Edge or Chrome or whatever you know you can technically write modules uh like it works natively in the browser. Now it works natively in node.

B

um However, there are still some performance implications of when you ship just raw esm modules, and a lot of these things just depend on context. Right, like you know, our mono repo is like an 800 package monorepo for OneDrive SharePoint or like yeah. Almost we almost have like a thousand packages with lots of different code paths and things like that, um and so when your application gets bigger, especially if it's like a single page application. Let's say you have I I, think the the cutoff is like.

B

If you have more than 5 000 modules um and you just try to ship them all Loosely, you know uh natively in the browser. It actually has a significant uh runtime impact on how long it takes for your page to load and so I think, still to this day, the best practice in having a um a web application that is accessible on lower end markets, lower end devices is to bundle your code right, and so um there are.

B

There are tools out there today, which still like it's kind of like saying, bundling, helps you achieve kind of the the middle ground, because there's a lot of benefits to just shipping like loose es modules. uh One example would be like a Dev server. There are tools out there today, like Veet, which is another bundler abstraction that when you're in your local development environment lets you just ship your modules, raw uh or loose right without any bundling involved. But you know in your production mode.

B

You still want to be able to bundle, because it gives your end users, the most performant uh loading page and that's significantly important, especially like I said for those who are on low end devices or have like flaky internet connectivity who aren't using a Macbook. You know one M1 chip, Etc.

A

Love it okay, that made a lot of sense and yeah. It provides the accessibility, I've been hearing a ton of hype about v as well, just highlighting more comments from the audience, because I like to interact with them. uh Alexander said: I use webpack to inject custom experiences as web modules directly into my company. Cms is primarily my deployment method and Laura talks a little bit more about her background, saying her backgrounds in python and a bit of server-side web assembly.

A

um So awesome all right. So you talked about what problem what Wrangler solved um you talked about. What webpack it even is, and I heard you mentioned that like webpack, does a lot more than what you just mentioned um like earlier, um so like what continues to make webpath relevant in 2023 as it to me, like I, came into software development in like 2018., so that was like the first like bundler that I was introduced to and now there's like so many more but like what continues to make it real bit.

A

What cool, new updates and releases have you all like had or what else does it do? Yeah.

B

Yeah I think honestly, like the the number one like thing that keeps webpack relevant is actually all the other bundlers that are out there right. um You know we have been the de facto dominant. uh You know we own 90, I, don't know the market market share of um tool, like you know the development experience and so like with the with other tools like Veet, which is technically just roll up under the hood, but like bundling, extract abstractions, so um uh tools like Veet or even just roll up itself.

B

um You know even Frameworks that are doing like custom things or like native tools like RS pack uh es build swc like you know, I can I have to think of like the full list, but all of these different projects came at bundling at a different angle. Some are like Hey we're fast, because we do like five percent of the things webpack does or we're using.

B

You know, go or rust, as our native run time to execute the code or you know, uh Veet a good example right, they're using roll up under the hood, but to make their Dev experience fast. They ship loose modules. So there's no actual bundling in your Dev mode right. So um all of these different things have uh or like Innovations have allowed us to basically kind of Step Up our game right um these days we release every Wednesday.

B

A lot of it is just bug fixes or a better typescript definitions, um but there are a lot of things that we're doing for let's say like webpack. Six, like a great example is like uh we want to enable people to have this same, like I just got started using Veet and it's fast and I don't have to care about configuration, um and so we have these two awesome features in webpack that we're lining up one called presets, which is the essentially the equivalent of a v plug-in.

B

If you actually look at a v plugin, all it does is take configuration and hide it from the user. So you can say like webpack, preset react and there's your react experience. You know we want people to just install one plug-in and just say: okay, let's go and have a great Dev experience.

B

um The second thing is, we want to do the same: es module um like Dev server capability now, webpack I, don't know if we'll ever like ship that ourselves right, because usually a tool on top of it would be a great candidate to use this capability.

B

But what we're going to do is like we want to have a great es module output story so that um similar to what rollup does today, so that people who want to make these clouds Acts or you know, snowpack or like these loose module servers, can just go ahead and do so and The Primitives exist right. So I think you know those are the two main things that are like on our board for developer experience um and we think the you know it kind of like elevates.

B

You know we want to elevate the user experience and lower the barrier to entry for people who are just getting started right and I. You know a lot of the feedback we've seen has been just you know, you know, I want to be able to just install one thing and then start coding. You know not. Everybody is like me, who's, passionate about making tools and want to you know they just want to write front-end code. You know, and we want to enable people to do that better and to do it faster.

A

Yay I'm so excited about the the future of like how um it's going to become even more accessible and I, actually really love. What you've said is you're relevant because of these other tools as well. It's kind of like when you know people have these arguments on like Tailwind versus CSS or you know, react versus next JS versus all.

B

These other things.

A

And it's just like these exist view, whatever these exist, because these other ones exist and they're they're or these Frameworks or whatever exist, because these other Frameworks exist and they're pulling inspiration from each other and growing together and getting better and each of these. This I don't think, there's like one that's better than the other. It's just like this works for this person and this tool works for another person. So I really love the the way that you said that yeah.

B

And you know like there are some things that, like separate a webpack from these other tools, I think you know like one example right at Microsoft, the premiere bundling tool is webpack. uh We've explored every other single tool.

B

um We tried roll up, we've tried, you know he has build, we, you know, we've attempted other different things, but the number one key I think for webpack that speaks to us is flexibility right. You know a lot of teams at Microsoft move slowly or they are working in Legacy code bases or they're support supporting multiple bundling formats, or they have really complex challenges, and so the flexibility of webpack, it's deep, API um broad features really allow people to to continue to support Legacy scenarios, in addition to still moving forward with new technologies.

B

I think a great example is like in OneDrive, for example, uh we just celebrated a three-year project of finally getting rid of AMD modules right, so we're still using required JS and AMD modules in some of the experiences for OneDrive, and you know there will be no way that you could switch to another bundler, um because none of these other bundlers would support this Legacy format, and so um you know like this is just kind of one test, like one drop in the bucket of why we choose that Microsoft to use, you know webpack for a majority of our scenarios.

B

But that being said, you know maybe some of the people in chat. They don't have that maybe they're just building a simple you know application or like a static website or a blog like check out parcel or try webpack's minimal experience. You know- um or you know, the great thing here is that there's lots of tools out there that solve different scenarios and I think you know that's what also makes it really nice is that we get all this different uh inspiration from these tools to help solve these scenarios too.

A

Love that love that so much I do want to remind people in the the chat to be follow. The code of conduct rules be respectful, be kind because this is a GitHub twitch. You know, so you don't want to get banned from a GitHub live stream, um but that's that was a really great way to to um put it um and before we jump into the demo. So just so people know right.

A

I did name this a little bit of a spicy take type of title right, um but just because this is not going to be like. Oh we're, proving why webpack is relevant. We don't need to like actually prove that we'll see it through the demo, we'll see it through um Sean's passion for the project as well. So just want y'all to keep that in mind. um Oh wait before we jump into this demo, I'm just curious of like how you even got involved in like maintaining the project. What even inspired you why?

A

Why are you even excited about it? Oh.

B

Man, this is a long story and I'll do my best to summarize this in a quicker story. So uh reverse back to 2015.

B

I'm working in some random, like contract job I've, never touched webpack in my life, but um I start like I've, been used to Grunt and Gulp, and all of these like task Runners, um that concatenate modules together um don't have these like cool Dev servers and so like when I first tasted, the webpack experience I remember like launching a command seeing this interactive Dev server, changing some code watching it refresh before my eyes and like instantly I was hooked like I, remember getting like Goosebumps on my arms, because I was like this is so cool like what like, where have I, been that I've never known about this tool, and so when I went to my next job, I was just obsessed.

B

I was just like. Let's get everything, I went back like I, don't care what framework we're doing like. Let's just go and uh from there I started realizing that you know this next company gave me the opportunity to speak at com uh to like go to a conference, but then I found out you could submit talks to conferences which then they'll pay for your hotel and your travel right so, like I, submit a talk that was like how to use webpack in angular.

B

You know uh you know, and- and uh this was at like an angular conference that was really big at the time- NG comp, and so they accepted my talk, which was like blew my mind. First of all, because like in the back of my head, I'm like cool I, get another Free Conference to go to, um but essentially, like I gave this talk and I loved it I loved, inspiring people how to to how to use it.

B

I love teaching people how to get started, demystifying some of the complexity, and then it led me to actually working with the project. I would message them. Reach Out ask questions because everybody in the ecosystem or at these conferences, would be like, like what's the road map uh you know who are the maintainers?

B

Like so I I went and investigated these things, and eventually uh it's kind of crazy um I was on a podcast with Kent C Dodds, one time, I actually I just said: hey I heard that the webpack team is going to be on this podcast and I reached out and I said: hey can I just be a panelist I just want to be in the background and just like see these guys live and maybe talk to them. You know I, don't like just ignore me.

B

I just want to be here in the moment, because I was so excited about this team and the work that they were doing and he was like okay A little apprehensive, but he said fine whatever and the day before the podcast uh was released. His like advertisement was like introducing the webpack core team and my face.

B

Is there next to these three people and I'm, like oh, my gosh, you know and so like behind the scenes I've been talking with this team for a while, you know maybe about a month, but that was when they were like do you?

B

Do you want to join the team and I was like yes of course like, and so you know that's kind of how I it was kind of luck, right and just continuously being involved and like showing my passion for wanting to help, um and you know I, like my following I kind of gained from just going on Twitter and like responding to people complaining about webpack right because back when I joined we had terrible documentation. We had lots of rough edges around the API.

B

Like uh you know, the the dev experience was really not enjoyable um and so, like I just jumped in where I could- and you know, I hardly touched the code itself, but I just tried to like make an impact where I could, in addition to getting the project funded eventually, but you know that's a whole nother story. I can talk about, but yeah I think that's the in short. How I ended up you know on webpack.

A

Yeah wow you're you're. This is impressive, like you put yourself out there, no seriously and I think I. Think more people should like learn about that kind of story or that pathway, because, like you put yourself out there, you try to fill in the gaps that you saw of, like developers have questions or, like you know what I mean you just jumped in you're like. Let me help to improve this documentation and it brought you in a place where now you're you're one of the maintainers, and um you get to do more and more talks.

A

That's awesome so for folks wondering that's a good, a good path, you kind of were like a devrel like.

B

Yeah yeah, my initial, like responsibilities for webpack, was being a devrel. um You know and like. In addition to you know, there were some initial features. You know I, like maybe I'm. The top six contributors on the project. I did do a lot of like conversions and like uh minimal stuff, but you know, uh especially when I got started but like I just did whatever I could at the time and I think that was enough and it really did help the Project's perception and mind share and getting people involved like getting Frameworks to use it.

B

uh You know, put it in their docs, like those are all perfect ways that you can start. uh You know contributing to an open source project. It doesn't just have to be code, I mean I, do enjoy coding and and implementing like adding new types and Technical documentation and like doing really deep Dives on webpack now to teach other people.

B

But I, like my goal now, is I just want to enable more contributors to contribute right, because you know I'm, not the most brilliant engineer in the world, but I can help bring people to the water to you know to take a drink.

A

I love that that's definitely deveral Spirit of someone named Isaac said. That's awesome and someone named here said this story was inspiring I agree with them. Okay, so we learned about webpack. We learned about why you're into it, let's see a little bit of a demo.

B

Okay- okay! Yes absolutely so you know there are so many features that you you have with webpack I just want to get super simple right and um yeah, so it may not be like the most intricate demo, but I think it kind of showcases exactly what it does right.

B

um So the easiest way to get started actually is to just use MPX right in your terminal. If you have node installed in npm, you can use npx to actually just access webpack CLI, um so so what I did here in this situation? I've got a file under Source index and it just Imports two JavaScript modules and we're just console logging.

B

It there's nothing fancy here um and you can see here uh this module in a this is a es module right because we're using the export default syntax and then here in module B we're using common JS modules right so um module.exports. This was the old module system in node.js right. So here in my code space um you know, I can just run MPX, webpack and then mode production and what it'll do is automatically take this code and build a bundle out of it.

B

So this is already minified and technically since we're not using any web apis. I can just run this in node right, so we could see if it technically works right. So, if we're just reading this code, we should see something that says like hello, GitHub twitch. So let's just give it a try. Okay, so we go node, dist main.js and there we go and so that's emulate. You know that's webpack in its simplest form.

B

um But uh what I like to do is you know, there's also some other basic features that you can get so one thing I'll call out here: if you've used webpack, you know, most people complain about the configuration, but if you're literally just writing, JavaScript modules you're not doing anything fancy with CSS um you're not like for the like. If, if you're just writing, really simple code like you can see here, there is no configuration like this was one of the things we shipped in wet pack, five, which was just like.

B

Let's make some really safe assumptions right, like your entry point, is going to be Source index.js, the output is automatically disk main right. So, like you know, you can go ahead and just run webpack without even having a configuration. Okay um and I think you know this is great for people if they just want to start understanding like what the heck is, a module.

B

You know or like how do these things work, um I'll showcase, one other feature which is like how you would use code splitting so um there's another scenario where let's say you don't want to load some code right away and you want to Lazy load it well. Webpack uses the dynamic import syntax to emulate this Behavior. So, let's just say like okay export defaults, let's just uh lazy, loaded, okay, great, and what what we'll do here is if I want to Lazy load.

B

This code, I can just say something like uh I guess in its simplest form, we can just literally say crazy loaded module equals await, and then the dynamic import and then the path to our module right. So.

B

When I build this code, what webpack will do, let's just make it uh uh we could just do it in production mode mode, production.

B

We can see here that now at the top in our in our output feedback, we've actually generated two bundles right. So um this bundle here automatically will only load when this, uh when this line is executed right.

B

So this is maybe a poor example right because I'm not using some asynchronous API to like invoke this function, or uh you know this identifier, but you know a common pattern here would be like, let's say I guess um you know: window.set timeout, right, geez I, never use Windows that timeout, but we can just give it a try and I think the the duration is at the end. It is thank goodness.

B

I can say, uh cons to get C or get lazy code equals a function that returns um a dynamic import s.

B

Equals yes and we'll make an async function that returns a dynamic import of C, okay, great and then I'll say: get lazy code, awake get lazy code.

B

Since we're doing some async here- okay, all right, so this would be maybe more of a canonical way that you would expect this to look like. But the point here is that only when this function is called does this this bundle get invoked right. So the whole point is like: if you have a bunch of code that you don't use in your browser, why uh you know you can lazy load that until you actually need it? A great example is like modals or um pop-ups, or things that are temporal things that don't exist in.

A

Your user experience at first and.

B

A

Up later, yes, oh wow, keep going sorry. Sorry I didn't mean to interrupt.

B

You no no that's about it. Honestly. I think this is a great like just get started with webpack just taste. What it feels like and you know have a no config experience.

B

You know what we're looking for in webpack 6 is that we want to just uh if you do want to have a full experience, we're going to enable this thing called presets, which all it does like a vet plug-in is abstract configuration, so you can just say like webpack, preset react, webpack preset view you know or solid.js or whatever framework you want and that's the goal right. People can just get started right away without caring about the bundler, but then still have the opportunity to extend it later.

A

Yeah, that was a great demo. I will say, like that, really kind of like made it easier for me to visualize and broke it down. For me,.

B

A

These twitch streams, because I'm like I, don't get to code every day anymore, but I'm like getting exposure to things and being like Oh. That's how this has always worked. I, usually I'm like it's in the background I'm just using it, but I, don't know how or why I'm using it. So this was great. um Someone asked a question about rust. Being behind the scenes in webpack. Is that a thing like are y'all using rust I'm? We.

B

Don't use rust directly, uh there are. There are some like open issues where we want to explore areas to do. Native performance right like one example, is like our parser is using Acorn JS, which is like the de facto JavaScript parser.

B

um You know we could potentially see performance benefits, but it does it. It does entail um rewriting some pretty complex code in webpack, so it's on our backlog, but it's not like something we have as a high priority.

B

um That being said, we have been actively collaborating with a team um based out of bike dance who created RS pack. Rs pack is essentially a rust drop-in replacement for, like a webpack supporting the plugins and the loaders. um One of the things that I would love to see right is this idea of like a strict mode?

B

So, although RS pack doesn't support like um doesn't support all of the Legacy features, yet that webpack does, it would be so cool for us to be able to just say like well, if you're, using a set of like strict guidelines where you're not having to support a bunch of old features, we could just say like strict, bundling true and it invokes RS pack behind the scenes right.

B

And so um it's been shown that rspec has like a load of huge performance gains um and so, like you know, I would even love to see in the future baby. We merge prod or projects or, like you know, our maintenance team and their maintenance team work together to keep not only our apis in sync but to find other ways to collaborate, because where honestly, these things are just better together, especially if you have this like API. That works exactly the same, or maybe it's a specification but yeah.

B

It's super exciting and like they built almost everything out of rust with it uh and it's great and like I I spent like two months learning rust just to catch up with the hype and I. Think it's a it's a gorgeous language to write. I!

B

Think it's really fun like lifetimes are, like you know, uh are kind of annoying, but like once you get used to the concepts it's really great, but one of the things that I think we want to keep um we have found is that you can't really write a tool in Rust completely.

B

That needs a plug-in system or Integrations right, because if you build a plug-in for your tool and rust, you have to recompile everything right, and so um the story feels really bad and like, um and it really raises this. uh How would I say this barrier to entry for people wanting to contribute uh or even just get started? Writing an integration, so I think like.

B

We still think that webpack has that sweet spot where it has a really great API and a really low barrier to entry for writing Integrations. But we would love to have something like a super, fast mode or a strict, bundling mode that we could just turn on. So like people with simple projects, instantly win.

A

Love it I haven't tried out rust yet, but this is exciting and then I didn't know that, like you all, were collaborating with yeah.

B

A

That's like Tick Tock, Engineers right right.

B

Yeah, so the bike dance team are the authors of RS pack right and so they're very it's funny, because they're also contributing to rush stack which Microsoft, which we own, but we actively maintain as well. It's really kind of cool how how much shared infrastructure and contributions are going on between by dance over uh their team and our team and like even my teams at Microsoft that contribute as well.

A

Awesome just a couple of people saying that that was a great example really great demo. um One person- and someone said thanks for the awesome feedback from um what you just mentioned about Russ, um it looks like one person acts does webpack out of the box, have tree shaking.

B

uh Yeah, like I, mean out of the box, it does like you know. I could even show in if you, if you wanted to pull up the the like the yeah uh I can just go ahead and Show an example of this, so I think one of the one of the cool things like let's say for an example, you take a package that has a bunch of modules right.

B

Low Dash es is a perfect example, so the Only Rule is that you have to use an es module package right, so I'm using low Dash es here. Oops. Let's make that bigger again. So, uh if I try to uh like I'm just using one export from it and, uh let's just say, I use this function, which all it does is unique, a bunch of entries in an array, so you get like a distinct set.

B

um So if I go ahead and bundle this uh in production you'll see that we've only added, you know it's still only 2.5, kilobytes minimized uh or actually wait. Let me see, there's it should be a little bit smaller I. Think. Let me just remove these Imports just to make sure.

B

I can't remember what the the minified size is.

A

B

By default like low Dash as a whole, package can be somewhere up to like 60 70 kilobytes, uh but if I just use this.

B

B

So if I just use unique here.

B

There we go there, we go yeah, it's much smaller, much smaller, so you can see here that it gives us uh yeah, 4.75 kilobytes, total nice yeah. So this is automatically true shaking right. If I actually built this code in development mode. We don't perform this uh this tree shaking out of the box so like. If we look at our main file, you know now now we have about I. Think it compiles to being something like you know: 80 kilobytes, right.

A

B

Significantly reduces so it's basically shaking the tree of a bunch of code, that's not actually used in the library.

A

Gotcha, oh, that cool looks like they said awesome. Thank you.

B

A

All right wait, uh wow! It's all! We already like hit the 40 minute Mark so put that out.

A

I can't believe it I didn't feel like we were talking for that long, but um with that we'll we'll switch into some of the other, like just questions about like your journey and your background and stuff like that, we already talked about how you ended up doing devrel for for webpack, so I'll go into just wondering like what are the challenges um that you've encountered as a maintainer um I like to tell people about like how rewarding it is, but I also like to be realistic, so I'm curious from from your perspective, what are the challenges that you've experienced.

B

A

B

Right, the cat just wants to be involved, it's okay, I would I would say you know it's hard to put these into specific order. So, like I, did write down a list of challenges because I didn't want to forget about any I would say that I think some of the biggest challenges that I I think, like we tried to chat like we really tried to tackle at webpack like one is like paying for people right or like continuing to support funding.

B

Initially, when I joined the team at webpack, the original Creator Tobias, coppers or sokra, he was only working on webpack for five hours a week and it like as a side project right, and this is when it was starting to take a huge uptick. So I asked him. I said you know like. Is this something you would like to do full time? If we could find a way to pay you for it?

B

And he said yeah and so like one of the things that was so hard was actually trying to fully fund a full-time software engine engineer. You know through donations and sponsorships right, and so uh that was super hard and it required a lot of like relationship making um kind of awareness around. You know this problem.

B

um It required a lot of teaming up with other organizations to help you know find a fiscal sponsor, um but like we also, we tried a bunch of different methods, so we used open Collective. We also started writing grants right.

B

So, like you know, when the economy was better, you could actually write a tech Grant and like, for example, uh Mozilla had a had a uh an open source grant program, and so we wrote one for implementing webassembly support into webpack as like a native module type, and we got awarded like a hundred and fifty thousand dollar grant for that and I like that was so cool and I had never written a like a grant before. But, like that's one of those things you like have to learn how to do.

B

If you want to learn how to fund a project, so I think like funding projects is so hard and there's no like one right way to do it, but we think, like we've, we've done a really great job and really paved a path for other open source projects to start doing it.

B

um One of the other things that I think is is super. Oh yeah go ahead, no.

A

No go ahead. Go ahead. I I'll comment on the the funding after but keep going. This is like good tips like I, never even thought of the tech brand, but keep going.

B

Yeah yeah, yeah, so um I think other things like relating to money is, you know like it's really hard, because you don't want to like incentivize people to contribute for money right, because then you don't get people's best code. What we want to do is try to reward them for their loyalty and contributing to the project, and so, like that's a huge challenge in itself and like when money is in like situations it causes problems and so like dealing with those problems, is it can be a challenge?

B

um I think you know, this is another challenge that we've come across is just burnout right like uh if you don't take care of yourself, you don't take breaks. You don't like give yourself space to be yourself deal with your other stresses, like giving yourself permission to go work on other things like like. You will burn out, and it's not a matter of if it's it's a win, and so, like you know it, it happened to be for a little bit.

B

I had to take a two-year break from uh working on webpack, uh while I was doing some really time intensive work uh at Microsoft so like during that two years, I was driving an initiative on the Microsoft Edge team to ship Edge on Linux and, like honestly, I could not balance the amount of work, and you felt this like cyclical guilt and so, like I just said, okay I'm, going to take a break from the project. I can always come back and I think reminding your contributors and maintainers like it's. Okay, to take a break.

B

It's okay to jump back in I think really um makes a huge difference, because I think sometimes people just feel this inherent responsibility to be able to um like, like this inherent responsibility like if I don't continue working on this code. It just falls apart right and uh that's not always the case, so I think that's important and I.

B

Think probably the last one that like I, haven't found an answer for is just having better diversity in open source like um like one of the things like you know, maybe I'm not the most equipped because I'm just a white guy right. You know I, so I don't understand the inherent challenges, so the most I can do is empathize and one of the things like the biggest challenge is: how do you ask somebody who's in a marginalized group to do free work, which is essentially what open source is a majority of the time?

B

And so yes doing open source has afforded me opportunities like it helped me get my job at Microsoft. It helped me like go to Tech conferences, but like that's, not always a guarantee and there's always the challenge of diversity in itself, like some people may say. Well, that's my also my privilege that helped me get that and like I recognize that and understand that so I, you know my.

B

The unanswered question is like how do I find the op like how do I not ask people to do free work who are in a marginalized groups but at the same time still Foster a way that doesn't prevent instant burnout or still Elevate these contribution opportunities uh with way less stress or overhead.

A

Love I really loved. All of your answers. um Someone even mentioned like really great soft and technical skills on display here, I, see a comment that I'm not really loving, not gonna, call the person out but I'm not able to to to um block or or new LinkedIn comments. So please like watch yourself, please, um but there's a couple of comments. I have one on financing open source, I think using Tech grants. I haven't even heard of that as an option before so I love that you brought that up.

A

I always like hear about how different, like how open source maintainers are like doing different strategies to fund their projects and I love that you brought up Tech grants, because, right now what I've just been aware of is like open, Collective, GitHub sponsors um and also like, um like we have GitHub accelerator or different like accelerator programs that'll like maybe give you a little bit of money um for for the moment, but I love the option of a tech Grant. um The other thing that you brought up about burnout is so important.

A

I think it's so easy to fall into that as a maintainer, because you have you feel, like you, have this responsibility to keep the project going um and you especially since your Project's used by so many people like so many different companies, you're like if I stop, will it all fall apart and I feel like that?

A

A lot not just for like I, don't really maintain that many big projects or anything but just in general, like when I, was doing a non-profit coding boot camp I was like nobody can do this, except for me, and my therapist was like trust me.

A

There are more people that could do what you're doing, but he's like he had that similar experience on like he wanted to quit his job because he was so exhausted and he was like they'll never find anyone else like me and when he came back to visit, they literally found someone that, like even looked like him, so that made me realize you know what in projects or in in different things, I'm not always needed, like I I'm. My hope is helpful, like my.

A

My knowledge is helpful, but they can't find somebody else, um and the last thing you brought up was around diversity, and that is a question. I was planning to ask you anyway, so I'm glad you brought it up and I agree with you like for me, even getting into open source I kind of didn't see the point at first, because I was like I already get paid to code and I don't have time to do free work so that that that does make sense.

A

As a problem I think it's, we got to figure out a better way to make open source more sustainable like financially possible and then also just explaining to people the benefits and creating awareness around these projects and just making sure it's an inclusive environment that people would want to be in.

B

Absolutely I mean honestly, you make me like you're, giving me kind of good ideas that I things that I haven't thought about right, which is like raising awareness about the benefits like. Why should my story be unique like? Why? Should it just be me who ends up on an open source project from being passionate about it and then gets a job later from being involved in the ecosystem?

B

Right, like uh you know, maybe maybe there's something like uh you know, something that just comes to mind is like having this like, not intern program, but like this ability to like roster yourself on an open source project and your act, your activity. Slowly like puts you on a list of potential. You know employers might be like hey I need.

B

Somebody who needs to like you know, I need somebody who contributes a bunch to webpack or understands how devtools work or modules work and, like you know, you know seeing that you know like maybe elevating those opportunities so that they're more common right and maybe that will help people be like. Oh yeah, I totally want to be an open source. More.

A

Yeah no I love that suggestion. That's awesome, I'm, just going to highlight things that people said someone said just I just open source. The project forget on get my GitHub for college students. Congrats. That's awesome and Kevin thing said um I think in in regards to how you've explained webpack, you can now explain it to his kids, nice.

B

Nice yeah, if you can explain it to a five-year-old, any Dev, can jump in so yeah. That's.

A

Great um and then somebody said thanks for mentioning Mozilla grants, um this was new to me. It was new to me as well. I didn't even consider that as an option for for people to continue their projects and um Chrissy said um for the diversity part I. Think supporting programs like outreachy um could be a good start. That's.

B

A great and I'll totally look into that because, like I want to have a great answer for this story like yeah, it I, don't think anybody has a good one yet and it'd be great to you know, pave the way. If we can.

A

Yeah love that um I think we kind of like almost went through all of those questions and I know we. We have a hard time on it, um so I want to move into the non-technical fun. Questions I like to ask is that okay, with you or.

B

Did you have any other thing with that? Okay, honestly so I also double checked. I can I have like. Probably we can go over 10 minutes, I double check with my manager, so we're good.

A

Oh awesome: oh wait.

B

If you want to go over 10 minutes, just you know, go ahead. The.

A

Only the only other thing, I think I skipped is like how can people contribute to webpack I guess it might like for larger projects when you're new to an open source project? It might be a little bit hard but like what are other things that people can do.

B

Yeah so like there's two main ones that like come to mind right so like one of the cool things, I'll give three. So the first one is, um you can contribute just by going to our open source, repo right, so github.com webpack, slash webpack um and we have a contributing dot, MD markdown file, which like gives you a huge overview of how to contribute, um and then the second thing that I think like so that's how you get kind of onboarded or get started, which is great and then I think.

B

The second thing you should go look at is our one project board. So, like I spent two months with our core team, you know the last couple months merging all of our priorities into one GitHub board right, so you can go to our project board. uh You know like I can share a link afterwards or you know maybe uh I'll just copy the link to you and then that could be a resource for folks um and so like this gives us, like. You know this board that we have on our.

B

Our repo is essentially like a. It is the definitive truth of the things that we are working on and we think are important. So literally, if you want to go work on one of those things all you have to do is drop a comment in in the issue you can you know you can reach out to me on Twitter. You can email me, you know like whatever, like any way you can try to get a hold of me.

B

Do it right, like uh one of the things I probably won't do is like one-on-one tutoring for like how to jump onto a project, but what we would, but what we will do is like we collaborate on GitHub issues to help guide people on how to contribute all the time, and so like I'm, more than happy to to help enable anybody to get started. A lot of issues are a little more complex. Some are more easy and we try to label them.

B

You know the best that we can so that it's easy to see like what to contribute to in the same way like you can contribute by jumping into our GitHub discussions and just like helping people um you can and help with our documentation like uh when we merge a PR in webpack. We have a checkbox that says this should have documentation, and so, if you go to our docs page, you'll actually see a bunch of auto-generated, um PR's or I'm.

B

Sorry auto generated issues that give you a link to the pr of the change that was made, and it just says: hey. We need docs for this. It's like you could, like you know, you don't even have to know the exact feature you can look at the original PR that it's linked to you can. You know, have a message to the author and be like hey. Is this right? Like is you know?

B

Is this doc update, correct and, like uh you, can instantly start contributing right away to our docs as well, and not only that we have an entire org, so github.com webpack contrib, that is all of our loaders and all of our plugins. So let's just say you want to like you know you think something's really cool in a specific loader or a plug-in.

B

You can go, go ahead and just help do maintenance work there, because all of these things need upkeep, and so you know there's no wrong way to contribute, um and if you have a better idea, you can always just ask you know, reach out and say like Hey. Would this be good or hey I want to work on this project? You know put yourself out there and you know the least that I can say is that I'll try my best to help bring you closer or help.

B

You know Elevate that passion that you have for wanting to contribute to webpack.

A

Yes, thank you yeah, and it is it's so rewarding to put yourself out there in an open source. So someone was asking if I can paste the URL, unfortunately GitHub disables links so just for, like spam content stuff like that, so I can't actually paste it, but I do I am showing them on the screen and if you miss it, this is recorded so just re-watch it and go ahead and manually type it in. But the repository is github.com webpack sex, webpack and then the project board um is github.com.

A

Org, slash, webpack, slash, project, slash four, so definitely a bit of a mouthful but definitely check that out. Put yourself out there like if you've heard Sean story earlier, I. Think that's like a perfect example of why you should put yourself out there um only one more question about your journey and then um it's just like, what's been the most rewarding part for you of maintaining a tablet.

B

You know, like I, thought this one made me think a bit um I think like it's a balance right like I got into webpack because, like I love, building tools that make me feel the way that I did when I first tried it right and so like I love, giving developers a sense of joy, and so like one of the things is like creating a feature that solves somebody's problem and makes their life easier feels so good right, um but I think also like it's rewarding because, like if I wouldn't be here today, you know working at Microsoft.

B

You know helping uh you know being on a team that maintains this huge model, repo for OneDrive in SharePoint that uses webpack like you know, I, wouldn't you know if I, if I didn't contribute right so, like I think like there's, so many like different ways to to kind of count.

B

My blessings here, I think also like being able to to let other people work on open source full-time right, like we have a full-time maintainer on our project um and the fact that we can enable him to do that as his full-time job feels great right, because, like yeah, there needs to be more sustainability. So, like I, think it's just it's so satisfying to help other people.

B

You know um you know, pursue their passions or to make their their their Dev experiences better, and you know like I, think that's why I continue to to help maintain the project today.

A

I love it I love it. You seem like someone that just likes to help people. Oh.

B

No, it feels good.

A

Yeah um someone, oh Laura, said um something: I would love for projects to do if they have bandwidth is office hours. Yes, I used to be a professor, like live onboarding for new contributors.

B

Once a month, we have a webpack maintainer roadmap meeting and we it's open to the public so like. uh If you are interested, you know, if anybody is interested in this, they like DM me, your email and I'll put you on the invite. um It's it's like. A teams like meeting and so like I can't send a public link to it, but I'm happy like we use this for questioning answers, especially for large companies that you like Shopify, is a great example or like some folks at other teams at Microsoft that use webpack.

B

They get to jump in and join and ask questions so like we treat this as like an office, hours, opportunity and I. Think that's great, like I, completely agree with you. One of the things I want to find is like a better format so that it's more public accessible but yeah yeah. That's awesome.

A

Yeah I want to do the same. I maintain a very, very simple project, very like not that much code, um but I I. The only I want to like twitch stream, helping people and I did start off doing that. But I know some people are like not as comfortable like being being streamed, but yeah I. Think that's like a great idea um to do as well: okay, cool now, switching in wow it hit two o'clock switching into the non-technical questions and then we will wrap it up up.

A

So what was the first programming language that you ever learned.

B

Apple script I was actually so I didn't go to school, for computer science, I'm, actually a music Major, and so when I got out of college I just wanted a tech support, job right and so uh like something that paid better than like being a server or a waiter at a restaurant. So um one of the things I started doing as I got kind of tired of doing the same tasks over and over again, so I started.

B

Writing Apple script scripts to automate my tech support process through the day, and so that's kind of like where I got my first taste of programming.

A

That is so exciting hold on.

A

Could you, okay, cool I like switched from browsers, really quickly and I was like which one was I on.

A

My other questions to you is: uh if money wasn't an issue, how would you like ideally spend your time.

B

uh So, like I think about this, sometimes uh like, if I so, for like job wise like if I could choose any dream, job and money didn't matter, I think I'd, probably like you know, retire from Microsoft and like go be a coral conductor. Like um you know, I have a music degree. Coral conducting was like my passion, I love, vocal performance um and I used to direct choirs. uh You know on the side when I was living in Nebraska and so like I would love to go.

B

Do that for Co, for like universities and like maybe do more, maybe get my doctorate in music. Like music, was one of my passions so like? Maybe that would be one thing. um I think non-job-wise, like I, just spend more time in the mountains. Hiking like I love, hiking I, do crazy hikes every Saturday morning um or like every other Saturday morning, and so like I love it out here in the Pacific, Northwest and I would love to like just go travel and do more of that, or just like spend time with my family.

A

Yes, I love, how multifaceted you are and actually a lot of like people who, like to code, they love music. When my husband, he he's been a musician since he was a kid and I'm like I, wonder if there's like some kind of correlation I, don't know like being able to remind you, yeah yeah,.

B

A

Yeah I, don't know okay. My other question is I know you work on webpacks. So maybe that's your dream open source project, but uh if, if you have another dream open source project that you would love to create one day, I'd love to hear about it.

B

Okay, so, like I thought about this question a lot and like there maybe isn't like one exact, open source project, I would want to work for like, um but like one I just thought about attributes of a dream, open source project so, like I said like if I wanted to like, chose another project like some things that I would want from. It are like one that has fully funded maintainers I, think that would be absolute dream or like um one that has like a diverse and fully funded group of maintainers um one.

B

That's not like commercial open source like no offense to anybody out there who, like makes commercial open source like there's a lot of cool stuff. But one of the problems is that at the end of the day, you're like a VC funded or, like you know, you're funding yourself kind of through the work you do and so, like you know, your motives are always going to be. How do we make money to sustain ourselves and like one of the things we love about webpack? Is that our goal is?

B

How do we solve problem for people and, let's figure out how to fund it? You know as a secondary goal right so, like um you know, I I think one of these dream attributes is like one that is fully funded, that isn't commercial open source where, like solving problems for a diverse group of people, um you know is at the Forefront right really listening to customer signals and then I think maybe like the last thing is an optional bullet point. You know it would be cool to work on like an intersection between music and Technology.

B

Like there's a lot of cool stuff out there, like you know who knows like, maybe if I ever got the time to to look into it, I would but yeah I.

A

Think those would be some of the things, maybe something like Sonic pie or any I. Don't know anything can be cold. This is awesome. um Laura said, computer science is math, um oh computer science is math, you can see, and music is math. You can hear that's cool I like that.

A

That's my version of why there's such a large intersection um between those interest groups and then someone also asked um that they're they're they they mention their economists, pretending to develop things or your Economist and a developer own it um and they said at what age did you take that turn?

A

um I started learning to code when I was 21., so it's pretty not not that young yeah.

B

Like I started when I was like 24, I, think or 25 like it's, never too late right and what's so cool about learning to program, it's like the resources are everywhere right, yeah, there's so many resources for just getting started like my second language was Ruby right and so like I, remember just using the try, Ruby tutorials.

A

B

You know all there's like like what is it code uh freecodecamp.org like non-profits that just dedicate themselves to giving you the bootstraps to get a career in Tech right like yeah, you know it. It's crazy to think that, like you know, I was in tech, support, learning how to write Ruby and Objective C, eventually and being promoted to software engineer. I can't believe, where I'm at today right, but it's possible, and anybody can do it right so put yourself out. There learn to be able to fail. I think.

B

Maybe that's one of the things about being a music Major. Is that every time you touch an instrument learn a song like you're, failing right until you get it perfect, and you know what you may never get it perfect and so, like I, think being conditioned to be okay with failing makes you better at getting started with programming right because you're already, like oh I, messed it up, okay, whatever like what's new, let's, let's try again, you know let continue to iterate as you learn and so like having.

B

um You know like a strong. What's the way like a tough exterior towards you know, approaching failure I think is huge and takes you a long way in learning how to program.

A

Yeah I love that you said that yeah I I, try to think of uh failure as Like Me growing. Right, like this is like I might be having imposter syndrome about something, but I'm like this is the moment of growth like this challenge is so love that that you pointed that out. Okay, we have like I want to make sure we end that at the the the temperature.

B

Sure yeah no worries. We have three minutes.

A

So do you say for the word gif, do you say GIF or do you say, GIF I.

B

Said GIF I said: give.

A

Most of the time I had to think about this I think it's gift. Okay and then, what's your favorite Beyonce song.

B

I spent some time researching, This and like in my workout this morning, I was playing the Beyonce discography I think it's a tie between two songs, um so one is break my soul, which is an absolute Banger. Yes, the best part is when she's like can I break myself.

B

And then the second one is super power featuring Frank Ocean, I'm.

A

A huge Frank Ocean.

B

A

B

Literally, all the harmonies and everything like I I grew up in Detroit and so I.

A

B

A huge exposure to r b and so I, just I love that song. It's really.

A

I asked this: every single, every single we've had a period of like people who've never listened to Beyonce or they're, like my heart, okay, so thank you so much. There's.

B

Always a favorite in there right, like you,.

A

Just gotta find yeah I'm like y'all, just gotta, listen, you're, gonna find one that you uh there's way too many songs for you to not. Okay. So exactly.

B

A

You so much for your time. I really felt this like twitch stream to be really enjoyable like this. This episode was really really great. We have other people saying like it was good so good to listen to this session. I appreciate the the comments as well.

A

um I love that y'all were like really engaged you added in other um thoughts and asked really great questions.

A

um So I really appreciate it um and then just reminding you all if you wanted to contribute or or find your way into, webpack in some way go ahead to github.com webpack, slash, webpack and there's also the project board um here as well. You might have to re-watch to make sure you catch the link.

B

A

There any last things you wanted to promote or anything that you want people to watch out for later on.

B

um You know I, guess like you, if you don't follow me on Twitter, like check me out on Twitter, my Twitter handles at the Larkin, um with with two ends uh like check me out on Twitter like find me on GitHub. It's the same, handle um you know, I guess, like you, take a look at the projects we work on at Microsoft on my team, which is Microsoft, slash rushstack, um especially if you're doing stuff in a big Mana repo, so but otherwise like.

B

Thank you everybody for asking such good questions like we love I love the trolling like I I, like people challenging you know like beat users keep using, beat guys like you know, but if you need to scale you know use webpack like whatever like uh use the tool that just makes you feel good and makes your development more productive. I think that's most important to me. So thank you for having me so much.

A

Of course, all right, y'all have a great rest of your Friday bye, see ya foreign.