AICon 北京站 Keynote 亮点揭秘,想了解 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/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:122760

评论

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

ButterKnife被弃用,ViewBinding才是findView的未来?,秀出天际

android 程序员 移动开发

ConstraintLayout 1,flutterrow换行

android 程序员 移动开发

BAT资深面试官-带你破解Android高级面试,渣本逆袭大厂面经分享

android 程序员 移动开发

Context那些你不知道的事?,张口就来

android 程序员 移动开发

DialogFragment探索与实现,音视频编解码技术

android 程序员 移动开发

Chameleon跨端框架——壹个理想主义团队的开源作品,旧版android模拟器

android 程序员 移动开发

JMH实践记录

Clarke

JMH性能基准测试

Coroutine 基本原理,Android开发大佬的百度美团快手等大厂Offer收割之旅

android 程序员 移动开发

Dart _ 什么是Stream,安卓开发不得不会

android 程序员 移动开发

AsyncTask相关知识,安卓工程师面试题及答案

android 程序员 移动开发

BAT同系列公司面试总结,哪些你所不知道的,学习android的好书

android 程序员 移动开发

BAT面试有关散列(哈希)表的面试题详解,flutter图片压缩上传

android 程序员 移动开发

EventBus核心原理其实保存这三张图就可以弄懂了,收藏一下

android 程序员 移动开发

filter、interceptor、aspect不知如何选择,移动应用开发案例教程

android 程序员 移动开发

Butterknife源码分析,android开发环境搭建实验报告

android 程序员 移动开发

DateUtils(一个日期工具类),androidauto百度地图

android 程序员 移动开发

FART:ART环境下基于主动调用的自动化脱壳方案,androidndk开发教程

android 程序员 移动开发

Flutter Android 工程结构及应用层编译源码深入分析,Android面试题及答案2020

android 程序员 移动开发

BroadcastReceiver源码分析,一线互联网大厂中高级Android面试真题收录

android 程序员 移动开发

ByteDance张一鸣:抖音很多年轻人,出色的都有这些闪光点

android 程序员 移动开发

ConstraintLayout 2,android双击事件响应

android 程序员 移动开发

Dart 层如何 兼容 Android 和iOS平台特性 (1),Android开发面试技巧

android 程序员 移动开发

APP瘦身大法--AndResGuard的使用,android地图开发框架

android 程序员 移动开发

App黑白化实现扩展,一键护眼模式,给App,安卓事件分发机制面试

android 程序员 移动开发

BroadcastReceiver官方概览,【面试总结

android 程序员 移动开发

Base64 的原理、实现及应用,面试字节跳动Android工程师该怎么准备

android 程序员 移动开发

BAT常见Android面试20题详解,985研究生入职电网6个月

android 程序员 移动开发

(完整版)直播回顾:2021 MAXP 无服务器赛题讲解

亚马逊云科技 (Amazon Web Services)

人工智能 云计算 创新大赛

ConstrainLayout 基础教程2,2021Android精选面试实战总结整理

android 程序员 移动开发

Dart Flutter 1,flutter页面跳转动画

android 程序员 移动开发

如何打造实时性的弹窗?

神策技术社区

UI sdk Android;

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