NVIDIA 初创加速计划,免费加速您的创业启动 了解详情
写点什么

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

评论

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

你真的会用 npx 吗❓❓❓

EquatorCoco

前端 开发 Node npx

免费下载高质量PPT模板,这12个优质模板网站值得推荐!

彭宏豪95

效率工具 PPT 在线白板 PPT模板 办公软件

全新加密叙事,以Solmash为代表的 LaunchPad 平台如何为用户赋能?

股市老人

微前端无界机制浅析

快乐非自愿限量之名

前端 前端开发 前端框架

2024-01-13:用go语言,现在有一个打怪类型的游戏,这个游戏是这样的,你有n个技能, 每一个技能会有一个伤害, 同时若怪物小于等于一定的血量,则该技能可能造成双倍伤害, 每一个技能最多只能释放

福大大架构师每日一题

福大大架构师每日一题

Finder增强神器XtraFinder for Mac中文注册版

南屿

Mac破解软件 访达 Finder增强 XtraFinder Mac版 XtraFinder注册码

【思考-衡量成员在团队的价值】

Geek_b2fe7a

团队 日常思考

优雅设计之美:实现Vue应用程序的时尚布局

快乐非自愿限量之名

Vue 前端 开发

【思考-责任与决策】

Geek_b2fe7a

日常思考

SRM源码供应商招标采购管理系统

金陵老街

源码 Vue Java' spring-boot SRM系统

Head First Java(第二版·中文版)PDF

程序员李木子

授权的艺术

俞凡

管理

PlistEdit Pro for Mac(Plist编辑器) v1.9.7免激活版

南屿

索尼电视投屏软件就用Mirror for Sony TV for mac

南屿

Mac软件 索尼电视 投屏

一文解析低代码平台

高端章鱼哥

低代码开发 应用开发 JNPF

【SpringBoot实战专题】「开发实战系列」全方位攻克你的技术盲区之Spring定义Jackson转换Null的方法和实现案例

洛神灬殇

Java spring springboot 后端技术、 2024年第八篇文章

【网易智企】《MCtalk·CEO对话》正式上线!首期对话高成资本

网易云信

人工智能 SaaS AIGC

安全易用的广告拦截器:AdGuard for Mac 中文激活版 兼容M1/M2

南屿

AdGuard Mac版 Mac广告拦截工具 苹果软件下载站

苹果电脑占用内存多?DaisyDisk for Mac快速释放存储空间

南屿

mac软件下载 DaisyDisk Mac版下载 清理磁盘软件 Mac磁盘优化

半小时实现GPT纯血鸿蒙版

不在线第一只蜗牛

人工智能 AI技术 鸿蒙开发 GPT

语音聊天室APP运营第一天:打造交互式社交体验

山东布谷科技胡月

语音直播 语音聊天室开发 语聊平台 语音派对房

有没有可以拖拉拽生成一个低代码平台?

这我可不懂

软件开发 低代码 拖拽表单 JNPF

Substance 3D Designer最新图文安装教程 附Ds激活补丁

Rose

十分钟教你在 k8s 中部署一个前后端应用

不在线第一只蜗牛

Kubernetes 容器 云原生 k8s

全新加密叙事,以Solmash为代表 LaunchPad 平台如何为用户赋能?

EOSdreamer111

Effective Java中文版(第3版)PDF

程序员李木子

谷歌推广该选择SEO还是Ads?谷歌技巧分享及实战

九凌网络

indesign2024打开后进不了页面

Rose

浅谈6种流行的API架构风格

EquatorCoco

架构 开发 API

最好用的延时摄影制作软件LRTimelapse Pro 5下载安装 带LRTimelapse汉化补丁

南屿

Mac软件 延迟摄影 LRTimelapse Pro 5破解版 LRTimelapse中文 电影抗闪烁

Mac用户最爱的应用:Magnet 窗口辅助管理工具 分屏工作更高效!

南屿

mac窗口管理工具 Mac分屏 magnet pro 中文版 magnet pro 破解版

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