⚛️ 🚀 Introducing React-Static — A progressive static-site framework for React!

  • How well that static site performs and how easily you can build that site is another story.ProsVery easy to get startedWell documentedConsSubpar developer experience for static functionality no hot-reloadingLarge per-page JS bundles, resulting in a lot of unnecessary duplicate code being downloaded.Difficult root component customizationDestructive routing.
  • We also knew that we needed to ditch built-in proprietary connectors ASAP; being able to get your data from anywhere is important, but the ability to use and access that data in your site is paramount.Most importantly, we needed a tool that would allow us to build things like an…
  • It’s insanely fast, touts fantastic SEO capabilities, and is probably the most React-friendly static-site library on the internet.Let’s get to it.How does it work?react-static starts by exporting a single JS bundle, which includes every template for your entire site.
  • To connect a component to this data, you use a convenient HOC called getRouteProps.The HTML files generated by react-static ensure that pages load instantly and are optimized for SEO.Once the page is loaded, your site invisibly and instantly transitions to your react app.At this point, navigating around your app will…
  • You’ve worked hard enough producing and organizing all of the data for your website, so the last thing you need is some superfluous GraphQL layer or custom component lifecycle lodging itself between your data and your pages.

At Nozzle.io, we take SEO, site performance, and user/developer experience very seriously. Over the last year, we’ve launched many sites using different static site tools that claim to solve these…
Continue reading “⚛️ 🚀 Introducing React-Static — A progressive static-site framework for React!”

Time Series Charts with React, Redux and D3

Time Series Charts with #ReactJS, Redux and D3:  by @byrichardpowell #JavaScript

  • We have just finished a complete rewrite of our time series charts using React, D3 and Redux.
  • This way, we soon had control over the y axis, 2 render types and support for multiple axis:

    By the end of my second random week we had stacked area charts, tooltips, y axis with dynamic widths, colour control, axis that were entirely optional and the presentation was a lot more polished:

    This progress was encouraging but it was deceptive.

  • The architecture of the new charts loosely follows 3 statements: React for composability, Redux for performance, helpers wrapping D3 for data visualisation heavy lifting.
  • This pattern is certainly not unique to our time series charts, in-fact it’s pretty common to React and Redux applications.
  • What is interesting though is the properties our chart tooltips have that make this pattern so useful, specifically:

    The next time you have a performance issue with React, perhaps you might consider the above 4 points and arrive at the conclusion that Container components are the way forward.

How we rebuilt our time series graphs using React, Redux and D3 to create server monitoring graphs as reusable components.
Continue reading “Time Series Charts with React, Redux and D3”