成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

koa-cola：只需一個react組件，同時支持單頁應(yīng)用(SPA)和服務(wù)器渲染(SSR)

XGBCCC / 1282人閱讀

摘要：是一個基于和的服務(wù)器端和瀏覽器端的的前后端全棧應(yīng)用框架。是的組件，并且會進(jìn)行數(shù)據(jù)初始化不但可以支持的數(shù)據(jù)初始化，還可以合并和的，使用同一個，和的無縫結(jié)合。

koa-cola是一個基于koa和react的服務(wù)器端SSR(server side render)和瀏覽器端的SPA(single page application)的web前后端全棧應(yīng)用框架。

koa-cola使用typescript開發(fā)，使用d-mvc（es7 decorator風(fēng)格的mvc）開發(fā)模式。另外koa-cola大量使用universal ("isomorphic") 開發(fā)模式，比如react技術(shù)棧完全前后端universal（server端和client端均可以使用同一套component、react-redux、react-router）。

koa-cola的開發(fā)風(fēng)格受sails影響，之前使用過sails開發(fā)過大型的web應(yīng)用，深受其約定優(yōu)先配置的開發(fā)模式影響。

特點

SSR+SPA的完整方案，只需要一份react代碼便可以實現(xiàn)：服務(wù)器端渲染＋瀏覽器端bundle實現(xiàn)的交互

使用koa作為web服務(wù)（使用node8可以使用最新的v8高性能原生使用async/await）

使用typescript開發(fā)

使用完整的react技術(shù)棧(包括react-router和react-redux)

react相關(guān)代碼前后端復(fù)用(包括component渲染、react-router和react-redux)

如何使用

koa-cola支持node.js的版本包括7.6和8，建議使用8，因為8.0使用的最新的v8版本，而且8.0會在今年10月正式激活LTS，因為koa-cola的async/await是原生方式使用沒有經(jīng)過transform，所以不支持node7.6以下的node版本。

npm i koa-cola ts-node -g 安裝全局koa-cola和ts-node

koa-cola new koa-cola-app 在當(dāng)前文件夾創(chuàng)建名字為app的新koa-cola項目，創(chuàng)建完整的目錄結(jié)構(gòu)，并自動安裝依賴

cd koa-cola-app

koa-cola dev dev模式啟動，build webpack bundle、launch項目、并自動打開瀏覽器

視頻演示

對比next.js

next.js是一個比較流行的也是基于react的SSR的應(yīng)用框架，不過在react技術(shù)棧，next.js只支持component和react-router，并沒有支持redux，在服務(wù)器端，也沒有太多支持，比如controller層和express/koa中間件，服務(wù)器端只是支持簡單的路由、靜態(tài)頁面等，koa-cola則是提供前后端完整的解決方案的框架。

在數(shù)據(jù)初始化，兩者有點類似，next.js使用靜態(tài)方法getInitialProps來初始化數(shù)據(jù)：

import React from "react"
export default class extends React.Component {
  static async getInitialProps ({ req }) {
    return req
      ? { userAgent: req.headers["user-agent"] }
      : { userAgent: navigator.userAgent }
  }
  render () {
    return 

      Hello World {this.props.userAgent}
    

  }
}

koa-cola提供兩種方式來進(jìn)行數(shù)據(jù)初始化，更加靈活。

而且，next.js不支持子組件的數(shù)據(jù)初始化：

Note: getInitialProps can not be used in children components. Only in pages.

koa-cola則只需要加上decorator "include", 完全支持所有的子組件的數(shù)據(jù)初始化。

import * as React from "react";

var {
  asyncConnect,
  include
} = require("koa-cola").Decorators.view;
// Child1, Child2 是asyncConnect的組件，并且會進(jìn)行數(shù)據(jù)初始化
var Child1 = require("../components/child1").default;
var Child2 = require("../components/child2").default;

export interface Props {}
export interface States {}

@asyncConnect([])
@include({
  Child1,
  Child2
})
class MultiChildren extends React.Component {
  constructor(props: Props) {
    super(props);
  }
  render() {
    return 

        
        
      

  }
}

export default MultiChildren;

koa-cola不但可以支持component的數(shù)據(jù)初始化，還可以合并page和component的reducer，使用同一個store，page和component的redux無縫結(jié)合。詳細(xì)可參考多子組件的redux頁面例子源碼和在線Demo

Examples

使用官方react-redux的todolist作為基礎(chǔ)，演示了官方的和基于koa-cola的例子（完整的mvc結(jié)構(gòu)）

demo依賴本地的mongodb

online demo

使用方法：

npm i koa-cola ts-node -g

git clone https://github.com/koa-cola/todolist

cd todolist

npm i

koa-cola dev

更多詳情請查看官方文檔

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91414.html

相關(guān)文章

  • 揭開React中server-side rending的神秘面紗

    摘要：與的興起緊密相連?，F(xiàn)在情況下，所有發(fā)送到端的請求都會被直接返回成。這樣對于做的部門來說也是十分有利的。這個函數(shù)將會接受服務(wù)端渲染的代碼并掛載事件處理函數(shù)。用于在渲染的過程中追蹤可能的重定向請求比如需要根據(jù)響應(yīng)重定向。 原文地址：https://medium.freecodecamp.o... showImg(https://segmentfault.com/img/remote/14...

    0x584a 評論0 收藏0

  • 使用 PHP 來做 Vue.js 的 SSR 服務(wù)端渲染

    摘要：對于客戶端應(yīng)用來說，服務(wù)端渲染是一個熱門話題。在服務(wù)器預(yù)渲染初始應(yīng)用狀態(tài)。重構(gòu)這段腳本，使其可以在服務(wù)端運(yùn)行。如果這些原因和你的情況吻合，那么使用進(jìn)行服務(wù)端渲染將會是個不錯方案。我已經(jīng)發(fā)布兩個庫來支持的服務(wù)端渲染和專為應(yīng)用打造的。 showImg(https://segmentfault.com/img/remote/1460000014155032);對于客戶端應(yīng)用來說，服務(wù)端渲染是...

    李增田 評論0 收藏0

  • React 服務(wù)端渲染完美的解決方案

    摘要：服務(wù)端渲染兩種方式根據(jù)上文介紹對服務(wù)端渲染利弊有所了解，我們可以根據(jù)利弊權(quán)衡取舍，最近在做服務(wù)端渲染的項目，找到多種服務(wù)端渲染解決方案，大致分為兩類。第一種方式傳統(tǒng)方式服務(wù)端渲染，解決用戶體驗和更好的，有諸多工具使用這種方式如的的等。 最近在開發(fā)一個服務(wù)端渲染工具，通過一篇小文大致介紹下服務(wù)端渲染，和服務(wù)端渲染的方式方法。在此文后面有兩中服務(wù)端渲染方式的構(gòu)思，根據(jù)你對服務(wù)端渲染的利弊權(quán)...

    DesGemini 評論0 收藏0

  • 2018年前端開發(fā)回顧

    摘要：在整個年，看到發(fā)布版增加了許多功能，包括新的生命周期方法新的上下文指針事件延遲函數(shù)和。它在等待渲染異步響應(yīng)時數(shù)據(jù)，是延遲函數(shù)背后用來管理組件的代碼分割的。發(fā)布自第版開始將近年后，于年發(fā)布。 前端發(fā)展發(fā)展迅速,非常的快。 本文將回顧2018年一些重要的前端新聞，事件和 JavaScript 趨勢。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ showImg(ht...

    crelaber 評論0 收藏0

  • vue服務(wù)端渲染demo將vue-cli生成的項目轉(zhuǎn)為ssr

    摘要：無需使用服務(wù)器實時動態(tài)編譯，而是使用預(yù)渲染方式，在構(gòu)建時簡單地生成針對特定路由的靜態(tài)文件。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序不同，服務(wù)器渲染應(yīng)用程序，需要處于運(yùn)行環(huán)境。更多的服務(wù)器端負(fù)載。 目錄結(jié)構(gòu) -no-ssr-demo 未做ssr之前的項目代碼用于對比 -vuecli2ssr 將vuecli生成的項目轉(zhuǎn)為ssr -prerender-demo 使用prer...

    whinc 評論0 收藏0

發(fā)表評論

0條評論

XGBCCC

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<