award⚙基于react的服务端渲染框架
Award ∙
-
场景: 基于react框架,支撑大型内容网站的服务端渲染或单页应用
-
开箱即用: 开发者只需要关注组件(react)和中间件(koa)的开发即可,其他就交给award处理吧
-
插件: 提供了丰富且强大的插件系统,让开发者可以自由的操作award执行的生命周期(服务端、客户端、编译等所有场景)
feature
-
无需任何配置,支持根据路由按需加载js和css资源
-
无需任何配置,支持CSS Modules,代码如下示例,了解更多
import "./test.scss" // 直接如下所示写组件即可,不需要做任何处理,award自会帮你实现CSS Modules <h1 className="name">hello world</h1>
-
路由底层基于react-router v5,那么就可以根据其规则配置复杂的路由规则了,了解更多
-
提供了路由切换的生命周期,了解更多
-
服务端基于koa2运行,你可以自由的编写中间件,且支持中间件的热更新,无需重启或刷新服务,了解更多
-
支持使用TypeScript进行开发,了解更多
-
最佳实践,喜马拉雅PC主站
Quick experience
# "example" is target dir
$ npm init award example
Example
Installation
$ yarn add award react react-dom
$ yarn add award-scripts -D
index.js
Create // 根目录创建index.js
import { start } from 'award';
function app() {
return <div>Hello Award</div>;
}
function error({ status }){
return <div>StatusCode {status}</div>;
}
start(app, error);
执行yarn award dev
命令启动上面这个示例,服务端将返回<div>Hello Award</div>
的文档内容
如果上述示例在执行时出现了错误,那么将渲染error组件
FAQ
目前有哪些项目在使用award呢,我可以放心使用么?
💅 喜马拉雅内部的服务端渲染项目都是使用award进行构建的,所以你不必担心框架的维护问题
award和next.js的区别是什么?
award和next.js都是一个基于react的服务端渲染框架,假设你已经了解next.js框架了,接下来我们来说明award和next.js的区别
-
基于react-router实现了
award-router
,其提供了更精细化的路由控制-
比如你可以定义
path="/:id(\\d+)"
来匹配全是数字的路由,对于强SEO需求的项目很有用处。请查看react-router来了解path定义的规则 -
你可以使用
award-router
提供的路由生命周期来精细化控制前端的每次路由切换。比如用户离开当前路由时,可以使用自定义弹窗组件来确认是否离开 -
支持自定义的嵌套路由,定义规则和
react-router
一致,使用上稍有差异,点击查看 -
👓 当然next.js
关于路由的所有功能,我们也都是支持的
-
-
关于 CSS-in-JS ,可以点击了解更多
-
开发者只需要通过
import './style.scss'
的形式引用,即可实现 CSS-in-JS,且自动实现了样式scope和开发阶段的样式缓存 -
无需任何配置,编译后即可将样式提取到css文件,且在生产环境运行时可以根据路由按需加载,包括服务端渲染直出时
-
👓 next.js
目前还需要一些配置来实现,要实现CSS Modules还需要手动处理,而award只需import导入样式即可
-
-
award提供了丰富且强大的插件系统,可以不断的给Award注入活力。
next.js
暂未表态其插件市场 -
提出了运行包和工具包的思想,极大的减少了,在node环境运行时,所需安装依赖的体积。
next.js
不支持 -
award基于koa,开发者可以通过写中间件自由扩展服务端能力
-
开发阶段,我们支持中间件的热更新功能
-
👓 next.js
需要自行通过koa
或者express
再次封装一下,才能方便的使用中间件
-
当开发服务端渲染项目时,针对award和next.js,我该如何选择呢?
-
如果你的项目对SEO要求比较高,且是大型的服务端渲染项目,推荐使用
award
。其可以更好的帮你管理路由,管理中间件,管理样式的开发等 -
如果项目不是那么大,对SEO的要求不是很苛刻,那还是推荐使用
next.js
吧 -
两者各有优缺点,建议都使用下对比看看。整体的上手和学习成本,两者都差不多
Contributing
我们的目的是继续增强和优化Award功能,为web应用开发提供更便捷的辅助手段。阅读以下内容来了解如何参与改进Award
Contributing Guide
阅读我们提供的贡献指南来了解award的开发和发布流程
Testing
你也可以通过运行测试脚本yarn test:client
参与到award的开发中来
License
Award is MIT licensed.