10月21日,杭州云栖大会-技术&可持续发展论坛,注册有礼 了解详情
写点什么

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:121915

评论

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

架构师训练营 - 第四周作业

一个节点

极客大学架构师训练营

浅析 Java 内存模型 一

朱华

Java JMM

架构师训练营 1 期 - 第四周作业(vaik)

行之

极客大学架构师训练营

架构师训练营第4周作业

悠哉

CPU 执行程序的秘密,藏在了这 15 张图里

小林coding

操作系统 计算机基础 计算机 编译器、程序语言、CPU 指令

架构师训练营 - 第四周总结

一个节点

极客大学架构师训练营

数字人民币真的来了 六年历程全回顾

CECBC区块链专委会

数字货币 DCEP

第三周架构师训练营作业

Geek_4c1353

极客大学架构师训练营

架構師訓練營 week4 總結

ilake

LeetCode题解:144. 二叉树的前序遍历,使用栈,JavaScript,详细注释

Lee Chen

LeetCode 前端进阶训练营

架構師訓練營 week4 作業

ilake

第三周课后练习

大大猫

极客大学架构师训练营

第四周作业

Geek_4c1353

极客大学架构师训练营

甲方日常 27

句子

生活 工作 随笔杂谈 日常

第4周 作业一

bearlu

详解「区块链」溯源

netkiller

区块链 防伪 超级账本 标签 区块链产品溯源

一个典型的大型互联网应用系统使用了哪些技术方案和手段,主要解决什么问题?

knight

Redis-技术专题-哨兵配置和原理

李浩宇/Alex

go-zero流数据处理利器

万俊峰Kevin

Go stream functional

浅析 Java 内存模型 三

朱华

Java volatile JMM

Spring学习笔记(一)手写一个简单的Spring

无语

Spring Framework

第9周总结

Vincent

极客时间 极客大学

第二周课后练习

大大猫

极客大学架构师训练营

架构师训练营 1 期 - 第四周总结(vaik)

行之

极客大学架构师训练营

spring-boot-route(十一)数据库配置信息加密

Java旅途

Java Spring Boot

第 4 周 系统架构总结

bearlu

系统架构

典型互联网公司使用的技术

happy

spring-boot-route(十二)整合redis做为缓存

Java旅途

Java redis Spring Boot

《我想进大厂》之Redis夺命连环11问

艾小仙

Java redis 面试 程序语言

架构师训练营第 1 期 -week4

习习

第9周作业

Vincent

极客时间 极客大学

聊一下 Mesh 数据平面 Sidecar 与 Service 通信的那些事儿

聊一下 Mesh 数据平面 Sidecar 与 Service 通信的那些事儿

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