- Notifications
You must be signed in to change notification settings - Fork18
XimalayaCloud/award
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
场景: 基于react框架，支撑大型内容网站的服务端渲染或单页应用
开箱即用: 开发者只需要关注组件（react）和中间件（koa）的开发即可，其他就交给award处理吧
插件: 提供了丰富且强大的插件系统，让开发者可以自由的操作award执行的生命周期（服务端、客户端、编译等所有场景）
无需任何配置，支持根据路由按需加载js和css资源
无需任何配置，支持CSS Modules，代码如下示例，了解更多
import"./test.scss"// 直接如下所示写组件即可，不需要做任何处理，award自会帮你实现CSS Modules<h1className="name">hello world</h1>
路由底层基于react-router v5，那么就可以根据其规则配置复杂的路由规则了，了解更多
提供了路由切换的生命周期，了解更多
服务端基于koa2运行，你可以自由的编写中间件，且支持中间件的热更新，无需重启或刷新服务，了解更多
支持使用TypeScript进行开发，了解更多
最佳实践，喜马拉雅PC主站
# "example" is target dir$ npm init award example$ yarn add award react react-dom$ yarn add award-scripts -D
// 根目录创建index.jsimport{start}from'award';functionapp(){return<div>Hello Award</div>;}functionerror({ status}){return<div>StatusCode{status}</div>;}start(app,error);
执行yarn award dev命令启动上面这个示例，服务端将返回<div>Hello Award</div>的文档内容
如果上述示例在执行时出现了错误，那么将渲染error组件
目前有哪些项目在使用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吧两者各有优缺点，建议都使用下对比看看。整体的上手和学习成本，两者都差不多
我们的目的是继续增强和优化Award功能，为web应用开发提供更便捷的辅助手段。阅读以下内容来了解如何参与改进Award
阅读我们提供的贡献指南来了解award的开发和发布流程
你也可以通过运行测试脚本yarn test:client参与到award的开发中来
Award isMIT licensed.
About
⚙基于react的服务端渲染框架