Skip to main content
794

July 12th, 2024 × #JavaScript#OpenSource#CodeTools

Prettier JavaScript with Vjeux

Interview with Prettier creator Christopher "Vjeux" Chedeau about the origins, growth, funding status and future roadmap of the ubiquitous code formatter.

or
Topic 0 00:00

Transcript

Wes Bos

It's. Right? That's how you

Guest 1

Veju? Veju.

Guest 1

Veju. Veju. Veju. Veju. Yeah. So the story behind this video games, is called Je Video.

Topic 1 00:22

Veju came up with his username by swapping letters in "Je Video"

Guest 1

And so what I did was to swap the 2. So, Azure Video Video and read the video part of video. It's a and so it's stupid, but, even after, like, 20 years, it's, still, has never been in any conflicts on whatever network or, like, service I'm I'm hitting for and for a 5 letter, like, it's not it's pretty un unheard of, so I'm sticking with it.

Wes Bos

That's that's fantastic. I'm I'm I always love hearing the, like, behind the scenes on that type of thing. And, in Canada, we grew up learning French as well. And my, my line to anyone whoever speaks French is.

Wes Bos

Wes, we'll we'll we'll just let's just roll with that. That's a good intro. Welcome to Syntax, everybody. We've got, Christopher on today.

Wes Bos

He is kind of prolific, engineer at Meta, cocreator of React Native, Prettier, creator of Excalidraw, yoga, and React Scott,

Topic 2 01:30

Prettier sponsor ad read

Scott Tolinski

quite a bit, behind him. And here we're here today to talk, I think, specifically about Prettier, but we'll kinda see where that goes. So welcome. Thanks so much for coming on. Yeah. Thank you so much for inviting me, and happy to talk about Prettier or any of the above or, like, other stuff. Nice. But before we get going, if you want your errors to be laid out in a prettier way so that you can read them and actually find exactly what's going on, head on over to your century.ioforward/ syntax.

Scott Tolinski

And, honestly, it's it's really the best way to get a good visual on everything that's going on in your app from errors to performance to just even understanding, what's going on with your users and and how your app is functioning. So, thank you so much to Sanity for presenting this podcast.

Wes Bos

Right on. Alright. So you'll probably anyone listening to the v or watching the video, you'll probably notice that we're all kinda looking silly wearing the same T shirt right now.

Wes Bos

But, this is sort of the announcement of Syntax is doing, open source collabs with different open source projects. So we are teaming up with Prettier. It's gonna be 1 1 of the very first projects, and we're releasing this really cool t shirt.

Topic 3 02:28

Announcing Syntax and Prettier t-shirt collaboration

Wes Bos

So this is a Prettier t shirt with all of the colors of the Prettier logo, which is quite a lot. It took quite a bit to screen ESLint, and then we've got the syntax on the arm here.

Wes Bos

And the probably the most important part is that $10 for every shirt that is is sold goes toward the prettier project, which is we're really excited to do. So if you wanna grab 1 yourself, go to century.shop or just go to syntax.fm and click on swag in the top, and you can grab 1 of your shirts before they are all gone. So pretty stoked, that we're we're doing this, and, appreciate Prettier being, 1 of the first to guinea pig this with us. Yeah. For sure. Alright. So let's let's give a a quick introduction.

Wes Bos

Who are you, and what do you do? III did, like,

Topic 4 03:31

Veju is an IC at Meta after managing the Yarn team

Guest 1

what your background is, but, like like, what's your job? What do you do? Yeah. So so I'm, like, a software engineer at Meta. And so I've been a manager, for 4 Yarn, and so now I'm back to IC.

Guest 1

And the the way I think about it, is I'm basically trying to, help people, like, be more productive.

Guest 1

And 1 of the very interesting thing, when I transitioned, to being a manager is I thought when I joined the company that, like, hey, software engineers are the best. Like, manager sucks. Like, power, like, to the people and everything.

Topic 5 04:09

Realized managers play a big role in project success

Guest 1

But 1 thing that I quickly realized is that in practice, like, the engineer are, like, the the people actually doing the work and everything.

Guest 1

But I saw, like, many examples where there were, like, really good engineers, but they, like, not Wes not working on, like, something that really worked out, like, super well. And on the other part, they were, like, engineer, I didn't consider, like, superstar, like, really good and everything, but ended up, like, consistently delivering, like, really amazing stuff. And then I realized, okay, what's going on? Like, why is that? And I found out that the manager were actually playing a big part of the equation. And so, like, managers, like, for example, Tom Okino on React, like, anything that, like, his team was doing, like, ended up, like, being, like, super impactful, super powerful, and everything.

Guest 1

And so this, like, really, like, intrigued me. And, I started ended up, like, like going more into that branch of the world.

Guest 1

And and this is, like so I've been a manager for 4 years, and, 1 thing I realized is that, a lot of the, like, the, like, how to make products successful is helping, like, a bunch of people working together on this. And this JS, like, right now, like, this, podcast is around, like, open source and all those things together, like, similar. And so I see this around open source. It's like a lot of people start with open source JS, like, hey, I'm coding something and like I'm like creating stuff. But at some ESLint, the it transitioned to being Node maintaining this project. Now I'm like getting a bunch of people working together to contribute.

Topic 6 05:43

Veju organizes events to connect people and enable collaboration

Guest 1

And those are like all the skills that like a manager is doing, but a lot of people Yarn doing this, like, end up, like, accidentally, like, falling into this, and don't have, like, the proper training, don't have, like, the mindset and those kind of things. And so 1 thing I found JS, like, actually, going, like, officially as a manager, and, like, having, like, all of the amazing, like, manager training that we have at the company. And this is something that there's been manager for 1000 Yarn, and so there's a lot of wealth of knowledge. And so it really helped me, grow. And now I'm back to, Individual Contributor, but a lot of the thing I'm doing is less hands hands on coding and more like how do you find, like, the, like, amazing people who have amazing ideas and everything, and how do you help them, like, like be on the, like, really a poor trajectory? And like how do you get, like, projects started, and project going, and those kind of things? So my job right now is, like, I, like, we just had our performance review, and I I mentioned, like, I'm basically an, I've been an events planner this half. So I organize a bunch of events. So people like get to know each other and get to work on like really cool stuff. So Wes

Wes Bos

up.

Wes Bos

That's really interesting. And would you say that that's why you've had so many successful open source projects over the time? Because, like like, Prettier alone is a massive, massive project. I don't know what the numbers are on it, but it's it's probably millions of downloads a a week. But that's just 1 of like, you've cocreator of React Native, Excalidraw, which is its own business, I believe, Yoga, which is, like, the layout engine for React Native.

Topic 7 07:25

Veju attracted to crazy, ambitious projects with risk

Wes Bos

Is that why you're you're obviously, you're you're a good engineer. Right? But a lot of these projects don't often grow as large as this without somebody managing and organizing it. Yeah. So 1 thing,

Guest 1

like, I realized is that, like, I'm, like, attracted and addicted to, like, crazy projects.

Guest 1

And so like, this is first, like Scott everybody is like, excited about this kind of thing. And not everybody is like willing to take the same amount of risk I'm willing to take. And so this is like 1 part. But the 2nd part is, a lot of times, like, I'm spending a lot of, like, mindset and, like, time thinking about, like, how do we make this project massively successful? And so this is, like, a lot of people I know are like, hey, that's this problem, like, oh, how do we solve this problem and everything? But they don't go to, like, thinking, like, in 5 years or in 10 years, like, how do we actually make it happen and set the right foundation? And so for this, I pnpm a lot of my time reading Hacker News and listening to podcasts and everything. Trying to figure, okay, what Yarn the things that are happening in the world and, everything? And then, like, my creative mindset is trying to figure out, like, how to apply, like, interesting, like, concepts and everything to, like, other parts that are, like, problems for me. And so for example, like, for Prettier, the thing I've had, like, 1 experience Wes I actually joined the Facebook.

Guest 1

I Yeah. My first experience was, like, okay, I moved halfway across the world for, like, the company, from France originally.

Topic 8 08:58

Bad first pull request experience showed importance of code style consistency

Guest 1

I married my girlfriend so that she could actually come work with me. And my first experience was, like, oh, there was a very interesting project, and I started coding and, like, sending, like, a pull request the incredible pull request.

Guest 1

And, this engineer, Yuan Tian, like, spends probably, like, half an hour, like, basically, like annotating every single line of my pull request and say, hey, you should put like the space there, like the partition, like, all of those things that like, I didn't think were, like, relevant or important or and so, like, the first impression was, like, why is she spending all of this time? Like, she's, like, super smart and everything, but, like, this is just a waste of time and, like, not setting you up for success.

Guest 1

And so it was, like, my first experiment. I was like, okay, like, this is a problem.

Guest 1

And then, 6 months later, like, I ended up doing the same. Like, somebody joined the team and ended up, like, saying, hey, Node should put, like, all this space and everything. And I started, like, in the 6 months realizing, like, why it's so important.

Guest 1

And the reason it's so important is, like, in practice, if it's, looks different like, first, like, you're spending more time, like, look reading the code and, like, understanding.

Guest 1

But this is, like, only, like, part of the story. The biggest, like, waste of time is, if it's diff like, if there's 2 ways to do something, then people are going to argue to death around, like, which way we're going to do, to use. And some people are going to be pro something, against something, and then there's going to be a lot of work, like, then to, like, start migrating 1 way to the other and, like, a lot of negotiation and, like, people, like, talking and everything.

Guest 1

And this is like this Scott fell to me, like very expensive and like, a big waste of time for, like, at the end of the day, it doesn't matter, like, where the parenthesis are and everything.

Guest 1

So this, this was, like, my, like, experience. I was, like, frustrated and everything, but I didn't have a solution for this.

Topic 9 11:02

Realized inconsistent formatting is a big problem

Guest 1

And so it Wes, like, yep. 1 thing, I'm frustrated, but I don't judge the company. I'm, like, I'm not going to, like, change the system and everything. I'm, like, but I, like, strike down in my head, like, hey, this JS, like, a problem.

Guest 1

And, in ProLer, like, I've seen, Go come up with, like, Go fmt, like a format of for the Go programming language. And I was like, hey, I have this issue, with, like, Discord review and everything. And then, like, somewhere, like, completely different, part of the world, like, that's good, has a formatter. And I'm like, oh, like, there's probably a way at some point in the future to connect the 2. But I, like, didn't make the connection pnpm everything. And then, like, over time, I keep working, kept working, kept working. And then I realized that, like, there's there was a lot of, like, formatting projects, that, like, started, especially for JavaScript, but none of them went anywhere.

Topic 10 11:57

Studied why previous formatters failed to set Prettier up for success

Guest 1

And so for me, it was like, okay. So, like, I had in my head, like, there's this particular, like, solution that could apply, but nobody has gotten it to work.

Guest 1

And so for me, I was like, okay. So now what I need to do is to figure out, like, why, it didn't work.

Guest 1

And, like, my my thinking at this time was, like, the best way to figure out, like, why it didn't work is to actually talk to those people and ask them Okay. Why it didn't work. Like, why did your project, like, not work and everything.

Guest 1

And, a lot of people are, like, worried about doing this and everything, but in practice, like, people have spent, like, hours and, like, weeks and, like, months of their life, like, working on this. They are, like, super excited to geek out on the subjects. And so, like, every single person, like, ended up replying to me, and they all had, like, their reason and those kind of things.

Guest 1

And 1 of the thing I, like, started, thinking about it, and I realized that the reason why they didn't, like, succeed was not because it was not possible, but because the incentives of the project were very different from traditional projects. So if you think about traditional projects, you've got, like, the Pareto Law around, like, you can do, like, 80% of the project in 20% of time. And then, like, the last 20% are taking, like, another 80% of time.

Guest 1

And the the thing JS, it doesn't apply for projects like Prettier.

Topic 11 13:19

Prettier required high upfront investment to handle edge cases

Guest 1

And so it took me until I joined the compiler team within the company, working on new programming language, to realize that for compilers, it has to work 100% or, like, 99.999% of the time. Because if it doesn't compile or, like, doesn't work the way people expect, like, in 1 person at a time, like, they're just not going to use it. Yeah. Yeah. So if you drop it immediately, yeah. JS like, if you start saving your file and then, like, now it no longer validates, so it's no longer pro, like, real JavaScript.

Guest 1

Or even worse, if it actually changes the meaning of the language on your Node, like, you're going to use it once and, like, never again after this, like, really bad experience.

Guest 1

And so the bar for, like, getting something, like, prettier to work Wes, like, we need to be 99.999% accurate and correct.

Guest 1

And this means that the way to run this kind of project is you need to have a lot of upfront costs to actually go through, doing all of this, like, setup and, like, going through, like, most of the, like, edge case and everything. And once it's at this place, now and only now, you can start, like, like, eventualizing it and, like, may having people do it in the sky fix. And because this has a different shape, what I realized, like, most people were doing it as a side project and didn't have the mindset of committing to this, like, hey. I'm going to, like, solve every single edge case until I can actually make use of it.

Guest 1

And so this is where, like, now I had a good idea, but I had like a bunch of work and I had like other things to do in my life and I wasn't like ready to commit. And so what triggered me, it was, during a winter, there was 2 people, James Node and Peter van der Werff, like 1 working at Mozilla and 1 working, at Facebook, Meta.

Topic 12 15:21

Launched Prettier after 2 engineers started similar projects

Guest 1

Both of them during the winter break, like, started hacking on a JavaScript 3 d printer.

Guest 1

And I was like, oh, now that I know all of the things I know about 3 d printer, I know what it is to, like, actually make it successful. Now that there's Wes 2 upstart, going in. Now, like, I was like, yep. This is the time. This is the moment. Mhmm.

Guest 1

And you mentioned around, like, my technical abilities and everything. 1 other thing I realized about myself is I'm not the 1 going to, create the core, like, most difficult part of the of the thing. Like, the way I think about it is, like, there's going to be, like, people that are, like, really good at this. And what I'm really good at is, like, turning this into, like, a product.

Topic 13 16:01

Veju focuses on turning projects into successful products

Scott Tolinski

Okay.

Wes Bos

It's that manager mindset that you probably cultivated. And that's why Prettier has such a cool logo and all of that kind of stuff.

Guest 1

Yeah. And so those 2 people ended up, walking on the like, during the winter. And what I did was to, like, do Wes tests, for both of them, like the same so that like they could actually compete. And I would like create a little ball around like, hey, JS there like all of the AST, like abstract syntax tree Node that you support and everything? Yeah. And I would actually run it on top of real code Bos and say, hey, this doesn't look good, this doesn't look good, those kind of things. And so I got both of them to compete during the winter break. And at the end of the winter break, both of them were like, yeah, Wes a fun winter, but I got to go back to my real Bos? So see you.

Guest 1

And I was like, oh, shit. Like, this is happening again. And so this is when I was like, nope. Like, I'm going to, like, like, actually make it happen. And so this is why I basically told my manager, hey, sorry.

Guest 1

Whatever I'm doing, I'm going to work on this, and Node up, like, really doing it. And my mindset for this was I knew I need to do all of the edge cases. And so I basically cleared my calendar, and every day I would, like, fix, like, 1, 2, 3, 4, 5 edge cases.

Topic 14 17:00

Spent 6 months fixing Prettier edge cases before rollout

Guest 1

And did this for, like, 6 months.

Guest 1

And, like, now at the end of 6 months, we were, like, at the end of 3 months after this, we were in a place where, like, we could reasonably, like, update, like, start converting file within the Facebook repository.

Guest 1

And at the end of 6 months, we had, like, half of the, file, like, the JavaScript files converted over. And so now for the this rollout process, 1 of my golden rule was I'm not going to update any single file myself.

Topic 15 17:35

Rolled out Prettier across Facebook code without automated edits

Guest 1

And the reason I did this is because, like, formatting was so, like, visceral, to people, like, to the identity and everything.

Guest 1

Like, I didn't want to impose anything on them.

Topic 16 18:00

Let developers opt-in to prove Prettier quality

Guest 1

And for me, the measure of success is for the project to be so good that people by themselves are going to update their own codebase.

Guest 1

And so, this basically set the standard, like, super, super high. So, like, if we succeeded, it was because the product was good and not because I forced it on anybody.

Wes Bos

Okay. So you didn't you didn't just make a big commit Wes you updated 300, 000 files of Yeah. This month's repo?

Guest 1

Yeah. And so in practice, the the now, like, my role shifted away from, like, myself coding everything to now, like, basically being, like, a manager, like a product product manager, is now Wes need a lot of integration. So we need the integration with, like, the ID. We need integration, with, like, the source control to, like, prevent things from landing.

Guest 1

Did integrations to, like, those, like, big commits, like, hey, how do you write those code mods to, like, update? And so I ended up, like, getting people excited about, like, building those kind of things and, helping the people that are, like, actually doing the, the updates to, like, hey, is there anything any issue you're facing now I'm going to be helpful? And the other thing I've started doing is around the community open source. So for the first half, I had, like, half of the commits, of the Deno, and the second half, I had, like, 1 quarter of the commits.

Topic 17 19:28

Reduced own Prettier commits over time to grow community

Guest 1

And, Node, like, I'm I stopped committing. And so now I basically grew a lot of people to start, like, committing and contributing and the kind of thing.

Wes Bos

Wow. And Wow. That's quite the story. I'm curious what your personal opinion is is should you run Prettier on save or on commit?

Guest 1

Yeah. So I would say you're going to get the most value if you run it on save. And so Okay. Good. And this was, like, a very big surprise for me. So when I did, like, Prettier, my goal Wes, like, at review time, to, like, Scott all of the nitpicking and everything.

Topic 18 19:46

Should run Prettier on save for best developer experience

Guest 1

But 1 thing I realized is that if you do it on save, not only do you remove all the nitpicking, now you also remove, like, actually, having to manually, like, format your code. Totally. And this is, the thing I also realized is that, why are people so attached to, like, the syntax and the formatting and everything? And, my theory around this is, because you are doing this every for every single line of code you're doing, you'll have to monthly think and monthly, like, do it. And so if you do something like, 5, 000 times a day, like, I don't know, like a 1000000 times over your career, now it's basically part of you because you've done it so much. And so now if somebody else asks you to do something, like, in a different way, now you have to, like, fight against, like, your own identity.

Guest 1

And so 1 thing I realized is that by removing this entire step from your developer workflow, now, people actually, like, stop formatting the code themselves. And so now it's no longer, like, part of the identity.

Topic 19 20:55

Running on save removes manual formatting from muscle memory

Guest 1

And so now, like, changing the way things are is actually, like, no longer, like, really hurting their soul and everything. And so, like, they don't care. And they're like, oh change it to like 4 spaces, yep sure, like change in the config, like update the code and like, Wes things. And they don't care. So I think this has the biggest mental shift I've seen. Yeah. And I didn't predict any of this, but, this JS, like, like, it's been, like, super fascinating to observe.

Topic 20 21:34

Limited options helped Prettier adoption

Wes Bos

And do you think the limited amount of options in Prettier also helped with that? Because, initially, when I saw Prettier, I was like, yeah. This is cool, but, like, there's no settings for the stuff I want. You know? I wanna be able to wrap my arrays of 4 items per line, which I still want. But a lot of the things I'm just like, well, that's the settings. I guess I just better accept it. Do you think that helped the adoption of it?

Guest 1

So So I think it helped a bit.

Guest 1

But, there's a lot of, like, people, like, being, like, super, like, like, zealous about, like, the option pnpm everything. For me, the the biggest constraint was, the actual implementation.

Guest 1

And so I personally was not sure that I could actually build, like, a really good pretty printer for, like, 1 proper, like, standards.

Topic 21 22:16

Implementation complexity limited options more than opinion

Guest 1

And so, like, my goal was, like, okay. Before we add any option and everything, like, let's make sure it works for, like, 1 specific, set of options.

Guest 1

And, at the end of the day, like, we've been able to do it once 1. But the issue is, like, all of like, it was really hard and, like, there's a bunch of, like, things outcoded, and so, like, 1 is, like, hard to generalize.

Guest 1

The second 1 is, in practice, for the options, 1 of the things is, like, each option, like, adds a lot of complexity, not only for the internal implementation, but also for Wes you start deploying it. Now, like, your, like, Versus Node has a different set of option than, like, your, like, source control integration or, like, you're, like, like, merging, like, 2 reports together, and they have slightly different things. And so the more, like, combinational, like, options you have, the more you're going to face those those things. And so my goal was, like, for it to be, like, super easy to, like, add up Preacher, And I knew that, like, adding more options is going to, like, add, like, issues when, like, deploying in, like, the real, like, the real world.

Guest 1

Yeah. And so in practice, like, like, some people, like, in Hennessy Jamslin, Wes, like, hey, we're not going to have any options.

Topic 22 23:41

Heuristics used for edge cases like chains and object literals

Guest 1

But for me, this was not realistic because at the time, like, the, like, semi versus no semi Wes, like, war was, like, raging and everything.

Guest 1

And the issue is, like, if you have, like, 0 options, like, people are not going to use it simply because of the fact that, like, they don't have, like, their, like, critical option that they care about. And so, like, my mindset was, like, let's add the minimum amount of options that people are not going to be like, yep, I'm never going to use this project if there's not this option.

Guest 1

But anything where, like, they can be convinced, to take the bullet and everything, let's not add an option for this. So this was, like, my mindset, around this topic.

Topic 23 24:30

Current options sufficient for adoption

Guest 1

But I think at this point, is it actually going to provide value? Because, like, now people care less about, like, every specifics of, like, how the code is formatted.

Guest 1

I don't think, it's really going to be, like, what makes Prettier, like, 10 x more popular. So I don't think like, I think the status quo is, like, in good shape. So Yeah. I agree. I I think, like, in JavaScript land, we need less

Wes Bos

options for everything. So this is just 1 of them that's sort of forced upon us, and we're we're okay with it. Sorry. Scott. The most controversial

Topic 24 24:54

JavaScript needs less options

Scott Tolinski

default setting that you had?

Guest 1

I think, for the default setting, weirdly enough, it Wes, the, like, curly braces. How do we format, what's inside of curly braces? And this was not controversial, because, like, we intended it, but it was controversial because, it was really hard to actually implement it. And along this line JS, like, the dots, like, the function chaining.

Topic 25 25:08

Kept double quotes as default to avoid breaking changes

Guest 1

And 1 of the thing that, a lot of the, like, the way you write a pretty printer JS to try to understand, like, what is the semantic of the code you're trying to ESLint, and then, like, writes, like, a format that, like, shows the code using the same semantics.

Guest 1

But the issue with, like, the curly braces, like, the objects, definition, and, the, like, operator chaining, like, the Scott, is that, there's a lot of different ways people use and abuse this to, like, mean, like, very, very different things.

Guest 1

And so for example, for the Dutch chaining, people are just using method code and everything, but people are doing entire DSLs Wes they can write your whole SQL, like query using those kind of things.

Guest 1

And from just the AST, like the syntax, tree, it's really hard to tell, like, in which configuration you're in.

Guest 1

And so for this, what we had to do is to have to do, like, heuristics that work, like, for most cases and then some things that you're going to, like, actually read the way the source code is inputted. And so for example, for, like, the objects, if you put a new line anywhere inside, it's always going to experience. And if you need to, like, re put it in 1 line, then you need to, like, remove, all of the empty, the, the new lines. And so this is, something that we had to, like, think. And this 1 was more like a technical, like, challenge and, like, in the semantics and everything, more so than, like, addition we wanted.

Guest 1

Otherwise, what the way we've been looking at options is, we look at the issues. We solve them by, like, the number of comments and stars and a vote and everything. And then, we're like, okay. Now this is, like, the most common 1 people are, like, like, fighting about and everything. So now we decide, like, does it make the cuts or not? And at this point, like, all of the ones that are, like, really, like, blocking people adoption, like, we put them ESLint, and the rest is, like, to in my opinion, not really to to that, point. And so this is, like, a decision that I had to make. And this is, like the weird thing about this project is a lot of people, like, we Node, like, decision making.

Guest 1

And in practice, I ended up being the Node deciding, like, a lot, like, a lot of how the syntax is, like, being, like, printed.

Guest 1

Yeah. And so now, like, almost all everybody is using it. Now I can say, like, hey. All of the JavaScript code written in the world, like, I decided, like, not It was because of you.

Wes Bos

Yeah.

Wes Bos

My brain. Oh, man. I'm curious. Inside of Facebook, do you use semicolons or not?

Topic 26 28:19

Facebook uses semicolons

Guest 1

We use semicolons.

Wes Bos

Okay. So you have to turn that on then for for all of Facebook? I mean, this is the default, but yeah. Oh, what is the default? Okay. For some reason, I thought it was no semis was was the default.

Topic 27 28:32

Double quotes default differs from Facebook's single quotes

Scott Tolinski

That's because it's my default wise.

Guest 1

Oh. The biggest default is, right now, like, this is using double quotes for strings. And at Facebook, we use single quotes.

Guest 1

And, my my gut feeling is that, in the industry, like, most people are using single quotes.

Guest 1

But, James Long, when you Scott the project, like, use double quotes.

Topic 28 28:51

Avoided quote change to prevent breakage

Guest 1

And, 1 other thing that JS really important if you want to, like, have the project be successful is avoid at all cost any kind of breaking change.

Guest 1

And so, we, like, didn't deem that, like, there was enough of a strong case to, like, change from double quote to single quote to justify this. And so we've kept, like, double quotes, like, since the beginning of time, around this. So

Scott Tolinski

Nice. Yeah.

Wes Bos

How do you convince your boss to let you just work on this for for 6 months? You know? Like, I you probably have a bit of a track record to be like, hey. Like, I I know what I'm doing.

Wes Bos

Was it just like this is going to benefit Facebook as a whole as well as the open source community?

Topic 29 29:35

Veju took Prettier time without manager approval

Guest 1

Yeah. So this 1, like, honestly, like, I didn't give him gave him a choice. I was like, hey. I'm going to work on this.

Guest 1

And, in practice, I was supposed to do something else. So, like, my, like, performance was not, like, the best, given the impact it had. And, in practice, I I ended up, like, switching team at the end of 6 months to work on, like, the new programming language. Like, well, like, this kind of work was, like, more in line with, like, what my team and my manager were doing.

Topic 30 30:05

Moved teams after Prettier launch for better alignment

Guest 1

And so this is, 1 thing I've learned through the experience and, like, through, like, all of my projects is, if you work on, like, crazy, like, ambitious project like this, that's usually not going to be a team that is, like, the right place for it.

Guest 1

Because, like, usually, like, the organizational structure, like, JS, like, staffing thing that already exists and, like, is, like, relatively, like, like, stable, in times. And so if you want to, like, build something new that's, like, not connecting to anything else, now you're going to be in a bit of a weird, like, setup. And so the way I've been, like, setting myself up is finding, like, a manager at an organization that, like, was okay for me to, like, oh, at some point, like, just disappear for, like, 6 months and, like, work on this with the expectation, that, like, if I do this, like, actually going to warp. And, at some point, so, like, I either going to, like, staff a team around it or, like, go back to my main, like, job. And so this is like a negotiation, with, like, your manager and everything. And this is why, like, I say, like, Node a lot of people have this archetype JS because, like, the, like, companies and organizations and everything are not structured, for these kind of things. But 1 other thing with, like, Facebook and Meta is, like, while not structured for this, like, it enables doing all of this. And, I ended up, like, getting, like, warp, because of the success, like, like the next half and, like, me for many years. So this is 1 thing, to think about JS, like, yeah, you're going to be in a weird setup, but you need to embrace it.

Wes Bos

Does Mark Zuckerberg know what Prettier is?

Guest 1

Unclear.

Topic 31 31:47

Unclear if Mark Zuckerberg knows Prettier specifically

Wes Bos

Unclear. I always I always ask that when I meet somebody from Facebook because I'm like I'm like, does Mark Zuckerberg know what React is? And they're like, oh, yeah. Of course. Like, he's he's he's Wes. He's he's big into open source. So I'm I was curious of how far down the open source he goes.

Guest 1

So, like, for I don't know, but I wouldn't be surprised. Like, I've been, like, very, like, had in, like, a few meetings and I've been, like, very, impressed by, like, how, like, knowledgeable he is in, like, all of the segments. Dialed.

Guest 1

Yeah.

Topic 32 32:16

Mark Zuckerberg focused more on products than infrastructure

Guest 1

Now 1 of the things for Mark Zuckerberg is like a lot more like a product person.

Guest 1

And so in practice, like infrastructure, like, the the setup for this is, he lets, the VP of infrastructure, to actually, like, handle all of this, And, he's basically at a high Vercel, hey. This is, like, what I Node. Like, we need everything, but go. But for any, like, product decision, like, he is going to be the 1, doing it. So

Scott Tolinski

Interesting.

Scott Tolinski

So before Prettier, a lot of us used ESLint for even minor formatting stuff.

Scott Tolinski

Was there ever a consideration to just augment ESLint? Or or was the it just always I'm going

Topic 33 32:52

Considered improving ESLint instead of creating Prettier

Guest 1

to take on something new? Yeah. So I think, like, my first, instinct, as I mentioned Wes I did, like, my research JS, like, ESLint had, like, a formatter and a way to format.

Guest 1

The the issue that I found, with, like, the way EASTIN handles thing is, is the the idea is that's going to look for, like, what is broken.

Guest 1

And then it's going to say, hey. Like, this goes above the limit, so now what are the things I can do to fix it? And the issue is that if you have this architecture as a construction, now you're going to, like, figure like, what you need to solve JS, how do I fix this thing? And then, oh, something else may be broken because I fixed this, and so how do I fix it? And now, like, how do you construct a system warp, like, if you let it run, it's going to converge to something that actually, like, has all of the problems fixed.

Topic 34 33:53

ESLint formats by fixing detected problems vs. printing nicely

Guest 1

And I couldn't find in my mind or in the, like, literature or, like, any project that were able to, like, get to this point.

Guest 1

And so, like, in the, like, theory, it's called, like, a fixed ESLint.

Guest 1

It's like, oh, you do change it. At some point, it's not it's going to converge to a fixed point.

Guest 1

And so instead, like, the project I've seen work around, like, formatting Node, like Go fmt, like, Rust FMT, the way they were doing it is, they're going to ESLint, like, to print the entire thing from scratch.

Topic 35 34:25

Other formatters print entirely new correctly formatted code

Guest 1

And then this way, by construction, they are guaranteed, to have, like, correct, like, prints, like prints, respecting some kind of rules.

Guest 1

And so this is the thing that ended up being, the Node motivation of not using ESLint and building something else JS because of this fundamental way things are working.

Guest 1

And, what's happened, what happened, like, I think 2 years ago JS that, Nicolas Zakas Wes like, hey, we're going to deprecate all of the, like, formatting rules within ESLint, use Prettier for this.

Topic 36 34:51

ESLint now defers formatting to Prettier

Guest 1

And, 1 other thing that's very important is Prettier is just a a formatter, so it just, like, moves things around, but it's not a linter. Like, it doesn't actually tell you, hey, you shouldn't be using this or you follow on the o 8.

Guest 1

There are, like, a lot of things that, like, you can do static analysis Bos on Node. And so this JS, like, why, like, the 2 product actually should, work together. Like, there's not 1 that's going to kill the other or vice versa. Like, they want like, they solve a different problem. That makes sense.

Topic 37 35:17

Prettier handles formatting, ESLint handles linting

Scott Tolinski

Yeah. Yeah.

Wes Bos

Definitely. And what are your thoughts on some of the, other, like, rust based ones that that are are popping up. It's not something I've had with an issue of performance, specifically because I'm usually just doing it per file.

Topic 38 35:50

Prettier prioritized speed that was fast enough

Wes Bos

But is there any thought to is it ever slow?

Guest 1

Yeah. So this is something that has always been interesting to me is, for Prettier, like, the the thing for me is that I wanted to be fast enough.

Guest 1

Yeah. And for me, Prettier has always been fast enough.

Guest 1

And, in fact, it was, like, thing that I like to throw and everything. But for all internal purposes, like, file and save, like, if you, like, integrate properly with the idea while you don't restart the Node process all the time, like, if you, like, keep 1 warm in memory, like, it's going to be, like, tens of milliseconds.

Guest 1

And so, like, this is fast. And for, like, when you're, like, doing codebase wide, then in practice, like, within the Facebook codebase, we can, like, reformat everything in another 2 minutes.

Guest 1

That's why you just need to make sure everything is parallelized correctly and these kind of things.

Guest 1

And so for me, it's, like, never been an issue, but people, like, kept saying, like, hey, Prettier, like, it's not fast enough and there's this rust, like, thing happening.

Topic 39 36:41

Rust Prettier implementations drove healthy competition

Guest 1

And at some point, I was, like, so frustrated about this. I said I'm going to put a $10, 000 bounty, to make, like, Rust equivalent of Prettier. Actually, like, from at the same way as Prettier, like, photos of test suite as Prettier. And I'm really excited because Biome actually, like, took on the channel, and now they are able, like, to get, like, the same formatting as Prettier. And so now we have, like, actually, like, 2 projects that are, like, outputting the same, outputs using the same configuration.

Guest 1

So now from the user perspective, like, you can use 1 or the other. Like, I personally don't care. Like, both projects are actually solving the issues I, like, set out to be. Now the underneath, like, things, this JS, like, in practice, there are things in Preacher that could be faster.

Topic 40 37:22

Multiple implementations good as long as formatting consistent

Guest 1

And, also what's frustrating, like, I've never been able to convince anybody, to, to work on this. And so, like, my goal with this churn was also to, like, not snipe somebody into, like, a sick your customers.

Topic 41 37:41

Rust bounty improved Prettier CLI performance

Guest 1

And it actually worked. Fabulous from Pinazzo, ended up spending, 3 months improving the CLI of Prettier. Like, basically, we're writing it from scratch to do a lot less, like, IO reads and, like, a bunch of, like, implementation details. And now it's, like, 10 x faster.

Topic 42 38:12

CLI improvements increased speed 10x

Guest 1

And so, like, a lot of the things that, like, Wes slower than it should be, like, are now, like, much better, place. And so this really helped, like, having both, the Rust implementation now actually, like, formatting the same way and, like, JavaScript, like, being faster.

Guest 1

And so I'm really glad that, like, this, like, bounty and everything helped both Node of the world. But, in terms of, like, should, like, Twitio, like, be written in Rust? Like, I don't I don't think so. I don't care.

Topic 43 38:30

No need to rewrite Prettier itself in Rust

Guest 1

But, for the Rust thing in the JavaScript tooling, there's a lot of other things where, like, the tooling speed is very important. So 1 of them is, like, packaging, the other 1 is, like, all of the, like, EID feedback, and so this, I think, could be, like, a lot faster. And whether it's written in JavaScript or Rust, I don't care. But, like, I'm really, like, glad that, like, we're as an ecosystem, we're pushing a lot, on this.

Wes Bos

Yeah. Yeah. I agree. Especially, like, yeah, things like, ESLint, showing up super fast in your editor. That's something that you you certainly want. And your refreshes, if you're doing fast refresh on a,

Topic 44 39:11

Other areas need performance like linting and editing

Scott Tolinski

React application, you warp it to refresh in the browser. Those things are super important. I'm glad to see lots of projects in that space. So that I think that leads in really well to, like, I guess, like, what is the the future of Prettier look like? So we have these Rust based alternatives. We have Prettier's, you know, progress. Is there, like, a definitive road map or anything that is on the horizon? Or is this considered like a working tool that, will just potentially, you know, improve in performance?

Guest 1

Yeah. So I think, for me, like, the road map is, like, pretty sure, like, JS, like, working.

Topic 45 39:56

Prettier is in good working shape without big changes needed

Guest 1

And, we don't have, like, many, like, big new features or new settings or kind of things. Now it doesn't mean that the product is like that. And so in practice, like, there was, like the JavaScript survey around, like, people, like, that's happening every year. And at some point there Wes, like, Prettier in the survey, and the people that created the survey ended up, like, removing Prettier and the question around Prettier because, they had, like, I think 80% of people saying they were using Prettier. And they were, like, saying basically, like, everybody's using it. Like, we don't need to ask, you know? Yeah. Yeah. So, like, this is this time, and, like, this is working.

Guest 1

Now 1 of the thing is, like, the JavaScript ecosystem is still, like, evolving rapidly, especially, like, the language sites.

Topic 46 40:38

JavaScript evolution pressure to cover new syntax

Guest 1

And so 1 of the, like, like, pressure it puts on Fritzer is anytime, like, there's a new syntax added, to the language or, like, the extensions, for example, like, for Vue or, like, for Svelte or for, like, Angular or for like the JavaScript language, or for like all of the tools adding syntax and everything, it needs to be inside of Prettier because if it's not inside of Prettier, people can't use it.

Topic 47 41:15

New frameworks and languages want Prettier integration

Guest 1

And so, like, we are seeing, like, a lot of, like, pressure from, like, all of those, tools and teams and everything to start adding, things to Prettier. And so for this, this requires, like, people to actually, like, work on Prettier, like, to maintain it and, like, add those features. And so for this, the setup that we have is we have, 2 people that are working full, like, not full time, but, like, our main like, official maintainers and are being paid, $1, 500 a month each, to, like, maintain, the library. And they are doing a very amazing job at this. And, so far, like, from all of the, like, open, like, open source tooling and everything, like, I'm getting a regular feedback. Like, this is 1 of the best maintained and, like, this is, like, very, like, good to work with, like, the project.

Guest 1

And 1 and 1 of the reason why, like, I'm very excited about, like, the t shirts, like sale is that, right Node, we are only relying on donations, for this.

Topic 48 42:04

2 official paid maintainers help handle additions

Guest 1

And, we've, gotten around, like, $140, 000 of donation over the course of the project, which is amazing. Thank you, everybody.

Topic 49 42:15

$140k total donations received, funds now low

Guest 1

But, at this point, we are running low on funds. And so right now, we have $10, 000 on The Open Collective.

Guest 1

And so this means, like, we are basically, like, 3 months of 1 rate.

Topic 50 42:30

$10k currently in Open Collective treasury

Guest 1

And, 1 of the thing, like, I'm starting doing is to figure out, like, hey, how can we do fundraising for this project? And so, whenever, like, the Prettier t shirts are on sale, like, this is a really good way for just not donating, like, in the void, but you're actually getting something in return. Mhmm. And then, if, you're working with a company that uses Prettier, like, we accept donations.

Guest 1

And so please, like, warp with this and, like, talk to me, and I can help, like, do a pitch for, like, why, your company should be, donating and, like, what they're going to get in return.

Topic 51 42:57

Appeal for corporate donations and sponsorship

Guest 1

And so this is, like, I really hate to ask for money. And, like, for me, open source is all about, like, giving for free and everything. But the reality is that, this project is, like, successful and, like, keeps being maintained and, like, and hasn't seen any, like, real competition in many years because of this setup.

Guest 1

And so if you wanted to continue, like, please, help us buy a T Scott, tell your, like, company or, like, if you're, like, doing well for yourself, like, donate for the project. Like, it's being used for real and, very useful.

Topic 52 43:40

Suggestion for save-based micropayments

Scott Tolinski

What you should do is connect the Versus Node to some kind of micro pennies bucket. And every time your format every time your code formats drops a fraction of a penny

Wes Bos

into a bucket. Yeah. 1¢ per save or if you don't wanna pay, it will mine a little bit of Bitcoin every single save. The How about that? Amount

Scott Tolinski

of time that it saves me in general. III do have to thank you. I know that's, like, you know, big reason why you made this. But, the just the sheer amount of mental overhead that I no longer have to carry with me, when I click command s on Sanity time. My my code just pops in. Yeah. I I gotta say, it it's 1 of the the small joys I get every day is that I don't ever have to think about indenting my code ever again. So thank you so much for your time. It it's wonderful. When the code is, like, messy and you just hit save and And here's a here's a low key awesome aspect of that. If it doesn't format, it's because you're have a bug somewhere. Yeah. And and and then you save your life, oh, there must be a problem. Time to investigate. I don't have to worry about runtime errors because I know there's something formatted incorrectly somewhere. Yeah.

Topic 53 44:55

Prettier handles many languages beyond JavaScript

Wes Bos

And Wes we should also say that Prettier is not just JavaScript. Like, Prettier is across, I would say, almost every language out there. Right? There's a CSS plug in. There's PHP plug ins. There's some of those are officially maintained as well. That's what you're paying the maintainers for?

Guest 1

Yeah. So the the way we've been thinking about it is at first, only JavaScript.

Guest 1

But then, we figured, like, people actually add Java add the CSS in JavaScript, so I also did that.

Topic 54 45:25

Started with JavaScript, expanded to embedded languages

Guest 1

And, like, there's, like, GraphQL, and then there's, things where, like, JavaScript is included in those languages.

Guest 1

And so, for example, like, Vue Components, this is a HTML, and, like, there's a JavaScript block. And so in order for, like, being useful for, like, front end folks, like, it made sense to, like, also, like, support, like, HTML, like, CSS, and also all of the kind of templating language, like, people Yarn, like, regularly using. So for all of them, they are, like, being officially maintained and then all of their variations. So available for JavaScript, it's only not only JavaScript, but it's like, Bos and, like, all of the Wes and all of those kind of variations.

Topic 55 46:05

Officially supporting JavaScript packages and variants

Guest 1

Now from other languages like PHP and Python, we have, like, community contributions, but they haven't went through the very rigorous plan of, like, making sure, like, it works 99% of the time, and so I wouldn't, like, recommend, like, you just dropping them and, like, seeing how it works. Like, it's more likely going to be, like, yeah, you need to do a lot of work around this, but, the the thing that's most fascinating to me, and this is a good segue ESLint this, is the notion of, like, formatting, your code is not just for JavaScript. This is, like, for every single language in the world.

Topic 56 46:41

Recommend using best suited community formatters per language

Guest 1

And 1 of the thing is, like, GoFmt started the trend, but the issue JS GoFmt. It was only for languages, like, for new languages, you, like, you could do it. But JavaScript and Preetha approved you can do it on an existing language as it's messy and, like, not, like, well architected and everything. Yeah. So this really inspired a lot of other people. And so for example, like, Black from Python, was started, by someone working at Facebook, like 2 rows of Wes, like, besides me and, like, hey, it was super exciting and pretty awesome. He, like, he ended up, like, doing this. And now we Yarn seeing, like, every single language, in the world, like, have auto formatting, like, done by default. And so this is, like, mostly what I care about is, like, this is not a default. Like, you cannot have, like, any programming language without this. Now whether it's implemented by Prettier or like something else, I care less about it.

Topic 57 47:33

Excited all languages adopting auto-formatting

Guest 1

And, the reason I care about Preethio is mostly, like, it's working. It's providing value. Like, almost everybody's using it. So, like and there's no reason to change it. But, like, if, like, you're using black on Python, like, we have a Python way of doing it with Preacher, but, like, less may well maintained at like black. So please go and use black because, like, you don't, like, use the thing that actually works for the language.

Scott Tolinski

Beautiful. Do you have any advice for other open source maintainers that maybe have found themselves with a a project that people are actually using and, don't don't necessarily have the chops to manage it correctly?

Topic 58 48:12

Over-engagement can hinder others from contributing

Guest 1

Yeah. No. This is a, yeah, really, interesting problem.

Guest 1

The the 1 thing I would say is, you need to, like, want other people to actually, like, contribute and participate in everything. And this is, like, not an easy thing to do. And, I learned this lesson when I joined Facebook. I was, like, so excited, like a small puppy, and I would, like, walk on a bunch of things. And then I realized like after, like 6 months or a year I was maintaining a bunch of stuff and I didn't have the time to, like, work on, like, the next big thing. Mhmm. And so what I ended up doing is, like, my manager told me, like, Hey, don't worry. Like, just, like, drop everything and move to the other thing. I Scott you. And I was very scared because I'm like, Hey, like, I cared about it. I didn't trust a lot of people and everything. And, there's 2 things that happens.

Topic 59 49:08

Stepping back revealed project actual needs

Guest 1

So 1 thing is that some project, like, nobody picked up, but sometimes it works well and like, things that we're working on, like, it didn't need my constant attention and, sure, it didn't move forward as fast as possible, but it was okay. The other ones, like that Wes actually critical, like some other people like started working on it and those kind of things.

Guest 1

And the fact, like, I stepped out and, let other people touch the code and everything. I didn't, like, jump in on everything. Like, Wes able to tease out, like, what for the product, like, really Node attention and what a product, like, didn't, like, Node. And also let other people, be able to contribute.

Topic 60 49:50

Giving commit access encourages first contributions

Guest 1

And, before because I was jumping on everything, like, nobody else, like, was in their mind that they could contribute.

Guest 1

And so now the way I've been thinking more about it is, how do I put myself in a position where I start new projects Where I, intentionally start creating this kind of, like, people, like, opportunities for people to contribute and, like have people, like, feel like they own, the project and they they can, like, keep going while I'm, like, doing something else. And for example, like, when I started Excalidraw, I created, like, a first date, like, on the on the code sandbox, and then I created a GitHub repo. The first thing I did was to create 20 issues around, like, all of the thing I wish the product existed.

Topic 61 50:35

Prepped issues for first Excalidraw contributors

Guest 1

And now Wes, somebody wants to contribute, they're like, hey, there's this very specific thing Oh, yeah. Yeah. That, they can work on. And they know if they are, like, putting their time, I'm going to accept it.

Topic 62 50:46

Accepting early PRs sets example for newcomers

Guest 1

And, like, oh, now they can contribute. And, and once, like, I see somebody contributed, I'm going to start, like, encouraging them to, like, do more and, like, and what and my policy at the beginning was, like, anybody that contributes anything, I'm giving them, like, commit access, like, admin access.

Guest 1

And so now they feel part of this, and they want to do to do more of this. So for, like, very successful project, like, you need to have, like, some kind of, like, boundaries and everything, but you probably, like, want to give access to more people more easily than you're probably doing and, to give them, like, ESLint. But this is like, you Node, like, a a mindset change around, like, now you need to, like, open it up and, like, convince people to work on this. And this is, like, the Node snipe thing I was mentioning at the beginning. It's, like, you really want to be in this mindset of, like, hey, the engineers, like, they are, like, like, going into this and everything. How can you, like, channel their inner, like, geek and, like, to, like, actually do the work? But it goes both ways. Well, like, you need to, like, like, they're going to, like, not doing it, but you need to also, like, be there to, like, oh, reply on full request and do this. And then, like, now you need to also, like, start giving them more responsibilities.

Topic 63 52:02

Transition community with issues and code examples

Guest 1

And, Scott, like, hey. Now, like, there's this issue from somebody else, can you go and, like, actually reply to them or help them, like, go into the code Bos and everything? And so now you need to start, like, building, this, like, building those people.

Guest 1

And this is something that, like, as, like, an engineer, like, randomly stumbled onto, like, success and everything, you may not have the mindset or, like, those skills or expertise.

Topic 64 52:18

Stumbled into management without training

Guest 1

Yeah. And, 1 1 way to do it is to ask other people who have been successful at this. And the good thing is, like, the open source community is, like, like, is very, like, open and welcoming. And, like, if you're, like, in this position, like, don't hesitate to reach out to me or, like, to both of you or, like, to a bunch of people. I'm pretty sure, like, you're going to get, like, good responses.

Topic 65 52:28

Experienced maintainers are accessible for advice

Scott Tolinski

Yeah. Sick. Wow.

Scott Tolinski

That's really, just really I don't know. You can tell that you've done it because, yeah, the the insights that you have on, just all of this stuff. You know what? I found it fascinating about your management experience and how this plays into it specifically because I think develop development managers sometimes get a a bit of a bad rap in terms of like, oh, you know, maybe you're not coding as much as you were before. But, man, it's such an important thing. And I I think the the skilled management or skilled you know, how how you can work with people is such an important skill. So thank you so much for illustrating that.

Scott Tolinski

Let's get into the part of the show where we talk about sick picks and shameless plugs since we're just about out of time here.

Guest 1

Did you come prepared with a sick pick or a shameless plug for us today? So I have 1 shameless plug, like, please buy the T shirts.

Guest 1

But Please, please. Yeah. Yeah. The sick pick JS, transformers.

Guest 1

Js.

Topic 66 53:47

Sick pick - Transformers demonstrating browser ML

Guest 1

And so, like, there's a big buzz right now around LLMs and, chat GPT and all those kind of things.

Guest 1

And, there's 1 project by Xinova, which is able to run all of the models, like the machine learning model you've seen and heard and, inside of the browser.

Guest 1

And, so this project is amazing and, like, they are, like, adding, like, many models. Like, I think I have Node, like, more than a 100 models you can, like, play in the browser. And 1 of the big thing that they're doing right now is, integrating with a new API called WebGPU.

Guest 1

And so right Node, you you have WebGL to interact with the GPU, but this is geared towards, like, being able to do, like, 3 d scenes. Mhmm. And, 1 other thing, like, like Nvidia has been so successful with CUDA to be able to use the GPU to do, like, all of those math operations that are Node for all of the machine learning models. And so now you're able to, like, use this directly instead of, like, the 3 d APIs of Wes.

Guest 1

And, this is giving, like, 10 to a 100 x, like, performance improvements. So, yeah, check out, Transformer Pnpm. I'm super super stoked about Wes had we had Deno on the show, syntax.fmforward/740,

Wes Bos

and, wicked smart guy and just, like, a total mind opener listening to him. Awesome. Thanks so much for coming on. Appreciate all your time, all your work on Prettier, and, really excited about these T shirts. Check them on out. Thanks again.

Guest 1

Thank you so much. Bye. Peace. Thank you.

Share