Analog.js: Angular meta-framework

Kas yra Analog.js ir kodėl jis atsirado

Jei sekate Angular ekosistemą, tikriausiai pastebėjote, kad kiti framework’ai jau seniai turi savo meta-framework’us. React turi Next.js ir Remix, Vue džiaugiasi Nuxt, o Svelte – SvelteKit. Angular programuotojai ilgą laiką žiūrėjo į visa tai su pavydu, kol pagaliau atsirado Analog.js.

Analog.js – tai full-stack meta-framework’as, sukurtas Angular ekosistemoje ir skirtas modernių web aplikacijų kūrimui. Jis suteikia tai, ko Angular bendruomenė laukė metų metus: file-based routing, server-side rendering (SSR), static site generation (SSG) ir API maršrutus viename pakete. Įdomiausia, kad viskas veikia ant Vite, o ne tradicinio Angular CLI su Webpack.

Projektas pradėtas Brandon Roberts – Angular bendruomenės veterano, kuris aiškiai matė, kad Angular reikia kažko daugiau nei tik component framework’o. Kai Next.js ir Nuxt tapo standartais savo ekosistemose, Angular programuotojai turėjo krapštytis su Angular Universal ir kitais sprendimais, kurie niekada nebuvo tokie intuityvūs ar lengvai prieinami.

File-based routing: pagaliau ir Angular’e

Viena didžiausių Analog.js savybių yra file-based routing sistema. Jei dirbote su Next.js ar Nuxt, šis principas bus pažįstamas – tiesiog sukuriate failą tam tikroje vietoje, ir jis automatiškai tampa maršrutu.

Pavyzdžiui, jei sukursite failą src/app/pages/about.page.ts, jis automatiškai taps /about maršrutu. Norite dinaminių maršrutų? Sukurkite [id].page.ts ir gausite dinaminį parametrą. Tai gerokai paprasčiau nei tradicinis Angular routing su RouterModule ir visais tais konfigūracijos failais.

// src/app/pages/blog/[slug].page.ts
import { Component } from '@angular/core';
import { injectLoad } from '@analogjs/router';

export const load = async ({ params }) => {
  return {
    post: await fetchPost(params['slug'])
  };
};

@Component({
  template: `
    
      {{ post.title }}
      
    
  `
})
export default class BlogPostPage {
  post = injectLoad();
}

Matote tą load funkciją? Ji vykdoma serveryje prieš komponentą, leidžiama užkrauti duomenis SSR metu. Tai primena Next.js getServerSideProps, tik Angular stiliumi.

Vite integracija ir ką tai reiškia greičiui

Analog.js naudoja Vite vietoj tradicinio Angular CLI su Webpack. Jei niekada nedirbote su Vite, tai bus kaip pereiti nuo seno Volvo prie Tesla – skirtumas milžiniškas.

Vite naudoja native ES modules development metu, o tai reiškia beveik akimirksnius hot module replacement (HMR). Pakeitimai komponente atsispindi naršyklėje per milisekundes, o ne sekundes. Build’ai taip pat žymiai greitesni dėka esbuild ir Rollup optimizacijų.

Tradicinis Angular projektas su CLI gali užtrukti 30-60 sekundžių pradėti development serverį. Analog.js projektas startuoja per 2-5 sekundes. Tai ne teorija – tai realūs skaičiai, kuriuos pajusite kasdien.

Be to, Vite ekosistema turi šimtus plugin’ų, kuriuos galite naudoti. Reikia MDX palaikymo? Yra plugin’as. PWA funkcionalumo? Taip pat. Tai atveria visiškai naują galimybių pasaulį, kurio Angular CLI niekada neturėjo.

Server-side rendering ir static generation

SSR Angular’e visada buvo… sudėtingas. Angular Universal veikia, bet jo setup’as niekada nebuvo paprastas. Analog.js daro SSR tokį pat paprastą kaip Nuxt ar Next.js.

Projektas iš karto sukonfigūruotas SSR. Nereikia nieko papildomai daryti – tiesiog build’inate ir deploy’inate. Analog.js automatiškai sugeneruoja serverio kodą, kuris renderina jūsų Angular komponentus serveryje.

Dar geriau – galite pasirinkti hybrid režimą, kur kai kurie puslapiai yra pre-rendered (SSG), o kiti renderinami on-demand (SSR). Tai idealu e-commerce projektams, kur produktų sąrašas gali būti statinis, bet produkto puslapis su realiu laiku atsinaujinančia informacija – dinaminis.

// analog.config.ts
export default defineConfig({
  prerender: {
    routes: [
      '/',
      '/about',
      '/blog',
      // Dinamiškai generuojami maršrutai
      async () => {
        const posts = await fetchAllPosts();
        return posts.map(post => `/blog/${post.slug}`);
      }
    ]
  }
});

Tokia konfigūracija pre-renderins visus nurodytus maršrutus build metu. Rezultatas – žaibiškai greiti puslapiai, puikus SEO ir minimalus serverio apkrovimas.

API maršrutai ir full-stack galimybės

Vienas dalykas, kuris daro Analog.js tikru full-stack framework’u, yra integruoti API maršrutai. Galite kurti backend endpoints tiesiai savo Analog.js projekte, panašiai kaip Next.js API routes.

API maršrutai gyvena src/server/routes direktorijoje ir taip pat naudoja file-based sistemą. Failas hello.ts tampa /api/hello endpoint’u.

// src/server/routes/api/posts.ts
import { defineEventHandler } from 'h3';

export default defineEventHandler(async (event) => {
  const posts = await db.posts.findMany();
  return posts;
});

Analog.js naudoja h3 – tą patį serverio framework’ą, kurį naudoja Nuxt 3. Tai reiškia, kad turite prieigą prie visų h3 funkcijų: body parsing, cookie valdymas, error handling ir t.t.

Galite kurti REST API, GraphQL endpoints, webhooks – ką tik norite. Ir viskas veikia seamlessly su jūsų Angular frontend’u. Nereikia atskirų projektų, atskirų deployment’ų ar CORS konfigūracijų.

Content integration su Markdown ir MDX

Jei kuriate blog’ą, dokumentaciją ar bet kokį content-heavy projektą, Analog.js turi puikią Markdown ir MDX palaikymą. Galite rašyti turinį Markdown failuose ir jie automatiškai paverčiami Angular komponentais.

MDX palakymas yra ypač įdomus – galite naudoti Angular komponentus tiesiog Markdown failuose. Tai atveria neįtikėtinas galimybes interaktyviam turiniui.

---
title: 'Mano pirmas postas'
date: 2024-01-15
---

# {{ title }}

Čia paprastas Markdown turinys.



Ir vėl Markdown.

Analog.js automatiškai parsina frontmatter (tą YAML dalį viršuje), konvertuoja Markdown į HTML ir leidžia naudoti Angular komponentus. Viskas veikia su SSR ir SSG.

Yra net integruota content query API, kuri leidžia lengvai gauti ir filtruoti turinį:

import { injectContentFiles } from '@analogjs/content';

export class BlogComponent {
  posts = injectContentFiles((file) => 
    file.filename.includes('/src/content/blog/')
  );
}

Deployment ir hosting galimybės

Analog.js palaiko daugybę deployment platformų iš dėžės. Galite deploy’inti į Vercel, Netlify, Cloudflare Pages, AWS, ar bet kurią kitą platformą, kuri palaiko Node.js aplikacijas.

Kiekviena platforma turi savo adapter’į, kuris automatiškai konfigūruoja build’ą teisingai. Pavyzdžiui, Vercel adapter’is sukonfigūruos serverless funkcijas, o Netlify – edge functions.

Statiniam hosting’ui (jei naudojate tik SSG be SSR) galite tiesiog build’inti ir upload’inti dist direktoriją į bet kurį CDN. Tai veikia su GitHub Pages, Netlify, Vercel, Cloudflare Pages ir t.t.

Įdomu tai, kad Analog.js palaiko edge deployment’ą. Galite deploy’inti savo aplikaciją į Cloudflare Workers ar Vercel Edge Functions, ir ji veiks globaliai paskirstytame tinkle su minimaliu latency.

// Vercel deployment
npm run build -- --preset=vercel

// Netlify deployment  
npm run build -- --preset=netlify

// Cloudflare Pages
npm run build -- --preset=cloudflare-pages

Realūs use case’ai ir kada rinktis Analog.js

Gerai, tai kada iš tiesų turėtumėte naudoti Analog.js? Ne kiekvienas projektas to reikalauja, ir svarbu suprasti, kur jis tikrai spindi.

**Blog’ai ir content sites** – čia Analog.js puikiai tinka. Markdown/MDX palaikymas, SSG, greitas performance – viskas, ko reikia. Jei kuriate asmeninį blog’ą, įmonės blog’ą ar dokumentacijos svetainę, Analog.js bus puikus pasirinkimas.

**E-commerce projektai** – hybrid rendering (SSG + SSR) idealiai tinka e-commerce. Statiniai puslapiai kategorijoms ir produktų sąrašams, dinaminiai – produktų puslapiams su realiu laiku atsinaujinančia informacija apie stock’ą ir kainas.

**SaaS aplikacijos** – jei kuriate SaaS su public marketing puslapiais ir private dashboard’u, Analog.js leidžia turėti viską viename projekte. Marketing puslapiai gali būti pre-rendered SEO optimizavimui, o dashboard – client-side rendered su SSR initial load’ui.

**Enterprise aplikacijos** – jei jūsų organizacija jau naudoja Angular ir norite modernesnio developer experience bei geresnio performance, Analog.js yra natūralus evoliucijos žingsnis. Galite migruoti palaipsniui, nes Analog.js palaiko visus egzistuojančius Angular komponentus ir bibliotekas.

Tačiau jei kuriate paprastą admin panel’į be SEO reikalavimų ar vidinę įmonės aplikaciją, kur SSR nėra svarbus, galbūt paprastas Angular CLI projektas bus pakankamai geras ir paprastesnis.

Ką reikia žinoti prieš pradedant

Analog.js vis dar yra gana jaunas projektas. Pirmoji stabili versija išleista 2023 metais, ir nors jis sparčiai bręsta, reikia būti pasirengus tam, kad kai kurios funkcijos dar gali keistis.

Dokumentacija yra gera, bet ne tokia išsami kaip Next.js ar Nuxt. Kartais teks ieškoti atsakymų GitHub issues ar Discord serveryje. Bendruomenė aktyvi ir draugiška, bet ji dar nėra tokia didelė kaip kitų meta-framework’ų.

Performance yra puikus, bet production deployment’as gali reikalauti daugiau konfigūracijos nei tikitės, ypač jei naudojate nestandartines platformas. Vercel ir Netlify veikia iš karto, bet custom Node.js serveris ar Docker deployment’as gali reikalauti papildomo darbo.

Jei jūsų komanda jau gerai išmano Angular, mokymosi kreivė bus minimali. Pagrindiniai skirtumai yra file-based routing ir SSR konceptai, bet Angular žinios tiesiogiai persikeliamos. Jei esate naujas Angular ekosistemoje, gali būti verta pirmiau išmokti bazinį Angular, o paskui pereiti prie Analog.js.

Dar vienas dalykas – TypeScript yra privalomas. Nėra JavaScript opcijos, bet tai greičiausiai yra gerai, nes Angular bendruomenė jau seniai priėmė TypeScript kaip standartą.

Kas toliau laukia Analog.js ekosistemą

Analog.js ateitis atrodo šviesi. Projektas aktyviai vystomas, reguliariai išleidžiamos naujos versijos su bug fixes ir naujomis funkcijomis. Brandon Roberts ir kiti contributors nuolat klauso bendruomenės feedback’o ir prioritizuoja funkcijas, kurių žmonės tikrai nori.

Viena iš įdomiausių krypčių yra glaudesnis integravimas su Angular ekosistema. Kai Angular 17 ir 18 versijos įvedė naujus features kaip signals ir deferrable views, Analog.js greitai adaptavo šias naujoves. Tikėtina, kad ateityje matysime dar glaudesnę integraciją su oficialiomis Angular funkcijomis.

Bendruomenė auga – vis daugiau įmonių pradeda naudoti Analog.js production’e, ir tai reiškia daugiau plugin’ų, starter template’ų ir learning resources. Jau dabar yra keletas starter’ių su Tailwind CSS, Prisma, tRPC ir kitomis populiariomis technologijomis.

Tikėtina, kad matysime ir daugiau deployment target’ų. Deno Deploy, Bun, ir kitos naujos platformos gali sulaukti oficialių adapter’ių. Edge computing tampa vis populiaresnis, ir Analog.js gerai pozicionuotas pasinaudoti šia tendencija.

Jei domina Angular ir norite modern full-stack development experience, dabar yra puikus laikas išbandyti Analog.js. Projektas pakankamai brandus production naudojimui, bet vis dar pakankamai jaunas, kad galėtumėte prisidėti prie jo augimo ir formuoti jo ateitį. O jei jau dirbate su Angular ir jaučiate, kad trūksta meta-framework’o galimybių – Analog.js yra atsakymas, kurio laukėte.

Skaffold: „Kubernetes“ kūrimas