我猜想大多數(shù)程序員都使用框架來開發(fā)應用程序，框架有助于程序員構建復雜的應用程序并節(jié)省時間。每天，程序員都可以看到大量的好壞框架的列表。本文，將分享一位程序員對于使用框架創(chuàng)建應用的例子，以及他為什么從React轉換到Cycle.js。
React是很受歡迎的前端框架，它有一個很好的社區(qū)。但它可能不如大家說的那么好，大多數(shù)人開始使用React，而不考慮建立一個網(wǎng)絡應用程序的更好方式。這種反思讓我嘗試了Cycle.js，這個新的框架變得越來越流行。在這篇文章中，我想解釋Cycle.js的工作原理以及為什么我認為它比React更好。
什么是Cycle.js？
Cycle.js是一個功能和響應式的JavaScript框架。它將應用程序抽象為純函數(shù)main（）。在函數(shù)編程中，函數(shù)應該只有輸入和輸出，沒有任何副操作。在Cycle.js的main（）函數(shù)中，輸入是來自外部世界的讀取效應（source），而輸出（sink）是對外部世界的寫入效應。使用驅(qū)動程序來管理副操作。驅(qū)動程序是處理DOM效果，HTTP效果和網(wǎng)絡套接字等的插件。
Cycle.js幫助建立用戶界面，測試它們并編寫可重用代碼。每個組件只是一個可以獨立運行的純函數(shù)。
核心API只有一個功能，run：
它有兩個參數(shù)，app和drivers。app主要是純功能，drivers是需要處理副操作的插件。
Cycle.js將附加功能分成較小的模塊。 它們是：
-
@cycle/dom-使用DOM的驅(qū)動程序集合; 它具有基于snabdomvirtual DOM庫的DOM驅(qū)動程序和HTML驅(qū)動程序
-
@cycle/history - History API的驅(qū)動程序
-
@cycle/http - 基于超級用戶的HTTP請求的驅(qū)動程序
-
@cycle/isolation - 具有作用域數(shù)據(jù)流組件的功能
-
@cycle/jsonp - 通過JSONP進行HTTP請求的驅(qū)動程序
-
@cycle/most-run - 大部分應用程序的run功能
-
@cycle/run - 使用xstream制作的應用程序的run功能
-
@cycle/rxjs-run - 使用rxjs制作的應用程序的run功能
Cycle.js編程實例
我們來看一些Cycle.js代碼吧！我們將創(chuàng)建一個簡單的應用程序，以演示它的工作原理。 我認為這個例子應該是一個很好的計數(shù)器應用程序的理想選擇。我們將看到如何處理DOM事件并在Cycle.js中重新渲染DOM。
創(chuàng)建兩個文件index.html和main.js. 整個邏輯是index.html只提供main.js文件，還要創(chuàng)建一個新的package.json文件，因此運行：
npm init -y
接下來，安裝主要依賴項：
npm install @cycle/dom @cycle/run xstream --save
這將安裝@cycle/dom，@ cycle/xstream-run和xstream。我們也需要babel，browserify和mkdirp，所以讓我們安裝它們：
npm install babel-cli babel-preset-es2015 babel-register babelify browserify mkdirp --save-dev
與Babel一起工作，請使用此內(nèi)容創(chuàng)建一個.babelrc文件：
{
在package.json中添加腳本來運行應用程序：
"scripts": {
對于運行Cycle.js應用程序，使用npm開始。
就這樣設置完成，我們可以開始編寫一些代碼。我們在index.html中添加一些HTML代碼：
< !DOCTYPE html><html lang="en"><head>
我們創(chuàng)建了一個id為主的div。Cycle.js將連接到該div并在其中呈現(xiàn)整個應用程序。我們還包括thedist / main.js文件，這是將從main.js創(chuàng)建的被折疊和捆綁的JS文件。
現(xiàn)在是編寫一些Cycle.js代碼的時候了。 打開main.js文件并導入需要的所有依賴項：
import xs from 'xstream'; import { run } from '@cycle/run'; import { div, button, p, makeDOMDriver } from '@cycle/dom';
包括xstream，run，makeDOMDriver和可幫助我們使用Virtual DOM（div，button和p）的函數(shù)。
我們來寫我們的main函數(shù)。它應該是這樣的：
function main(sources) {
這是我們的main函數(shù)。它得到source并返回sinks。Source是DOM流，sink是虛擬DOM。
const action$ = xs.merge(
在這里，我們將兩個流合并成一個單獨的流，稱為action $（后綴含有$的流的變量名稱的約定）。一個是decrement點擊，另一個是 increment按鈕。我們將這兩個事件分別映射到數(shù)字-1和+1。在合并結束時，action $ stream應該如下所示：
----(-1)-----(+1)------(-1)------(-1)------
下一個流是count$。它是這樣創(chuàng)建的：
const count$ = action$.fold((acc, x) => acc + x, 0);
Fold功能非常適合此目的。它接受兩個參數(shù)，accumulate和seed。seed首先被排出，直到事件發(fā)生。下一個事件與基于accumulate函數(shù)的seed 組合。它基本上是reduce（）的流。
我們的count$數(shù)據(jù)流收到0作為起始值，然后在count$的每個新值上，我們將其與count $ stream中的當前值相加。
最后，要使整個循環(huán)工作，我們需要調(diào)用main以下的run函數(shù)。
最后一點是創(chuàng)建虛擬DOM。 這是代碼：
const vdom$ = count$.map(count =>
我們正在映射count $ stream中的數(shù)據(jù)，并返回流中每個項目的虛擬DOM。 虛擬DOM包含一個主要的div包裝器，兩個按鈕和一個段落。 如你所見，Cycle.js正在使用JavaScript函數(shù)來處理DOM，但也可以實現(xiàn)JSX。
在主函數(shù)結束時，返回Virtual DOM：
return {
我們正在傳遞我們的main函數(shù)和一個DOM驅(qū)動程序，它連接到具有ID主體的div，并從該div獲取事件流。 我們正在關閉我們的圈子，并使完美的Cycle.js應用程序。
這是它運行時：
為什么我從React切換到Cycle.js？
現(xiàn)在你了解了Reactive編程的基本概念，并在Cycle.js中看到了一個簡單的例子，讓我們來談一談為什么我會將它用于下一個項目。
設計網(wǎng)絡應用程序時遇到的最大問題是處理不同來源的大型代碼庫和大量數(shù)據(jù)。我是React的粉絲，我在很多項目中都使用過，但是React沒有解決我的問題。
我們來看看使用Cycle.js的一些利弊。
優(yōu)點
-
大代碼庫
當應用變大時，React有一些問題。想象一下，100個容器中有100個組件，每個組件都有自己的樣式、功能和測試，這是許多目錄中許多文件中的許多代碼行，很難瀏覽這些文件。
Cycle.js被設計為通過將項目拆分成獨立的組件來處理大型代碼庫，這些組件可以被隔離和測試而沒有副作用。沒有Redux，沒有副作用，一切都是純數(shù)據(jù)流。
-
數(shù)據(jù)流
React中最大的問題是數(shù)據(jù)流。 數(shù)據(jù)流設計不是React的核心。開發(fā)人員已經(jīng)嘗試解決這個問題，我們有許多庫和方法來嘗試處理這個問題。最受歡迎的是Redux，但這并不完美。 Redux需要花費時間配置并且需要編寫一個只適用于數(shù)據(jù)流的代碼。
使用Cycle.js，程序員只需要編寫使用數(shù)據(jù)執(zhí)行某些操作的函數(shù)，Cycle.js將處理其他所有操作。
-
副作用
React有處理副作用的問題。 在React應用程序中沒有標準的方法來處理副作用。有很多工具可以處理，但需要一些時間來設置和學習。最流行的是redux-saga，redux-effect，redux-side-effect和redux-loop。
Cycle.js不需要那么麻煩，只需包含想要的驅(qū)動程序（DOM，HTTP或其他）并使用它即可。驅(qū)動程序會將數(shù)據(jù)發(fā)送到純函數(shù)，程序員可以更改并將其發(fā)送回將會呈現(xiàn)或執(zhí)行其他操作的驅(qū)動程序。最重要的是它是標準化的，不需要依賴第三方庫，很簡單！
-
函數(shù)式編程
最后但并非不重要的是函數(shù)式編程。Cycle.js是建立函數(shù)式編程范式的很好選擇。一切都不依賴任何外部狀態(tài)。此外，沒有類或類似的東西。 這更容易測試和維護。
缺點
-
社區(qū)
目前，React是較流行的框架，它隨處可見。但Cycle.js不是，它的社區(qū)還有待完善。
-
學習一個新的范式
Cycle.js是一個響應式編程范例。響應式編程是一個不同的范例，需要花費一些時間習慣。
