All Projects → XimalayaCloud → Award

XimalayaCloud / Award

Licence: mit
⚙基于react的服务端渲染框架

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Award

Koa Mobx React Starter
A straightforward starter for Node javascript web projects. Using Koa, MobX and ReactJS (with universal / isomorphic server rendering)
Stars: ✭ 102 (+12.09%)
Mutual labels:  webpack, babel, koa, react-router
React Lego
React-lego : incrementally add more cool stuff to your react app
Stars: ✭ 417 (+358.24%)
Mutual labels:  webpack, koa, ssr, react-router
Ssr Sample
A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App
Stars: ✭ 285 (+213.19%)
Mutual labels:  webpack, babel, ssr, spa
Miox
Modern infrastructure of complex SPA
Stars: ✭ 374 (+310.99%)
Mutual labels:  webpack, plugin, ssr, spa
Ice
🚀 The Progressive App Framework Based On React(基于 React 的渐进式应用框架)
Stars: ✭ 16,961 (+18538.46%)
Mutual labels:  webpack, ssr, react-router, spa
React Router Server
Server Side Rendering library for React Router v4.
Stars: ✭ 443 (+386.81%)
Mutual labels:  webpack, ssr, react-router
React Starter Kit
React Starter Kit — front-end starter kit using React, Relay, GraphQL, and JAM stack architecture
Stars: ✭ 21,060 (+23042.86%)
Mutual labels:  webpack, babel, ssr
Loadable Components
The recommended Code Splitting library for React ✂️✨
Stars: ✭ 6,194 (+6706.59%)
Mutual labels:  webpack, ssr, react-router
React Ssr Setup
React Starter Project with Webpack 4, Babel 7, TypeScript, CSS Modules, Server Side Rendering, i18n and some more niceties
Stars: ✭ 678 (+645.05%)
Mutual labels:  webpack, babel, react-router
Pwa
An opinionated progressive web app boilerplate
Stars: ✭ 353 (+287.91%)
Mutual labels:  webpack, babel, react-router
React App
Create React App with server-side code support
Stars: ✭ 614 (+574.73%)
Mutual labels:  webpack, babel, ssr
React Article Bucket
总结,积累,分享,传播JavaScript各模块核心知识点文章全集,欢迎star,issue(勿fork,内容可能随时修改)。webpack核心内容部分请查看专栏: https://github.com/liangklfangl/webpack-core-usage
Stars: ✭ 750 (+724.18%)
Mutual labels:  webpack, babel, react-router
After.js
Next.js-like framework for server-rendered React apps built with React Router
Stars: ✭ 4,051 (+4351.65%)
Mutual labels:  webpack, ssr, react-router
Xiaoduyu.com
🐟小度鱼 - 年轻人的交流社区 https://www.xiaoduyu.com
Stars: ✭ 549 (+503.3%)
Mutual labels:  webpack, babel, react-router
React Redux Saucepan
A minimal and universal react redux starter project. With hot reloading, linting and server-side rendering
Stars: ✭ 86 (-5.49%)
Mutual labels:  babel, ssr, react-router
Slinky
A light-weight, responsive, mobile-like navigation menu plugin
Stars: ✭ 649 (+613.19%)
Mutual labels:  webpack, babel, plugin
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-64.84%)
Mutual labels:  webpack, babel, react-router
Budgeting
Budgeting - React + Redux + Webpack (tree shaking) Sample App
Stars: ✭ 971 (+967.03%)
Mutual labels:  webpack, babel, react-router
Starter React Flux
Generate your React PWA project with TypeScript or JavaScript
Stars: ✭ 65 (-28.57%)
Mutual labels:  webpack, babel, react-router
Skyvow.github.io
🐶 My resume - 个人简历
Stars: ✭ 27 (-70.33%)
Mutual labels:  webpack, babel, react-router

Award ∙ build coverage version Gitter mit download

codesandbox

  • 场景: 基于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

Create index.js

// 根目录创建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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].