Skip to content

Commit

Permalink
Merge pull request #15 from tiffine-koch/master
Browse files Browse the repository at this point in the history 
Updates above-the-fold demo + docs
  • Loading branch information
@mdeverkonda
mdeverkonda authored Sep 16, 2016
2 parents 69f9862 + d2f6167 commit f8c0503
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 99 deletions.
190 changes: 106 additions & 84 deletions samples/universal-react-node/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

```bash
git clone https://github.com/electrode-io/electrode-boilerplate-universal-react-node.git
cd hapiApp
cd electrode-boilerplate-universal-react-node
npm install
```

Expand Down Expand Up @@ -172,65 +172,67 @@ In addition to the above steps, the following modifications were made in order t
---
## <a name="bundle-viewer"></a>Electrode Javascript Bundle Viewer - How to use/integrate guide ##

Electrode Javascript bundle viewer is named [electrify](https://github.com/electrode-io/electrify), it is a tool that helps for analyzing the module tree of webpack based projects. It's especially handy for catching large and/or duplicate modules which might be either bloating up your bundle or slowing down the build/install process.
An Electrode Javascript bundle viewer aptly named [Electrify](https://github.com/electrode-io/electrify), this is a stunning visual tool that helps for analyzing the module tree of Webpack based projects. It's especially handy for catching large and/or duplicate modules which might be either bloating up your bundle or slowing down the build/install process.

#### Integration points in your app ####
- use [electrode-archetype-react-app](https://github.com/electrode-io/electrode-archetype-react-app) which is already integrated with [electrify](https://github.com/electrode-io/electrify) and part of [electrode-boilerplate-universal-react-node](https://github.com/electrode-io/electrode-boilerplate-universal-react-node), all you have to do is run **gulp electrify** after installing [electrode-archetype-react-app](https://github.com/electrode-io/electrode-archetype-react-app) in your app.
- [electrify](https://github.com/electrode-io/electrify) dependency `sudo npm install -g electrode-electrify
- Use [electrode-archetype-react-app](https://github.com/electrode-io/electrode-archetype-react-app) which is already integrated with [electrify](https://github.com/electrode-io/electrify) and part of [electrode-boilerplate-universal-react-node](https://github.com/electrode-io/electrode-boilerplate-universal-react-node), all you have to do is run **gulp electrify** after installing [electrode-archetype-react-app](https://github.com/electrode-io/electrode-archetype-react-app) in your app.
- [Electrify](https://github.com/electrode-io/electrify) dependency `sudo npm install -g electrode-electrify
` and npm task runner integration.
- [electrify](https://github.com/electrode-io/electrify) command line interface (CLI) `electrify <path-to-stats.json> --open`.
- [Electrify](https://github.com/electrode-io/electrify) command line interface (CLI) `electrify <path-to-stats.json> --open`.

`electrode-boilerplate-universal-react-node` & [electrode-scaffolder](https://github.com/electrode-io/generator-electrode) internally use `electrode-archetype-react-app` hence `gulp electrify` on your terminal will start the bundle viewer in the browser.
`Electrode-boilerplate-universal-react-node` & [electrode-scaffolder](https://github.com/electrode-io/generator-electrode) internally use `electrode-archetype-react-app` hence `gulp electrify` on your terminal will start the bundle viewer in the browser.

When you install electrify globally using `sudo npm install -g electrode-electrify`, `electrify` command-line tool is made available as the quickest means of checking out your bundle. As of `electrode-electrify v1.0.0`, the tool takes any [webpack-stats](http://webpack.github.io/docs/node.js-api.html#stats-tojson) object as input and starts out a standalone HTML page as output in your browser, all you have to do is type `electrify <path to stats.json> --open` on your terminal.

Head over to the electrify [repository](https://github.com/electrode-io/electrify#electrify) for a detailed view of the bundle viewer and checkout the source-code. [electrify](https://github.com/electrode-io/electrify) relies on webpack to generate the application modules/dependency tree and is independent of whichever server framework(hapijs, expressjs, etc.) you choose to use.
When you install Electrify globally using `sudo npm install -g electrode-electrify`, the `Electrify` command-line tool is made available as the quickest means of checking out your bundle. As of `electrode-electrify v1.0.0`, the tool takes any [webpack-stats](http://webpack.github.io/docs/node.js-api.html#stats-tojson) object as input and starts out a standalone HTML page as output in your browser, all you have to do is type `electrify <path to stats.json> --open` on your terminal.

Head over to the Electrify [repository](https://github.com/electrode-io/electrify#electrify) for a detailed view of the bundle viewer and checkout the source-code. [electrify](https://github.com/electrode-io/electrify) relies on webpack to generate the application modules/dependency tree and is independent of whichever server framework(hapijs, expressjs, etc.) you choose to use.
---
## <a name="electrode-react-ssr-caching"></a>Electrode Server Side Rendering Component Caching ##

[electrode-react-ssr-caching](https://github.com/electrode-io/electrode-react-ssr-caching) module supports profiling React Server Side Rendering time and component caching to help you speed up SSR.
[Electrode-react-ssr-caching](https://github.com/electrode-io/electrode-react-ssr-caching) module supports profiling React Server Side Rendering time and component caching to help you speed up SSR.

It supports 2 types of caching:

* Simple - Component Props become the cache key. This is useful for cases like Header and Footer where the number of variations of props data is minimal which will make sure the cache size stays small.
* Simple - Component Props become the cache key. This is useful for cases like Header and Footer, where the number of variations of props data is minimal which will make sure the cache size stays small.
* Template - Components Props are first tokenized and then the generated template html is cached. The idea is akin to generating logic-less handlebars template from your React components and then use string replace to process the template with different props. This is useful for cases like displaying Product information in a Carousel where you have millions of products in the repository.

To demonstrate functionality,
To demonstrate functionality, there is:

* Added component `client/components/SSRCachingSimpleType.jsx` to demostrate Simple strategy.
* Added component `client/components/SSRCachingTemplateType.jsx` to demostrate Template strategy.
* To enable caching using `electrode-react-ssr-caching` we need to do the below configuration:
* An added component `client/components/SSRCachingSimpleType.jsx` to demostrate Simple strategy.
* An added component `client/components/SSRCachingTemplateType.jsx` to demostrate Template strategy.
* To enable caching using `electrode-react-ssr-caching`, we need to do the below configuration:

```
const cacheConfig = {
components: {
SSRCachingTemplateType: {
strategy: "template",
enable: true
},
SSRCachingSimpleType: {
strategy: "simple",
enable: true
const cacheConfig = {
components: {
SSRCachingTemplateType: {
strategy: "template",
enable: true
},
SSRCachingSimpleType: {
strategy: "simple",
enable: true
}
}
}
};
};
SSRCaching.enableCaching();
SSRCaching.setCachingConfig(cacheConfig);
SSRCaching.enableCaching();
SSRCaching.setCachingConfig(cacheConfig);
```

The above configuration is done in `server/index.js`.

To read more, go to [electrode-react-ssr-caching](https://github.com/electrode-io/electrode-react-ssr-caching)

---
## <a name="redux-router-engine"></a>Electrode Redux Router Engine ##
- [Redux Router Engine](https://github.com/electrode-io/electrode-redux-router-engine) handles async data for React Server Side Rendering using [react-router], Redux, and the [Redux Server Rendering] pattern.

### Install
```
npm install --save electrode-redux-router-engine
npm install --save electrode-redux-router-engine
```
---

## <a name="above-the-fold"></a>Electrode Above the Fold Server Rendering
[Above the Fold Server Rendering](https://github.com/electrode-io/above-the-fold-only-server-render) is a React component for optionally skipping server side rendering of components outside above-the-fold (or outside of the viewport). This component helps render your components on the server that are above the fold and the remaining components on the client.

Expand All @@ -247,76 +249,96 @@ npm install above-the-fold-only-server-render --save

You can tell the component to skip server side rendering either by passing a `prop` `skip={true}` or by setting up `skipServerRender` in your app context and passing the component a `contextKey` `prop`.

You can skip server side rendering by passing a `skip prop`, like `<your-electrode-app>/components/above-fold-simple.jsx`. You can comment out the `<AboveTheFoldOnlyServerRender skip={true}>` (skip prop) and closing tag to see how the `above-the-fold-only-server-render` component is working underneath:
Let's explore passing `skip prop`; there is an example in
`<your-electrode-app>/components/above-fold-simple.jsx`. On the Home page, click the link to render the `localhost:3000/above-the-fold` page.

```js
The best way to demo this existing component is actually going to be in your `node_modules.`

const YourComponent = () => {
return (
//comment out '<AboveTheFoldOnlyServerRender skip={true}>' tags to toggle SSR of this component'
<AboveTheFoldOnlyServerRender skip={true}>
<div>This will not be server side rendered.</div>
</AboveTheFoldOnlyServerRender>
);
};
Navigate to `<your-electrode-app>/node_modules/above-the-fold-only-server-render/lib/components/above-the-fold-only-server-render.js` line 29:

```javascript
var SHOW_TIMEOUT = 50;
```

You can also skip server side rendering by `setting context in your app and passing a contextKey prop`. Here is an example:
When we use this module at [WalmartLabs](www.walmartlabs.com), it's all about optimization. You are going to change line 29 to slow down the SHOW_TIMEOUT so you can see the component wrapper in action:
Change this to:

```js
```javascript
var SHOW_TIMEOUT = 3000;
```

const YourComponent = () => {
return (
<AboveTheFoldOnlyServerRender contextKey="aboveTheFoldOnlyServerRender.SomeComponent">
<div>This will not be server side rendered based on the context.</div>
</AboveTheFoldOnlyServerRender>
);
};

class YourApp extends React.Component {
getChildContext() {
return {
aboveTheFoldOnlyServerRender: {
YourComponent: true
}
};
}
Run the commands below and test it out in your app:

render() {
return (
<YourComponent />
);
}
}

YourApp.childContextTypes = {
aboveTheFoldOnlyServerRender: React.PropTypes.shape({
AnotherComponent: React.PropTypes.bool
})
};
```bash
npm run build && npm run start
```

Navigate to `<your-electrode-app>/client/components/above-the-fold.jsx.` Following the instructions on how to manipulate the skip prop by directly commenting and uncommenting the `above-the-fold-only-server-render` [component](https://github.com/electrode-io/above-the-fold-only-server-render).
The code in the <h3> tags that are above and below the <AboveTheFoldOnlyServerRender skip={true}> + </AboveTheFoldOnlyServerRender> will render first:

```javascript
import React from "react";
import styles from "../styles/base.css";
import React from "react";
import {AboveTheFoldOnlyServerRender} from "above-the-fold-only-server-render";

export class AboveFold extends React.Component {
export class AboveFold extends React.Component {

render() {
return (
// <AboveTheFoldOnlyServerRender skip={true}>
<div className="renderMessage" style={{color: 'blue'}}>
render() {
return (
<div>
<h3>Above-the-fold-only-server-render: Increase Your Performance</h3>
<p>This will skip server rendering if the 'AboveTheFoldOnlyServerRender' lines are present, or uncommented out.</p>
<p>This will be rendered on the server and visible if the 'AboveTheFoldOnlyServerRender' lines are commented out.</p>
<p>Try manually toggling this component to see it in action</p>
<p><a href="https://github.com/electrode-io/above-the-fold-only-server-render" target="_blank">Read more about this module and see our live demo</a></p>
<AboveTheFoldOnlyServerRender skip={true}>
<div className="renderMessage" style={{color: "blue"}}>
<p>This will skip server rendering if the 'AboveTheFoldOnlyServerRender'
lines are present, or uncommented out.</p>
<p>This will be rendered on the server and visible if the 'AboveTheFoldOnlyServerRender'
lines are commented out.</p>
<p>Try manually toggling this component to see it in action</p>
<p>
<a href="https://github.com/electrode-io/above-the-fold-only-server-render"
target="_blank">Read more about this module and see our live demo
</a>
</p>
</div>
</AboveTheFoldOnlyServerRender>
<h3>This is below the 'Above the fold closing tag'</h3>
</div>
// </AboveTheFoldOnlyServerRender>
);
);
}
}
}
```

You can also skip server side rendering by `setting context in your app and passing a contextKey prop`. Here is an example:

```js

const YourComponent = () => {
return (
<AboveTheFoldOnlyServerRender contextKey="aboveTheFoldOnlyServerRender.SomeComponent">
<div>This will not be server side rendered based on the context.</div>
</AboveTheFoldOnlyServerRender>
);
};

class YourApp extends React.Component {
getChildContext() {
return {
aboveTheFoldOnlyServerRender: {
YourComponent: true
}
};
}

render() {
return (
<YourComponent />
);
}
}

YourApp.childContextTypes = {
aboveTheFoldOnlyServerRender: React.PropTypes.shape({
AnotherComponent: React.PropTypes.bool
})
};
```

To learn more about this essential stand alone module visit the `above-the-fold-only-server-render` [Github repo](https://github.com/electrode-io/above-the-fold-only-server-render).
34 changes: 19 additions & 15 deletions samples/universal-react-node/client/components/above-the-fold.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,28 @@
import React from "react";
import {AboveTheFoldOnlyServerRender} from "above-the-fold-only-server-render";

export class AboveFold extends React.Component {

render() {
return (
// <AboveTheFoldOnlyServerRender skip={true}>
<div className="renderMessage" style={{color: "blue"}}>
<h3>Above-the-fold-only-server-render: Increase Your Performance</h3>
<p>This will skip server rendering if the 'AboveTheFoldOnlyServerRender'
lines are present, or uncommented out.</p>
<p>This will be rendered on the server and visible if the 'AboveTheFoldOnlyServerRender'
lines are commented out.</p>
<p>Try manually toggling this component to see it in action</p>
<p>
<a href="https://github.com/electrode-io/above-the-fold-only-server-render"
target="_blank">Read more about this module and see our live demo
</a>
</p>
</div>
// </AboveTheFoldOnlyServerRender>
<div>
<h3>Above-the-fold-only-server-render: Increase Your Performance</h3>
<AboveTheFoldOnlyServerRender skip={true}>
<div className="renderMessage" style={{color: "blue"}}>
<p>This will skip server rendering if the 'AboveTheFoldOnlyServerRender'
lines are present, or uncommented out.</p>
<p>This will be rendered on the server and visible if the 'AboveTheFoldOnlyServerRender'
lines are commented out.</p>
<p>Try manually toggling this component to see it in action</p>
<p>
<a href="https://github.com/electrode-io/above-the-fold-only-server-render"
target="_blank">Read more about this module and see our live demo
</a>
</p>
</div>
</AboveTheFoldOnlyServerRender>
<h3>This is below the 'Above the fold closing tag'</h3>
</div>
);
}
}

0 comments on commit f8c0503

Please sign in to comment.