大厂Data+Agent 秘籍:腾讯/阿里/字节解析如何提升数据分析智能。 了解详情
写点什么

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/[email protected]"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/[email protected]”。


在开发过程中,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:122788

评论

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

CC通用成绩查询小程序(云开发无服务器解决方案)

CC同学

架构训练营模块六作业

喻高咏        

架构实战营

Rust从0到1-高级特性-类型进阶

rust 高级特性 类型 Types

Regan Yue带你一起学习微软AZ-900认证的有关知识「 第V章」

Regan Yue

微软 8月日更 AZ-900

云小课|ModelArts Pro 视觉套件 零代码构建视觉AI应用

华为云开发者联盟

AI ModelArts Pro EI智能体 视觉套件

情窦初开,原来喜欢这么可爱的

4ye

Python 后端 8月日更 词云

用户体验再升级!Erda 1.2 版本正式发布

尔达Erda

云计算 开源 开发者 云原生 Go 语言

遇到联邦计算数据碰撞难题怎么办?不妨试一试PSI

华为云开发者联盟

隐私保护 隐私计算 PSI 联邦计算 数据碰撞

Spark 源码阅读 02:从 Spark-Submit 到 Driver 启动

程序员赤小豆

spark 技术 Spark 源码

详解可观测性监控系统中的“金三角”

尔达Erda

开源 微服务 运维 云原生 APM

创业增长黑客 – 如何低成本获取种子用户|冷启动实战案例 – 挖掘用户需求背后的真实动机

蒋川

用户增长 需求落地 产品经历 业务增长 数据思维

微信自研生产级paxos类库PhxPaxos实现原理介绍

OpenIM

IM

Vue进阶(八十四):Computed 和 Watch 使用与区别

No Silver Bullet

Vue 8月日更

快速生成好看实用的接口文档

与风逐梦

后端 接口文档

拆分电商系统为微服务

面向对象的猫

挑战倒计时!“互联网+”大赛华为命题加速高阶能力提升

华为云开发者联盟

华为云 鲲鹏 大赛 “互联网+” 昇腾AI

云原生时代的 APM

尔达Erda

微服务 运维 云原生 APM 应用性能管理

kubernetes增加Node详细步骤

消失的子弹

Kubernetes 云原生 k8s kubeadm

Python实现批量压缩文件/文件夹——zipfile

Python研究者

8月日更

从头配置阿里云服务器

阿Q说代码

SSL证书 8月日更 阿里云服务器 域名备案

技术调研,IDEA 插件怎么开发「脚手架、低代码可视化编排、接口生成测试」?

小傅哥

Java 小傅哥 低代码 IDEA 脚手架

书单 | 8月新书榜单TOP10,快来看看都有谁吧~~

博文视点Broadview

带你掌握JS防抖与节流

华为云开发者联盟

面试 定时器 节流 JS防抖 触发

索引下推,这个点你肯定不知道!

艾小仙

MySQL MySQL 高可用

AI应用说-生产制造专场开课啦!

百度大脑

人工智能

接口测试参数化(环境变量使用)----apipost

Proud lion

大前端 后端 Postman 开发工具 接口文档

反向压力

程序员鱼皮

架构 系统设计 大前端 后端 实时计算

拆分电商系统为微服务

木云先森

架构实战营

Spark 源码阅读 01:环境搭建

程序员赤小豆

spark 技术 Spark 源码

苏宁精准测试方案探索和实践

薛飞

精准测试

面向多场景而设计的 Erda Pipeline

尔达Erda

开源 微服务 云原生 企业数字化转型 Go 语言

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