react i13n

React-I13n

react-i13n提供了一種儀器的性能，可擴展和可插入的方法。

通常，您必須在整個應用程序中手動添加儀器代碼，例如，將onClick處理程序連接到要跟踪的鏈接。 react-i13n通過讓您定義要為您跟踪和處理燈塔的數據模型來提供簡化的方法。

react-i13n通過構建儀器樹來實現此目標，該儀表樹反映您的應用程序反應組件層次結構。您要做的就是利用我們的反應組件來表示哪些組件應解散跟踪事件。

特徵

• I13n樹- 自動化儀器樹創建，鏡像您的應用程序反應組件層次結構。
• React Integration-提供了一個createI13Nnode組件，該組件可以輕鬆地與您的應用程序集成。
• 可插入的- 可插入的接口使您可以整合所有數據分析庫（即Google Analytics（分析），細分等）。看看可用的插件。
• Performant-跟踪數據（ i13nModel ）可以是普通的JS對像或自定義功能。這意味著您可以動態更改跟踪數據而不會引起不必要的重新租賃。
• 適應性- 如果您使用的是同構框架（例如可兌換）來構建應用程序，則可以輕鬆更改服務器和客戶端上的跟踪實現。例如，要跟踪頁面視圖，您可以對服務器上的http請求和XHR請求發射HTTP請求。
• 優化- 我們提供了一個選項，以啟用每個I13nNode檢查視口（集成訂閱-UI-Event）檢查。這意味著只有在節點在視口中時，數據才會被標記。這減少了用戶的網絡使用情況，並提供了更好的跟踪詳細信息。
• 自動掃描鏈接- 支持自動掃描鏈接，用於您無法替換所用的組件以跟踪IT的組件，例如，如果您有依賴關係或使用dangerouslySetInnerHTML 。我們在客戶端掃描您定義的標籤，跟踪它們並在I13N樹中為它們構建節點。

安裝

 npm install react-i13n --save

運行時兼容性

React-I13n用ES2015編寫，應與Polyfills一起使用Promise和Object.assign等功能。分配以支持Node.js的所有瀏覽器和舊版本。我們建議使用babel。

用法

• 選擇適當的插件。
• 使用Setupi13n實用程序包裝您的應用程序組件。
• 定義您的儀器數據並與組件集成
• （選項）如果您想手動解散事件，請遵循事件系統。

 import React , { Component } from 'react' ;
import {
  ReactI13n ,
  createI13nNode ,
  setupI13n
} from 'react-i13n' ;
import somePlugin from 'some-i13n-plugin' ; // a plugin for a certain instrumentation mechanism

// create a i13n anchor for link tracking
const I13nAnchor = createI13nNode ( 'a' , {
  isLeafNode : true ,
  bindClickEvent : true ,
  follow : true
} ) ;

class DemoApp extends Component {
  componentDidMount ( ) {
    // fire a custom event
    this . props . i13n . executeEvent ( 'pageview' , { } ) ;
  }

  render ( ) {
    < span >
      < I13nAnchor
        href = "http://foo.bar"
        i13nModel = { {
          action : 'click' ,
          label : 'foo'
        } }
      >
        ...
      </ I13nAnchor >
      // this link will be tracked, and the click event handlers provided by the plugin will get the model data as
      // { site : 'foo' , action : 'click' , label : 'foo' }
    </ span >
  }
} ;


const I13nDempApp = setupI13n ( DemoApp , {
  rootModelData : { site : 'foo' } ,
  isViewportEnabled : true
} , [ somePlugin ] ) ;

// then you could use I13nDemoApp to render you app 

可用的插件

• React-I13N-GA-Google Analytics（分析）插件
• React-i13n-mixpanel-Mixpanel插件
• React-I13N細分 - 段插件

或遵循我們的指南並創建自己的指南。

I13n樹

react-i13n通過利用React context功能來構建儀器樹。每個組件都可以定義i13nModel Prop，該支架定義了需要跟踪的數據。這種方法更具性能，因為這意味著當您要收集發送信標的跟踪數據值時，您不需要其他DOM操作。

由於I13N數據在每個級別定義。每當您想獲得某個節點的i13nModel時， react-i13n都會遍歷樹以合併層次結構中的所有i13nModel信息。由於已經建造了樹，因此您不需要額外的DOM訪問，這是便宜又高效的。

表現

性能一直是我們正在研究的話題，是的，創建一個額外的React組件包裝鏈接，性能基準測試是一個開銷，如下所示：

 link-without-react-component x 131,232 ops/sec ±1.08% (82 runs sampled)
link-wrapped-with-react-component x 111,056 ops/sec ±1.55% (88 runs sampled)
link-wrapped-with-react-component-with-i13n-high-order-component x 64,422 ops/sec ±1.95% (84 runs sampled)

推介會

看看拉斐爾·馬丁斯（Rafael Martins）最近的反應聚會中的幻燈片，以了解更多。

偵錯

將i13n_debug=1添加到請求URL，您將獲得頁面上直接顯示的每個i13n node的I13N模型。它顯示了每個模型數據以及數據繼承的信息。

例子

• React-I13N-Flux-expamples-我們分配了通量示例，並與之綜合了react-i13n 。
• Falusible.io-易流量位點整合了react-i13n和React-I13N-GA。

在CI過程中設置Env

我們檢查process.env.NODE_ENV !== 'production' ，以確定我們是否應該採取一些操作，例如打印警告消息，這意味著建議將envify類的工具作為您的構建過程的一部分，以剝離非生產代碼進行生產構建。

使用webpack

使用DefinePlugin來定義process.env的值。

 // Example of the webpack configuration:

plugins: [
  new webpack . DefinePlugin ( {
    'process.env' : {
        NODE_ENV : JSON . stringify ( 'production' )
    }
  } ) ,
  ...
]

使用瀏覽

與WebPack相似，您也可以使用envify將process.env.node_env設置為所需的環境

$ browserify index.js -t [ envify --NODE_ENV production  ] | uglifyjs -c > bundle.js

測試

單元

• grunt unit進行單位測試
• grunt cover以生成伊斯坦布爾的覆蓋範圍報告

功能

• 當地調試：
  • grunt functional-debug
  • 在http://127.0.0.1:9999/tests/functional/page.html上檢查功能測試結果
• 在saucelabs上進行功能測試：
  • 確保您有一個索環帳戶設置，獲取用戶ID ane訪問密鑰
  • 設置醬汁連接
  • SAUCE_USERNAME={id} SAUCE_ACCESS_KEY={accessKey} grunt functional

執照

該軟件可在Yahoo Inc. BSD許可證下免費使用。有關許可文本和版權信息，請參見許可證文件。