1. <strong id="7actg"></strong>
    2. <table id="7actg"></table>

    3. <address id="7actg"></address>
      <address id="7actg"></address>
      1. <object id="7actg"><tt id="7actg"></tt></object>

        award?基于react的服務(wù)端渲染框架

        聯(lián)合創(chuàng)作 · 2023-09-23 00:25

        Award ? build coverage version Gitter mit download

        codesandbox

        • 場景: 基于react框架,支撐大型內(nèi)容網(wǎng)站的服務(wù)端渲染或單頁應用

        • 開箱即用: 開發(fā)者只需要關(guān)注組件(react)和中間件(koa)的開發(fā)即可,其他就交給award處理吧

        • 插件: 提供了豐富且強大的插件系統(tǒng),讓開發(fā)者可以自由的操作award執(zhí)行的生命周期(服務(wù)端、客戶端、編譯等所有場景)

        • 參考學習: 提供了文檔視頻

        feature

        • 無需任何配置,支持根據(jù)路由按需加載js和css資源

        • 無需任何配置,支持CSS Modules,代碼如下示例,了解更多

          import "./test.scss"
          
          // 直接如下所示寫組件即可,不需要做任何處理,award自會幫你實現(xiàn)CSS Modules
          <h1 className="name">hello world</h1>
        • 路由底層基于react-router v5,那么就可以根據(jù)其規(guī)則配置復雜的路由規(guī)則了,了解更多

        • 提供了路由切換的生命周期,了解更多

        • 服務(wù)端基于koa2運行,你可以自由的編寫中間件,且支持中間件的熱更新,無需重啟或刷新服務(wù),了解更多

        • 支持使用TypeScript進行開發(fā),了解更多

        • 最佳實踐,喜馬拉雅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

        // 根目錄創(chuàng)建index.js
        import { start } from 'award';
        
        function app() {
          return <div>Hello Award</div>;
        }
        
        function error({ status }){
          return <div>StatusCode {status}</div>;
        }
        
        start(app, error);

        執(zhí)行yarn award dev命令啟動上面這個示例,服務(wù)端將返回<div>Hello Award</div>的文檔內(nèi)容

        如果上述示例在執(zhí)行時出現(xiàn)了錯誤,那么將渲染error組件

        FAQ

        目前有哪些項目在使用award呢,我可以放心使用么?

        ?? 喜馬拉雅內(nèi)部的服務(wù)端渲染項目都是使用award進行構(gòu)建的,所以你不必擔心框架的維護問題

        award和next.js的區(qū)別是什么?

        award和next.js都是一個基于react的服務(wù)端渲染框架,假設(shè)你已經(jīng)了解next.js框架了,接下來我們來說明award和next.js的區(qū)別

        • 基于react-router實現(xiàn)了award-router,其提供了更精細化的路由控制

          • 比如你可以定義path="/:id(\\d+)"來匹配全是數(shù)字的路由,對于強SEO需求的項目很有用處。請查看react-router來了解path定義的規(guī)則

          • 你可以使用award-router提供的路由生命周期來精細化控制前端的每次路由切換。比如用戶離開當前路由時,可以使用自定義彈窗組件來確認是否離開

          • 支持自定義的嵌套路由,定義規(guī)則和react-router一致,使用上稍有差異,點擊查看

          • ?? 當然next.js關(guān)于路由的所有功能,我們也都是支持的

        • 關(guān)于 CSS-in-JS ,可以點擊了解更多

          • 開發(fā)者只需要通過import './style.scss'的形式引用,即可實現(xiàn) CSS-in-JS,且自動實現(xiàn)了樣式scope和開發(fā)階段的樣式緩存

          • 無需任何配置,編譯后即可將樣式提取到css文件,且在生產(chǎn)環(huán)境運行時可以根據(jù)路由按需加載,包括服務(wù)端渲染直出時

          • ?? next.js目前還需要一些配置來實現(xiàn),要實現(xiàn)CSS Modules還需要手動處理,而award只需import導入樣式即可

        • award提供了豐富且強大的插件系統(tǒng),可以不斷的給Award注入活力。next.js暫未表態(tài)其插件市場

        • 提出了運行包和工具包的思想,極大的減少了,在node環(huán)境運行時,所需安裝依賴的體積。next.js不支持

        • award基于koa,開發(fā)者可以通過寫中間件自由擴展服務(wù)端能力

          • 開發(fā)階段,我們支持中間件的熱更新功能

          • ?? next.js需要自行通過koa或者express再次封裝一下,才能方便的使用中間件

        • 更多功能,歡迎查看文檔進行探索

        當開發(fā)服務(wù)端渲染項目時,針對award和next.js,我該如何選擇呢?
        • 如果你的項目對SEO要求比較高,且是大型的服務(wù)端渲染項目,推薦使用award。其可以更好的幫你管理路由,管理中間件,管理樣式的開發(fā)等

        • 如果項目不是那么大,對SEO的要求不是很苛刻,那還是推薦使用next.js

        • 兩者各有優(yōu)缺點,建議都使用下對比看看。整體的上手和學習成本,兩者都差不多

        Contributing

        我們的目的是繼續(xù)增強和優(yōu)化Award功能,為web應用開發(fā)提供更便捷的輔助手段。閱讀以下內(nèi)容來了解如何參與改進Award

        Contributing Guide

        閱讀我們提供的貢獻指南來了解award的開發(fā)和發(fā)布流程

        Testing

        你也可以通過運行測試腳本yarn test:client參與到award的開發(fā)中來

        License

        Award is MIT licensed.

        瀏覽 23
        點贊
        評論
        收藏
        分享

        手機掃一掃分享

        編輯 分享
        舉報
        評論
        圖片
        表情
        推薦
        點贊
        評論
        收藏
        分享

        手機掃一掃分享

        編輯 分享
        舉報
        1. <strong id="7actg"></strong>
        2. <table id="7actg"></table>

        3. <address id="7actg"></address>
          <address id="7actg"></address>
          1. <object id="7actg"><tt id="7actg"></tt></object>
            伊人网免费视频 | 午夜精品99久久免费 | 美女自尉视频 | 豆花视频国产 | 无码一区二区三区四 | 国产91无码精品秘 入口 | 影音av在线 | 欧美黑粗大视频 | 九九黄片 | 海角国产乱辈乱精品视频 |