Name: react-i13n
Owner: Yahoo Inc.
Description: A performant, scalable and pluggable approach to instrumenting your React application.
Created: 2015-05-22 20:37:44.0
Updated: 2018-05-17 22:46:28.0
Pushed: 2018-05-17 17:09:19.0
Size: 363
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
react-i13n provides a performant, scalable and pluggable approach to instrumenting your React application.
Typically, you have to manually add instrumentation code throughout your application, e.g., hooking up onClick handlers to the links you want to track. react-i13n provides a simplified approach by letting you define the data model you want to track and handling the beaconing for you.
react-i13n does this by building an instrumentation tree that mirrors your applications React component hierarchy. All you have to do is leverage our React component or mixin to denote which components should fire the tracking events.
i13nModel) can be a plain JS object or custom function. This means you can dynamically change tracking data without causing unnecessary re-renders.I13nNode. Which means that data will only be beaconed when the node is in the viewport. This reduces the network usage for the user and provides better tracking details.dangerouslySetInnerHTML. We scan the tags you define on client side, track them and build nodes for them in i13n tree.install react-i13n --save
react-i13n is written with ES2015 in mind and should be used along with polyfills
for features like Promise and Object.assign
in order to support all browsers and older versions of Node.js. We recommend using Babel.
React = require('react');
ReactI13n = require('react-i13n').ReactI13n;
setupI13n = require('react-i13n').setupI13n;
somePlugin = require('some-i13n-plugin'); // a plugin for a certain instrumentation mechanism
reate a i13n anchor for link tracking
r you can use the mixin to track an existing component
createI13nNode = require('react-i13n').createI13nNode;
I13nAnchor = createI13nNode('a', {
isLeafNode: true,
bindClickEvent: true,
follow: true
DemoApp = React.createClass({
componentWillMount: function () {
this.props.i13n.executeEvent('pageview', {}); // fire a custom event
},
render: function () {
...
<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'}
}
I13nDempApp = setupI13n(DemoApp, {
rootModelData: {site: 'foo'},
isViewportEnabled: true
somePlugin]);
hen you could use I13nDemoApp to render you app
Or follow our guide and create your own.
react-i13n builds the instrumentation tree by leveraging the undocumented React context feature and the componentWillMount life cycle event. Each component can define a i13nModel prop that defines the data it needs to track. This approach is more performant, as it means you do not need additional DOM manipulation when you want to collect the tracking data values for sending out beacons.
Since the i13n data is defined at each level. Whenever you want to get the i13nModel for a certain node, react-i13n will traverse back up the tree to merge all the i13nModel information in the hierarchy. Since the tree is already built, you do not need extra DOM access, which is cheap and efficient.
The performance has always been a topic we are working on, and yes it's an overhead to create an additional react component wrapping the link, the performance benchmark as below:
-without-react-component x 131,232 ops/sec ±1.08% (82 runs sampled)
-wrapped-with-react-component x 111,056 ops/sec ±1.55% (88 runs sampled)
-wrapped-with-react-component-with-i13n-mixin x 54,357 ops/sec ±1.01% (79 runs sampled)
-wrapped-with-react-component-with-i13n-high-order-component x 64,422 ops/sec ±1.95% (84 runs sampled)
We recommend to use createI13nNode instead of I13nMixin as it performs better. As the benchmark result, on server side, rendering 64 react components with i13n functionalities takes 1 ms. Let's say it takes 3 ms overhead if you have 200 links on the page. That's a trade off if you want to organize i13n implementation better with react-i13n. We are working on performance improvement, if you have any insight or performance benchmark, please let us know!
Take a look at Rafael Martins' slides from a recent React meetup to understand more.
Add i13n_debug=1 to the request url, you will get the i13n model for each i13n node directly shown on the page. It shows the information for each model data and where the data inherits from.
react-i13n with it.react-i13n and react-i13n-ga.We check process.env.NODE_ENV !== 'production' to determine if we should do some action like print out warning message, that means it's recommended to use tools like envify as part of your build process to strip out non-production code for production build.
Use DefinePlugin to define the value for process.env.
ple of the webpack configuration:
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
...
]
Similar to webpack, you can also use envify to set process.env.NODE_ENV to the desired environment
owserify index.js -t [ envify --NODE_ENV production ] | uglifyjs -c > bundle.js
grunt unit to run unit testsgrunt cover to generate the istanbul coverage reportgrunt functional-debughttp://127.0.0.1:9999/tests/functional/page.htmlsaucelabs:SAUCE_USERNAME={id} SAUCE_ACCESS_KEY={accessKey} grunt functionalThis software is free to use under the Yahoo Inc. BSD license. See the LICENSE file for license text and copyright information.