Intro to Analog.js the Angular meta-framework Marcell Kiss, 2024 

Intro Marcell Kiss, MSc Contractor #EnterpriseArchitecture Angular Hungary 🇭🇺 Part-time trainer #AngularArchitects marcellkiss.com @marcelltech @marcellkiss @marcellkiss 🇩🇪 

What is a meta-framework? @marcelltech 

Web Rendering CSR - Client-Side Rendering SSR - Server-Side Rendering SSG - Static Site Generation 

CSR - Client-Side Rendering Server Browser somesite.com index.html [empty shell] Include main.js main.js Request: …/api/info {info: …} 👀 ⚙ @marcelltech 

Server Browser somesite.com Include main.js main.js 👀 SSR - Server-Side Rendering index.html [with content!] ⚙ @marcelltech ⚙ 

SSG - Static Site Generation Server Browser somesite.com index.html [with content!] Include main.js main.js 👀 ⚙ @marcelltech 

Performance Summary ❌ CSR is resource-heavy for bots ❌ SSR is resource-heavy for us ✅ SSG has the lowest latency @marcelltech 

Tribute to Brandon Roberts @marcelltech Start date: July, 2022 Current version: v1.3.1 Contributors: 108 Stars on GitHub: 2.3k Members on Discord: 670 

Analog.js features • Vite builder • File-based routing • API routes • Server-Side data fetching • Static Site Generation • Vitest • Deployment providers 

Installation @marcelltech 

Wait, Analog uses Vite? 👀 @marcelltech 

HMR in React @marcelltech 

HMR in Angular 😢 @marcelltech 

File-based routing @marcelltech /about.page.ts /about /products/[productId].page.ts /products/:productId Static routes Dynamic routes /(auth)/login.page.ts /login Grouped routes Put your f iles under src/app/pages … ├── products/ │ ├── [productId].page.ts │ └── (products-list).page.ts └── products.page.ts /products /products/:productId Layout routes /[...page-not-found].page.ts /** Catch-all routes Source: https://analogjs.org/docs/features/routing/overview 

De f ine Metadata @marcelltech Source: https://analogjs.org/docs/features/routing/metadata 

API routes @marcelltech /test.ts /api/test Put your f iles under src/server/routes /api/** /[…]ts POST /api/test /test.post.ts Works with .get, .post, .put, .delete Catch-all routes /api/products/:productId /products/[productId].ts Dynamic routes Source: https://analogjs.org/docs/features/api/overview 

Server-Side data fetching @marcelltech test.server.ts 

Server-Side data fetching (2) @marcelltech test.page.ts 

Static Site Generation @marcelltech vite.con f ig.ts 

Vitest @marcelltech home.page.spec.ts 

Vitest (2) @marcelltech > npm run test 

Build it @marcelltech > npm run build dist |- analog |- public |- server |- client |- ssr > node dist/analog/server/index.mjs 

Deployment Providers @marcelltech • Netlify • Vercel • Cloud f lare Pages • Firebase • render.com • Edgio 

Deploy to Netlify @marcelltech Publish directory => dist/analog/public (deploy static assets) Functions directory => dist/analog (deploy server) 

Deploy to Netlify @marcelltech 

We didn’t talk about… @marcelltech - Content Routes (.md f iles) - Code Generation - Auto-updates - Nx integration - SFC - Single File Components 

Marcell Kiss, 2024 Questions and Answers Thanks for listening! marcellkiss.com @marcelltech @marcellkiss @marcellkiss 

Resources @marcelltech [Article] Angular Islands in Astro https://dev.to/brandontroberts/bringing-angular-components-to-astro-islands-52jp [Article] Astro + Angular https://medium.com/ngconf/astro-angular-abe926dac097 [Docs] Angular new build system https://angular.io/guide/esbuild [Docs] Angular Pre-rendering https://angular.dev/guide/prerendering# [Docs] Astro integrations https://astro.build/integrations/ [Docs] Astro MDX Docs https://docs.astro.build/en/guides/integrations-guide/mdx/ [OSS] GitHub Repo https://github.com/marcellkiss/angular-astro-example