AnalogJS with Brandon Roberts

Episode Description

Brandon Roberts introduces Analog, the Angular meta framework built on Vite and Nitro, and walks through creating, routing, and deploying an app live.

Episode Summary

Anthony Campolo welcomes Brandon Roberts to walk through Analog, the first meta framework for Angular, which Brandon built to fill a gap in the Angular ecosystem. Brandon introduces himself as an Angular GDE, NgRx maintainer, and newly appointed Head of Engineering at OpenSauced. After briefly discussing OpenSauced's mission to highlight open source contributors, the conversation shifts to Analog's origin story — how Angular's move to standalone components and Vite's rise as a build tool gave Brandon the foundation to create a meta framework comparable to Next.js, Nuxt, and SvelteKit. They discuss package manager challenges with yarn, npm, and pnpm before diving into a live coding session where Anthony scaffolds an Analog project for the first time. Brandon walks him through standalone components, file-based routing, API routes powered by Nitro, markdown content routes, and the project's familiar Angular-like structure. They encounter Node version issues during the SSR build but resolve them and successfully deploy a pre-rendered app to Netlify. The session closes with discussion of Angular's upcoming signals-based reactivity, partial hydration plans, and Brandon's encouragement for developers to contribute to Analog as a ground-floor open source opportunity.

Chapters

00:00:25 - Introductions and OpenSauced

Anthony welcomes Brandon Roberts, an Angular GDE and NgRx maintainer, who shares that he's just joined OpenSauced as Head of Engineering. Brandon describes OpenSauced as a platform for highlighting open source contributors, where developers can connect their GitHub profiles and showcase their contributions through an insights dashboard.

The conversation touches on Brian Douglas's journey building OpenSauced from a side project into a funded company, and the rest of the team including Ted (minus one / Vortex), who leads infrastructure. Anthony and Brandon reflect on how persistence in open source can lead to real business opportunities, setting the stage for their discussion of Brandon's own open source work.

00:07:04 - Package Manager Wars: Yarn, npm, and pnpm

A tangent about Ted's preference for npm-only tooling leads into a broader discussion about the evolution of JavaScript package managers. Anthony explains how Redwood became locked into yarn because it was the only monorepo solution available five years ago, and how migrating to be package-manager-agnostic hasn't been prioritized.

Brandon shares his own journey from yarn to exploring pnpm, while Anthony recounts the community's wholesale rejection of yarn 2 and the messy upgrade path to yarn 3. The conversation highlights a common pain point in the JavaScript ecosystem — how tooling choices made years ago can create lasting friction, and how pnpm has emerged as a fast, reliable alternative that both developers have gravitated toward.

00:10:42 - The Origin Story of Analog

Anthony asks what motivated Brandon to build Angular's first meta framework. Brandon explains he talked about the need for one for a long time before several developments gave him the push: Angular's adoption of standalone components simplified the component model, and Vite's rise as a build tool provided a modern foundation to replace Webpack. He studied Angular CLI's esbuild builder source code for hints on making Vite work with Angular's compilation model.

Brandon describes his ViteConf talk where he presented this work, giving Angular representation at a conference dominated by Vite-powered frameworks. He emphasizes that Analog was built by leveraging existing open source tools rather than starting from scratch, with Nitro providing the server framework and its built-in deployment platform support eliminating the need to write custom adapters.

00:16:02 - Project Setup and Community

Brandon encourages developers to check out Analog's documentation at analogjs.org and join the Discord, noting that the project has attracted around 20 to 30 contributors, with some making their very first open source contribution through Analog. Anthony emphasizes that ground-floor projects like Analog are ideal entry points for open source newcomers, since the barrier to contribution is much lower than established projects like React.

After some technical difficulties with screen sharing and StreamYard permissions, Brandon mentions his upcoming ng-conf talk titled "Angular Across the Stack with Analog" and discusses his Astro integration work, which allows Angular components to be used inside Astro projects thanks to their shared Vite foundation.

00:22:12 - Live Coding: Scaffolding and Components

Anthony scaffolds a new Analog project using pnpm and explores the generated code structure. Brandon explains standalone components, Angular's simplified component model that lets each component declare its own dependencies without external module configuration. They walk through the main component file, covering decorators, selectors, templates, and reactive state.

Anthony installs the Angular Language Service VS Code extension for syntax highlighting and notes how readable the code is for someone coming from other frameworks. Brandon shows how the index.html serves as the entry point for global styles while the actual application bootstrapping happens in main.ts, demonstrating how Analog keeps a familiar Angular project structure while adding meta framework conventions.

00:34:02 - API Routes, Nitro, and File-Based Routing

Brandon demonstrates Analog's API routes, which live under a server/routes directory and automatically get prefixed with /api. The routing follows the folder structure, so a file at server/routes/v1/hello maps to /api/v1/hello. He explains that the server layer is powered by Nitro, the same framework underlying Nuxt, which was adopted to avoid rebuilding server infrastructure from scratch.

They create a new route component to demonstrate file-based routing, with Brandon walking Anthony through defining a HelloComponent with its own selector and template. Brandon explains that both static and dynamic routes are supported, with dynamic parameters using square bracket syntax, and that markdown files can also serve as routes — a feature inspired by Qwik City.

00:42:00 - Debugging SSR and Node Version Issues

Anthony clones one of Brandon's example repositories with SSR enabled and immediately hits build errors across pnpm, npm, and yarn. They troubleshoot by switching package managers, installing missing dependencies like PrismJS, marked, and front-matter, and eventually discover that a specific Node 16 minor version is causing the SSR build to fail with a Promise compatibility error.

Switching from Node 16.19 to 16.17 resolves the issue, and the build succeeds. Brandon notes that the underlying Angular bug is being fixed in an upcoming release. The debugging session honestly showcases the real-world friction of working with bleeding-edge tools and the compounding complexity that SSR, package managers, and Node versions introduce into the development workflow.

00:50:02 - Building, Deploying, and Serving the App

With the Node version corrected, the SSR build completes successfully, generating output in the dist directory with separate folders for the Nitro server, Vite client bundle, and SSR server. Brandon explains how the final deployment artifacts land in dist/server/public with pre-rendered routes. They serve the client build locally using npx serve and then deploy to Netlify.

After adjusting the publish directory and Node version environment variable on Netlify, they successfully deploy the full SSR application with pre-rendered blog routes. Brandon explains that Angular currently destroys and recreates the DOM during hydration but that the team is working on partial hydration to preserve server-rendered content, aligning with the broader industry trend toward smarter hydration strategies.

00:59:50 - JavaScript Fatigue, Frameworks, and Closing Thoughts

The conversation turns philosophical as Anthony and Brandon discuss JavaScript fatigue and the backlash against new frameworks. Brandon argues that building Analog was about scratching an open source itch and encourages developers to build whatever interests them regardless of community pressure. Anthony counters the "stop making frameworks" sentiment by pointing out that no one would want to still be using only Knockout and Backbone.

Brandon closes by highlighting upcoming Angular developments including signals-based reactivity and its implications for NgRx, plugs his Thursday livestreams, and mentions interest in exploring SolidJS. Both encourage viewers to contribute to open source through platforms like OpenSauced and projects like Analog, reinforcing the episode's theme that early-stage open source involvement creates opportunities for both personal growth and community impact.

Transcript

00:00:25 - Anthony Campolo

Hello everyone. Welcome back to AJC and the Web Devs. Today we got Brandon Roberts. How you doing Brandon?

00:00:34 - Brandon Roberts

I'm good. Anthony, how are you?

00:00:36 - Anthony Campolo

I'm doing great. This is something we've been working on getting together for a while. Had to reschedule a couple times, but I'm really happy to do this. This is going to be fun for me. This will be the first time I'll ever be writing any Angular code. And I cannot think of a better person to have here to walk me through this. You have a long career in the Angular world, and you've done all sorts of open source stuff, worked for numerous companies. So why don't you go ahead and introduce yourself and let us all know who you are.

00:01:05 - Brandon Roberts

Yeah, thanks for the intro. Brandon Roberts, Brandon T Roberts on Twitter. I've done a good bit in the Angular community, a GDE, which kind of solidifies that as somebody who contributes in the Angular community. I've worked on a few open source projects. One of them is NgRx, which is a set of libraries for building reactive Angular applications, me and of course other people on the team. Been on that project for a few years. And yeah, there's a lot of contributing.

My latest project is called Analog, which we'll kind of talk about further. And I kind of let out the slight announcement this morning, but yeah, just moved to Head of Engineering at OpenSauced, working with Brian Douglas or Bdougie, who I'm known more by that name. Pretty excited about it.

00:01:58 - Anthony Campolo

Yeah. Brian's a good friend. So very happy to see that. I'll drop some links in the chat here. And by the way, I'm hearing a little bit of crackling on your mic. That sounds like some digital artifacts. I'm not sure what is causing that.

00:02:18 - Brandon Roberts

StreamYard. Here, let me check. Let me take one second.

00:02:24 - Anthony Campolo

And while you're doing that, I will put some links in the chat. There's your Twitter right here. And then you've got a dev.to account as well. And then Analog itself which we will be talking about. You can see right here. Let me know.

00:03:03 - Brandon Roberts

What about now?

00:03:04 - Anthony Campolo

Sounds good so far. By the way, what is the T stand for?

00:03:09 - Brandon Roberts

Okay, cool. The T in Brandon T Roberts.

00:03:14 - Anthony Campolo

Yeah.

00:03:15 - Brandon Roberts

It's my middle name, Theodore.

00:03:17 - Anthony Campolo

Theodore. Nice. Yeah, I'm still hearing that sound.

00:03:24 - Brandon Roberts

I'm not sure what's going on there. Let's see. I think I've had this issue on StreamYard before. Let me know if you still hear it here. Maybe I'll try to switch and see if that'll clear it up.

00:03:52 - Anthony Campolo

Sounds good so far.

00:03:55 - Brandon Roberts

Okay, so no crackling at the moment.

00:03:58 - Anthony Campolo

No.

00:03:59 - Brandon Roberts

Okay, cool. We'll try to keep things like this and see if that works out.

00:04:04 - Anthony Campolo

Cool. Awesome. So why don't you give just a little bit of an OpenSauced pitch real quick, and then we can get into Angular and Analog?

00:04:13 - Brandon Roberts

Yeah, sure. For those who haven't heard of OpenSauced before, we are all about open source and highlighting contributors and developers in open source. So if you go to our main thing, Open Source Insights, where you can go to insights.opensauced.pizza, you can connect your GitHub profile there and create a user profile. And it's all about highlighting contributions. So you can go and create highlights of things that you've done in open source. And you can also look at the repositories and get some insights on those.

The biggest thing is about helping people find the best engineers in open source and highlighting people who are contributing and giving them a platform to show the cool things that they've worked on. So yeah, definitely recommend people go sign up an account. It's free. And of course you can track some repos there and post your open source highlights because we definitely want to promote those too.

00:05:14 - Anthony Campolo

Yeah, I'm really excited to see this project take off, because this is something that both you and I have been watching Brian build on stream for years now. And it's trippy for me because I was just getting into open source and all this stuff when I first met Brian and he was working on this back then when he was still working for GitHub. And now it's a legit company and there's investors and there's a team. Now he's actually getting paid to do it.

So it's super cool to see that progression. It shows that if you're willing to grind and you're willing to work on something seriously, you can turn a side project into a serious, legit business.

00:05:58 - Brandon Roberts

Yeah, for sure. The list of people that Brian has helped along the way is definitely long. In open source, you and me both. And this is kind of the next progression in that story, and I'm excited to be a part of it. I'm looking forward to see how we can keep pushing it forward.

00:06:15 - Anthony Campolo

Yeah. And who else is on the team right now?

00:06:17 - Brandon Roberts

Right now it's Brian, of course, and me, and Ted is also on the team. And then we have a few other people contributing from the community. We have people from the open source community contributing and then a few other people working on it also.

00:06:34 - Anthony Campolo

Cool. And Ted, people might recognize as minus one. Vortex is his GitHub handle and Twitch handle. You'll see him hanging around the community, and he's the kind of build wizard.

00:06:46 - Brandon Roberts

Yep. The infrastructure lead on OpenSauced. He definitely takes charge of the tooling and infrastructure and everything. And he does that stuff that I don't want to dive into too much. So glad he's there.

00:07:04 - Anthony Campolo

Yeah. He gets into the guts of the complicated stuff. And we were having a long conversation with him about yarn versus npm because he wanted to make everything npm only. And I was like, well, if you want to use Redwood, that's not really an option.

That's more of a fault of Redwood than a fault of OpenSauced, where we were originally using yarn because at the time, Redwood was started like five years ago, and so there was no npm workspaces at the time. And pnpm had maybe been invented but wasn't even being used that much. So if you wanted to do something with a monorepo with two package.json files, then you needed to use yarn. It was the only way to do it. And now obviously you could do it with npm or yarn or pnpm. And so people try to make their things agnostic to whatever.

[00:07:58] But for us, we just baked everything into the yarn CLI. We ended up upgrading to yarn three, which took a lot of effort and help from the team. And at this point, we could make it agnostic, but there just hasn't been a good enough reason to actually sit down and do the work. So we're kind of stuck right now in this yarn only world. But if we get enough people complaining, at some point we'll switch and make it agnostic. But this is kind of the first time it's ever even come up. And they're like, well, we really, really want to use npm. It's like, okay, well sorry.

00:08:37 - Brandon Roberts

Yeah, I had switched to using yarn a while back just because I felt like it was more predictable at the time between yarn and npm as far as resolving dependencies and things. So I started using yarn and kind of stuck with it. I still use it on some projects, but I've definitely gotten accustomed to using it. I also run npm and then people have been trying to get me on the pnpm train also. So we'll see how it goes.

00:09:09 - Anthony Campolo

Yeah, I liked yarn over npm for a while just because it was faster. npm is just really, really slow for whatever reason. There's some kind of fundamental infrastructure reasons I think why that is. And the problem with yarn came with the upgrades where they had yarn two, and everyone was like, we're not going to do this. And so the community kind of wholesale rejected yarn two, which is something I've never really seen before, where everyone was just like, we're not going to upgrade. We refuse to do this upgrade.

00:09:40 - Brandon Roberts

I'm in the same camp, I'm still on yarn 1.22 or whatever it is.

00:09:45 - Anthony Campolo

Yeah. And then yarn three, so they realized that and then they redid things to where upgrading from yarn 1 to 3 is actually easier than 1 to 2 or 2 to 3. So they kind of let people leapfrog it. And then the only problem is there's a specific file you need. I don't remember exactly what it is. It's something like .yarnrc. I don't think that's specifically it, but there's a specific file you need. And if that file is not there and you try to run the yarn command, then it just crashes.

So that is the one thing where this one issue is really obnoxious. And now if you try to get people to use yarn three, it's going to crash and they're going to be super confused and not know why. So now I use pnpm for everything. I am a big fan.

00:10:32 - Brandon Roberts

pnpm is super fast and I've definitely seen it firsthand. So I definitely want to take another look at switching to it.

00:10:42 - Anthony Campolo

Yeah, for sure. Alright, if anyone is out there in the chat, please say hey. Let's get into Analog now. So yeah, people who know you, they know you're very involved in the Angular community. What's up, Brant? And I think that some people will have kind of wondered, when is Angular going to get a meta framework? I was always kind of curious about that. Hey, Christopher from T3 hanging out with us.

So you built the Angular meta framework. I know there's been an Angular static site generator in the past, Scully, but there hasn't been a kind of SSR, API route kind of thing. Obviously anyone who watches the stream is going to be someone who's already familiar with things like Next.js and Nuxt and SvelteKit. So it's a pretty clear pitch, I think, what Analog is for and what it does.

[00:11:44] But I guess I'd be curious, what made you feel like you needed to be the person to do this?

00:11:50 - Brandon Roberts

Well, that is a great question. I have been thinking about it. I guess I'll take a step back. I didn't necessarily want to be the person that had to do it. But I had been talking about it for a while, just on Twitter and just in general. As you said, we've seen the meta frameworks. They've been around for a while already, but they've just kind of grown in popularity. And of course, Angular has been in the web framework space for a long time. But Angular didn't have a meta framework. So I talked about it, talked about it, talked about it.

And I think a few things kind of came along that gave me the push to put it together. One of those things was Angular moving to a simpler component model, which they called standalone components.

[00:12:45] We can look at that when we get into the app itself. But that was one thing where components in Angular can be defined with the things they depend on just on their own. So that was one thing. And then there was another thing that came along, which was Vite being the big driver of everything. Vite and ESM support and the really nice developer experience was another piece of it. And the fact that I kind of wanted this to happen.

So I went and started digging and trying to see what the viability was to use Vite as the platform as opposed to Webpack, which is what Angular uses today primarily, to see if we could put something together for a meta framework in that way. So I went down that path and I got some things together. I was actually looking at some of the source code in the current Angular CLI to see how they do it, because they have an esbuild builder also in Angular.

[00:13:49] So it gave me some hints because Vite uses esbuild under the hood also. That gave me some hints about how to do it. So I was able to look at that, open source paying it forward again, put those pieces together and build a foundation for the meta framework. So Analog is my pitch at Angular having a meta framework in this space. Because usually Angular is the one framework that's left out on the island, not following or not going along with everybody else. So I wanted to have a space in that area also.

00:14:29 - Anthony Campolo

Yeah. You actually managed to beat Redwood to the punch. We're going to be one of the last holdouts. We have an experimental Vite support right now from version four. And I remember last year watching ViteConf and just seeing all the frameworks that were using it and Redwood being left out, and I'm like, oh man, we're the only ones not here. And now Next.js is the other one because Vercel hired the Webpack guy. So makes sense. But you had a ViteConf talk, right?

00:15:05 - Brandon Roberts

Yeah, I did. The title of the talk was "Meta Frameworks and Angular." And I kind of went through the thought process about how Angular works today. Because Angular's compilation model is a little bit different than what you use in a Vite project. But I was able to find similarities there. So I was able to put those two things together and see how you could do that together.

And that talk was a really good talk to give because it gave me an opportunity to give Angular space at the conference about projects that are using Vite, because Vite was pretty much taking over just about everything at the time. So yeah, I gave a talk about the backstory of the project and where it was at that point and where the project intended to go from there. So definitely check that out if you're looking for a little history on the project itself.

00:16:02 - Anthony Campolo

Very cool. So before we get into the code, are there any kind of place setting things or things you want to talk about the project or ways people can get involved or things like that?

00:16:16 - Brandon Roberts

Yeah, sure. And you dropped some links in the chat there already. But yeah, if you go to analogjs.org, you can see the docs for the project and the GitHub. You can follow the GitHub repo from there. But yeah, definitely check out the project. Always looking to get new contributors. I think we crossed over 20, maybe almost 30 contributors at this point for the project.

I try to help people who want to contribute, even if it's their first open source contribution. Some people have made their first open source contribution through Analog, which I'm pretty excited about too. So always looking for contributors and I'll try to help you out. You can join in the Discord. And you can get to the Discord and everything through the docs also.

00:17:05 - Anthony Campolo

That's great. I definitely highly recommend anyone who is looking to get involved in open source, this would be a really great project, especially for someone who wants to get involved with something that's on the ground floor. I think that's really the thing you want to do if you want to get involved in open source. Contributing to React today is just beyond what most people could do, even figuring out what to contribute and being able to write that and have the correct tests and get the buy in from the team. That's just huge. But for a project like this, all they need is buy in from you. That's it.

00:17:47 - Brandon Roberts

Pretty much. Just dive into those issues on GitHub or even in the Discord. I'm pretty much always around looking to see what people are talking about. So yeah, definitely easier to get in and contribute on the ground floor, and we've had a few people that have done that already, which I'm super excited about.

00:18:10 - Anthony Campolo

Very cool. Okay, cool. We got a couple more people hanging out with us now. I think I'm going to transition us to some code here. Let's see. Hopefully all my permissions and whatnot are still good. That's not good.

00:18:31 - Brandon Roberts

That's always the thing you want to hear when you're about to have to switch over to show some code or something, or the StreamYard or the Mac tells you you need better permissions or things like that. Always things to work through.

00:18:48 - Anthony Campolo

I had recently gone back and redid all my permissions on my computer here. So I just gotta figure this out.

00:19:04 - Brandon Roberts

Yeah, it's gonna take me just a quick second to figure out.

00:19:14 - Anthony Campolo

You want to talk a little bit about ng-conf? Are you going to be going to that?

00:19:21 - Brandon Roberts

Yes, I will be at ng-conf. ng-conf is June 14th and 15th, I believe. I always get the dates mixed up. But it's in the middle of June. I'll start there. Yes, I will be giving a talk at ng-conf about Analog also, which if you want more Analog content, you can definitely check it out at ng-conf. The name of the talk is "Angular Across the Stack with Analog." So kind of digging into more of the story behind Analog, some of the features that it has, some things I would like to see it grow into in the future and just continue on this journey that I started.

I've been working on the project for about seven months now, actively working on it. And that was at least first contributing some code on GitHub and everything.

[00:20:20] But I probably hacked around on it a little bit before then just to try to get things off the ground. And then there's been other integrations that have come along that I've worked on as Analog has progressed. One of those things being Astro, which is everybody's favorite static site builder these days. And I wanted to create an integration for that, which came along with Astro's migration to Vite also, which allowed me to slot in and figure out how their plugin system worked and allow you to use Angular components inside an Astro project also, and keep that about as seamless as possible. And then also done some of those things in Analog too.

00:21:17 - Anthony Campolo

Okay. I think I got this. I think the stream will keep going when I hop off and on. So just give me one second.

00:21:22 - Brandon Roberts

Yeah, sure. Hello, friends. If you're watching this, I don't know if you're streaming this on YouTube or not. But if you see this later, go ahead and hit the like and subscribe on the video. Or just share it with your friends. And then we'll keep the train rolling when Anthony gets back. I don't have any elevator music, but I do know how to monologue. And he's back. I took over the show for five seconds.

00:21:53 - Anthony Campolo

There we go.

00:21:54 - Brandon Roberts

There we were.

00:21:56 - Anthony Campolo

All right. Cool. It looks like we only lost two viewers in that span. That's pretty good. All right. Cool.

00:22:04 - Brandon Roberts

Let me get some stuff open again.

00:22:12 - Anthony Campolo

Thank you all for bearing with us.

00:22:17 - Brandon Roberts

The streamers know how it goes. When you get on, you open up your tabs and things and then StreamYard is like, I don't think you would want to share your screen right now. So I'm gonna have to make you restart everything. [00:22:31] - Brandon Roberts Yep. Cool, cool.

00:22:33 - Anthony Campolo

Simona's talk.

00:22:34 - Brandon Roberts

At Ng Conf was great. First class integration. You know, Simona.

00:22:41 - Brandon Roberts

Yeah. Simona Cotin is the engineering manager on the Angular team, and she's great. I will say that up front because I've worked with her before and met her in person. So shout out to Simona for her talk.

She was probably referring to the image directive that has landed in Angular. That gives it something similar to Next Image, where it'll hook up with all the image CDNs to give you some nice performance when you're loading images and things. So if you're using Angular, definitely check that out too.

00:23:21 - Anthony Campolo

Cool. Yeah. Having the image component is huge. I remember I would talk to Christopher Burns, my podcast co-host. He would talk about Gatsby's image component, and it was like a religious experience for him. Like how great that image component was, how much it changed his life, and how he could never migrate away from it until Next created their image component.

He's like, finally, now I can leave Gatsby forever. Like, really, the image component is that important?

00:23:47 - Brandon Roberts

Yeah, he said that was the one piece that kept him on the platform. Well, we'll see what happens with Gatsby, you know, with being acquired by Netlify and everything.

00:23:57 - Anthony Campolo

Yeah, totally. So this is the Analog home page. We've already talked about it using Vite and it's hybrid SSR/SSG.

This is something that is a big deal now, having all different types of rendering. So you can do static site generation or you could do SSR, but can you do things like on-demand rendering? There's this new category of incremental static regeneration or deferred static generation. Each framework has its own term. But do you know what I'm talking about?

00:24:36 - Brandon Roberts

Yeah. And I would say that's not officially supported. We're still used to the standard static site generation and SSR. But there is some advanced support for doing a mix of the two things, just because of what Analog uses underneath for its server framework. So I don't see a reason why we couldn't support that in the future at some point.

00:25:02 - Anthony Campolo

Okay, cool. And it looks like you got a StackBlitz here. I always enjoy these. Gives you a quick way to spin something up and take a look at it. So is this the main online IDE that you use?

00:25:19 - Brandon Roberts

Yeah, definitely. StackBlitz is my go-to when I want to spin up something new. I've used it for so long. I was working on the Angular team doing documentation a while back, and we used StackBlitz for all our examples. And AnalogJS uses StackBlitz, so it's just kind of brought it forward.

It always made a really quick way to spin up an app without having to download anything. So it's definitely great for reproductions and things. It's usually my go-to.

00:25:53 - Anthony Campolo

Yeah, it looks like this might be because I'm streaming, it's taking a little while here, but if people want to check this out, here is the link.

00:26:05 - Brandon Roberts

Yeah, you can give the StackBlitz link and you can also go to analogjs.org/new. That will pretty much forward you to the StackBlitz link, just a little shorter, nicer URL there.

That was actually recommended to me by Matthias from the Vite core team, or I guess most people probably know him as Patak.

00:26:34 - Anthony Campolo

Yeah.

00:26:34 - Brandon Roberts

We kind of collaborated on that just to give people a nice link.

00:26:39 - Anthony Campolo

Because he works for StackBlitz now, which is a very cool hire for them because I know StackBlitz was really going big into supporting every single framework with Vite. And so you have all these .new domains that will send you to StackBlitz.

00:27:02 - Brandon Roberts

Yeah, those .new domains are surprisingly expensive.

00:27:09 - Anthony Campolo

Yeah, I saw that. I think they're created to start something up. So I don't know if that actually justifies a higher cost, or if there's some fundamental difference with how the DNS works. But I was looking at that. I wanted to see what like ajcwebdev.new would cost or something like that.

Okay. So this is our docs introduction. I'm going to be going with pnpm here. So it looks like we got pnpm create analog and that will get our things started up. Is it going to ask me if I want TypeScript and stuff like that?

00:27:47 - Brandon Roberts

No. Because you don't have a choice. Angular uses TypeScript out of the box.

00:27:55 - Anthony Campolo

Oh, that's right. Yeah.

00:27:56 - Brandon Roberts

You gotta use it.

00:27:57 - Anthony Campolo

You're way ahead of the game. Like, create T3 app was the first time I ever used a project that was like, you're not allowed to use JavaScript.

00:28:04 - Brandon Roberts

Yes.

00:28:05 - Anthony Campolo

All right. 14 or 15, I'm assuming I want 15, but what's important to note? Like, why would I pick 14 over 15?

00:28:15 - Brandon Roberts

14 was the version when I got the project off the ground. So that's the minimum version that you want to be on. But I'll definitely always go with version 15 for now.

Angular is in the process of starting to move towards version 16. So I may have an experimental release so you can try the new features and be on the really bleeding edge with version 16 of Angular.

00:28:47 - Anthony Campolo

Yeah. By the way, you don't need npx or npm run for pnpm, you just do pnpm dev.

00:28:53 - Brandon Roberts

Oh, okay. Yeah, I have to add that to the docs. Hey, that's a free PR right there.

00:29:00 - Anthony Campolo

Yeah, that's a real simple one. So let me pop the code open and let's just see what we got here for the main page. Let's see. No, I do not want to share analytics, I'm sorry. You okay?

00:29:17 - Brandon Roberts

Yeah. I guess I haven't seen that prompt in a while. Maybe I've been using Angular too long. I hadn't seen that prompt for the analytics stuff.

00:29:31 - Anthony Campolo

Yeah, it looks like that's for Google.

00:29:37 - Brandon Roberts

Well, that's part of the experience that I wanted to put together with Analog. I didn't want to stray too far because people in the Angular community are used to having an experience that's close to what comes with the Angular CLI. Using ng serve, ng build, all those things. I still wanted it to have that similar experience there.

So being able to use ng serve and ng build and everything kind of lowers people's hesitation about it. And the structure of the project looks pretty similar to what you would see in an Angular project. Just want to create that common experience there.

00:30:22 - Anthony Campolo

Okay, yeah. So it looks like we have an app folder, server folder, and assets folder. Let me just kind of see what we got here. I'm assuming this is going to be our main component here. Yeah.

00:30:40 - Brandon Roberts

Yeah. This is what I mentioned before about standalone components in Angular. Analog has file-based routing, but it just uses Angular components. You just define Angular components as routes here.

Standalone components are a big driver of that because you can just define a component and define whatever that component needs to run. Or if you need to bring in any additional things in Angular using imports, like third-party libraries, UI components, or even components that you've built yourself, you can drop them in there. It lets you do all that self-contained in this file.

00:31:28 - Anthony Campolo

Interesting. Okay. So my first question would be, is there an extension that I can add that will add some syntax highlighting for this HTML?

00:31:38 - Brandon Roberts

Yes. The Angular Language Service extension is what you want to add there.

00:31:46 - Anthony Campolo

Cool. Yeah, something like that seems like a pretty easy win if that's not already a thing. That's possible. Yeah, it's a lot nicer.

00:31:55 - Brandon Roberts

Yeah, I should add that. I can't remember if I'm recommending any VS Code extensions in there, but that'd be a good thing to add also, like you mentioned.

00:32:06 - Anthony Campolo

Definitely. All right, cool. So this so far seems pretty comprehensible to me. This template is like, if I was writing React right now, I had a return function. This is where the HTML is, and then it's bringing in this reactive variable here with count. That is being initialized here and then incremented with this function. And the increment function is on an onClick.

So yeah, having done a whole bunch of different front-end JavaScript frameworks before, I can immediately look at this file and basically understand what's going on. You know, the component, that's a directive.

00:32:55 - Brandon Roberts

That's a decorator.

00:32:56 - Anthony Campolo

Decorator, starts with a D. And then the things I would be curious about are what's selector and what's standalone.

00:33:06 - Brandon Roberts

Yeah. So the selector is the tag that would be used in the HTML template when the component is rendered. Since these are routes, they would be at the top level of the component tree. So we have our app root there, which is like the topmost component in the application. That's what your selector would be for that.

But if you have other components that you want to use inside of that app root component, you could use them by their selector.

00:33:37 - Anthony Campolo

Very cool.

00:33:40 - Brandon Roberts

Yeah. And the index.html is pretty standard stuff here. You mainly use this as a point to wire up any global styles from a CDN, and also your entry point for your application. The main part where you bootstrap the application is the src/main.ts.

00:34:02 - Anthony Campolo

Awesome. So this is great, all very easy to get spun up with. And then how do I get to this function right now? Is it going to be /hello or /api/hello?

00:34:17 - Brandon Roberts

This would be /api/v1/hello.

00:34:22 - Anthony Campolo

Okay. Why is it v1?

00:34:24 - Brandon Roberts

Because it uses the folder structure. The API routes use folder structure too. So it's inside server/routes/v1. Anything under server/routes automatically gets prefixed with /api. And then it follows your path from there.

00:34:43 - Anthony Campolo

I understand what I'm doing here. I should be able to do this and then do that. Boom. Cool. What is H3?

00:34:56 - Brandon Roberts

H3 is part of the server framework that Analog uses under the hood. So of course Vite is part of it, and then Nitro is another open source project.

00:35:08 - Anthony Campolo

Oh, that's cool. So Nitro, this is from Nuxt, right?

00:35:14 - Brandon Roberts

Yep. Nitro is the server framework under the hood that powers Nuxt also. Part of taking on this journey was not having to rebuild everything from scratch.

Nitro can be used as a standalone project or library that you can bring into your project. There was definitely some gluing together of Nitro and Vite to use it within Analog. But it was definitely very useful.

Nitro also has a bunch of deployment platforms where you can deploy, and it can just build on top of that out of the box. So I didn't have to go through and create a bunch of adapters to have that integrated.

00:36:10 - Anthony Campolo

Yeah. I'd be remiss not to shout out one of my coworkers, Rishi. He actually created a video showing how to deploy a Nitro app to Edgio, my company, and so people should definitely check that out.

I also want to say hey to Findout Singularity in the chat. We got a long-time Angular guy and someone who we know pretty well from the whole open source world. I had no idea you were streaming. Yeah, I'm happy that you're here.

I'm doing this, you know, it's been a bit sporadic. I know this is episode seven, and I started this maybe six months ago or so. The plan was to do once a week and ended up being maybe like once a month, but hopefully we'll get this on to a more regular cadence because I very much enjoy these streams. Very fun.

Okay, cool. So we got our app going, we got some API routes, we got a home page.

[00:37:10] Is there anything you want to do in this project that we can kind of show off before we get to the deployment step?

00:37:18 - Brandon Roberts

Yeah. So we can go through and show creating a few different kinds of routes. Because it has that familiar feel with file-based routing. So if you want to go into the routes folder and create another route there, we can do that. We could even connect it to the API. Go ahead and create a hello file there. And if you want, just type @Component or we can just copy that.

00:37:50 - Anthony Campolo

Yeah. Interesting.

00:37:51 - Brandon Roberts

And just use that as the open parentheses. And then it'll be an object inside that decorator.

00:37:59 - Anthony Campolo

Yeah, I'm gonna just kind of grab this because that's gonna take me a while to get familiar with all this syntax. So we just kind of do this. Yeah.

00:38:10 - Brandon Roberts

You could just take all that extra stuff out of there. Yeah, because it's just showing how you can pretty easily spin up new routes from there. You can put some extra text in there for the template.

00:38:33 - Anthony Campolo

And then what should the selector say?

00:38:35 - Brandon Roberts

That one can be app-hello. It's another route component. The selectors aren't required, but it does help for debugging purposes when you're looking down the component tree.

00:38:54 - Anthony Campolo

And then does this need to say anything like HelloComponent?

00:38:59 - Brandon Roberts

Yeah, that can be HelloComponent there.

00:39:02 - Anthony Campolo

Okay.

00:39:04 - Brandon Roberts

And then you should be able to go to /hello. You may have to restart the dev server there.

00:39:19 - Anthony Campolo

So you guys talking about over here?

00:39:21 - Brandon Roberts

Pick it up.

00:39:22 - Anthony Campolo

You managed to get the plow stream going at all. No idea what you're talking about. For releases. July. Yeah, yeah. Totally productive month.

00:39:36 - Brandon Roberts

Yeah, so if you go to /hello. [00:39:40] - Anthony Campolo There we go.

00:39:40 - Brandon Roberts

Yeah, so there are a few different routes you can create. You can create your static routes which are just a path you define. And you can create dynamic routes that use the parameters we just used, similar syntax where you enclose them in square brackets if you want to have dynamic parameters. You can do that also.

00:40:03 - Anthony Campolo

Let me just take a look at the docs here.

00:40:07 - Brandon Roberts

So if you go under Features and Routing and Overview, it shows you the different routes you can create, whether it be index routes or static routes, dynamic routes.

00:40:19 - Anthony Campolo

Dynamic routes.

00:40:20 - Brandon Roberts

Yeah, the blog is usually my go-to for content there. You can also create routes with markdown files. We could show that also.

00:40:36 - Anthony Campolo

But also, do you have, let me just go back to the git repo real quick. Something I always find useful is example apps. Do you have any kind of canonical example apps that are clonable or anything like that?

00:40:55 - Brandon Roberts

I'm sure there's some in my... yeah. If you want to go to my GitHub account there, I'll drop a link in here, one second. But yeah, there's a bunch of Analog apps under my account here, but I will drop a link in here to one I did most recently.

00:41:22 - Anthony Campolo

The one from Open Source Friday.

00:41:24 - Brandon Roberts

Yeah, that works. Cool. And that was one where we just had a few routes.

00:41:32 - Anthony Campolo

It looks like this already has the blog stuff in this real quick.

00:41:38 - Brandon Roberts

Yep. Had a few routes there and some content routes. I can't remember if we enabled server-side rendering on that one, I'll have to look and see. But it wouldn't be too much to... yeah, this one has SSR and everything in it. Absolutely. It'll give you...

00:41:56 - Anthony Campolo

Like a little bit of a shortcut here.

00:41:58 - Brandon Roberts

Yeah.

00:42:00 - Anthony Campolo

Yeah, this is really great. I find that I'm not sure how easy or complicated this would have been to do just from a vanilla Angular application. But the kind of conventions you've used, it seems like pretty much exactly what I expected.

I remember when I first heard you mention this project, I was like, oh, this is going to be my way to get into Angular, because I figured there would be a lot of good touchstones for me in terms of understanding what's going on. And so far, that seems like exactly the case. This all is pretty dang simple, all things considered.

Oh, it looks like you got a bug here.

00:42:40 - Brandon Roberts

Oh, a bug. Of course, maybe this is a pnpm thing. Could be an issue with pnpm, I'm not sure.

00:42:50 - Anthony Campolo

Is Node 16 the correct Node to be on, or do you need Node 18? Are you in the hip Node world?

00:42:57 - Brandon Roberts

Node 16.19 should work. I believe that's one that I've tried personally.

00:43:03 - Anthony Campolo

So let me then kick this back and let's try just npm. Let's see what happens. Yeah, I find that for some reason SSR just makes everything harder. I cannot tell you how many times I've seen an error message with SSR in it and been like, oh, something's broken. I don't know why. That's with SSR. Okay.

00:43:31 - Brandon Roberts

Yeah, SSR is definitely giving me my fair share of challenges there. But we kind of worked through them as they come.

00:43:41 - Brandon Roberts

Okay, different errors this time.

00:43:45 - Brandon Roberts

Okay, that's cool. I got a big error there. Let's see.

00:43:54 - Anthony Campolo

Really didn't like that one.

00:43:57 - Brandon Roberts

Yeah. Let's try just killing that one and then try to run it again and see if we get the same thing. More messages to dig through for that. So yeah, npm run dev. Let's see if we get the same thing or we get a...

00:44:16 - Anthony Campolo

Yeah, this looks like...

00:44:17 - Brandon Roberts

A different one this time.

00:44:19 - Brandon Roberts

Okay, cool. Let's see, we may be able to do what you said. You have version three of Yarn. Yeah, we could try that one.

00:44:28 - Anthony Campolo

I mean, I'm actually on version one of Yarn.

00:44:31 - Brandon Roberts

Okay, cool. I know if this doesn't work, then I'll just have to go back to the drawing board and see what's going on there. But version three or version one of Yarn, I know it's been...

00:44:43 - Anthony Campolo

Tested in here.

00:44:44 - Brandon Roberts

Something to go on there.

00:44:47 - Anthony Campolo

Yeah, it's fine. We got a different error for pnpm and npm, so it seems like it's something to do with those things, because if it was giving us the same error, then we would probably assume it's something to do with the actual project. But that doesn't seem to be the case. And just supporting all three package managers is like a full-time job in itself.

00:45:11 - Brandon Roberts

For sure. And shout out to Chris who's in the chat also, along with everyone else. Thanks for coming through, appreciate it.

But yeah, we walked through some of the things here and hopefully we can get this up and running. To get that running, yarn dev, you get our ng serve, we'll see if we can get this one up and running or not.

00:45:43 - Brandon Roberts

Nope.

00:45:44 - Brandon Roberts

Interesting.

00:45:46 - Anthony Campolo

Yes.

00:45:46 - Brandon Roberts

Build error.

00:45:49 - Brandon Roberts

Yeah, I'm not sure what's going on with that. Let's try turning off SSR.

00:45:54 - Anthony Campolo

How do I do that?

00:45:55 - Brandon Roberts

Yeah, if you go into the config, down there at the bottom. Yes. And just set SSR to false, right there on line 17. Yeah, set that to false and then try yarn dev again. We'll see if that does a little bit less work and see if we can get the application up and going.

Okay, we got a few more dependencies to install, I believe. I've seen that before. So yeah, if you just do yarn add PrismJS, it'll have everything that you need. Yeah, PrismJS. And we'll also need a few more: the marked package and the front-matter package there.

00:46:46 - Brandon Roberts

Okay.

00:46:50 - Brandon Roberts

Yeah, just marked, and front-matter. Yes, that should be all that you need there. So we got a different error this time. Hey, we got a different error! So we're making progress at least.

00:47:06 - Brandon Roberts

Yeah, yeah.

00:47:07 - Brandon Roberts

So we know we're getting there along the way.

00:47:11 - Anthony Campolo

Oh, yeah.

00:47:12 - Brandon Roberts

Yeah, so there we go. This one is, like I said, now we can see that the application is there. We can go and look at some of the routes that we had here with the blog. So if you just go to blog/1 or you can type an ID, whatever you want the ID to be. It could be like "my-first-post." Yeah, my first post or something like that.

00:47:38 - Anthony Campolo

Blogging.

00:47:38 - Brandon Roberts

Yeah, so we're just looking at this. This is just one of the routes you can do for dynamic routes. And then the hello.md was just an example of how you could drop just markdown as-is in the route and use that. Yeah, so just go to /hello.

00:48:00 - Anthony Campolo

/blog/hello or just /hello?

00:48:02 - Brandon Roberts

Yeah, just /hello.

00:48:03 - Anthony Campolo

Yeah.

00:48:03 - Brandon Roberts

Okay, cool. So this is just being able to take markdown on its own and being able to use it as a defined route, just kind of taking away some of the hurdles that would get in your way to being able to build something, especially if you're familiar with Angular. It gives you these routes and things in place there to be able to use.

So then let's see if we can do a build. Let's turn back on SSR and then see if we can do a build. Yeah, just set that back to true.

And this was another part that I kind of wanted the experience to be a little more seamless. Yeah, we can skip that part. We'll see if it gets through that part too. But the goal was that today, if you do a build with SSR and Angular, you have to bring in Angular Universal, which adds a few extra steps.

00:49:08 - Anthony Campolo

It's saying "Method Promise.prototype.then called on incompatible receiver."

00:49:14 - Brandon Roberts

Oh yes, okay. Let me see what version of Node we're on here. That may be, like I said, another one of those... 16.19. Yeah, okay. Let me see what version I'm on because I've run... like I said, these are some of the things I've had to battle through before. Okay, I'm on 16.17. So you can either go up to like 18.13, but we don't necessarily have to do that.

00:49:38 - Anthony Campolo

Node 16.17. It's one of the great things about Volta. Makes it very easy to flip this on the fly. Let's see what that does.

00:49:52 - Brandon Roberts

Yeah, so the goal here will be to do the SSR. And this will give you the static site and the pre-rendering of the routes there.

00:50:02 - Anthony Campolo

So you did it!

00:50:04 - Brandon Roberts

Yep. So back to the... real quickly.

00:50:06 - Anthony Campolo

Now I'm curious if the dev command will work.

00:50:10 - Brandon Roberts

Yeah, that could have been part of that too. So that's everything. [00:50:16] - Brandon Roberts It looks like it's working, even though I'm getting an error. That's interesting.

00:50:21 - Brandon Roberts

Yeah, it could be just a cache in that case, but probably stop it and start it back up again. You might not get that error that time.

00:50:32 - Anthony Campolo

That's really interesting because I frequently will see errors like, "If you're on Node 14 you should be on 16," or something like that. But it's rare that I see a minor version of the correct major version of Node throwing an error. So that's special.

00:50:49 - Brandon Roberts

Well, the good thing about that particular area that we saw is that it's being fixed in an upcoming release of Angular. So I know it was an issue.

Of course, those things will trickle down once that gets released in a patch release and then I won't have to worry about it anymore. Which is even better.

00:51:08 - Anthony Campolo

So our build did work though, and then. Yeah.

00:51:11 - Brandon Roberts

So if you go into the dist folder in the project, we can look at the files there. So we have a few things here. The Nitro folder is the development folder for Nitro, and then it uses that for pre-rendering.

The client folder is what Vite uses to build the client application. And then the SSR folder is the SSR server that Vite uses for the server side rendering.

Then once all that's done, the server/public is where your contents go. That's your fully deployed application there.

00:51:49 - Anthony Campolo

So why is it empty right now?

00:51:51 - Brandon Roberts

Well, there should be some pre-rendered routes in there unless something errored out.

00:51:56 - Anthony Campolo

So is there a way that you can run this dist, like is there a preview command?

00:52:03 - Brandon Roberts

I don't think I have a preview command in there yet for that.

00:52:12 - Anthony Campolo

That's something that I know Vite by itself can do, where you can build something and then kind of serve that from your computer just to see what's going on.

00:52:20 - Brandon Roberts

Yeah. I know you can serve like the client directory using Python, you can use a Python command to do that. So if you go into dist/client, or actually you can go into the client directory and do npx serve, I believe.

00:52:42 - Anthony Campolo

Really? Yeah. So literally just go into client like that.

00:52:47 - Brandon Roberts

Yes. And then do npx serve. The serve package is a project that will spin up a nice quick HTTP server.

00:52:57 - Anthony Campolo

Yeah I think. Okay, cool. That looks like that worked. Okay, let's try and deploy this thing.

00:53:06 - Brandon Roberts

Yeah, sure.

00:53:07 - Anthony Campolo

So where do you want to deploy it? Let's do, I mean, probably Netlify, Vercel are the main ones that people do. Do you have a preference?

00:53:18 - Brandon Roberts

Netlify is usually my go to. So we can deploy it there.

00:53:23 - Anthony Campolo

Yeah. Well, eventually we want to figure out how to get this deployed on Edgio, as I'm contractually obligated to do so. But right now, I don't want to do that and then have it break on me.

00:53:35 - Brandon Roberts

Yeah. I'll be interested to see what the SSR story is there to deploy on. So we'll see.

00:53:46 - Anthony Campolo

Yeah. I've actually been really enjoying learning Edgio specifically because it's more kind of server first and less static first, which is actually something that Ishan says. It's like an alternate universe where the Jamstack was dynamic first instead of static first, is kind of what it's like using Edgio. So it's really well positioned for this kind of new server first world we're all barreling towards.

00:54:14 - Brandon Roberts

Yeah. I've thought about positioning Analog as a server first framework, where you get SSR and everything enabled out of the box, as opposed to having to enable it. But you can, of course, always disable it.

That way you're getting that experience right away. Granted, everything works correctly — the server side rendering, the static site generator, being able to generate static pages. So that one's still in the works, but I've definitely got some thoughts on that.

00:54:55 - Anthony Campolo

Cool. I'm just going to get this on a git repo real quick. I'm not screen sharing right now because something's weird with my git thing. But I can fix that.

00:55:09 - Brandon Roberts

Yeah, no problem. But like I said, we went through a lot of the things that are in Analog today. Still looking at doing some more things in the future.

But the main things were what I call table stakes with meta frameworks today — file based routing, API routes, and being able to server side render the app. We kind of went through some of those to be able to do those things in a pretty seamless way.

00:55:49 - Brandon Roberts

Okay, there we go.

00:55:52 - Anthony Campolo

I tried — I realized that I was still in that client folder when I tried to commit and do stuff with git, and I was like, what are you trying to do, buddy? Yeah, it's not gonna work.

00:56:03 - Brandon Roberts

Okay, I think.

00:56:04 - Brandon Roberts

Yeah. Like Chris said in the chat, Node 16 is a maintenance release, 18 is the new Node LTS. I know I've used 18.13.0 and that seemed to work pretty well. But either way, that error that we were seeing before hopefully will be moved out of the way.

00:56:29 - Anthony Campolo

Yeah. Okay. So we got our thing here, and then that's all you gotta do. Just run build and then dist. Pretty straightforward.

00:56:40 - Brandon Roberts

Well the...

00:56:41 - Anthony Campolo

Dist, right?

00:56:41 - Brandon Roberts

Yeah. It's dist. If you're just deploying the client application, dist/client will be where the files will go.

00:56:51 - Anthony Campolo

So that's what we're going to want to do.

00:56:53 - Brandon Roberts

Yeah.

00:56:54 - Anthony Campolo

Okay. Yeah. That would be — a Netlify TOML file to specify that would probably be a good thing to add.

00:57:05 - Brandon Roberts

Yeah. If you were using the API routes and things, then you could use Netlify to configure it. The good thing about Nitro is that it supports a lot of deployment platforms.

It will actually build a Netlify function for you if you're on Netlify, or if you're on other services like Edgio, it'll build natively to that deployment platform instead of you having to choose a different adapter. And this happens pretty transparently, so you don't have to necessarily configure it that way.

00:57:47 - Anthony Campolo

I'd be curious, Sam Griffin, how you're liking Qwik City so far? I haven't played with it yet, but it's on my list of tech that I'm very interested in. Have you tried out Qwik yet, Brandon?

00:58:01 - Brandon Roberts

I have tried it out. I did try it out before. Yeah, it's in that same area. If you — I know you can set the Node version in Netlify as an environment variable.

00:58:16 - Anthony Campolo

Right? Yeah. Let's see if that — it looks like it still works. Hello. Okay. Yeah. So let's go ahead and fix that.

00:58:27 - Brandon Roberts

But I did try Qwik a while back and I definitely have seen the project take a bunch of strides when I used it before. Qwik was one of the inspirations, between the markdown routes where you could just drop a markdown file in the routes folder and just use that. So I definitely got some inspiration from that too.

00:58:54 - Anthony Campolo

Very cool. Yeah. So it's like barely using it. Just a wrapper for a demo. Mitosis library output. Yeah, Mitosis is another interesting one. Also on my list of things to check out.

00:59:05 - Brandon Roberts

[inaudible]

00:59:08 - Anthony Campolo

All right, cool. So I changed that Node version environment variable and it looks like it's now using Node 16. So that should be all we need to get it going. Yeah, very fun but very early. Yeah, very early stuff is my favorite.

00:59:22 - Brandon Roberts

Yeah, that was my impression also when I first looked at it. I thought it was a very ambitious project, but it was definitely a change from what has been out there today.

It definitely made a bunch of strides on the developer experience side of how you author components in Qwik and adding new features and things like that. So it looks like it's definitely coming a long way.

00:59:50 - Anthony Campolo

Yeah. I like even, you know, when people put out — I think JavaScript fatigue has come back with a vengeance recently because there's just so many of these new meta frameworks. I was watching James Q Quick had a video where he was getting all these comments of people being like, "Stop making new frameworks."

01:00:09 - Anthony Campolo

And I was like, yeah, I understand. But at the same time, I love innovation, and I especially love when there's a big moonshot. Like, we want to completely rewire how people think about SSR by creating resumability. Like all that stuff, I think that's cool. I like big, bold new technological advances, even if they are a little challenging.

01:00:29 - Brandon Roberts

Sometimes I say, if that was the case, I might not have created Analog.

01:00:35 - Anthony Campolo

Yeah, totally.

01:00:36 - Brandon Roberts

If we weren't doing that part.

01:00:39 - Anthony Campolo

So what were some of the other routes in here that we can test?

01:00:43 - Brandon Roberts

Yeah, there was the hello route. Let's maybe deploy one more time, but let's change the — since everything built in correctly, let's go back to the deployment and change the directory that it looks at for deployment and then deploy it one more time.

01:01:05 - Anthony Campolo

Okay.

01:01:06 - Brandon Roberts

So yeah, if we go into the build area there.

01:01:12 - Anthony Campolo

So it's just gonna be dist now, or?

01:01:14 - Brandon Roberts

Well, it'll be dist/server/public. That should be where the deployment goes because this has built the whole SSR app and pre-rendered the routes and everything. So we'll at least get a couple of those in there.

01:01:38 - Anthony Campolo

Totally. Yeah. This is such a good point. Imagine if people said, "Stop making frameworks," and then we were just still using Knockout and Ember and Backbone in 2023. I don't think that's really what you all want. You think you want that, but you don't.

01:01:56 - Brandon Roberts

I mean, people are gonna — I built Analog because I was scratching an open source itch that I had to put Analog out there. But I would tell people to build what you want. Everybody doesn't have to release their thing as an official thing. But I would definitely say go ahead and try to build whatever you want to build and see how far you can take it.

01:02:22 - Anthony Campolo

Yeah. And no one's forcing you to migrate your production apps to a new framework just because everyone's talking about it on Twitter. People have more agency than they think. When they hear everyone talking about some new thing, they're just like, oh, that means I have to use the new thing. But not really. You can if you want, and if you think it solves the problem for you, but no one's forcing you to use a new framework.

Yeah, for sure. Okay. So now let's see. What should I be going to to test this?

01:02:54 - Brandon Roberts

The hello route should be — I had one there for building that. Let's see. Server public.

01:03:05 - Anthony Campolo

[inaudible]

01:03:07 - Brandon Roberts

Yeah. There should be a couple of ones there, if everything pre-rendered correctly, like /blog/my-first-post.

01:03:17 - Anthony Campolo

Interesting. Oh, there we go.

01:03:22 - Brandon Roberts

There you go.

01:03:23 - Anthony Campolo

So cool.

01:03:24 - Brandon Roberts

Awesome. There we go. So that was actually a pre-rendered route there. Of course, Angular will take over when the JavaScript loads.

But if you're building a blog or something, you could pre-render these routes and it still all works with JavaScript turned off. Today, when Angular loads, it kind of destroys and recreates the page. But I know that the team is working on making it so it won't destroy the page but will do partial hydration instead, which of course is what everybody wants it to do and not destroy everything and recreate all that work.

01:04:05 - Anthony Campolo

Yeah, cool. Awesome. Well, we made it. We got a working, deployed, SSR enabled Analog app. Nice. That's super sweet.

So, anything you want to start closing it out with? Maybe new things you're working on, features, or things that people can help out with if they want to get involved?

01:04:27 - Brandon Roberts

Yeah. Of course, Analog is going to be my go to, Analog and NgRx. I can't forget about my OG open source project.

Definitely check out NgRx. We'll have some stuff coming up soon because Angular is moving in a different direction with reactivity with signals. I just recently did a live stream with Alex Rickabaugh from the Angular team where we talked about what signals are and what they mean for the Angular world. So definitely want people to check that out.

01:05:01 - Anthony Campolo

I'm assuming that's on your YouTube channel.

01:05:03 - Brandon Roberts

Yes. Yeah, you can go to my YouTube channel.

01:05:05 - Anthony Campolo

Yeah, great YouTube channel. You are also a frequent streamer. Highly recommend people check this out. It's been my window into the Angular world, and I've learned a ton from watching it.

01:05:15 - Brandon Roberts

Yeah, for sure. I stream on Thursdays at 11:30 a.m. Pacific, and I think it's 7:30 UTC. People have gotten on me about the time zone stuff, so I try to drop that in there too.

So yeah, definitely check that out. And hey, if you want to subscribe to the channel, that wouldn't hurt either if you're looking for some Angular content. I'm looking at maybe branching out on the YouTube channel also, but we'll see. Solid, as in SolidJS, has been on my radar too. So I'm interested in looking at some of that.

01:05:49 - Anthony Campolo

Dude, yeah. I've been very big into Solid. I shared with you my Solid blog post, All Star blog post. So I'm very hyped on that.

That's kind of what I'm starting to push as the thing to learn after you've kind of learned your React and you want to go to the next thing. I feel like it's a logical progression, because it's simple enough that you don't have to learn a whole bunch of new stuff, but it's different enough to warrant learning a new thing because the benefits are pretty awesome. [01:06:20] - Brandon Roberts Yeah, for sure.

01:06:22 - Anthony Campolo

I heard there's a cool episode about the Angular renderer on Brandon's.

01:06:26 - Brandon Roberts

Oh yes. Also shout out to Chao in chat. If you want to learn about Angular Three, he was the guest. Charles, the author of the Angular Three library, which is Three.js and Angular together. He's done some wizardry with putting all that together.

So definitely check that out. You can check that out on the channel too. It's been one of my most popular videos, I must say. Definitely check that one out also, but that's on the YouTube channel.

01:06:55 - Anthony Campolo

Link right here. Yeah, when I saw Chao in the chat, I'm like, I feel like he's someone who I've seen around, so it seems like he's an Angular fellow. That would make sense.

01:07:07 - Brandon Roberts

Yeah. Fellow Angular GDE and contributor and everything else. So definitely.

01:07:12 - Anthony Campolo

Cool, cool, awesome.

01:07:14 - Brandon Roberts

And he also streams on Twitch and everything too. So definitely check his out.

01:07:20 - Anthony Campolo

Yeah, I'd assume if you all just follow his Twitch link, that should do it. All right. And then we already shared your Twitters and whatnot, but I'll go ahead and drop those just one more time.

01:07:38 - Brandon Roberts

Follow me on all the places. Definitely check out open source. Highlight your contributions. We want to see more people getting their name out there in open source. So feel free.

01:07:49 - Anthony Campolo

Yeah, definitely. Awesome. Well, thank you so much, Brandon. This has been really fun. I learned a bunch, and we'll be putting this video up on my YouTube channel in the next week or so if y'all want to catch this again. And yeah, I think that's about it to close it out for us.

01:08:06 - Brandon Roberts

All right. Thanks for having me.

01:08:08 - Anthony Campolo

Thanks, everyone, for hanging out in the chat. Really appreciate it. You guys all have a good day.

01:08:14 - Brandon Roberts

Yep. See you.