React.js Structures JavaScript for Easy Componentization  

  • JavaScript is in the midst of transforming development teams’ expectations for desktop, server and mobile apps.
  • Enhancements to JavaScript are enabling it to break free of the browser, while technologies such as Node.js and its package manager npm facilitate creation of portable front-end and back-end apps that rival those traditionally created for environments such as Windows, Linux and mobile devices.
  • Components encapsulate the necessary HTML, JavaScript and CSS for a particular component, and apps are built by composing components into larger components that encapsulate their own data and logic.
  • React and Facebook provide a number of recommendations and best practices to help developers build their apps, but developers ultimately shoulder the burden of building the app — creating or procuring the various components, designing the data architecture and testing plan, establishing the look and feel of the app, adapting to necessary display environments, and so forth.
  • Many of the ExtReact components leverage the data package to provide consistent buffering, sorting, filtering and pagination capabilities with minimal developer effort.

JavaScript is in the midst of transforming development teams’ expectations for desktop, server and mobile apps. Enhancements to JavaScript are enabling it to break free of the browser, while technologies such as Node.js and its package manager npm facilitate creation of portable front-end and back-end apps that rival those traditionally created for environments such as Windows, Linux and mobile devices.
Continue reading “React.js Structures JavaScript for Easy Componentization  “

Using Electrode to Improve React Server Side Render Performance By Up To 70%

  • js application platform that powers walmart.com with several goals in mind, including ease of use, re-usability of components across applications and, most importantly, performance.We use server side rendering for almost all of our applications for two reasons:Improved performance for the customerBetter for SEOIn our tests, however, we found that React’s renderToString() takes quite a while to execute — and since renderToString() is synchronous, the server is blocked while it runs.
  • Every server side render executes renderToString() to build the HTML that the application server will be sending to the browser.To solve this problem, we created two Electrode modules: Above the Fold Render (ATF) and Server Side Render Profiling and Caching (SSR Caching).
  • The average renderToString()call with this configuration took 153.80 ms.Electrode default, though, Electrode comes with renderWithIds:false, which gives us a renderToString() time of 124.80 ms. Not bad — Electrode’s default configuration has already improved render time by 19%!
  • That drops our renderToString() time all the way to 36.56 ms — an astounding 71% improvement from the default Electrode configuration, and a 76% improvement from our original, unoptimized test.
  • That means a 70% improvement won’t mean 90 ms, but 180 ms saved.Special Thanks:To Arunesh Joshi, Dmitry Yesin, and the home page team who have implemented the Electrode modules and are using them on the home page in production.To Caoyang Shi, for helping to gather data and ensuring we’re getting the right numbers!More Information:Check out Joel Chen’s post on ReactJS SSR Profiling and Caching or Arpan Nanavati’s post on Building React.js at Enterprise Scale.Check out my post about the release of Electrode, the customer-facing platform that powers Walmart.com.The Electrode website: www.electrode.io

We built Electrode, the react/node.js application platform that powers walmart.com with several goals in mind, including ease of use, re-usability of components across applications and, most…
Continue reading “Using Electrode to Improve React Server Side Render Performance By Up To 70%”

React.JS — Component Data Transfer – codeburst

  • If you are passing data from somewhere in a component, to somewhere else inside the same component, this can be done through state.So what is state?The heart of every React component is its “state”, an object that determines how that component renders behaves.
  • That might look something like this:class component_A extends Component { constructor() { super(); this.state = { data: [], };}In this case, we are defining the state of data.
  • Passing data from parent to child components is only slightly trickier, in that, we can’t pass data in an unbroken chain to other components.
  • [callback] in the child, and pass in the data as an argument.From our above example, our code might look something like this:class component_A extends Component { constructor() { super(); this.state = { listDataFromComponent_C: “ “, };}myCallback = (dataFromComponent_C) = {this.setState({ dataFromComponent_C: dataFromComponent_C});Now from within the child component (component_C) we can pass something to props are static, while state can be changed, once you have passed data from a child to a parent, or from parent to a child, you may need to interact with it differently within that new component.
  • It might look like the following:class component_A extends Component {constructor = {dataFromComponent_C: “ “};},myCallback = (dataFromComponent_C) = {this.setState({ dataFromComponent_C: dataFromComponentC });This is just a brief explanation of how to change data within a component, and transfer data to other child and parent components.

In React JS, there’s often a need to pass data from one component to another. If you are passing data from somewhere in a component, to somewhere else inside the same component, this can be done…
Continue reading “React.JS — Component Data Transfer – codeburst”

Using Horizon/RethinkDB with React

  • Horizon, which is built on RethinkDB and by the RethinkDB team, facilitates common application development tasks like backend setup, real-time data transfer, security and scalability.
  • This tutorial will give you an introduction to Horizon and RethinkDB while also showing you how to build a simple app with Horizon and React.
  • Before hitting the code, let’s learn a few basic Horizon concepts:

    Horizon groups data into horizon collections and each collection is backed by a RethinkDB table.

  • Here’s a visual to help you make sense of the data flow in this app:

    Note that any change in the data is sent from one React client into Horizon and Horizon sends it back to all React apps so they can update their view, this flow makes sure that all clients are always watching the same without inconsistencies.

  • Our app will use two Horizon collections, one for the “we need list” and other for the “we have list”.

Horizon is an open source Backend as a Service (BaaS) that allows developers to easily build data-driven web and mobile applications. Horizon, which is built on RethinkDB and by the RethinkDB team, facilitates common application development tasks like backend setup, real-time data transfer, security and scalability. Horizon can be run locally, on a private server or in the cloud.
Continue reading “Using Horizon/RethinkDB with React”

How to use Presentational/Container components in a Redux app – Jakob Lind

I wrote about when and how to use presentational/container components #reactjs #redux

  • Either present something visual (presentational component) OR fetch data (container component).
  • You can use the container/presentational pattern when using both regular Ajax calls inside your components, or when you are using Redux to fetch data.
  • When you start coding your Redux app, you usually start with a wrapper component that receives the data from the Redux store.
  • It is possible to connect Redux to any React component in your application.
  • In a real world application you might need to do more advanced refactorings of the presentational components.

Have you read about Presentational/Container pattern but are still not sure how it looks when it’s used correctly? When should you use it and when should you NOT use it?
Continue reading “How to use Presentational/Container components in a Redux app – Jakob Lind”

React.js Structures JavaScript for Easy Componentization  

#reactjs Structures #JavaScript for easy componentization  @thenewstack

  • JavaScript is in the midst of transforming development teams’ expectations for desktop, server and mobile apps.
  • Enhancements to JavaScript are enabling it to break free of the browser, while technologies such as Node.js and its package manager npm facilitate creation of portable front-end and back-end apps that rival those traditionally created for environments such as Windows, Linux and mobile devices.
  • Components encapsulate the necessary HTML, JavaScript and CSS for a particular component, and apps are built by composing components into larger components that encapsulate their own data and logic.
  • React and Facebook provide a number of recommendations and best practices to help developers build their apps, but developers ultimately shoulder the burden of building the app — creating or procuring the various components, designing the data architecture and testing plan, establishing the look and feel of the app, adapting to necessary display environments, and so forth.
  • Many of the ExtReact components leverage the data package to provide consistent buffering, sorting, filtering and pagination capabilities with minimal developer effort.

JavaScript is in the midst of transforming development teams’ expectations for desktop, server and mobile apps. Enhancements to JavaScript are enabling it to break free of the browser, while technologies such as Node.js and its package manager npm facilitate creation of portable front-end and back-end apps that rival those traditionally created for environments such as Windows, Linux and mobile devices.
Continue reading “React.js Structures JavaScript for Easy Componentization  “

How to Style React Components with styled-component

  • With components, it has started to make more sense to include styling inline within a component like so:source: www.styled-components.comWhy Inline Styling?You may be thinking to yourself, isn’t inline styling bad practice?
  • In the case of components though, inline styling has many advantages over vanilla CSS styling.
  • Acording to Radium’s website (another tool for inline styling) the benefits of using inline styling with components are:Scoped styles without selectors (styles are on component itself)Avoids specificity conflicts (two style definitions for one element)Source order independence (doesn’t rely on the order files are imported)Dead code elimination (no unused classes as in CSS)Highly expressive (easier to read JSX)Original using styled-components— cool.
  • extend“ syntax.Styling with styled-componentsResulting WebpageFinishing UpInline styling of components is a powerful option to consider when building out user interfaces with React.
  • There is a lot more that styled-components is capable of and I recommend looking through there tutorials and guides to get a better understanding of how awesome inline styling of your components can be!

Traditional styling of websites relies on having an external stylesheet with CSS. This tradition has been challenged with the advent of React and component based UI design. With components, it has…
Continue reading “How to Style React Components with styled-component”