写点什么

Aleph.js 发布 Alpha 版,一个基于 Deno 的服务器端渲染框架

2021 年 1 月 15 日

Aleph.js发布Alpha版,一个基于Deno的服务器端渲染框架

Aleph.js 是基于Deno的React框架,用于服务器端渲染应用程序,现在发布了Alpha版。Aleph 让Next.js的很多核心特性在 Deno 环境中可用:零配置的服务器端渲染、静态站点生成、文件系统和 API 路由,等等。Aleph 使用标准的 EcmaScript 模块(ESM)import 语法,在开发环境中不使用打包器。Aleph 还借助react-refresh提供了模块热替换。


Aleph.js 深受 Next.js 的启发,后者自称是一个生产就绪的 React 框架。与 Next.js 一样,Aleph 提供了高效的特性,为开发者提供了更好的体验。Alpha 版的 Aleph 提供了基于页面的路由系统(支持动态路由)、API 路由、基于路由的国际化支持、静态站点生成、默认预渲染(具有可配置的服务器端渲染)、客户端路由、CSS 和 Sass 支持,以及 react-refresh 支持。在开发 Web 应用程序时,开发人员将使用一组页面和 API,每个页面都用一个 React 组件实现。


与 Next.js 不一样的是,Aleph 是基于 Deno 的。Deno 是 Node.js 的替代品,旨在弥补 Node 的缺点。Deno 在今年早些时候发布了它的第一个主要版本,开箱即用地支持 TypeScript。Deno 有一个更严格的安全模型,不允许任何文件、网络或环境访问,除非显式地启用。Deno 不使用 package.json 文件、node_modules 目录或 CommonJS 模块。相反,Deno 采用 EcmaScript 模块(ESM),并将依赖项作为 URL 导入。


Aleph 的文档解释了使用 Deno 模块的一个生产力优势:


每个模块只需要编译一次,然后缓存到磁盘上。当模块发生变化时,只需重新编译该模块,重新打包不会浪费时间。


下面是 Aleph 的一个简单例子:


import React from "https://esm.sh/react@17.0.1"import Logo from "../components/logo.tsx"export default function Home() {    return (      <div>        <Logo />        <h1>Hello World!</h1>      </div>    )}
复制代码


Aleph 通过放在应用程序根目录的import_map.json文件来支持导入映射。导入映射是Web Incubator Community Group(WICG)提出的一个建议,可用解析原始导入标识符。有了导入映射,Aleph 可以将从 import React from "react"替换为 import React from “https://esm.sh/react@16.13.1”。


在开发过程中,Aleph.js 需要现代浏览器来支持ESM模块和动态导入。现代浏览器包括 Chrome(>=61)、Edge(>=16)、Firefox(>=60)、Safari(>=11)和 Opera(>=48)。


开发人员可以使用 Deno 运行时在构建时计算数据,并将数据传递给页面。一些框架,如Dojo,将这种方法称为构建时渲染。Next.js 提供了getStaticPropsgetServerSideProps方法,用于在构建时或发送请求时获取数据。


开发人员可以定制404 页面,也可以使用自定义的<App>、<Head>和<Scripts>组件来控制页面初始化(全局布局或样式),并自定义页面上的<head>和<scripts>标签。如下所示:


import React from "https://esm.sh/react"import { Head, Scripts } from "https://deno.land/x/aleph/mod.ts"export default function App({ Page, pageProps }) {  return (    <>      <Head>        <title>Aleph.js</title>      </Head>      <Scripts>        <script async src="https://www.googletagmanager.com/gtag/js?id=G-1234567890"></script>        <script>{`          window.dataLayer = window.dataLayer || [];          function gtag(){            dataLayer.push(arguments);          }          gtag('js', new Date());          gtag('config', 'G-1234567890');        `}</script>      </Scripts>      <Page {...pageProps} />    </>  )}
复制代码


Aleph 还处在 Alpha 阶段,并且还在积极开发当中。Aleph 计划在生产环境中使用经过 polyfill 的 nomodul .js 来支持老浏览器(例如 IE11),它使用SystemJS来导入模块。有关提供 PWA 和 AMP 支持的进一步工作也在进行当中。


开发人员可以在线访问Aleph的文档。Aleph 是采用了 MIT 开源许可。欢迎开发人员加入贡献和反馈,并遵守 Aleph 的贡献指南


原文链接

Server-Rendered Web Applications in Deno with Aleph.js

2021 年 1 月 15 日 17:121667

评论

发布
暂无评论
发现更多内容

python实现·十大排序算法之堆排序(Heap Sort)

南风以南

Python 排序算法 堆排序

zabbix 实战指南(2)

橙子冰

zabbix

一文道尽 Excel 的 Criterion

张利东

Excel

任务级并发与 Executor 框架

tison

Java 线程 并发

MySQL慢查询优化(线上案例调优)

NotFound9

MySQL 开源 架构 运维 编程语言

RASP研发踩坑之attach失败

国服第一

Java JVMTI JVM 信息安全 RASP

IDEA 插件开发实战

李孟

Java 工具 IDEA 插件 idea插件

Oracle误删数据闪回

阡陌r

眼前搁座金山也看不见

池建强

搜索引擎 学习

ARTS - Week 1

Khirye

ARTS 打卡计划

ES 操作之批量写-BulkProcessor 原理浅析

PCMD

Java elasticsearch 后端

Kafka系列8:一网打尽常用脚本及配置,宜收藏落灰!

z小赵

大数据 kafka 实时计算

JavaScript 基础拾遗 —— this 的前世今生

hq

Java 学习 前端

ARTS week 1

锈蠢刀

重学 Java 设计模式:实战建造者模式

小傅哥

设计模式 小傅哥 重构 代码质量 优化代码

奈学教育:分布式架构,刚性事务-2PC必须注意的问题及3PC详细解说

奈学教育

分布式架构 2PC 3PC

这个开源神器可快速帮你安装 MacOS 虚拟机!

JackTian

macos GitHub Linux 操作系统 虚拟机

AutoConfigurationImportSelector到底怎么初始化

编号94530

Java spring Spring Boot import

变则通,通则久 —— 读《谁动了我的奶酪?》

YoungZY

读书 读书感悟

Linux 终端下记不住命令的使用方法?这个开源项目帮你解决。

JackTian

Linux 运维 操作系统 命令 开源项目

算法:时间复杂度和空间复杂度

shirley

算法 时间复杂度

zabbix实战指南(1)

橙子冰

zabbix

线程的取消和关闭

tison

Java 线程 并发

游戏夜读 | 游戏代码之道

game1night

分支管理模式

wiflish

git

这么多年了,QQ没发现这个问题吗?

BabyKing

原创 | 使用JUnit、AssertJ和Mockito编写单元测试和实践TDD (九)测试驱动开发(TDD)

编程道与术

Java 编程 软件测试 TDD 单元测试

回“疫”录(25):被颜色攻占的地方

小天同学

疫情 回忆录 现实纪录 纪实

在 Go 中使用并发编程 - 第一部分

TuringTuring

golang 并发编程 线程模型

spring-data-redis -- 一次执行链路的分析

PCMD

Java spring springdataredis

Git 多用户多仓库配置 windows10

halapano

git

Aleph.js发布Alpha版,一个基于Deno的服务器端渲染框架-InfoQ