DejaVue | Vue or React? (with CJ from Syntax)

Alex is accompanied by the wonderful CJ Reynolds in this episode of DejaVue. The Senior Creator at Syntax.fm brings not only Vue experience but also a history of Angular JS and React, as well as various other technologies.

The two content creators talk about how CJ became a senior creator at the well-known Syntax.fm podcast and how it is different from Streaming on Twitch and his previous content creation processes. Further, CJ gives insights on how the Denver Vue meetup evolved (now the DenverScript meetup) and shares some hopes when it comes to the meetup scene.

Alex and CJ then discuss more technical topics - for example why CJ never fully switched over to Vue but still writes it a lot. The discussion eventually goes into comparisons between Vue and React, highlighting what Vue does "better" than React and how the Vue ecosystem shapes the web development work.

Enjoy the episode!

Our Guest

CJ Reynolds

Chapters

(00:00) - Welcome to DejaVue
(00:47) - How CJ joined the podcast
(01:38) - How did you become the Senior Creator at Syntax.fm do?
(06:00) - Differences to previous gigs and streaming
(12:17) - From starting with web development to Vue.js
(15:54) - Running the Vue Denver meetup
(19:25) - Is the meetup scene growing again?
(21:13) - Why didn't you switch fully to React?
(23:49) - What Vue does "better" than React
(27:01) - Two-way data binding
(31:35) - How opinionated is Vue
(32:58) - Vue without a build step
(35:01) - Does Vue "seem" too magical?
(36:07) - "Needing" a meta framework?
(38:50) - Nuxt and the UnJS packages
(41:01) - Frameworks converging
(41:55) - Vue did Signals "first"
(42:58) - Is Vue bad at marketing?
(44:40) - Vue Job market
(45:40) - Vue and Innovation
(46:59) - Vue being left out of the conversation
(50:52) - What stops from switching to Vue?
(53:52) - The change to Vue 3 and the Composition API
(01:02:38) - VueUse as a good example
(01:03:26) - Composition API without script setup
(01:05:56) - Where people can follow CJ
(01:06:34) - Wrapping up

Links and Resources

Get 15% OFF for your Vue Toronto ticket with code DEJAVUE *

Your Host

Alexander Lichter

---

Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.

Creators & Guests

Host

Alexander Lichter

Web Engineering Consultant • Founder • Nuxt team • Speaker

Guest

CJ Reynolds

Senior Creator at Syntax & Host of Coding Garden

Editor

Niki Brandner

Sound Engineer

What is DejaVue?

Welcome to DejaVue, the Vue podcast you didn't know you needed until now! Join Michael Thiessen and Alexander Lichter on a thrilling journey through the world of Vue and Nuxt.

Get ready for weekly episodes packed with insights, updates, and deep dives into everything Vue-related. From component libraries to best practices, and beyond, they've got you covered.

Alexander Lichter: 00:00

Everybody. Welcome back to a new episode of DejaVue. It's your favorite Vue podcast. You just don't know it yet. Or maybe you do because, well, we are on our mid thirties episode, something like that, quite episodes on already.

Alexander Lichter: 00:11

And maybe you've discovered that this episode never before. So thanks thanks for joining, or maybe you've listened to all the other ones beforehand. Nevertheless, usually, Michael is here, my cohost, but, he he's not today. I skipped a few episodes before, and now it's his turn. But luckily, I'm not alone here.

Alexander Lichter: 00:29

I am joined by the wonderful, CJ, who is a senior creator at Syntax. He's streaming on Twitch regularly, has some nice YouTube videos up there. You can find him on on all social medias, and I'm very happy that he's joining this episode. Hi, CJ. How are you doing?

CJ Reynolds: 00:45

I'm good. Yeah. Thanks for having me.

Alexander Lichter: 00:47

Oh, of course. Of course. And it's it's always nice that, like, these things line somehow. And I remember, like, when we got in touch, I'm like, oh, yeah. How about joining?

Alexander Lichter: 00:54

I think I I hit you up in the some of the the live streams and on Twitter.

CJ Reynolds: 00:58

It was the Twitch chat or the YouTube chat. Yes. And you're like, wanna go on the podcast? I was like, yeah. Let's do it.

Alexander Lichter: 01:02

Yeah. It's it's like, I always like this way of contacting because, like, in in a way, it feels kinda natural just like, hey. Okay. You do cool content that could be a nice fit. Wanna join.

CJ Reynolds: 01:12

Definitely.

Alexander Lichter: 01:13

So and also, like, there was an episode of Matt Pocock, who also, like, everybody listening for a few episodes might know already. And if if not, then definitely check out the episode where I also jumped on his stream where he played Eurotrack Simulator. I was also just like, hey. How about, what John is? Like, yeah.

Alexander Lichter: 01:30

Okay. Let's do it. So so, yeah, in a way, that's some part of the podcast history apparently to do that.

Alexander Lichter: 01:38

And, yeah, starting straight away with that. So you're you're live streaming, as just said before, you're a senior creator at Syntax.fm So maybe you could give us a little insight what that actually means in terms of in terms of your job, what you're doing there, and, yeah, then then we can talk about more about Vue.js.

CJ Reynolds: 01:55

Sure. So, yeah, I'm a senior creator at Syntax. I joined there back in February. And so if you haven't heard of Syntax, they are a web dev and programming focused podcast. It's hosted by, Wes Bos and Scott Talinski.

CJ Reynolds: 02:08

They publish 3 episodes a week. And about 2 years ago, the podcast got acquired by a company called Century. And so Century does error reporting, and they had sponsored a few episodes, but they were like, hey. Why don't we just buy the whole podcast? And now every episode is brought to you by Sentry.

CJ Reynolds: 02:23

So that happened 2 years ago. And then about a year ago, the Syntax team wanted to start expanding, and so they were looking for someone to help them, create YouTube videos and kind of build out their their content there. And so that's what I've been doing for them, for the past almost a year, is essentially topics that are covered on the podcast. I'll create deeper dive videos and publish those to YouTube, and sometimes I'll do topics that I'm interested in as well. And I also have a a side gig called Coding Garden.

CJ Reynolds: 02:50

It's basically how I got the the syntax job. So Coding Garden is is my YouTube and Twitch channel where I livestream myself coding and teaching. So a lot of times, I'm building apps from scratch, whether it's full stack or just front end or back end. I'm solving algorithmic problems. So a lot of times, I'll do code wars, sometimes leak code.

CJ Reynolds: 03:08

And then other times, we just have general code chat. So, like, people can come in and ask career questions or code questions, and, I give my best answer. But it's also a a big community of, like, people in the chat, like like yourself sometimes who can chime in with with good good tips and and stuff like that. And so a lot of those live streams that happen on Twitch and YouTube, those will get cut down into shorter videos on the Coding Garden YouTube channel as well.

Alexander Lichter: 03:31

Sweet. Yeah. I just want to ask because you said, okay. You did join almost a year ago as a content creator, and, like, how did it happen? But, of course, with with Coding Garden being already there, I guess that was the the best reference.

Alexander Lichter: 03:42

Could tell people like, hey. Look. I'm I'm doing amazing content, so I could do it for you too.

CJ Reynolds: 03:47

Basically. And so I I've worked professionally as a software developer for for a while. And so I was working at a software consultancy and doing Coding Garden part time. And then, I decided I wanted to start doing Coding Garden full time, so I left that consultancy. And so I I was doing coding garden full time as, like, the only thing I was doing for roughly a year.

CJ Reynolds: 04:06

And then I saw that the, syntax senior creator position opened up. And, I'd I'd I mean, I've I've worked a lot of different jobs. So I I've been a software developer. I have been a a programming teacher. I used to teach at a boot camp in in full stack programming.

CJ Reynolds: 04:24

And I've worked at big companies, small companies, and I just I didn't know what I wanted to do next because I was doing coding garden full time, but the syntax position popped up, and I was like, that makes a lot of sense. It's kind of what I'm doing already, but now I can do it on a bigger scale and and work with a a team of, like, really smart people. So, yeah, I I applied for that and, and got the gig. So

Alexander Lichter: 04:43

Yes. Sweet. Also, con congrats to that, of course. Thanks. Even though it's almost a year later, stay still, it's it's pretty amazing.

Alexander Lichter: 04:50

I think it it makes a lot of sense, to to, like, deepen the the content there because, like, I remember, like, also being myself someone who's listening to syntax every now and then, recently a bit less, but I remember, like, when I still commuted to some places, it was like, okay. In the morning, let's listen to the episode. There we go. But I I remember, of course, there was also an audio only video podcast for a while, and now video is also included. And then with all the deep dive videos, there's more and more content there.

Alexander Lichter: 05:17

So I I like to see that there's more content for developers who are interested in generally web development and all what's going on, so that's that's really nice to see.

CJ Reynolds: 05:25

Definitely. And I and I had a similar experience. Like, it used to be, like, when I commuted or, like, if I'm on long road trips. And these days, like, if I'm sitting in an airport or an airplane, I would listen to syntax. So it was it was pretty cool to and and, like, for for the longest time, I couldn't even believe that they actually hired me because I was I'm so used to hearing them on the podcast.

CJ Reynolds: 05:44

And, so yeah.

Alexander Lichter: 05:45

And now you're working with them. So yeah. Exactly. No. It's it's pretty amazing.

Alexander Lichter: 05:49

On the other hand, I can also imagine, like, leaving your, let's say, you your own project from doing it full time to then only, like, doing it part time again, let's say, was probably also not necessarily an easy step. Right?

CJ Reynolds: 06:00

Yeah. And and it's I'm actually creating very different types of content for Syntax because coding garden was very live and in the moment. So most of what I did was in a live stream or edited down from a live stream, and so I didn't have a lot of experience creating specifically, like, planned and structured videos, but that's the kind of thing that I'm doing over on syntax. And so that's I've I think I'm getting better at it, but that's one of the things that was a little, like, a shift in in my my my work style is instead of just going live and talking about a thing, now I'm I'm doing a lot of planning. I'm recording.

CJ Reynolds: 06:33

I'm editing. I'm going back and doing more editing and planning. And so, yeah, like, right now, I'm I'm I do the every video that you see that's that's come out that's that I've done, I'm I do the full process. So I do the the research, the deep dive, and I put all the code examples. I film myself.

CJ Reynolds: 06:48

I edit it down. I add any assets if there need to be. So, yeah, it's definitely a different process than completely live.

Alexander Lichter: 06:55

Oh, absolutely. For me, just a little bit of the opposite with, like, my YouTube channel where I mainly do, like, preplanned videos and everything. And then my editor, who's also my partner, so that's a big plus there, is, like, editing the videos also, like, as an audio engineer doing doing the podcast here as well. So, big big shout out on that point. I, like, I reconfocusing on the content and then, I I still, of course, plan everything.

Alexander Lichter: 07:17

And when I do live streams, which I rarely have the time at the moment, just like conference and traveling, but still try to squeeze it in. It's also more like it's it's so different, because then you can just do whatever feels like, what the the audience interested, what the chat, the community, as you know, like, then you get sidetracked or you do something totally different, but it's still super valuable for for the people listening or for the people, watching later the VOD in YouTube, for example.

CJ Reynolds: 07:41

Definitely. And I have found, like, it's it's a different kind of audience because it it takes a certain type of person that's just gonna sit there for 2 hours, 3 hours to wait for something interesting to happen. But, yeah, it it's I think, especially on CodingGarden, I've kind of built that community of, well, we're gonna go live. I'm gonna talk to the chat. It's gonna be interactive.

CJ Reynolds: 07:59

But at the same time, I still have somewhat of a plan, and I kinda know what I'm doing. So you can expect like, if you're trying to learn, you're gonna you're gonna learn something along the way. And I think for a lot of people, they like to see, my process because that's that's a very different thing from, like, edited tutorials and videos is you kind of see the happy path. You see the version of of it that just works. You don't see all the the bugs and mistakes along the way.

CJ Reynolds: 08:20

So in a live stream, you see that. There's no covering it up. So if if something doesn't work, we have to figure it out. And so a lot of people, like, can learn from kind of seeing me do it live as well. Like, well, how do I read the docs?

CJ Reynolds: 08:29

How do I debug a specific error? Those kinds of things as well.

Alexander Lichter: 08:33

I I think that's also, as you just mentioned, like, the process of how people work is sometimes so much more important than actually the result of, like, okay. We do this now just because, like, you you will see a lot of things. It can be like a shortcut that people use or, like, I don't know, these codes snippet or whatnot or just saying, like, okay. Here's my analytic way of dealing with that problem. And people might say, okay.

Alexander Lichter: 08:53

That that's also a way to consider it. I don't have to, I don't know, console log until I found a problem. I can also, like, go go from, like, a top down view or do use the bugger or whatnot. So Exactly. It's it's it's really, really helpful, and that's always the the trade off.

Alexander Lichter: 09:07

If you have, of course, like, some long form content, it's so nice because you can show the whole process. While, of course, if the shorter gets, then it's really more focused on, hey. We do this. The that's the way the the short most or, like, even if I don't know. You YouTube short was, like, a minute.

Alexander Lichter: 09:20

There we go. That's it, and and you're done. Right. It loses so much information. On the other hand, of course, people can get into it and say, like, hey.

Alexander Lichter: 09:27

Wanna know more? Then take a look at the the whole stream or join next time, so and so. It's, it can be a little bit of a gateway drug too, so to say.

CJ Reynolds: 09:35

Definitely. And I I kind of see it as, like, you're you're more so because a lot of people will see tutorials first. Right? They're gonna see the shorter content. Like like you're saying, it's the gateway.

CJ Reynolds: 09:45

It's the first thing they're gonna see. But once they real it start to try to do it themselves, instead of just watching the video, they try and go and do it. They realize, oh, this is a whole lot harder. And so being able to see someone do it instead of just seeing the the end product, I think, is is helpful for a lot of people as well.

Alexander Lichter: 09:59

100%. And also, like, that to overcome impostor syndrome, for example, say, like, okay. People, like, programming every day or, like, people even working on frameworks, they still don't know everything. They still Google things. They still try out things.

Alexander Lichter: 10:11

Their tests will also fail a 100 times before they pass. And Yeah. That's yeah. It's just so nice to see, like, okay. Well, all humans will make mistakes and, still, like, we we learn from certain things.

Alexander Lichter: 10:22

Yeah.

CJ Reynolds: 10:22

And that's one thing I've gotten good at is being able to make mistakes live, and and it's like, if something goes wrong because, I mean, a lot of people that maybe if you if you're in this space as a creator and maybe you only do conference talks or maybe you've only done made YouTube videos, if you're ever in a situation where something goes wrong, you don't necessarily have a lot of practice trying trying to figure that out. So if you're trying to do, like, a live demo in a conference talk or something like that, you could be like a deer in the headlights. But I feel like I've had so much practice just being okay with getting something wrong and then taking a deep breath, figuring it out. And so that's another skill that I think I've developed is just, like, I get things wrong. That's I'm human.

CJ Reynolds: 10:59

We're all human. So

Alexander Lichter: 11:00

100%. Yeah. I I still remember there were, like, 2 talks of of all the ones I gave so far that I I really clearly remember where things just gone total south, and it's like, okay. Let's see what happens. Everything that could break broke, but you have to deal with it in that moment.

Alexander Lichter: 11:15

So that's that's fine, and people people will be okay with that. People say, okay. Yeah. Happens. It's okay.

CJ Reynolds: 11:20

Definitely. Yeah.

Alexander Lichter: 11:22

But that also helps to have maybe sometimes a plan b to say, okay. If if it really doesn't work, especially for, like, in a live coding and talk, maybe prepare something beforehand. It's also like when the first time it really fails to me, like, okay. You know what? Let's just reset the project real quick.

Alexander Lichter: 11:35

Go through that. It takes 5 minutes more, but then, we're we're in a good state.

CJ Reynolds: 11:39

Definitely. Yeah. And I think the more you do it, the more you figure out those things that you need to do ahead of time to make sure that you're prepared. So yeah.

Alexander Lichter: 11:45

True. And also getting a bit more relaxed, at least, it helped me a lot of, like, doing a lot of live coding or so, like, the streams. Like, okay. You you get used to making mistakes. You get used to how to debug that.

Alexander Lichter: 11:55

And, you also get, of course, better and you like, quicker at at finding out, okay. That's a problem. Let's see. So so that's in a way really great, even though it's very scary at first. And if people, especially at conference talks, like, oh, yeah.

Alexander Lichter: 12:08

Live coding, something goes wrong or the Internet connection fails. And, yeah. But in in the end, people will enjoy it. That's, that's the thing.

CJ Reynolds: 12:16

Yeah. Definitely.

Alexander Lichter: 12:17

So now that we talked a lot about content creation, let's let's get into your story with with Vue.js So maybe, maybe even start in terms of web development. How did you start getting into web development and then frameworks like like Vue. Js in the first place?

CJ Reynolds: 12:32

Yeah. So, I mean, web development goes way back. It started with, Myspace, custom themes, so, like, building out Nice. Custom themes for for yeah, like, custom CSS and stuff like that. And then, eventually, I got into creating, Flash animations.

CJ Reynolds: 12:47

And so for that, I actually learned a little bit of ActionScript, which is actually based on ECMAScript. So it's based on the same thing as JavaScript. So I had a little bit of experience with that. And, yeah, I did a lot of that just in my spare time in high school, and then I got a computer science degree. And then my first job out of university was actually doing csharpand.netdesktopdevelopment.

CJ Reynolds: 13:07

But there was a a point where I was working on a project, and, it required, like, a desktop app, but I was like, you know, this could work in the web browser. So I kind of started to figure out, how that could work. And then I discovered this this little thing called Angular JS. This was back in probably, like, 2011, 2012. And I remember, like, I I implemented this site with jQuery, and I was like, oh, this is great.

CJ Reynolds: 13:30

Like, I don't need a desktop app anymore. I just build the API, and then I can build build it with jQuery. And then I found Angular, and, like, the code shrunk in half. And I was like, oh, this Angular thing is awesome. And so yeah.

CJ Reynolds: 13:41

So I I started with Angular, and then I I fell in love with Angular JS. So I built a ton of stuff with Angular JS, and that's kind of my path into Vue.js. So for anybody that was around that time, that's kind of how you could see Vue.js.

CJ Reynolds: 13:52

It was like the middle ground between Angular JS and React because it it uses the the virtual DOM or Vue uses the virtual DOM, but the syntax and the directives are very similar to AngularJS. And I guess I'll clarify. We're talking about Angular 1, the original AngularJS, not the not the new stuff, which I haven't kept up with. But the the syntax these days looks so much different and so much crazier than it than it used to with AngularJS. But but so, yeah, I built a lot of apps with AngularJS.

CJ Reynolds: 14:19

And then, I worked that job for a while and then eventually became an instructor of full stack development at a coding boot camp, and they were teaching AngularJS in the program. But then they decided to switch to a React curriculum, so I was a part of that transition. But I think it was roughly around 2015 or 2016, one of my coworkers was like, you should check out Vue.js Nice.

CJ Reynolds: 14:45

And then I tried it, and I was like, where has this been? Because because I basically went from Angular. Js to React, and then I found Vue. Js, and I was like, this is it. Why doesn't everybody use this? This is like the syntax is shorter. We can mutate state, and, things just work. It's less code. There's less boilerplate. And so, yeah, I I started using Vue.js around 2016.

CJ Reynolds: 15:05

And then after that, almost every single side project, I did, I was doing with Vue.js And so, I built, like, just internal tools at the coding boot camp. So, like, I built a tool to help people track their learning progress, and I built that with Vue. I built a tool for the admissions, team because for new people coming in, they typically would have a portfolio of, projects that they've done and and example code to get into the coding boot camp.

CJ Reynolds: 15:32

And so I wrote an admissions app that would help with that process that was built with Vue, a bunch of other side projects. And I think that's kind of my story with Vue. Js is it's always been it's my side thing. Because, after working at that coding boot camp, I got hired at a consultancy, and they built everything with React. And so I was building production React apps for, like, over 3 years.

CJ Reynolds: 15:54

But in my spare time, everything I was doing was Vue, and I actually took over running the Vue. Js meetup here in, Denver, Colorado. And so 2 of my students had actually started the, Vue. Js meetup, and then they went off and got jobs where they were doing other things. And I was like, I mean, I I can I can pick it up?

CJ Reynolds: 16:14

So I took it over for them and then, started running the Vue JS meetup along with, a previous coworker and student, Marlena. And so we ran the Vue JS meetup for a long time. And, yeah, for a certain time, we used to call the Vue JS meetup, like, the Vue support group because, everybody that showed up like, nobody wrote Vue professionally. Everybody was like, Yeah. We do it on the side, or we really like it, or it was, like, beginners that were trying to learn it.

CJ Reynolds: 16:40

And and this was really before it kind of, like, took off, where more people in at least in the US are using it professionally and at consultancies and stuff like that.

Alexander Lichter: 16:48

So that was, like, around, like, the Vue 2 times. Is that, like, the early Vue 2 times, something like that? Yeah.

CJ Reynolds: 16:53

I'm trying to remember the the timeline here because I I think yeah. I probably I would have ran that meetup from 2017 Mhmm. Up until, and we kept running it after COVID. So we even ran it remotely, after 2020. But so, yeah, this the in person meetups would have been, like, 2017, 2018 where it was, like, the Vue support group.

Alexander Lichter: 17:14

Yeah. But is is the meetup still running, or did you eventually shut it down?

CJ Reynolds: 17:18

Yeah. So it's transitioned. So, basically, like, COVID hit the meetup scene really hard, like, a lot of meetups. Yeah. And, we we tried to go remote.

CJ Reynolds: 17:26

So we were remote for about a year and a half, and then, like, the the membership dwindled, and we couldn't find speakers. Like, a lot of times, like, the Vue Meetup was also just me giving talks about Vue stuff that I like because it was hard to find speakers. And so, yeah, we we ran it remotely for about a year and a half, and then we're like, alright. We're gonna put it on hiatus. And then, I think roughly 2 years ago, a woman Paige reached out to me, and she was like, hey.

CJ Reynolds: 17:51

Are you running this anymore? Do you wanna spin it back up? And I was like, we should spin this back up. So we started it back up in person. Number of people showing up, increased just a little bit.

CJ Reynolds: 18:01

It was it was alright. But the Denver script meetup here in in Denver, had actually gone on hiatus. So, I feel like I'm rambling a lot, but let me I'm trying to get the the story of the story line, which is basically, Demerscript was happening. It was the biggest JavaScript meetup in in Denver. Yeah.

CJ Reynolds: 18:18

And then, the organizers kind of got burned out after COVID. They didn't really wanna do it remotely anymore, and so they stepped down. And then, I think it it's it stayed dormant for about a year. And then I started to think, well, if I'm spending all my energy organizing the Vue.js Meetup, why not kind of, like, bring it into the the Greater Denver script meetup and then organize that instead? And so, my co organizer, Marlena, and I, got some few other, organizers together.

CJ Reynolds: 18:47

So at the time, we got Will Klein. We got, Cas, and Will has stepped down since then, but we now we have a a person named Ched. But, basically, we all got together and, like, alright. We're gonna do the Denver script thing now.

CJ Reynolds: 19:00

And, essentially, Vue.js Denver is no more, but we still have Vue related talks at the the Denver script meetup. We try to showcase all frameworks. So, pretty much anything JavaScript related is is allowed at that meetup. And so

Alexander Lichter: 19:13

Sweet.

CJ Reynolds: 19:14

Yeah.

Alexander Lichter: 19:15

So whoever wants to give a talk in Denver, Colorado, at about JavaScript, anything with JavaScript frameworks, they should reach out, because JavaScript is the way to go there.

CJ Reynolds: 19:25

Definitely. Yeah. And the meetup scene is is, is kind of it's getting better and and growing more, because like we said, it it got like, most meetups shut down after COVID. But we host our meetup at a place called Code Talent. And if you look on their calendar, they host the Denver Python meetup.

CJ Reynolds: 19:40

There's, like, a Java user group. There's an APIs meetup, an AI meetup. And so the the meetup scene is is really growing more and more, and the number of attendees at Denver Script is growing more and more every time as well. So

Alexander Lichter: 19:50

Yeah. There's also, I think, a phenomenon that I've seen in a lot of meetup groups as well, be it, like, here in the Netherlands, my basement right now, but also in Germany with, lots of lots of people running meetups that I noticed. They're like, yeah. Look. It's it's getting there step by step, but, of course, after COVID, after everything went remote, then yeah.

Alexander Lichter: 20:07

Like, going back to some meetups was somehow really difficult. Of course, also people who ran the meetups were like, yeah. Not sure if I still can do that, or I changed my focus or, hey, no time anymore, which is totally reasonable, of course, because a meetup is, of course, a lot of time and effort and work too. Like, I really enjoyed the meetup culture before COVID. I I, like, spoken so many I just attended a lot of meetups because it's so nice to sync with people to, like, just just chatting with people using the same language or framework and generally have a have a good time.

Alexander Lichter: 20:38

So I'm very happy to see that, not declining anymore and getting better.

CJ Reynolds: 20:42

Yeah. And that's kind of my motivation is, like, I I want there to be a space for for people to be able to connect, to get together, and, because, like, I have no other motivation outside of just community building. Like, I just want a place for people to get together. Because, so I did an episode on the syntax podcast talking about, running the Denver script meetup and, like, kind of, like, what it takes. And, like, ultimately, it just takes somebody wanting to run the meetup because Yeah.

CJ Reynolds: 21:05

A lot of people don't. It's it's responsibility. You have to be a little organized, and so I'm kind of that person, at least for now. You know? So

Alexander Lichter: 21:13

Perfect. And, like, going going from the the Meetup real quick back to the the Vue support group topic of, like, it's it's so interesting. It's so interesting to see that that, like, you and so many others as well wrote, like, Vue on the side while in their main jobs, they wrote mainly React, I guess, as it's common in the US and maybe even, like, some legacy, I don't know, AngularJ aspect then and so on so on. I was just curious why you didn't switch to, like, React if you did it in in your main job in production. Why did Vue stuck with you throughout the whole time, so to say?

CJ Reynolds: 21:44

I've thought about this a lot, and I do think it's because of my early days of of AngularJS. I I I and I've and I've thought about this more and more lately because you see so many people where all they know is React. Their entire career, all they've ever written is React. They don't even know there are other options out there. And I think, like, what you work on and spend a lot of time on, definitely in your early years of programming, it kind of, like, it shapes your opinions.

CJ Reynolds: 22:08

It shapes your way of of doing things. And so for me, it was AngularJS, and it was like I was always searching for something that was that simple and had all this stuff built in and ultimately became Vue.js. And then eventually, Svelte as well.

CJ Reynolds: 22:22

So I write a lot of Svelte code these days, and it's also kind of like a natural progression. It's it's such a it's such a hard thing to to say, oh, well, I'm writing Svelte now instead of Vue.js because there's such a hard battle to to get people to realize Vue is a thing and they should be using Vue. And so I I kind of went back and forth, like, with the the announcement of Runes and Svelte. And so Svelte 5 just got released, and they have Runes in them. And I I'm coming around to them, but my initial reaction was like, this is not simple anymore. I want simple.

CJ Reynolds: 22:51

I want no boilerplate, and that's what Vue. Js is. So for for a while, I was I switched from Svelte in, like, any side project I would be using Vue. One thing I will mention though is, about the Vue support group. When we kicked the the meetup back off in 2022, it was actually, crazy for me to see because, the people showing up actually wrote Vue professionally.

CJ Reynolds: 23:12

So I I did the thing where I was like, raise your hand if you, write Vue at work, and it was, like, 80% of the crowd. And I was like, I have never seen this many Vue JS developers in Denver in the same room at the same time. So it it's definitely gaining traction in the US as well. And I think in in terms of, like, comparing it to Svelte, there's probably a lot more professional jobs using Vue than Svelte just because it's been around a little bit longer.

Alexander Lichter: 23:32

Yeah. 10 years by now.

CJ Reynolds: 23:34

Yeah. Exactly. And I think that's what a lot of, like, React devs don't even realize is how long like, Vue has been around basically as wrong as long as React. Maybe it came out maybe a few months after. But yeah.

CJ Reynolds: 23:46

So I I don't know. I don't know. I think

CJ Reynolds: 23:49

I think people writing React and starting with React, it really shapes their brain and their opinions in a certain way where it's harder to see the benefits. And I I guess for me, like, if I could just talk about the benefits, like, one of the main things I like is being able to mutate state. Like, React introduced immutability.

CJ Reynolds: 24:07

It introduced this idea of, like, state updates, and that gets really cumbersome, especially with your if you're working with, like, deeply nested data, or really complex data. And there are libraries that help with that, but I think one of the issues the React ecosystem has is, of course, if you find those libraries, it's great, but not everyone is using those libraries, and there's multiple options for those those libraries. So, like, for immutable state,

Alexander Lichter: 24:30

Too much freedom.

CJ Reynolds: 24:31

Yeah. Exactly. So you could use, like, immer or there's immutable.js.

CJ Reynolds: 24:34

And so you might come a project that's across a project that's using one of those, but maybe it's not. And then you have this big old spaghetti code of, like, object spread and stuff like that. And so with Vue, you can mutate state. You literally just modify the variable and the and the Vue updates, and you don't have to worry about bringing in a separate library or, spreading state or even like, a lot of, it's interesting to see React developers try and go and use Vue because they've got it in their mind so much that, like, if I wanna remove something from an array, I should use filter. But filter creates a brand new array.

CJ Reynolds: 25:05

You can mutate it. You can just use, splice and remove it directly from the array versus, allocating new memory and creating a brand new array. So, yeah, writing React code all the time definitely changes how you think about programming, and I think it makes it harder to potentially see the benefits or and at the same time,

CJ Reynolds: 25:23

I also understand that people can't just jump to another framework. Right? Especially, like, you're not gonna rewrite your whole React code base in in Vue.

CJ Reynolds: 25:32

But

Alexander Lichter: 25:32

I think that's that's a good point. Like Yeah. Was to say people can, but companies, of course, can't. Like, that's that's that's the the takeaway. We didn't say, like, sure.

Alexander Lichter: 25:40

You don't don't say, oh, yeah. I switched from React to, I don't know, a solid or Svelte or or Vue just because because of why not. If you have, like, an important case where, like, hey, we have an application that should be, I don't know, super performant. We have a lot of, I don't know, data visualization or something that you might consider. Hey.

Alexander Lichter: 25:56

Okay. There is, 12.5 now super fast or solid, or Vue with Vapor mode in the future. So we could use that. But otherwise, you stick with what you have. Of course, that's the the the benefit of React being more or less a pioneer in the space and that everybody like, a a big part, of the ecosystem adopted it.

CJ Reynolds: 26:14

Definitely. And that's kind of what you see as well because, like, companies, they made that decision to choose React 5 years ago, 6 years ago. And so that like, they they basically made a long term decision of we're gonna be building with React, so we're gonna hire React developers, and our product is built with React. And so Yeah. Really, the only space you see or only place you'll see the possibility of even switching is, like, is greenfield projects.

CJ Reynolds: 26:36

So I'm starting a new project. What are my options? Maybe I've maybe especially you're working at a company where you've seen what can happen in a large React code base or the the kind of code that it's written or the kind of troubles that you might run into, and so maybe you're looking for something else. And and I definitely think Vue is is an answer there, if you're looking for something that, has less boilerplate, typically. And I guess I'll talk about the the the less boilerplate thing as well.

CJ Reynolds: 27:01

Like, that's one thing that I just couldn't I couldn't understand how so many React developers were just so okay with add event listener and update state for every single input that you wanna bind to state. Like, no for I I don't know why, but I know nobody saw thought that this was weird that we have this exact same boilerplate in every single React app that's dealing with forms. And in Vue, you just have v-model. v-model Exactly. You bind it to state.

Alexander Lichter: 27:26

Two Way Data binding.

CJ Reynolds: 27:27

Yeah. Exactly. And and I but I think that's also some one place that is, some, like, React developers hear or some developers might hear and they don't like. Because when they hear 2 way data binding, I think that brings back, memories of AngularJS and, like, the horrors of what can happen with 2 way data binding. But I I've always thought about in, in Vue.js, the v model is still technically one way data binding, but it's like syntactic sugar that makes it feel like two way data binding.

Alexander Lichter: 27:58

Yeah. Exactly. Like, it it is literally is syntactic sugar.

CJ Reynolds: 28:00

Yeah.

Alexander Lichter: 28:01

Yeah. Yeah. So it still props down events up. It's it's just like you don't have to write it manually all the time.

CJ Reynolds: 28:07

But And I and I think and then that's one other spot where potentially React developers, or any any other type of framework developer might see Vue and be like, it's too much magic. Right? What is that v-model doing? Can I trust it? But I I think I've built enough app I've built enough applications where I want that magic.

CJ Reynolds: 28:24

Like, I I know and I can trust what that thing is gonna do, so I'm okay with choosing v model over add event listener and update state.

Alexander Lichter: 28:30

I think it's also, like, a certain degree of magic is really good. Also, like, Vue's reactivity system, for example, so you don't have to, like, explicitly define dependencies in, like, I don't know, useEffect or or useMemo, whatsoever. So, like, it it just works. You have computed properties, you have watchers, and they figure things out. Of course, with a watch, you have a watchEffect where you can just write things as in computed, or you have an explicit watch where we can watch multiple multiple things, and that's great.

Alexander Lichter: 28:56

But, yeah, like, a lot of people I've talked with that were not really into Vue were like, oh, yeah. It's it's just too much magic. I don't know what's going on. I don't know how it's how it's, like, how I can debug it. And luckily, there are there are quite some good debug tools besides the Vue dev tools.

Alexander Lichter: 29:11

They you have, like, some on trigger and on on track, I think, to see when a dependency is tracked and when, for example, could this trigger and why because of what changed. And, of course, sometimes in, like, I don't know, 5 or even 1% of the cases can be like, oh, this nested value doesn't update because I do some things around here. I had it as well a month ago where it's like, oh, that that's really strange. Why it doesn't work? Is is it even a buck in the framework?

Alexander Lichter: 29:34

But, usually, it's not. The problem is that, okay, you put things off because of potential, like, 1%, if it's even 1% case, and and put that that away, which is saying, like, okay. I I know if I can trust it. I'd rather write my own code with my own maybe faulty logic than I probably won't write tests for. So yeah.

CJ Reynolds: 29:51

No. I and I think that's the world that we're in be and I I I think you you hit it spot on. Like, they they see the magic. They're like, oh, I don't want that.

CJ Reynolds: 29:59

I'm just gonna go write it myself. Now you have bugs.

CJ Reynolds: 30:01

Now you,

CJ Reynolds: 30:01

you know, now you don't have test coverage. Like, now now you have all these other things you need to worry about. Now you have more code that you need to maintain. Yeah. And and the point about, not having to specify dependencies, like, that was huge for me.

CJ Reynolds: 30:12

Like, I've worked in some really large React code bases, and, like, I guess, obviously, at this point, some people might just say skill issue. Like, if if you're like, well, your dependency array of a useEffect is way too long. I think the issue is the the API exposed by React, like, doesn't do us any favors. Like, it doesn't give us any hints of about how we could potentially do this better or do it more the React way. And so, yeah, I I have worked in React code bases where a component would have, like, 5 different use effects, each of them with various dependency arrays.

CJ Reynolds: 30:42

And some of the developers on the team, for whatever reason, weren't using ESLint, so they didn't get the Linter warnings about, missing dependencies. Like, they would just run, Linter maybe on commit or it was, like, on CI or something like that. But then they they they run across these bugs. I'm like, why isn't this updating? Well, you forgot to pass it into the the dependency array.

CJ Reynolds: 31:01

But in Vue, automatic dependency tracking, it it just works. It just works.

Alexander Lichter: 31:05

Yeah. And especially also, as you mentioned before, like, deeply nested value is also there. It it just works. And if you need good performance in terms of, oh, I only change this when I set the value, like, fully fresh. I don't need deeply nested activity.

Alexander Lichter: 31:17

You can also do that with, like, shallow ref, shallow reactive, and you're good. So, like, opting out of that behavior is also possible. But, it's to me, it's so fascinating that that, like, React is a framework. And you mentioned it before with, like, the too much freedom as in, like, oh, yeah. You can use one of these 5 different libraries for state management.

Alexander Lichter: 31:35

And, you if you, like, just jump into another React application, the setup might be total different also with, like, styling of of everything because, yeah, it's basically long time was, okay, React is just a rendering library. The rest is, like, whatever you want to do. Yeah. While on the other side of the spectrum, you have, like, Angular, be it, like, the the new Angular is, like, hey. We have everything a certain way, and you have to do it this way.

Alexander Lichter: 31:58

And I really think that that Vue nails, like, the sweet spot in the middle where you have a few things that are like, okay, reactivity. It's built in. This is the way how it goes. State management. We have pinna, peasy peasy, Vue router for for routing.

Alexander Lichter: 32:11

While, I don't know, does Vue need a built in fetching library? No. You should use whatever you want. If you use Axios because, I don't know, you have some old legacy code that only works with that, go for it. Or if you use, Fetch natively or, like, a wrap around it whatsoever, while Angular on the other end has, like, oh, you have to use the HTTP client to do things.

Alexander Lichter: 32:28

So Yeah. The the degree of freedom, also, to me, it feels like right in the way where I think it's the most productive. It's still fast. It still works, and it gives me more joy than headache.

CJ Reynolds: 32:41

I agree with that. I think and and yes. So it's basically, like, where do you draw the line between what's built in versus what you can just reach for in a library? And I think React has drawn that line way too far on the on the wrong end Yeah. Because then you just have too much freedom.

CJ Reynolds: 32:55

And so, yeah, I I completely agree with that. Definitely.

Alexander Lichter: 32:58

And when we even look from there a bit further because, like, I know in the React ecosystem, it's very common to not just use plain React. In fact, it's even discouraging the docs unless you open that, this little, dialogue and, like, read through and say, like, oh, you can also use Veed, for example. But nowadays, you always use a meta framework, which is mainly Next. Js or for the brave people, that are not going with the mainstream, Remix or React Router as they migrated back. I heard so.

Alexander Lichter: 33:29

It's really interesting, like, that that even React team says, yeah, the preferred way is using a meta framework. While on the Vue side, I mean, you can use Vue with a script tag with just from a a CDN in the end, which is, I think, the only major framework where it's that's still possible in a feasible way.

CJ Reynolds: 33:46

So I I I, used to give a conference talk. It was, like, an overview of Vue.js. I gave it back in 2016 at a couple places, and that's how always how I start is, look. You don't even need a build system.

CJ Reynolds: 33:56

Literally, just add a script tag, and you can start to, like, gradually migrate. I I think for a lot of people, especially maybe if you're not building full fledged client side applications, maybe have, like, a little bit of jQuery here and there, adding Vue in for just a one off page or one off thing actually works really well. It's it's somewhat comparable to trying to use something like Alpine JS Yeah. Where, like, it it can just make that one little part interactive, and it's less jQuery esque. You can do the same thing with Vue, but then you get, like, the more declarative syntax and and things like that.

Alexander Lichter: 34:24

I mean, you can even use petite-vue that's supposed like, Evan build as a response. We even had Evan on the show, like, quite some episodes ago where we talked about that petite-vue is more as feature complete. It it's there. It works. It's it's really lovely.

Alexander Lichter: 34:36

But, of course, if you say, like, okay. I have this this big application. I want to migrate the front end from jQuery to, like, actual Vue components, then it's so nice. As you said, just drop in Vue, start step by step. And and at some point, you can add the build step.

Alexander Lichter: 34:48

At some point, when you figure things out, that's great. But to just get started to replacing jQuery, that's that's such a nice way to go. And the conversion will be very, very easy to just set up. Okay. I add a build step at some point, then I use single file components and so on and so on.

CJ Reynolds: 35:01

Definitely. And I so I had a thought to what we were talking about earlier about where frameworks draw the line of what's built in versus what's not. I think that also could be part of why people don't choose Vue is on the surface, you can't see where that line is drawn. So on the surface, when you just come across Vue, you see all of this magic, and you're like, well, what else is magic? What else have they done that I'm not gonna be able to do myself?

CJ Reynolds: 35:22

And that potentially scares off people that have more opinions or maybe don't want as much magic as well.

Alexander Lichter: 35:28

So a good point, actually. Yeah.

CJ Reynolds: 35:29

It could that like, maybe there could be some sort of selling point that's like, here's all the magic and and maybe even a like, a just a a list of this is what's built in. This is what you're gonna have to choose yourself, because that I think that could help reframe a a React developer's view on it as well because, I, yeah, I don't think we should spend time choosing a router. Right? Like, it it does a thing. If it works, it works.

CJ Reynolds: 35:52

Like, let's let's use VueRouter. Right? Like, we don't want, like, 3 different choices or, like, 2 different meta frameworks for that. Yeah. But yeah.

Alexander Lichter: 36:00

In React, it's just still the case. I mean and there there are more things coming. Right? Like, TanStack start is, in in the making as well. Yeah.

Alexander Lichter: 36:07

Though, to me, it's also interesting that there are that many meta frameworks around it. I mean, with with Next. Js obviously being still the the main choice, and even more popular than it depends on the survey. Right? But it's very React centric, sometimes more popular than Vue or Angular themselves because it is so popular in the React ecosystem as well.

Alexander Lichter: 36:24

So so how how do you think about, like, mainly using React with a meta framework versus, like, whether it would be better to just have a lot of things being able to use standalone? Like, let's say React server components, for example, it's always a a hot topic there where, like, okay, Next.js has implementation, and other frameworks also have one at at some point. Right? Like, Remix, also were, like, planning and implement them.

Alexander Lichter: 36:46

I think support them now. TanStack Start also, but they had a really hard time while well, if it's a functionality from the core of React, why is it only usable with with a meta framework, let's say?

CJ Reynolds: 36:57

Yeah. And I've done a little research there. So, like, I I dove deep into the Next.js ecosystem because for the longest time, I definitely was like, why do I need a why do I need this meta framework? Like, it's this like like, I can build React with Vite.

CJ Reynolds: 37:10

It's completely fine. But yeah. So I I started learning about Next and learning about the the app router and everything else. And I did start diving into, like, what's required for React server components, but it it does seem like at least the implementation itself is complicated enough that you would wanna lean on a library or framework. So, like, even though it's built in, even though the React library itself provides the primitives for RSCs, you still would need to reach for something further.

CJ Reynolds: 37:35

And so maybe maybe something's gonna come along that's, like, a lower level library. Maybe it's not a full meta framework, but maybe it's like a a plug maybe a plug in for a vinxi or something like that. Some of these tools that allow you to do build your own server side rendered stack, and maybe there will be, like, an RSC plugin that just have covers that piece, but then maybe you can you can do do the rest.

Alexander Lichter: 37:56

Interesting. Yeah. Yeah. But that's that's definitely something something that could be helpful just like, I don't know, in Nuxt. Js, where where I'm a team member of.

Alexander Lichter: 38:05

So that's why a few things were in there. It's like we have a lot of things that are just also exposed as plugins, like, let's say, auto imports or, like auto imports. Okay. We have a plugin. You can just use them.

Alexander Lichter: 38:16

That's fine in your normal normal Vue system. File system based routing has been in Nuxt for a long time, but now Eduardo, who is also maintaining the router, wrote an unplugged in for that as well. So like, okay, you have file system based routing, you have typed pages that all comes from the router now, which is of course way nicer because then everybody can benefit from that. And as you also mentioned, Vinci, which is based on Nitro, which is the server engine of Nuxt.js and now, of course, also Analogue, SolidStart, 10 StackStart, and so on.

Alexander Lichter: 38:44

Also, one more part is, like, yeah, your little, like, DIY meta framework with, like, putting all these things together.

CJ Reynolds: 38:50

Well, it's interesting to see all of these parts being pulled out from the core. Right? The the fact that Nuxt has been structured in that way where it doesn't have to all be in the Nuxt, repo or the Nuxt library, it's all of these things are more generic. They're not specific to Vue, so they get pulled out, and then they can be reused by maybe you don't wanna use Vue. Maybe you just wanna use the file based routing with, like, API routers so you can use, like, Nitro.

CJ Reynolds: 39:13

So, yeah, it is interesting to see, like, that kind of, like, building block piece. I I mean, I'm not super familiar with the Nitro ecosystem. Has anybody done, like, JSX server side rendering with Nitro?

Alexander Lichter: 39:22

So that's pretty interesting because, the the latest version of the night latest nitro nightly Nitro version should even ship JSX support so that you can straight away just render JSX there. And yeah, from there, it shouldn't be too much. Like, for example, I don't know, hono is can do it out of the box. So Knight will be able to do that too. And yeah, it's it's super interesting, as you said, that is all that modular, which was in a way, a a main thought when, like, Nuxt 3 was rebuild and rewritten.

Alexander Lichter: 39:51

Even Nuxt 2, we had a few things like, okay. Let's extract them because they're not really tied to the core. And then, of course, even if you think about, like, Unix philosophy, right, like, do one thing, isolate the scope, and so on and so on, It's very similar to say, like, okay, we have lots of parts. If you put them together, it would be really nice, but they can also be used in their own projects. For example, Jity, is used in ESLint now.

Alexander Lichter: 40:12

And it's it's a package probably just a few people, even listening to this podcast know about, but it's used in Nuxt. It's used in in a lot of spaces now even, well, probably when you run the s lint. So So

CJ Reynolds: 40:23

that that's from the un JS ecosystem?

Alexander Lichter: 40:25

Yes. Correct.

CJ Reynolds: 40:26

I didn't know that. Yeah. I came across it because if you're building a Next app and you wanna do TypeScript specific things in your Next config, you can use Jitie, which, like, just in time compiles the TypeScript. That's cool. Yeah.

CJ Reynolds: 40:37

So, like, you're combining on on JS in the Next ecosystem. That's cool.

Alexander Lichter: 40:40

That's it's about time that happens. After after Next is also the only framework that's not, powered by Vite under the hood. Then at least a tiny bit from the Vue's ecosystem swaps swaps over there. But I think, like, also Nitro as as more and more, I think, the front end frameworks but also the meta frameworks, they converge together. What what we see I don't know.

Alexander Lichter: 41:01

Every front end framework out there, every modern one uses signals now. Right? From Angular over, of course, Vue with ref, it's also just like implicit signals. Like, it's implementation is how they look like, but that's that. And also React at some point.

Alexander Lichter: 41:14

Right? So, like, with Solid, React, and so on and so on. We all move forward there, and we'd hate. That's a good thing. So at some point, I think it won't be like, it will be one thing less that's different between the frameworks.

Alexander Lichter: 41:27

Like, we all agree signals as a base, like, primative reactivity model and then some syntactic sugar, some improvements on top of that. And with meta frameworks, it's pretty similar with, like, a lot of pieces saying, okay, let's use Nitro and then use Vinci, which is based on Nitro. And then, okay, that's that's the way to go there, and probably many other meta frameworks might follow. I know Angular was also looking into, just researching if Nitro fits in the space, so that's also super interesting to see.

CJ Reynolds: 41:55

Definitely. You you I have a, like, random thought, but Vue did signals first, and I'm mad about it because, like like, when when signals started, like, getting super hyped on, like, x and YouTube and everything, I was like, Vue has been doing this for so long. And I think I think that's one of the the issues, Vue potentially has. It's almost just like a marketing issue. It's like Yeah.

Alexander Lichter: 42:16

It's true.

CJ Reynolds: 42:17

It it's like I don't know. It's not talked about in the same way. It's maybe not hyped in the same way, but, it was so funny to see. Yeah. Solid come along with signals.

CJ Reynolds: 42:24

Like, they didn't invent signals, but they were one of the first to popularize it, and it's like, yeah. Vue has been doing this all along. It's just signals. Yeah. Exactly.

CJ Reynolds: 42:31

Fine-grained reactivity. Yeah.

Alexander Lichter: 42:33

It's it's just not written as the typical signal way is doing now. And I mean, of course, like, knockout had him before, obviously. Yes. That's correct. But also the the term signals, even like if you ask a Vue developer who's not necessarily into other frameworks, like, okay.

Alexander Lichter: 42:48

Do you use signals? Like, what's what's that? Like, oh, yeah. You should if you use, like, do do you use ref? And, like, yeah.

Alexander Lichter: 42:54

Sure. Sure. No problem. So I agree. It's the The marketing part is especially interesting because I think there is a downside that there is not that much drama in the Vue community, let's say.

CJ Reynolds: 43:06

Yeah.

Alexander Lichter: 43:07

Because, like, oh, yeah. And in React, we have that a lot. Like, okay, people on Twitter are fighting whatsoever. Angular had like, oh, yeah. RxJS signals this, that, there.

Alexander Lichter: 43:16

And also like, oh, yeah. A big marketing with the Angular and it sounds, and now merging with Wiz and so on. We have, like, Svelte. Of course, Svelte 5 big release and runes and this and that. But Vue I mean, Vue is still continuously shipping nice features like in like, in the core, there's the hydration and so on and so on, but it's it's not that, yeah, it's not that polarizing.

Alexander Lichter: 43:35

It's not that popular. And, I I was talking with Evan a couple days ago in in Japan, actually, about void 0 is a totally different topic that will come out. I think it might be even out when that episode airs, then it will be linked. And it's also like, yeah, it's it's fine for, like, a 10 year old framework to not have, like, groundbreaking changes, and, it there might not be that much hype around it. But then, of course, the downside might also be that it's not that much talked about.

CJ Reynolds: 44:02

Yeah. And then you have the issue of, well, if it's not talked about, then, potentially, it's not gonna be brought up in a conversation of, well, we have a we have a decision to make. We haven't decided on React yet. What are other choices? What have other people seen?

CJ Reynolds: 44:12

And if it's not in the public sphere, if it's not being talked about, then it's not gonna come up in that conversation. Because I think, ultimately, what it comes down to is, like, that's that's when those decisions have to be make made to make Vue more of a of a mainstream decision is companies have to be based on them, and there have to be tons of developers that are hired there or maybe or hired for their their Vue skills, to to basically kick off that trend of, like, more and more people using Vue and and that kind of thing.

Alexander Lichter: 44:40

Yeah. But as you said before, I think the job market for Vue doesn't look that bad compared to other, like, less, let's say, less old or less matured frameworks. Like, even even, like I don't know. If you look at Svelte, Solid, Quik, and so on and so on, there is, like, there there is a big gap between the the Vue job market and then then all these, of course. Angular is probably depends on the region somewhat on par.

Alexander Lichter: 45:01

I know, for example, Germany is a big Angular space in general, like the German speaking regions, because they also like Java a lot, but it's it's not, of course, the the the only cause for that. But, yeah, still, like, of course, between React and everything else is a is a big gap. But for, like, also choosing, like, bigger projects choosing Vue, like Viki Media chose Vue as their framework of choice for for all the things they'll build if they need JavaScript for it. Like, all all these things are are helpful in the conversation. It's like, okay.

Alexander Lichter: 45:29

If there are big companies betting on that, then there must be a reason for that. And even if you look once again at the meta framework side, it's really interesting. I was talking about it also, like, a couple weeks ago of, like, Vue and innovation. Well, of course, once again, Vue is, like, it's matured quite a lot. And while React now went away of, like, okay, we we build server components in React itself.

Alexander Lichter: 45:54

Like, we changed the paradigm of, like, okay, everything front end to, like, well, more or less server, not first, but, well, server included. That won't happen with you. And on the other hand, all these these experiments can be made in in a meta framework. Right? So that's why, on the other hand, all the news about Nuxt.js with, like, all the features shipped in in every minor, they are pretty cool. And I see a lot of traction, be it like the Nuxt dev tools where even, like, React people, like, hey. Why can't we have these nice things?

CJ Reynolds: 46:22

I mean, I tried Nuxt, I guess it was a few weeks ago. Those dev tools are insane. Like Right?

Alexander Lichter: 46:27

And you can even customize them. You can, like, add things on there. Like, there are some modules. For example, there's an a module for OG image generation. And you have, like, all the preview and testing, everything in the dev tools built in.

Alexander Lichter: 46:39

So it's it's really, really amazing. And there there are so many more things, of course, that, like, Nuxt just allows you to do. And sometimes, like, I think at Nuxt, we do a little bit better with the marketing as in, like, there are just more features. So it's, of course, easier to, like, hey, we can do this and that. Of course, there are also some more opinionated things.

Alexander Lichter: 46:59

But then on the other hand, when I watch, a lot of, like, program YouTubers, when I have time for that here and there, I feel like, of course, everything is very, like, React centric and, like, other frameworks, but especially Vue are often, like, left out in a way. Like, we still hear about Angular or Svelte in there, but, like, Vue or especially Nuxt. Sometimes they feel like they're not part of the conversation, as you said. And I it's a bit sad because there are a lot of things happening there, so I would like to see that definitely more.

CJ Reynolds: 47:25

Yeah. And it's one thing I'm trying to bring to the syntax team, and and they they appreciated that too. I think one of the first or second podcast episodes they had me on, I was like, we we talked about Vue.js and was like, you should try Vue. And, it's it's tricky because in the content creation space, like, ultimately, you're trying to get views, and the majority of people are using React.

CJ Reynolds: 47:46

They're using Next. So if you wanna do things that get eyes on them, you're gonna use the more popular stuff or make videos about the more popular stuff. So it's it's it's tricky, but I I have tried creating Vue content on the Syntax channel. And I think people appreciate it as well because it's it's hard, though, because I I did a on the Syntax channel, I did a 4 part video series on Vue versus React. It was like I would show I did I built a bunch of different apps.

CJ Reynolds: 48:08

I was comparing and contrasting. Those videos did not do well.

Alexander Lichter: 48:11

Like Yeah. I remember. We we briefly even talked about it. We even tweeted like, hey. That that but it's in a way, it's sad because, like, it's it's super interesting.

Alexander Lichter: 48:19

But maybe as you said, like, the the big, let's say, listener base, they probably focused React, the Next.js, and then they're like, why should I compare that to the framework? I I'm set in already. Why why should I

CJ Reynolds: 48:29

And it also comes down to, like, are they decision makers? Right? Because if they're at a job and they have to use React, it's potentially not worth their time, or they might not think it's worth their time to learn about this other stuff. They're like, well, I'm getting paid for React. Why would I even learn about Vue or whatever else?

CJ Reynolds: 48:43

And I think that was also one of the issues with the videos that I made is I don't know if I positioned it well enough or sold it well enough to, like, why React developers should even care. But it's it's kinda the the the examples I showed are just like night and day in terms of, like, state updates and then also, like, dependency tracking with use effects. And I I kinda just tried to show all the things that we've already talked about that I have issues with React. It's like, why do we have to do it this way, and showed side by side comparisons with you. But I think, again, if you're if you're hired to use React, you don't wanna hear about how bad React is or how something else is better because you're not getting paid to write that.

Alexander Lichter: 49:17

Yeah. I mean, that's definitely one part, especially for developers that are okay. I I do this work. Maybe even in my free time, I I'm happy to stay away from the computer, which is is more than fine. Then it's like, yeah.

Alexander Lichter: 49:27

Okay. I I do that because that's what my company is working at. I I don't have to care about the rest. I I agree. That's definitely a thing.

Alexander Lichter: 49:33

I think also on the other hand, it's like I I was planning on doing a talk probably for some con conferences next year, just, like, highlighting what is what has Vue ever done for you? As in, like, all the things that we just mentioned, like, like, Nitro, for example, and JS, Volar, the the Vue language tools, so to say, now as a framework to also support, like, I don't know, MDX and, Astro, maybe Svelte in the future and so on. And, of course, Vite, what, what every everybody more or less use now just to highlight, hey. Okay. These these come from the ecosystem.

Alexander Lichter: 50:04

Even if you are not familiar with the framework, and you might just, like, give it a shot. It's like it's not for you. You still use a lot of things of this ecosystem. And without Vue being, like, without Vue being there, we wouldn't have these things in a way they're there. I mean, Vite was there because Evan wanted to improve the development experience, so to say, for Vue.js This is how it started to happen. It's quite fascinating what's what eventually emerged from there.

CJ Reynolds: 50:27

It's super cool to see, because, yeah, a lot of people don't even realize that I mean, anybody writing front end code, you're probably touching your code is touching some code that Evan wrote potentially, like, with Vite or even stuff from, like, the Nuxt.js ecosystem or Nitro. Yeah. It's it's interesting to see. And and it and it kind of, like, it begs the question, well, if all this cool stuff is coming out of this ecosystem, then maybe Vue is cool too. Maybe Nuxt is cool too.

CJ Reynolds: 50:50

But, yeah, it's interesting.

Alexander Lichter: 50:52

Definitely. It's also one more thing that, like let's say that the ecosystem in React is is, of course, pretty big because there are a lot of people writing React, not even focused on only job market, but, like, libraries, of course, being at, like, component libraries, shadcn, and, of course, Radix, and so on and so on, but also kind of framer motion and basically everything you have out there. While it's, of course, more difficult for for other ecosystems to, let's say, catch up on that, even though catch up is not the right the right word version or, like, wording, but it's probably also more if I remember headless UI from from the Tailwind team. Adam himself being, like, a huge Vue fan and now writing mainly React, and switched over, and the team focusing on, okay, we have headless UI version 2 for React and Vue exists, but it's still version 1. And seeing similar cases for, I don't know, a first class SDKs for tools saying, okay, we have React support and everything else is optional.

Alexander Lichter: 51:45

That's, I think, also one more reason why people say, okay, if I have a straightforward integration there, I start a new project, then less code. Right? So Yeah. That's another issue, I guess.

CJ Reynolds: 51:55

It's true. And and I've heard that issue echoed as well. Like, when I was creating that series on the the Syntax channel, I had some tweets where there was some conversation about, like, so I I tweeted, like, what's stopping you from switching to Vue? I I know it was, like, it was kinda like bait because, like, people were like, well, why would I switch to Vue? But it it had there's a lot of really good conversation in there, and one of them is, well, I need a library for this.

CJ Reynolds: 52:16

I need a library for that. And a lot of times, Vue might have something, but maybe it's not as well supported. Maybe it hasn't been around as long. So that that's that's the harder part as well. Because at at the end of the day, a lot of the apps that we're building are kind of just they're they're Lego apps.

CJ Reynolds: 52:31

We're plugging all of these things together to build the greater thing, and, React has a whole lot more Legos available than than Vue.js does.

Alexander Lichter: 52:39

That's true. But on the other hand, like, of course, you have the popular libraries, but then you have, I think, with small libraries, the same issue of, like, okay. This has, like, 20 stars on GitHub, and I can just randomly use it. You you can. You can probably do it in every ecosystem.

Alexander Lichter: 52:53

But but, yeah, that I I think also in a way that, like, a lot of libraries coming from the React ecosystem are ported over, like, especially component libraries. So, like, okay, we can easily support it as well. And then I sometimes wonder which things are unique to an ecosystem that come from there. And I think once again, the Vue ecosystem, we have a lot of things that are pretty cool and originated from there, even besides, like, Vite, UnJS, Volar. One example always comes from this form kit as, like, just form library for for Vue, which is pretty amazing, like, using it.

Alexander Lichter: 53:24

It has a phenomenal developer experience. It works so well, because the the people behind Formkit really thought well about how to structure things, those from architectural point of view. So and that's the library that doesn't exist in React right now. Of course, the other form libraries in React, but I think that's, at least from what I've tried so far, the the best one in terms of understanding and modeling.

CJ Reynolds: 53:46

Yeah. I haven't used it or seen it, so I'll have to look into it.

Alexander Lichter: 53:49

Worth trying out. Yeah. Definitely.

Alexander Lichter: 53:52

One other thing that's that really changed Vue, I think, was, the Vue 2 to Vue 3 upgrade. Right?

CJ Reynolds: 53:59

Yeah.

Alexander Lichter: 53:59

Yeah. So yeah. And I think the the biggest thing and probably was, like, the biggest, let's say, quote, unquote drama, and it's still well, in in some in some minds out there, it's still ongoing, is the the topic of the new composition API. Like, I mean, it's out there for almost 5 years now, but, like, quote unquote new versus options API. As someone who also started with the options API like like you did, the composition API was a big change.

Alexander Lichter: 54:24

And nowadays, I almost only write composition API code unless there's some some legacy things around. But how did you, how did you experience the change? How do you experience the, well, the just the composition API itself, and what's what's your favorite?

CJ Reynolds: 54:38

Yeah. So I I followed it from the early days. Like, I I remember re releasing a video on Coding Garden where I used, like, a pre release version of the composition. Well, I used the composition API when it was a separate library that you could pull in. Mhmm.

CJ Reynolds: 54:51

And I showed, like, how it works, and I was like, this is potentially coming to Vue. But I I've been a fan from the beginning mainly because it's less boilerplate. Right? Like, you're not exporting an object with all of these sections. You can just pull in the things you need.

CJ Reynolds: 55:03

And to me, that is in line with how most Vue code has been, which is, like, as little as possible to get the work done and and simple. But I think one of the issues is and I and I've talked to a lot of people about it since, and I and I did a talk on the Vue composition API at at Denver script. And some of the feedback was like, isn't this just gonna create, like, really messy code bases? Like like, I've basically it takes a certain amount of discipline to write it in a in a composable or write it in a way that can be maintained as well. And and it's super interesting to see.

CJ Reynolds: 55:37

Like, there are some people who were telling me, like, at their company, they introduced the composition API, and the developers would write comments, dates, methods, computed. And so they're basically, like, recreating the options API with all of these composition functions.

Alexander Lichter: 55:52

Correct.

CJ Reynolds: 55:53

So, yeah, I I think it's also a it's a it's a learning thing as well because I've I've realized in my career, like, architecting code in a scalable and maintainable way is is a hard thing to do. And so if if the framework isn't showing you how to do that, then a lot of developers aren't gonna do that because they're gonna do the minimum to get it done.

CJ Reynolds: 56:11

So, ultimately, I like it, especially when they introduced a script setup. I think I think when they released it, it came out with script setup. But, it actually didn't.

Alexander Lichter: 56:20

It was like in 2.1, 2. Yes, sadly.

CJ Reynolds: 56:22

Okay. Okay. But no. But I I just remember, I remember seeing the RFC, and I was like, this is it. Like, basically, it's Svelte now.

CJ Reynolds: 56:29

Like, we we we we had no boilerplate at all. Just, like, write your code. And so that was really cool to see. But, yeah, I understand people's reasons for not using it or not liking it because, like, it it can be hard. It definitely takes some practice and some work to know how to structure those composition APIs in a way that will be maintainable.

CJ Reynolds: 56:48

But at the end of the day, I think it was a good change also potentially for React developers that are moving over to Vue because it it's not the same, but it has a similar feel in that you have these little functions like useEffect or useStage or all the things you're familiar with in React, but now you can use them inside of Vue.

Alexander Lichter: 57:04

Yeah. Something closer closer to React Hooks. That's true. It's Yeah. I mean, there's even a chapter align like, explaining the the similarities, let's say, and inspiration.

Alexander Lichter: 57:14

But it it's really funny to mention the, like, the comments basically replicating the options API structure because I made a video, like, I don't know, half a year, even a bit longer about exactly that. It's one of my most popular ones of, like, organizing code with the composition API because, like, I I I really think if you use composition API into that, then that like, you as you said, you replicated structure, why you should just group things by logical concerns, say, the code that belongs together logically and not by type, by, like, oh, all the computers, all the the state, that should go together. And another thing I see people not doing very often is what you do in a normal JavaScript or TypeScript file. You create functions. Right?

Alexander Lichter: 57:52

And people, when they use reactivity and, like, graphs and and computers, they put them, yeah, next to each other, but they don't put them an extra function because they're like, okay, what should I do with that? So or or they they do that. They they write a new file, like in a composables folder and say, use whatsoever dot ts, and then they put it in there. But if it just lives in one component, just write a function at the very end of it. Like you really like newspaper code style and call it, I don't know.

Alexander Lichter: 58:16

Yeah. Use, I don't know, message or whatever. Do give me their call at the top, and you have a wonderful architecture and structure. If if you can't fully split the component up even. Right?

Alexander Lichter: 58:26

That's that's also an option. But if you have a component that's, like, orchestrating a lot of things, then, like, these concern based, inline composables, they help a lot. And, funnily, that there was always how the composition API was was imagined to be. And maybe you remember that that screenshot with, like, that color, that the color blocks in the RFC of the composition API with, like, options API or composition API. And lots of people are like, oh, yeah.

Alexander Lichter: 58:50

Can we get that at some time, like, unblurred? It's technically, it's not even important. But if you take the new file of the composition API that Evan rewrote for that, RFC, it was, like, part of the Vue CLI. He even does that. He even used these, like, inline composables that says, okay.

Alexander Lichter: 59:04

Like, the first ten lines after imports are, like, calling these functions in the bottom. So I think also there is just people were so used to options API. And then, like, oh, composables. We can share code now. Let's extract everything.

Alexander Lichter: 59:16

It just it was a lot of overcorrecting. But also by now, I think that's that's way more clear. And as you said before, you need some guidance, need some structure, some architectural patterns as well to actually make the composition API work well, as in, like, not writing spaghetti code. Yeah. And they're one who could also say, like, yeah, skill issues, like like we have before, which is in in a way, it's kind of fair.

Alexander Lichter: 59:40

But, like, even just with a with a handful of rules, it works pretty well. The problem is, and we had an Italian episode from the Vue core team writing a lot of documentation working GitLab, who is still using the options API there. If you have a lot of developers with, like, different skill set, different experience, you really need to have that structure. If you have, like, just, I don't know, a couple people on the team, it's easier, right, as long as you have code reviews and things. But if you if you're a big organization, it's not an easy switch at all.

Alexander Lichter: 01:00:08

So and then then, like, finding good rules and also that all developers agree with them, that's another that's another challenge. So I also understand the concerns of people saying, okay, Options API is easier for me. I know where I find my things. It's easier to review. It's easier to write for everyone.

Alexander Lichter: 01:00:21

But I I still think it's worth to put in that effort to make the composition API work also because it's the future and also because there are a lot of shortcomings in the options API that were resolved, right, especially TypeScript, but, of course, also sharing logic, less well, less magic even, less this dot whatsoever. So, it's it's nice that it's there.

CJ Reynolds: 01:00:41

Yeah. I think that was the other big thing. Like, last thing you mentioned is this dot. So, seeing this dot all over the place in the in the a component built with the options API, it it felt like I don't know. It felt like OOP.

CJ Reynolds: 01:00:52

It's like, well, what is this? Do I have to worry about it? And so, yeah, it's really simplified things to be able to you have these nice little functions. Everything is available within that scope. You don't have to worry about this. But I I completely agree.

CJ Reynolds: 01:01:04

I think it's ultimately, I think if there and and maybe you've created this, like, a a a place of a lot of examples of how things can be structured, that that will help a lot of people. Because I know a lot of programmers that get onboarded to a new code base, they potentially try to follow the patterns that they see in the code base already. And so if they can see, oh, this is a good example of of how I can use the composition API effectively, and, oh, I don't have to pull out everything because because it can go in both directions. You can, like, refactor too hard, and now, like, all your stuff is in other files and it's hard to find, or you don't refactor at all, and now it's all just in one component. And so because it's up to the developer yeah.

Alexander Lichter: 01:01:40

Yeah. And I've seen both in, like, code bases. I do consultancy mainly, besides content creation and the podcast and so on

Alexander Lichter: 01:01:46

and so on. It's like I've seen people, yeah, with, like, 1,000 lines of script set up, and I've seen people with, like, okay. I have 100 composables each in their own file, and they only just use the one component. So it it actually can go both ways.

CJ Reynolds: 01:02:00

Yeah. So, hopefully, like, there's more examples out there, and and people can, like, learn better ways of doing it. I don't know if the docs potentially has anything like that, but that's, like, yeah, that's the one piece that I think is is hard for a lot of people. And, like, I've met people as well that use Vue that were like, I'm not even gonna use the composition API because it's just too messy. Like, I I need the we're not too messy.

CJ Reynolds: 01:02:19

Like, if they're yeah. The structure. I need structure, and so they stick with the options API.

Alexander Lichter: 01:02:23

Yeah. I I mean, I think there should be some kind of cookbook or something. That would be, like, I think, really good as set with some examples. I mean, yeah, there's there's some videos on this topic, and I think the docs, also covered it. I remember they even had an example of, like, how to migrate over and refactoring.

Alexander Lichter: 01:02:37

So but I guess the the more the merrier. Right? And also one one other thing, it's more or less a running joke on the podcast by now because we said in so many episodes, VueUse as a library so many good composables out there. Yeah. And they they're all open source.

Alexander Lichter: 01:02:52

They have some rules on how they write composables. So that's, like, a really good way of just reading through the source code of some of them and also just the guide of, like, contribution guide, how to write a good composable and then apply that to your own. Because, like, what the rules that they have, they work pretty well. Like, okay, composables should be able to, either take, like, a reactive input, like a ref, for example, or also normal inputs. And then, of course, convert them to do whatever they need to do with them and so on and so on.

Alexander Lichter: 01:03:19

So they're they're really, really good ones, and and worth checking out. So if you haven't done that out

CJ Reynolds: 01:03:25

there, definitely worth doing.

Alexander Lichter: 01:03:26

Nice. The other thing you mentioned, the the script setup part versus the composition API of OutScript setup, Evan mentioned that it's, like, the biggest mistake with the Vue 2 to Vue 3, like, the composition API release that they didn't start with that straight away. Mainly also because a lot of developers may have heard, like, oh, yeah, new API is out. Also from other frameworks looking into Vue, they checked it and it was basically composition API without script setup. So it was it was lengthy.

Alexander Lichter: 01:03:52

It was not as elegant as it is now with script setup. It was confusing here and there. Like, oh, why do I have to return all these things? And now can I mix the 2 things in the options API and the the setup function? Now it's now it's pretty clean and elegant as you mentioned before.

Alexander Lichter: 01:04:07

But, yeah, in that time, and even though it was, I don't know, maybe 2 months or something, maybe less, I I can't pinpoint that. It's probably hurt Vue as a framework with with the new API a lot because just people remembered that. It's like, that doesn't look nice. Oh, no. That's that's not what we're going to do.

Alexander Lichter: 01:04:25

Yeah.

CJ Reynolds: 01:04:25

That's super tricky. Like, to and and, again, like, just to miss it by 2 months, like, just to have a slightly better idea, but everybody remembers the old one. Yeah. That's that's super tricky.

Alexander Lichter: 01:04:34

But I I think that's also, like, nowadays, it's it's always the case if you, like, start, I don't know, ranting about something or taking a look at something. You always remember, like, the first impression, which even if if, like, I don't know, you need read a the one example I just remember is the announcement blog post of void 0, like Evan's new company is, like, okay. There's some things, explained, and this is the art. And you might wonder, okay. That sounds weird.

Alexander Lichter: 01:04:55

And if you read further, you'll find some, more in-depth information. While, of course, if you read these first sentences and then some reaction, you're just like, oh, hey, weird. That's, that's that's not good and ramble about it and, like, round already. And then people, of course, write comments and just remember that while, okay, 15 minutes later, there you go. Here's the explanation.

Alexander Lichter: 01:05:15

Yeah. Tricky. Very difficult. I think

CJ Reynolds: 01:05:17

it's just being human. We want the or, like, yeah, we don't wanna do the work, essentially. Like, we remember the old thing. We're not gonna update our knowledge, or we wanna read just as minimal as possible. Yeah.

Alexander Lichter: 01:05:27

Yeah. And it sticks also with us. Right? It's like, okay. First impression, oh, sucks.

Alexander Lichter: 01:05:30

Even not even listening further. It's like, okay, that's that's enough. Yeah. Anyway, it I think it was really nice to have, a little, like, look into Vue versus other frameworks out there. We could even talk about some more.

Alexander Lichter: 01:05:43

We we briefly touched on on Nitro and some other frameworks, so maybe that could be something for for another episode. Lovely to have you back on here for sure, CJ.

CJ Reynolds: 01:05:51

Yeah. This is super fun. I I love just chatting and geeking out. So, yeah, I'd love to be back on at some point.

Alexander Lichter: 01:05:56

100%. Very nice. Then the the the last question, where can people follow you, CJ?

CJ Reynolds: 01:06:01

Sure. Yeah. So, youtube.com/@syntaxfm. You can find all of the the content that I've been creating for syntax. And, youtube.com/@codinggarden that has all of my live streams and videos that I've done there.

CJ Reynolds: 01:06:14

And if you go to coding.garden, that's the the full domain, has links to all my my my Twitch channel and all my other stuff as well. I'll also

Alexander Lichter: 01:06:22

put it in the show in the description, of course, and the domain is always so lovely. Such a clean name. C j x. Thank you so much for coming on. It was a pleasure, and, hopefully, you you'll be on again in a future episode as just mentioned.

Alexander Lichter: 01:06:34

For everybody, thanks for joining. Thanks for listening. Check out some older episodes, if this was the latest and newest, that you're that you're checking out. Also, some of the episodes that we mentioned throughout these episodes are linked as well. And if that's not the newest episode, then go continue.

Alexander Lichter: 01:06:49

This is the next one and see you soon. Thanks, everybody.