From d2f61676f90d3c755219197647e7d17f8de52304 Mon Sep 17 00:00:00 2001 From: tiffine-koch Date: Thu, 15 Sep 2016 23:02:40 -0700 Subject: [PATCH] Adds doc consistency across example apps --- samples/universal-react-node/README.md | 204 ++++++++++++------------- 1 file changed, 96 insertions(+), 108 deletions(-) diff --git a/samples/universal-react-node/README.md b/samples/universal-react-node/README.md index 61e8b101a..1a8d22e53 100644 --- a/samples/universal-react-node/README.md +++ b/samples/universal-react-node/README.md @@ -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 ``` @@ -172,65 +172,67 @@ In addition to the above steps, the following modifications were made in order t --- ## 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 --open`. +- [Electrify](https://github.com/electrode-io/electrify) command line interface (CLI) `electrify --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 --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 --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. +--- ## 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) + --- ## 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 ``` --- + ## 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. @@ -247,110 +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 `/components/above-fold-simple.jsx`. You can comment out the `` (skip prop) and closing tag to see how the `above-the-fold-only-server-render` component is working underneath: - -```js - -const YourComponent = () => { - return ( - //comment out '' tags to toggle SSR of this component' - -
This will not be server side rendered.
- - ); -}; - -``` - -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 ( - -
This will not be server side rendered based on the context.
- - ); -}; - -class YourApp extends React.Component { - getChildContext() { - return { - aboveTheFoldOnlyServerRender: { - YourComponent: true - } - }; - } - - render() { - return ( - - ); - } -} - -YourApp.childContextTypes = { - aboveTheFoldOnlyServerRender: React.PropTypes.shape({ - AnotherComponent: React.PropTypes.bool - }) -}; -``` -On the Home page, click the link to render the `localhost:3000/above-the-fold` page. +Let's explore passing `skip prop`; there is an example in +`/components/above-fold-simple.jsx`. On the Home page, click the link to render the `localhost:3000/above-the-fold` page. The best way to demo this existing component is actually going to be in your `node_modules.` Navigate to `/node_modules/above-the-fold-only-server-render/lib/components/above-the-fold-only-server-render.js` line 29: ```javascript -var SHOW_TIMEOUT = 50; + var SHOW_TIMEOUT = 50; ``` 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: ```javascript -var SHOW_TIMEOUT = 3000; + var SHOW_TIMEOUT = 3000; ``` Run the commands below and test it out in your app: ```bash - gulp hot + npm run build && npm run start ``` The code in the

tags that are above and below the + will render first: ```javascript -import React from "react"; -import {AboveTheFoldOnlyServerRender} from "above-the-fold-only-server-render"; - -export class AboveFold extends React.Component { - - render() { - return ( -
-

Above-the-fold-only-server-render: Increase Your Performance

- -
-

This will skip server rendering if the 'AboveTheFoldOnlyServerRender' - lines are present, or uncommented out.

-

This will be rendered on the server and visible if the 'AboveTheFoldOnlyServerRender' - lines are commented out.

-

Try manually toggling this component to see it in action

-

- Read more about this module and see our live demo - -

-
+ import React from "react"; + import {AboveTheFoldOnlyServerRender} from "above-the-fold-only-server-render"; + + export class AboveFold extends React.Component { + + render() { + return ( +
+

Above-the-fold-only-server-render: Increase Your Performance

+ +
+

This will skip server rendering if the 'AboveTheFoldOnlyServerRender' + lines are present, or uncommented out.

+

This will be rendered on the server and visible if the 'AboveTheFoldOnlyServerRender' + lines are commented out.

+

Try manually toggling this component to see it in action

+

+ Read more about this module and see our live demo + +

+
+ +

This is below the 'Above the fold closing tag'

+
+ ); + } + } +``` + +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 ( + +
This will not be server side rendered based on the context.
 -

This is below the 'Above the fold closing tag'

-
- ); + ); + }; + + class YourApp extends React.Component { + getChildContext() { + return { + aboveTheFoldOnlyServerRender: { + YourComponent: true + } + }; + } + + render() { + return ( + + ); + } } -} + 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).