Intro to Analog.js, the Angular meta-framework

What is a metaframework? Does Angular need one? What problems does it solve? In this talk, we’re looking into the details of Analog.js, the most popular Angular metaframework. We examine different use-cases and evaluate when to use Analog.js.

Transcript

1. Intro to Analog.js the Angular meta-framework Marcell Kiss, 2024
2. Intro Marcell Kiss, MSc Contractor #EnterpriseArchitecture Angular Hungary 🇭🇺 Part-time trainer #AngularArchitects marcellkiss.com @marcelltech @marcellkiss @marcellkiss 🇩🇪
3. What is a meta-framework? @marcelltech
4. Web Rendering CSR - Client-Side Rendering SSR - Server-Side Rendering SSG - Static Site Generation
5. CSR - Client-Side Rendering Server Browser somesite.com index.html [empty shell] Include main.js main.js Request: …/api/info {info: …} 👀 ⚙ @marcelltech
6. Server Browser somesite.com Include main.js main.js 👀 SSR - Server-Side Rendering index.html [with content!] ⚙ @marcelltech ⚙
7. SSG - Static Site Generation Server Browser somesite.com index.html [with content!] Include main.js main.js 👀 ⚙ @marcelltech
8. Performance Summary ❌ CSR is resource-heavy for bots ❌ SSR is resource-heavy for us ✅ SSG has the lowest latency @marcelltech
9. 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
10. Analog.js features • Vite builder • File-based routing • API routes • Server-Side data fetching • Static Site Generation • Vitest • Deployment providers
11. Installation @marcelltech
12. Wait, Analog uses Vite? 👀 @marcelltech
13. HMR in React @marcelltech
14. HMR in Angular 😢 @marcelltech
15. 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
16. De f ine Metadata @marcelltech Source: https://analogjs.org/docs/features/routing/metadata
17. 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
18. Server-Side data fetching @marcelltech test.server.ts
19. Server-Side data fetching (2) @marcelltech test.page.ts
20. Static Site Generation @marcelltech vite.con f ig.ts
21. Vitest @marcelltech home.page.spec.ts
22. Vitest (2) @marcelltech > npm run test
23. Build it @marcelltech > npm run build dist |- analog |- public |- server |- client |- ssr > node dist/analog/server/index.mjs
24. Deployment Providers @marcelltech • Netlify • Vercel • Cloud f lare Pages • Firebase • render.com • Edgio
25. Deploy to Netlify @marcelltech Publish directory => dist/analog/public (deploy static assets) Functions directory => dist/analog (deploy server)
26. Deploy to Netlify @marcelltech
27. We didn’t talk about… @marcelltech - Content Routes (.md f iles) - Code Generation - Auto-updates - Nx integration - SFC - Single File Components
28. Marcell Kiss, 2024 Questions and Answers Thanks for listening! marcellkiss.com @marcelltech @marcellkiss @marcellkiss
29. 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