写点什么

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

  • 2021-01-15
  • 本文字数:1606 字

    阅读完需:约 5 分钟

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-01-15 17:122714

评论

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

移动平台WorkPlus集成化办公,打造企业全场景业务生态

BeeWorks

别找了,这是迄今为止把微服务讲的最清楚的一篇!没有之一

爱好编程进阶

Java 面试 后端开发

大爆料!Github上100%好评的Java多线程池面试题

爱好编程进阶

Java 面试 后端开发

18张图,详解SpringBoot解析yml全流程

码农参上

springboot 配置文件 4月月更

如何优化前端页面的LCP?

BUG侦探

前端 性能 网页指标

不同研发协作模式在云效中的应用

阿里云云效

云计算 阿里云 云原生 研发 研发协作

为拿几家大厂Offer,“闭关修炼

爱好编程进阶

Java 面试 后端开发

诚邀报名丨首期OpenHarmony开发者成长计划分享日

OpenHarmony开发者

OpenHarmony

洞见科技首批通过央行国家金融科技测评中心「联邦学习」产品评测,实现「MPC+FL」金融应用双认证

洞见科技

联邦学习 隐私计算 多方安全计算

终于有人讲明白了!原来这才是全球低时延一张网技术

华为云开发者联盟

音视频 华为云 实时音视频 低时延

你知道Java是如何解决可见性和有序性问题的吗?

爱好编程进阶

Java 面试 后端开发

单例模式你不得不知道的底层原理

爱好编程进阶

Java 面试 后端开发

大量示例彻底搞懂Linux查找,which,whereis

爱好编程进阶

Java 面试 后端开发

手机硬件性能的发展主要受哪几方面制约

InfoQ IT百科

netty系列之:netty中常用的字符串编码解码器

程序那些事

Java Netty 程序那些事 4月月更

为什么switch里的case没有break不行

爱好编程进阶

Java 面试 后端开发

刚拿的字节跳动offer“打水漂”

爱好编程进阶

Java 面试 后端开发

如何在面试中机智的展现架构能力?

非凸科技

rust 编程语言 量化 构架师 互联网大厂

CDF全球调查:软件交付性能停滞不前

飞算JavaAI开发助手

哪路神仙写的421页MySQL高级笔记,涵盖MySQL所有技术!太香了

爱好编程进阶

Java 面试 后端开发

手机软硬件协同很重要吗?

InfoQ IT百科

【高并发】为何在32位多核CPU上执行long型变量的写操作会出现诡异的Bug问题?看完这篇我懂了!

冰河

并发编程 多线程 协程 异步编程 精通高并发系列

历经4轮2小时,终于斩下美团offer!

爱好编程进阶

Java 面试 后端开发

大数据基础处理框架

爱好编程进阶

Java 面试 后端开发

观测云登陆阿里云计算巢,共建ISV新生态

观测云

可观测性 可观测

华为18级大牛整理总结:微服务设计和分布式服务框架原理实践文档

爱好编程进阶

Java 面试 后端开发

图文并茂 教你在IDEA中如何一键生成代码,提高开发效率!

爱好编程进阶

Java 面试 后端开发

LAXCUS分布式操作系统冗余容错之节点篇

LAXCUS分布式操作系统

分布式系统 冗余 集群容灾

你必须懂也可以懂的微服务系列三:服务调用

爱好编程进阶

Java 面试 后端开发

未来的手机操作系统在智能化上会有哪些突破

InfoQ IT百科

Oceanbase 和 TiDB 粗浅对比之 - 执行计划

TiDB 社区干货传送门

Aleph.js发布Alpha版,一个基于Deno的服务器端渲染框架_大前端_Bruno Couriol_InfoQ精选文章