全栈算力,加速行业AI落地 了解详情
写点什么

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

评论

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

线程池的优点及其原理,代码实现线程池。简单、明了。

Linux服务器开发

后端 网络编程 线程池 Linux服务器 web服务器

区块链产业下的“非遗”突围战:商业化和手艺人发掘

CECBC

区块链 非遗

LeetCode题解:52. N皇后 II,回溯+哈希表,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

已拿腾讯后台开发岗offer,简单说下自己的面试经历和学习路线

程序员小灰

c++ 后台开发 架构师 TCP/IP Linux服务器开发

年轻人想详细了解做了十年Linux跟做了十年Windows的程序员差距有多大吗?听我慢慢道来!

ShenDu_Linux

Linux 程序员 windows

架构师训练营 1 期 -- 第十一周总结

曾彪彪

极客大学架构师训练营

打造Django私有化缓存组件django-api-cache

pygodnet

django django-api-cache django缓存 私有化缓存 接口缓存

《迅雷链精品课》第十课:共识算法理论基础

迅雷链

区块链

智能与影像的强耦合:华为Mate 40系列的视觉探索

脑极体

拆解增长黑客之知识篇

懒杨杨

产品 运营 增长

想了解任务型对话机器人,我们先从自然语言理解聊起

华为云开发者联盟

人工智能 机器人 自然语言

架构师训练营第二周框架设计课后练习

Geek_xq

我在阿里巴巴做 Serverless 云研发平台

阿里巴巴云原生

Serverless 容器 开发者 云原生 CloudNative

我对业务方提出需求的态度

boshi

随笔杂谈 需求落地

只能用分布式锁,也能搞定每秒上千订单的高并发优化?

Java架构师迁哥

挑战赛 | 话题王者VS互动先锋(第一季)

InfoQ写作社区官方

话题讨论 热门活动

每周学点TARS——服务自定义命令

TARS基金会

c++ DevOps 后端 TARS

HTTP协议概述

落日楼台H

https HTTP 协议 HTTP2.0 HTTP3.0

讲述我在阿里六面的经历,幸好我掌握了这份“Java并发编程+面试题库”成功拿到20K的offer

比伯

Java 编程 架构 面试 计算机

程序员的故事

Philips

敏捷开发 快速开发 原创小说 企业开发 企业应用

ETV全球熵APP系统开发|ETV全球熵软件开发

系统开发 现成系统

训练营第七周作业

大脸猫

极客大学架构师训练营

「更高更快更稳」,看阿里巴巴如何修炼容器服务「内外功」

阿里巴巴云原生

容器 运维 云原生 双十一 CloudNative

mysql的这些坑你踩过吗?快来看看怎么优化mysql?

比伯

Java 编程 架构 面试 计算机

看区块链如何打通信息壁垒,盘活万亿级”积分”市场

CECBC

区块链 信息

价值、产业、数据加密,区块链如何助力互联网升级?

CECBC

区块链 互联网

训练营第七周总结

大脸猫

极客大学架构师训练营

一周信创舆情观察(11.23~11.29)

统小信uos

接口测试怎么进行,如何做好接口测试

测试人生路

软件测试 接口测试

技巧收藏|10个JavaScript常用数组操作方法

华为云开发者联盟

Java 数组 开发

【得物技术】搜索引擎技术简介

得物技术

搜索引擎 技术 算法 排序 搜索

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