Mark's Dev Blog

Mark's Dev Links - Issue #6

Tue, 06 Mar 2018 20:00:00 -0500

Hi, and welcome to issue #6 of Mark's Dev Links! This is a weekly-ish email newsletter, focused on the React and Redux ecosystem, and stuff that's caught my attention.

News, Links, and Discussion

Webpack 4.0 released

Webpack 4 just went final over the weekend. Major highlights:

Build speeds appear to be much faster, with beta users reporting builds upwards of 60% faster than 3.x
Built-in development and production modes, and "zero-config" sensible defaults out of the box
The CommonsChunkPlugin is now deprecated, replaced by a new built-in chunking behavior
Support for libraries defining a sideEffects : false flag in their package.json to enable much better tree-shaking for smaller bundles

Note that the docs updates for 4.0 aren't published yet, and some of the popular plugins like HtmlWebpackPlugin have needed temporary forks to be compatible.

Adam Rackis is doing some experimenting with upgrading to Webpack 4, and has been posting tweets about his results, including an improvement in bundle size and a gist comparing the output between v3 and v4.

As a related note, there's a new plugin available called webpack-stylish, which looks like it cleans up the standard Webpack build stats output and makes it easier to read. I'll be giving that a shot on my projects later this week.

Dan and Andrew began teasing some big upcoming changes for React on Saturday. Dan is scheduled to speak at JS Conf Iceland on March 1 (talk entitled "React 16 and Beyond"), and is promising to pull back the curtain on what the React team has been working on lately. Based on the tweets, it seems that the React team has come up with some new async-related APIs that are powerful and productive, but likely to be controversial. They're clearly excited about the changes, and it'll be fascinating to see what they've put together. The conference will be livestreamed on Youtube, so I may have to get up extra early Thursday morning to watch Dan's talk :)

TypeScript and Flow Usage in the React community

Reddit: Why isn't Typescript used more in the React community?

There was a great discussion thread this week on the relative merits of TS and Flow and their adoption by React users. In particular, Francois Ward of Hubspot (/u/phoenixmatrix) had some excellent in-depth comments on why they're going to be switching to TS in the near future, and a lot of the tool interop complexities that had prevented them from doing so until now. The whole thread is worth reading.

React Context Optimizations

Bitmasks and the new React Context API

I previously linked to articles and discussion on the new React context API in issue #2. As a summary, you might want to read Kent C Dodds' overview newsletter/post on the new API.

One of the interesting features of the new API is that it supports a optimization of which context consumers get notified for a given update, based on a bitmasking approach. This post shows both how to use context in general, and gives an example of how to use the bitmasking optimization.

An Engineer's Guide to Communication

https://medium.com/art-of-engineering/an-engineers-guide-to-communication-99180699a0e6

Saw this come through my Twitter feed this evening, and it's definitely worth including. Some good short solid advice on how we as engineers can improve our communication skills and team interaction.

Redux Ecosystem

Promise middlewares

A very common use case is to dispatch Redux actions based on the lifecycle of a promise (creation, success/failure). Two of the most popular libraries for this are redux-promise from Andrew Clark and redux-pack from Leland Richardson. redux-promise is extremely short and simple, and simply dispatches actions formatted using the Flux Standard Action (FSA) structure. redux-pack tries to apply more "convention over configuration" over data fetching and promise behavior, and provides more structure for handling updates.

Redux Issues Spotlight

More FAQ Updates

Redux #2854: FAQ Updates, Part 2: Electric Boogaloo

I had a previous "FAQ updates wanted" issue, which was just closed as we'd accomplished most of the items I had listed in there. But, I do have several more links, questions, and topics I want covered in the FAQ, so I opened up a new issue to address those other items. A couple people have volunteered to help add those to the FAQ, but there's plenty more pieces waiting for someone to claim them. If you'd like to help out, just drop a comment in the thread saying which entry you want to work on!

Me, Myself, and I

Pretty quiet week overall. I did finally force myself to sit down and start writing some initial exercises for the Redux workshop in April, and last night I put together a more detailed outline for the workshop's contents. I'm hoping to make good progress on material for the workshop this week. Plus, this is that time of year when there's a lull in what sports are on TV anyway, so I don't have as much reason to be wasting evenings on the couch goofing off with a game on in the background :)

Obligatory Plug

My "Practical Redux" tutorial series is now an interactive course on Educative.io!. Check it out!

Also, if you're in the New York city area, I'll be doing a "Redux Fundamentals" workshop on April 19-20, with other workshop locations and dates TBD later this year.

Mark's Dev Links - Issue #5

Tue, 27 Feb 2018 10:00:00 -0500

Hi, and welcome to issue #5 of Mark's Dev Links! This is a weekly-ish email newsletter, focused on the React and Redux ecosystem, and stuff that's caught my attention.

News, Links, and Discussion

A couple smaller React 16-related updates this week. Brian Vaughn wrote a good comment on Github describing how React 16 breaks up work into the "render" and "commit" phases, and which lifecycle methods are part of the "render" phase and should therefore not have side effects. He included an example of how to structure component-level fetching logic using the new getDerivedStateFromProps API.

Over on Twitter, Andrew Clark chimed in on a thread that was arguing about functional components vs class components, and pointed out that in React 16, functional components do indeed have less performance overhead than class components since since they're no longer wrapped in classes, and do not need things like constructors or lifecycles. This relates back to the original announcement of functional components in React 0.14, which promised that "In the future, we'll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations."

Alternative React Component APIs

I saw two different alternative APIs for React components come out this week. Jason Nall released react-routine, which uses a generator-based controller approach inspired by redux-saga. Meanwhile, Ryan Florence published react-component-component, which is a generic React component that lets you pass in lifecycle methods as props, like <Component didMount={ ({setState}) => { } } />.

That reminded me that I've seen a few other customized React component APIs out there, so I've included links to those. In particular, Michael Jackson and James Long have both been playing around with their own alternative APIs that are more functional-inspired and avoid use of this. Dominic Gannaway has made a few comments on Twitter around the eventual possibility of a functional component API that has state or lifecycles as well.

"Redux is overused" Twitter discussion

Last week, Twitter broke out into a bunch of ricocheting retweets and arguments over whether Redux is overused. As best as I can reconstruct things, here's what happened:

James Kyle made some comments about having decided Redux was a bad idea after all. That drew discussion, including from Dan Abramov.
Cory House posted a tweet saying that his team was badly overusing Redux. That got heavily retweeted.
Jani Evakallio cracked a joke about thought leaders telling everyone to rewrite from Redux, which got seemed to get retweeted by people who didn't realize it was a joke
I saw a bunch of the original tweets and replies with people chiming in about Redux being overused or people moving away from Redux, and got kind of frustrated, since I've addressed this in the Redux FAQ and several of my blog posts
Kyle Shevlin and Jack Franklin had some good comments on how a lot of the issue is education, in that people don't properly understand what the purpose of Redux is and how to use it appropriately

So, it was a big kerfluffle, and nothing really changed, but I guess it was interesting to see some of the different trains of thought going on out there.

Redux: Let's Code a Higher-Order "Duck"

https://medium.com/@yazeedb/redux-lets-code-a-higher-order-duck-a045415bef0f

The "ducks" pattern is a semi-popular approach for organizing Redux logic by putting action types, action creators, and reducers into a single file. This post shows how to combine the "ducks" pattern with the approaches shown in the Redux docs "Reducing Boilerplate" page to create multiple instances of a duck that contains reusable list CRUD handling logic.

Redux Ecosystem

Kea

I've seen many higher-level abstractions built on top of Redux. One of the most interesting ones is Kea, which combines Redux, Reselect, and Redux-Saga under the hood to let you write "logic stores" that can be connected to React components.

Kea ensures that action creators are bound up to dispatch, action creator functions can double as action types using some toString() magic, support sagas and selectors is built in, and the "ducks"-style structure puts related logic in one place.

It's a nice-looking option for people who are using these tools together and want to simplify some of the code, or want to "reduce Redux boilerplate" in general.

reselect-tools: debugging tools for Reselect

https://github.com/skortchmark9/reselect-tools

This is a nifty little set of tools for debugging your Reselect selectors. By replacing the standard Reselect createSelector version with the one from reselect-tools, you can visualize the flow of data between selectors. It even has a Chrome DevTools extension too!

Redux Issues Spotlight

New Redux Docs Build Setup!

The Redux docs have always been built using Gitbook. Gitbook has apparently been working on a new version of both the build tool and their docs editing/integration site, with a new default docs page design as well. A Gitbook dev filed a PR to update Redux's docs to use the new beta version of Gitbook, and we merged it in. This unfortunately broke some things, such as existing external URLs not working because the generated page links no longer end with .html. It looks like we've got the biggest issues sorted out, and hope to get the last rough edges fixed soon.

In related news, I'm working on finally getting a similar build setup for the React-Redux docs in place, and I'm hoping that we can start planning a revamp of those started soon.

Me, Myself, and I

I just got back from an extended business trip, so I'm mostly trying to relax a bit and settle back into a normal routine.

I've spent most of my time at work lately doing work on build infrastructure, tooling, and integration, but I finally had time this last week to sit down and work on a new feature. The app uses a 3D globe library called Cesium, with data display driven by React components. We had some existing functionality that showed a single image overlaid on the globe at a time. I was able to generalize that to maintain a history of image overlays loaded, show multiple overlays on the globe at once, and allow toggling them individually. It really was "just" a matter of a reducer that tracked items in an array, very similar to the approach I showed in Practical Redux, Part 10: Managing Modals and Context Menus. I was able to knock that out in a couple days, and it was very satisfying to see it work exactly as I'd anticipated :)

Other than that, most of my attention for the next couple months will be focused on preparing for the first Redux workshop I'll be teaching in April, as well as the other couple talks I'll be giving in March.

Obligatory Plug

My "Practical Redux" tutorial series is now an interactive course on Educative.io!. Check it out!

Also, if you're in the New York city area, I'll be doing a "Redux Fundamentals" workshop on April 19-20, with other workshop locations and dates TBD later this year.

Mark's Dev Links - Issue #4

Tue, 20 Feb 2018 10:00:00 -0500

Hi, and welcome to issue #4 of Mark's Dev Links! This is a weekly-ish email newsletter, focused on the React and Redux ecosystem, and stuff that's caught my attention.

In addition to last week's announcement of me teaching Redux workshops in partnership with Workshop.me, I can also announce that I'll be speaking on "Redux Fundamentals" at Reactathon in San Francisco on March 20! See below for more details.

News, Links, and Discussion

New React `createRef` API

When I started the newsletter, I really wasn't expecting it to turn into a running changelog of React API updates, but the React team just keeps merging in new features. This week, they've merged in a new createRef() API, which is intended to act as a simpler alternative to callback refs, and as a final replacement for string refs. The API was inspired by the Reason-React bindings, and allows creating "ref objects" that have a value property that will be updated by React. It looks like this should also get included in React 16.3 along with the other recently merged API updates.

React Architecture Confessions

https://benmccormick.org/2018/02/07/react-confessions/

Ben McCormick shares some well-written thoughts on mistakes he's made while working on React apps, inspired by the book "Clean Architecture". He lists five different mistakes, and describes what he did, why he did it, and what he should have done instead in hindsight. Well-written advice, as always.

Modern CSS for Dinosaurs

https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525

CSS techniques and practices have changed a lot over the years. This article gives a historical overview of how approaches and tools have evolved and why various practices were created. (The same author also previously wrote a similar post called Modern JavaScript Explained for Dinosaurs, explaining the historial context for JS tools and build practices.)

Hacky way to view Instagram Redux Store

https://medium.com/@rajsek/hacky-way-to-viewing-instagram-redux-actions-b6ae59cbafc8

The Redux DevTools are great for debugging what's going on in a Redux app, and many people leave them turned on in production (possibly in read-only mode). In this post, the author shows how to fiddle with a page in order to enable use of the Redux DevTools in a production app, even though the developers didn't actually turn it on themselves. (Note: this is a great example of why you shouldn't blindly trust values from a client-side app!)

Redux Ecosystem

`redux-batch`: dispatch multiple actions with one subscription update

https://github.com/manaflair/redux-batch

We're frequently asked about ways to cut down on the number of subscriber update notifications. One useful tool for this is redux-batch, which is a store enhancer that allows passing an array of actions to dispatch, and only triggers the subscriber callbacks a single time after all the actions have been processed.

Amusingly, I'm actually half-responsible for this library existing :) There was a very long Redux issue thread about the best way to add a form of dispatch batching to the Redux core, and as part of that thread, I whipped up a gist that swiped the structure from tappleby/redux-batched-subscribe and replaced the notification logic with my own approach. That lib later got adapted by someone else and turned into redux-batch. (As an interesting side note, that thread is also where I finally had to dig into the concept of "store enhancers" enough to finally grok what they are and how they worked.)

Redux Issues Spotlight

Business Logic in Redux

Discussion: Gaining clarity on "business logic" for FAQs

A few weeks ago I tweeted out a request for examples of "client-side business logic" . Unfortunately, I only got a few responses, but there was a resulting issue opened up to discuss the topic further. I'd love to see some more discussion of what qualifies as "business logic" and how you're currently implementing that, both with and without Redux, so that we can better answer that sort of question in the future.

Me, Myself, and I

Full Stack Lunch - "State of the Redux Union"

On Friday Feb 9, I was able to drop by the Full Stack Lunch San Diego meetup and give a short "State of the Redux Union" presentation. If you're reading this newsletter you've probably already seen most of the stuff I talked about, but it was nice to share some of this stuff in person. If you're interested, here's a video of the entire meetup and the accompanying slides.

"Redux Fundamentals" talk at Reactathon

Since there won't be a ReactConf put on by the React team this year, the Reactathon conference has stepped up and is putting on a 3-day conference March 20-22, in San Francisco. It'll actually be split into two parts: Tuesday is a "Fundamentals" track, while Wednesday and Thursday are an "Advanced" track. I'm pleased to announce that I'll be giving a 30-minute "Redux Fundamentals" talk on Tuesday, March 20! Looks like a great list of speakers for both parts of the conference, and I'm excited to be a part of it.

Obligatory Plug

My "Practical Redux" tutorial series is now an interactive course on Educative.io!. Check it out!

Mark's Dev Links - Issue #3

Tue, 13 Feb 2018 10:00:00 -0500

Hi, and welcome to issue #3 of Mark's Dev Links! This is a weekly-ish email newsletter, focused on the React and Redux ecosystem, and stuff that's caught my attention.

ANNOUNCEMENT: LIVE WORKSHOPS FROM WORKSHOP.ME!

I am very excited to announce that I will be teaching several live Redux workshops this year!!! Ryan Florence has just launched a new workshop-based training series called Workshop.me, and is partnering with a who's-who list of industry experts to give in-person workshops on web development topics. This includes:

Kent C Dodds on testing
Sean Larkin on Webpack
Evan You on Vue
Sarah Drasner on SVGs and animations
Todd Motto on Angular

And many more!

I'm still kind of confused how I actually fit into that list, but I guess if you answer enough questions, eventually you sorta know what you're talking about, or at least people assume you do :)

So, my first Redux workshop is scheduled for April 19-20, in New York City, with others TBD dates and locations for later this year.

I'll still keep answering questions online, of course, but I'm really looking forward to this chance to help people learn Redux (and React) in person!

And with that, on with the rest of the news!

News, Links, and Discussion

React 16.3 Roundup

React #12152: Umbrella: 16.3 and 16.4 Releases
Reddit: React 16.3 alpha available on NPM
Dan Abramov on Twitter:
- Use cases for getDerivedStateFromProps
- Hints about upcoming React work
What's New in React 16.3 alpha (and more discussion on Reddit)

The React team continues to crank out work and push forward with the post-Fiber changes to React's core APIs. This week, React 16.3 alpha 0 was published to NPM. Brian Vaughn and Dan Abramov answered many questions about the new APIs and behavior in a large discussion thread on Reddit. Andrew Clark filed an issue with the roadmap for the 16.3 and 16.4 releases.

Reactiflux moderator Bartosz Szczecinski wrote a good summary of the changes coming in React 16.3, how they work, and how to use them.

Dan Abramov tweeted some discussion of how the new getDerivedStateFromProps API might be used, and literally as I write this, just started dropping some hints about further future changes to React's behavior.

Also, there's a very intriguing line item buried in Andrew's 16.3 issue:

** Chose not to include in 16.3, but may be in 16.4 or beyond** - New component API. We're holding off on this until we're closer to "feature complete," a phrase which here means "having implemented async rendering and bytecode compilation."

The "bytecode compilation" mention possibly relates to some of the work that Dominic Gannaway and Sebastian Markbage have been doing around the Prepack compiler. Dominic forked the JS Frameworks Benchmark repo a couple months ago, and added a commit that shows a React component's render method converted into opcodes (credit to this Reddit thread for bringing it to my attention). Clearly some very interesting experimentation going on around precompiling React.

More `setState` Behavior Explanation

https://stackoverflow.com/questions/48563650/does-react-keep-the-order-for-state-updates/48610973#48610973

Following on from last week's explanation of why setState is async, Dan Abramov wrote another long explanation on Stack Overflow on when and why setState calls are batched together.

Modern Web Podcast S05E01: Redux and MobX with Tim Dorr and Michel Weststrate

https://www.youtube.com/watch?v=kyJKDtQUb7w

A recent episode of the Modern Web Podcast featured Redux co-maintainer Tim Dorr and MobX creator Michel Weststrate talking about state management in the React world, with updates on what's happening with both libraries. Some really good discussion here, including some thoughts on how React's async rendering and new context API may affect these libraries, what data should go into a state store, use of combineReducers, and more.

Redux Ecosystem

redux-subspace

Redux's single global store approach does inherently make it harder to implement encapsulation or modularity, so I've kept a close eye out on libraries that experiment with approaches for adding those capabilities back on top of Redux. redux-subspace is a library that allows breaking up an application into many "sub-stores" that can be combined together at runtime, as well as providing encapsulation for different modules or pieces of domain logic. It's particularly intended for an enterprise-type "micro-front-end" approach where you might have many different teams working on different parts of an app, but should have benefits for several other situations as well. It also comes with integrations for React-Redux, Redux-Saga, and Redux-Observable.

Redux Issues Spotlight

Redux Addons Catalog - client-side UI - UPDATE!

https://github.com/wilbertliu/redux-ecosystem

Last week I linked to my request for someone to build a client-side UI for my Redux addons catalog. Since then, Github users @wilbertliu and @dberget have started tackling this project in earnest. They've already got some UI mockups and initial Markdown parsing logic in place, and are discussing planned features and behavior. I'm really excited to see this moving forward, and can't wait to see this come to fruition!

Redux docs site rebuild?

Since the last request for help worked out so well, I'll try it again :)

The Redux docs site is currently built with Gitbook, but I'm not particularly happy with the current build process. I'd like to investigate changing to use Gatsby or another similar static site generation tool, but don't have time to really dig into this myself. I'd love to have someone look into this for us.

On a related note, the React-Redux library currently just has its API docs in a Markdown file that's linked in the repo. I'd really like to set up a separate React-Redux docs site, and drastically improve the React-Redux docs content at the same time. There's been a bit of initial discussion for what a docs revamp might include, but I'd love to get more community involvement in improving these docs.

Me, Myself, and I

Note: this first sentence is now slightly out of date, per the announcement up top :)

Not a lot to mention on my end this week. Still on travel for work, so I'm pretty busy with that. I spent some time on Friday playing around with React 16's new error boundaries capability, and trying to see if there was a good way to display the component and code stack traces provided by componentDidCatch. I actually managed to hack together a mangled version of the react-error-overlay package that showed the error info, but I'd like something lighter-weight. (If anyone's already seen a good pre-built component or package for this, let me know!)

As I write this on Sunday, I've got a very interesting React-related meeting coming up tomorrow, so that should be done by the time you see this. Good chance there will be some things to talk about from that down the road.

Obligatory Plug

My "Practical Redux" tutorial series is now an interactive course on Educative.io!. Right now, Educative is having a sale - all courses are 50% off with coupon code LEARN2018 . That includes not just my "Practical Redux" course, but many others as well. Check it out!

Mark's Dev Links - Issue #2

Tue, 06 Feb 2018 10:00:00 -0500

Hi, and welcome to issue #2 of Mark's Dev Links! This is a weekly-ish email newsletter, focused on the React and Redux ecosystem, and stuff that's caught my attention.

Last week I mentioned I wasn't yet sure what I was going to do about older newsletter issues. I've decided I'll try posting them on my blog after a 1-week delay, just for visibility. So, you'll be able to see them at both https://tinyletter.com/acemarke/archive and http://blog.isquaredsoftware.com/series/newsletter/ .

News, Links, and Discussion

New React Context Implementation

The React team has been promising for the last few years that they would eventually implement a new replacement for the existing context API, which would both resolve the issues with the current behavior of context and also open up new possibilities. The RFC describing the new API was filed a couple months ago, and the RFC and corresponding React PR have just been merged. A few key points to note about this:

The API uses "provider/consumer" pairs, and is expected to be used with the "render props" form of component composition. It also does not rely on the use of PropTypes to declare values.
The new API will be released in React 16.3. If you'd like to try something similar, the React-Broadcast library has been updated to use an equivalent API already.
Updates to values will propagate even if there's a component in between that has returned false from shouldComponentUpdate
Andrew Clark and Kent Dodds had a Twitter conversation where Andrew confirmed that the new context API is considered a first-class feature, and should be stable going forward. Also, apparently the API will offer an advanced option for determining whether a given consumer should update, using bitmasking.

You might also want to check out the latest issue of Kent C Dodds's newsletter as well, as he gives a bigger overview of what context is and what's going on here. (And if you're not signed up for his newsletter already, you probably should go do so now.)

Why `setState` is Async

https://github.com/facebook/react/issues/11527#issuecomment-360199710

Several months ago, Michel Westrate filed a React issue asking for an explanation of why setState is async. This week, Dan Abramov wrote a fantastic, detailed response that explains how React handles batching, and the kinds of scenarios that require internal consistency for correct behavior. Highly recommended reading!

React-Scope

A new React devtool extension called React-Scope came out recently. It looks like it uses the same infrastructure as the React DevTools to show a live graph of your React component tree and their data. Seems to be a nice additional way to view the state of your application.

Kuker

Continuing the devtools theme: Krasimir Tsonev has released Kuker, a devtools extension that takes inspiration from the Redx DevTools. However, because it uses window.postMessage as the basis for its API, it can accept events and data captured from a variety of different sources. The author has already created adapters that draw data from Redux, MobX, Redux-Saga, DOM elements, and more.

Redux Ecosystem

Redux-Bundler

https://github.com/henrikjoreteg/redux-bundler

Henrik Joreteg, who helped lead development on Starbucks' new PWA, has just published his own higher-level abstraction over setting up Redux. I haven't had time to really dig through it indepth myself yet, but at first glance it looks very intriguing. It looks like it includes a bunch of different capabilities:

grouped action creators / reducers / selectors "bundles" in a form somewhat similar to the "ducks" pattern, with conventions for exposing them by name
the ability to merge bundles together to set up the Redux store
simplified binding of action creators by name, and references to selectors by name
lazy-loading of bundles at runtime
"reactor" logic that can trigger async behavior based on the current app state

It's already picked up 300 stars since Henrik announced it, and there's some fascinating concepts here that I'm going to have to investigate further.

Redux Issues Spotlight

Redux Addons Catalog - client-side UI?

https://github.com/markerikson/redux-ecosystem-links/issues/60#issuecomment-360991019

My Redux addons catalog repo currently lists close to 2000 Redux-related libraries and tools - pretty much everything I've run across that looks useful. The downside to this is that there's many similar-looking libraries listed, and there's no easy way to compare them.

What I'd really love to see is an interactive site that parses the links in my list, and turns them into a client-side app that allows filtering, sorting, and comparing for the different libraries in each category, based on Github and NPM stats. There's plenty of prior art for sites like that already, and I've linked several relevant examples and useful pieces for building such a site in that thread. I don't have time to build something like this myself, but I would love to have someone put it together :) I think it would be a real help to the Redux community.

I just had a couple people contact me about working on this and it sounds like they're starting to do some initial project planning, so I'm really excited to see this idea moving forward!

Me, Myself, and I

I'm traveling on business for the next couple weeks, so that will keep me pretty busy - I generally don't have as much time to keep tabs on what's going on in the ecosystem while I'm gone. I'll do my best to keep the newsletter going, though - would be kinda silly to post the first couple and then suddenly pause :) (In fact, I'm writing this from 30K feet right now.)

I do have a couple things I'm excited about ahead in the next couple months, but I can't talk about them... yet :)

Wrapping Up

That's all for this week. At some point in the next couple weeks, I may give a bit of background for the mysterious map-like screenshots I was vague-tweeting about a few weeks ago :)

Obligatory Plug

Mark's Dev Links - Issue #1

Tue, 30 Jan 2018 10:00:00 -0500

Hi, and welcome to the inaugural issue of Mark's Dev Links! This is hopefully going to be a weekly-ish email newsletter, focused on the React and Redux ecosystem.

Since it's the first issue, I'm still trying to figure out exactly where I want to go with this. The whole idea was kind of spur-of-the-moment yesterday. I blame Gosha Arinich, who's been poking me to try out a mailing list for a while,and of course Kent C Dodds's newsletter is an inspiration as well.

I'm generally picturing a format along these lines:

A few selected articles and discussions of interest, with the articles probably drawn from updates to my React/Redux links list
One or more highlighted Redux-related addons or libraries, similarly drawn from updates to my Redux addons catalog
Possibly a spotlight on an open Redux issue, or status of the library
Any new articles or updates I've posted to my own blog
Quick recap of what I'm up to and what I've been working on

The archived newsletters will be available at https://tinyletter.com/acemarke , assuming I've set this up right. I'm also still debating whether or not to post them on my blog.

Note: Since you're seeing this, I did indeed decide to post this on my blog, on a one-week delay.

Definitely open to feedback and suggestions for stuff you'd like to see in these newsletters.

So with that in mind, let's get to it!

News, Links, and Discussion

React Lifecycle Changes and Async Behavior

The React team has been broadly hinting that the upcoming async rendering behavior is going to lead to major changes in how React works, and that the changes will impact the entire React ecosystem. That's moving forward, as the RFC for new async-safe lifecycle methods has been merged in. All the componentWill* methods will be renamed to UNSAFE_componentWill*, and a new static getDerivedStateFromProps method will be added as a replacement. Expect more changes to come.

Webpack 4 Alpha

Tobias Koppers has been cranking out work on Webpack v4. It will include "zero-config" default behavior out of the box, drop the old CommonsChunkPlugin in favor of a new chunking/code-splitting approach, and a lot more.

Redux Saga Testing

http://blog.scottlogic.com/2018/01/16/evaluating-redux-saga-test-libraries.html

Looks at several ways to approach testing sagas, and how specific saga test helper libraries use those approaches. Includes a helpful table listing which approaches each helper library supports.

Redux Ecosystem

Immer: Immutability through Mutability

One of the major pain points with Redux has been the need to update data immutably, which becomes more difficult when working with nested data. There's many existing immutable update utility libs, most of which take string key paths to indicate what part of a nested data structure to update.

Michel Westrate, author of MobX, has released a new library called Immer. It uses ES6 proxies to let you write normal mutative code within a callback, and tracks all of the changes you're making. It then applies those changes as proper immutable updates to safely generate the new state. As an example, this code is perfectly correct for use in a Redux reducer:

import produce from "immer";

// later
const nextTodos = produce(todos, draft => {
    draft.push({ text: "learn immer", done: true })
    draft[1].done = true
})

I haven't had a chance to use it yet myself, but it appears to be a great solution for updating state immutably. Should be good for use in Redux reducers, React components, or anywhere else you need to do immutable updates.

Redux Issues Spotlight

Redux 4.0 Beta !

https://github.com/reactjs/redux/releases/tag/v4.0.0-beta.1

Tim Dorr has put out Redux 4.0.0 beta 1. It's primarily cleanup around the edges - updated TypeScript typings, dropping Lodash's _.isPlainObject for a homegrown version that's faster, and various other mostly internal fixes. Try it out and let us know if you find any problems.

Me, Myself, and I

(I'll hopefully figure out a better name for this section eventually. This is what you get for signing up for the first issue :) )

My schedule for the next few months is starting to fill up a bit. I've agreed to give my "Intro to React and Redux" presentation at a couple of local meetups in March and May. I just submitted a conference proposal for the near future, and we'll see how that pans out. Finally, I'm hoping to start teaching some Redux workshops later this year, and I'm bookmarking everything Kent C Dodds has ever written on the topic :) I actually asked Kent a question about planning for workshops on his AMA repo, and he was kind enough to write a very detailed answer.

Experiments with Randomness in Redux

Someday, if I actually have free time, I've got an old side project I'd like to reimplement. It's a board game that has dice rolling in it, and that means randomness.

Now, random numbers in Redux are tricky, because the randomness needs to live outside reducers in order for them to actually be "pure". At a minimum, we want the exact same output for the exact same (state, action) input. In theory, there shouldn't be any effects on the outside world at all, either.

There's two good articles on randomness in Redux that I've seen: Roll the Dice: Random Numbers in Redux and Random in Redux. However, what neither of these gives us is an easy way to generate an arbitrary amount of random numbers in a single dispatch, repeatably.

Yesterday I was playing around with the idea of a Redux middleware that would store a random number generator instance that could have its internal state saved and updated, and I seem to have gotten something working. I've put the whole code in a gist at https://gist.github.com/markerikson/9951faf2fa8f04f9a197784d47ee9ad3 , but here's the highlights:

import seedrandom from "seedrandom";

export const randomMiddleware = store => {
    let prng = seedrandom(null, {state : true});

    return next => action => {

        const {meta = {}} = action;

        const rngState = prng.state();

        const newMeta = {...meta, rngState};
        const newAction = {...action, meta : newMeta};

        const result = next(newAction);

        const newRngState = newAction.meta.rngState || rngState;
        prng = seedrandom(null, {state : newRngState});

        return action;
    }
}

function higherOrderRandomReducer(reducer) {
    return function (state, action) {
        if(action.meta && action.meta.rngState) {
            action.meta.prng = seedrandom(null, {state : action.meta.rngState});
        }

        const actualResult = reducer(state, action);

        if(action.meta && action.meta.prng) {
            const rngState = action.meta.prng.state();
            action.meta.rngState = rngState;
        }

        return actualResult;
    }
}

The trick here is that whenever an action is dispatched, the middleware serializes the PRNG's internal state and adds it to the meta field in the action. When the action reaches the reducers, the higher-order reducer instantiates a new copy of the PRNG, and uses the serialized state to initialize it. When the reducer returns, we serialize this second PRNG instance's state, and overwrite the state value in the action. When the action gets back to the middleware, it can then update/re-create its own PRNG instance with that state.

It's fragile, it's unoptimized, and it's admittedly a really indirect way of going about handling random numbers. (You can also argue that having the reducer modify the action with the updated PRNG state makes it "impure", and you'd have a good case.) But, I think it's interesting and useful enough to flesh out, and it does actually (mostly) fulfill the desire to let a reducer generate as many random numbers as it wants based just on the contents of the action. If you try out the part of the gist where I dispatch multiple "INCREMENT" actions and then re-apply the saved PRNG state, you can see it repeatably generates the same numbers each time. This would also be useful for testing purposes.

Wrapping Up

So, there you have it for issue #1. Can't guarantee they'll all be this long, or that they'll come out on exactly a weekly schedule, but hopefully I'll be able to put them out on a consistent basis. As I said earlier, I'd love to hear feedback and suggestions for what you'd like to see.

(Also, I apparently don't know how to write anything "short".)

Mark's Dev Blog

Mark's Dev Links - Issue #6

News, Links, and Discussion

Webpack 4.0 released

More React 16-related discussions

TypeScript and Flow Usage in the React community

React Context Optimizations

An Engineer's Guide to Communication

Redux Ecosystem

Promise middlewares

Redux Issues Spotlight

More FAQ Updates

Me, Myself, and I

Obligatory Plug

Mark's Dev Links - Issue #5

News, Links, and Discussion

This week's React 16-related discussions

Alternative React Component APIs

"Redux is overused" Twitter discussion

Redux: Let's Code a Higher-Order "Duck"

Redux Ecosystem

Kea

reselect-tools: debugging tools for Reselect

Redux Issues Spotlight

New Redux Docs Build Setup!

Me, Myself, and I

Obligatory Plug

Mark's Dev Links - Issue #4

News, Links, and Discussion

New React createRef API

React Architecture Confessions

Modern CSS for Dinosaurs

Hacky way to view Instagram Redux Store

Redux Ecosystem

redux-batch: dispatch multiple actions with one subscription update

Redux Issues Spotlight

Business Logic in Redux

Me, Myself, and I

Full Stack Lunch - "State of the Redux Union"

"Redux Fundamentals" talk at Reactathon

Obligatory Plug

Mark's Dev Links - Issue #3

ANNOUNCEMENT: LIVE WORKSHOPS FROM WORKSHOP.ME!

News, Links, and Discussion

React 16.3 Roundup

More setState Behavior Explanation

Modern Web Podcast S05E01: Redux and MobX with Tim Dorr and Michel Weststrate

Redux Ecosystem

redux-subspace

Redux Issues Spotlight

Redux Addons Catalog - client-side UI - UPDATE!

Redux docs site rebuild?

Me, Myself, and I

Obligatory Plug

Mark's Dev Links - Issue #2

News, Links, and Discussion

New React Context Implementation

Why setState is Async

React-Scope

Kuker

Redux Ecosystem

Redux-Bundler

Redux Issues Spotlight

Redux Addons Catalog - client-side UI?

Me, Myself, and I

Wrapping Up

Obligatory Plug

Mark's Dev Links - Issue #1

News, Links, and Discussion

React Lifecycle Changes and Async Behavior

Webpack 4 Alpha

Redux Saga Testing

Redux Ecosystem

Immer: Immutability through Mutability

Redux Issues Spotlight

Redux 4.0 Beta !

Me, Myself, and I

Experiments with Randomness in Redux

Wrapping Up

Obligatory Plug

New React `createRef` API

`redux-batch`: dispatch multiple actions with one subscription update

More `setState` Behavior Explanation

Why `setState` is Async