基于 Angular 的全栈框架:AnalogJS v1.0 正式发布!

327 阅读2分钟

随着当前 Web 生态系统的迭代,许多开源框架正在采用服务器渲染 SSR 的方法来构建应用程序和网站。这主要是通过元框架完成的,例如 Next.js、SvelteKit、Nuxt、Qwik City 等。

这些元框架具有基于文件系统的路由、服务器端渲染、静态站点生成、内置 API 路由等功能,并且更多地集成到开发人员体验中。

经过 AnalogJS 开发团队多个月的开发和测试,基于 Angular 的全栈框架 AnalogJS v1.0 版本正式发布!AnalogJS v1.0 版本包含许多功能,可以帮助开发人员快速使用 Angular 发布网站和应用程序。

此版本标志着 Analog 的首个重大发布,为开发人员提供了一个更稳定的起点来构建 Analog。团队将继续收集来自开发人员的反馈,以帮助 AnalogJS 团队持续改进并在项目上进行创新。

AnalogJS 特点

AnalogJS 是建立在 Angular 之上的元框架,由 Vite 提供支持,这是一种下一代开源构建工具,并且使用 Nitro 作为开源服务器引擎框架。以下是其中一些功能:

  • Vite 生态系统的一流支持(Vitest、Playwright、Cypress 等)
  • 基于文件系统的路由
  • 支持 Markdown 页面和博客
  • 支持 API / 服务器路由
  • 混合 SSR / SSG,支持站点地图和 RSS 订阅
  • 支持 Angular CLI / Nx 工作区
  • 与 tRPC 集成,实现类型安全的服务器交互
  • 服务器和部署支持

该项目已经在 GitHub 上拥有超过 2000 个 star ,在 Discord 上拥有超过 500 名成员,在 Twitter 上拥有超过 1000 名关注者,并被纳入第一批 GitHub 加速器队列。

下一步是什么

AnalogJS 团队将继续使用 Analog 和 Angular 尽可能无缝地构建全栈网站和应用程序,并通过与 Astro、Nx、Vitest、Storybook 等集成来扩展 Angular 生态系统。

AnalogJS 团队还在 Analog 中引入了一种新的单文件组件格式,用于编写组件和指令。

下面是一个 hello.analog 文件的示例:

<script lang="ts">
  import { signal } from '@angular/core';

  const count = signal(0);

  function increment() {
    count.update(total => ++total);
  }
</script>

<template>
  <h2>Hello Analog</h2>

  Count: {{ count() }}

  <button (click)="increment()">
    Increment
  </button>
</template>

<style>
  h2 {
    color: red;
  }
</style>

最初是 .ng 使用 Angular 的组件和指令的文件扩展名,现已发展为模拟 SFC,其功能包括支持自动导入、内联 Markdown 模板、页面路由等。随着 Analog 未来的发展,将继续迭代这种方法,并探索在 Angular 应用程序中启用这种格式的选项。

AnalogJS 未来

借助 AnalogJS,Angular 终于拥有了自己的元框架,使我们能够在 Angular 提供的所有令人惊叹的功能之上进行构建,这使我们能够访问令人惊叹的 Vite 生态系统,并使我们所有人能够构建更好、更快、更安全的版本、更多令人惊叹的全栈 Angular 应用程序。