写点什么

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

评论

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

jackson学习之九:springboot整合(配置文件)

程序员欣宸

4月月更

Apache DolphinScheduler ASF 孵化器毕业一周年,汇报来了!

白鲸开源

Big Data DolphinScheduler workflow Open Source apache 社区

基于 EventBridge 构建数据库应用集成

阿里巴巴云原生

web技术支持| 简单实现Vue第一章:模板编译

anyRTC开发者

Vue 前端 Web 音视频 WebRTC

【二级等保】二级等保安全物理环境要求有哪些?

行云管家

网络安全 数据安全 等保 等级保护

专车数据层架构进化往事:好的架构是进化来的,不是设计来的

勇哥java实战分享

架构

新思科技助力Linux基金会开展最新开源普查项目

InfoQ_434670063458

Linux 开源 新思科技

GPU和AT的区别在哪里?GPU与AT有哪些区别?

Finovy Cloud

人工智能 GPU服务器 显卡、gpu GPU算力

对Indexlookup的理解误区

TiDB 社区干货传送门

知名数字化解决方案厂商新华三加入龙蜥社区,已完成硬件兼容性测试

OpenAnolis小助手

开源社区 兼容性测试 龙蜥社区 CLA 新华三

选择it资产管理软件要注意什么?

低代码小观

资产管理 企业管理系统 低代码开发 #资产追踪 客户关系管理系统

CVE-2022-22965 漏洞分析,安全问题早发现

华为云开发者联盟

Java spring 漏洞 CVE JavaBean

云原生边缘计算KubeEdge在智慧停车中的实践

华为云原生团队

边缘计算 边缘技术 边缘云

解决混合云数据库一站式备份若干问题 腾讯云数据库DBS正式上线

科技热闻

华为云推出限量NFT云宝,区块链技术为你的数字资产保驾护航

华为云开发者联盟

华为云 NFT 云宝 华为云NFT 华为云数字资产链

平安普惠湖北分公司:齐心抗疫显担当,助力小微迎暖春

科技新消息

平安普惠湖北分公司:疫情后来式,复工进行时

科技新消息

DIVE大会上线了!参与活动还有精美周边领取哦!

InfoQ写作社区官方

热门活动 DIVE

【首期社区读书会】从《OceanBase数据库系统概念》到3.1.3 社区新版本,一起聊聊 OceanBase 那些事

OceanBase 数据库

OceanBase 社区版

【linux运维】linux运维常用工具有哪些?

行云管家

云计算 运维 IT运维 云管理

Linux 命令行小技巧分享第二弹--超简单,超实用!

优麒麟

Linux 开源 命令行终端 实用技巧 优麒麟

独家下载!突破开源Redis,华为云十年自研内核修炼之路《企业级Redis技术与应用解读》重磅发布丨云享·书库

华为云开发者联盟

redis 华为云 GaussDB(for Redis) 开源Redis 企业级Redis

优秀的FAQ示例及FAQ页面制作技巧

小炮

FAQ

交易所多种模式开发、各种源码交易

Geek_56201b

交易所开发 区块链应用开发 软件定制

ModStartCMS模块化建站系统 v3.7.0 栏目导航开关,页面样式优化

ModStart开源

【数字底座专题】星环科技春季新品发布周

星环科技

TASKCTL服务端字符界面的应用系统安装

敏捷调度TASKCTL

kettle 元数据 ETL 调度任务 大数据运维

解构华为云HE2E项目中的容器技术应用

华为云开发者联盟

容器 镜像 华为云 devcloud HE2E

今天聊一聊合成数据 (Synthetic Data)

澳鹏Appen

人工智能 数据集 数据标注 数据训练 合成数据

投稿开奖丨轻量应用服务器征文活动(3月)奖励公布

阿里云弹性计算

轻量应用 征文投稿开奖

教你如何在优麒麟上调节外接显示器,如亮度、色彩等方面!

优麒麟

Linux 开源 经验分享 优麒麟 显示器

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