Playing With React and D3

D3 is great at data visualizations, but it manipulates the DOM directly to display that data. Rendering DOM elements is where React shines. It uses a virtual representation of the DOM (virtual DOM) and a super performant diffing algorithm in order to determine the fastest way to update the DOM. We want to leverage React’s highly efficient, declarative, and reusable components with D3’s data utility functions.

How to Make Your React Apps 15x Faster

Without any modifications, React is really fast as-is. There are, however, a few things that you can do to improve performance. While working at HelloSign, I discovered some quick fixes that made our apps incredibly snappy. With these simple changes, I was able to reduce render time from over 3000 milliseconds to less than 200 milliseconds.

Building Redux Middleware

After writing my post a few months ago on building your own redux app, I have been asked a couple times to write a guide on creating redux middleware and how it works. This will be a quick post on how you can acheive anything with your own middleware!

React Router & Webpack in Production

I’ve been working on a pretty large react-router codebase at work. Currently it has around 50~ code splits, which as you can imagine, is a lot of routes. This is going to be a post on the things I’ve learned throughout building out my development / production config and how we are using webpack in production.

React and ag-Grid - the Perfect Match

What is ag-Grid

ag-Grid is an enterprise JavaScript data grid with zero library dependencies, including no dependency for it’s rendering. You can build an application using just JavaScript and ag-Grid alone. The ‘ag’ stands for framework AGnostic.

Bring your animations to life with physics

Improve your user’s experience with animations. Learn about CSS and Javascript animations and when to use them.

Is There a React Equivalent for Angular’s ng-repeat?

If you’re familiar with AngularJS you already understand many of the principles necessary to get started with React. In this post, I’ll demonstrate how to write the equivalent of an ngRepeat inside a React component.

An Angular Developer's Guide to Their First React Component

I’ve been using Angular in my web apps for the last four years, but I recently became interested in React so I started the learning process. As usual, I dove in blindly, fumbled around with various tutorials until I felt comfortable enough to build something useful. With a few React apps under my belt now, I want to share what I’ve learned with other Angular developers who may be trying out React for the first time. In this post, I’ll start from scratch assuming you know nothing about React. I will try to help correlate Angular concepts with their React counterparts so you can start to build a mental model based on something you already know.

The Pain and the Joy of creating isomorphic apps in ReactJS

This post is not a tutorial. There are enough of them on the Internet. It is always more interesting to look at a real production app. A lot of tutorials and boilerplates show how to write isomorphic ReactJS applications, but they do not cover a lot of real-life problems we’ve faced in production (styling, data-fetching, vendor-prefixes, configutation etc). So we decided to share our experience at github and develop the app in a public repo. The post describes all the issues and howto to deal with them.

Using and Testing the Facebook API with React and Flux

For giving us React and Flux, I’ve seen relatively little about integrating Facebook’s own Graph API with their development tools. The tools are so new that there’s precious little instruction out there about how to answer questions that are easier to answer with other architectures, like: