Last night, Ravi Savajiyani and I attended a monthly React meetup, which discusses the technology, libraries, tools, features, and hacks found in the package. Axway was well-represented, as Rumeli Tandon was able to tell those seeking employment that we are hiring! It has been fantastic to have Axway represented at several recent tech meetups!

Now You’re Thinking With Portals

After the free pizza (aka “the primary reason I attend”), the first speaker went over a new feature in React 16.3 called Portals. The idea behind portals is to basically create a “React hatch” outside of the original DOM to an external source. The primary example I was able to find builds a modal which isn’t actually a slave to its caller.

The practical example that was actually given at the meetup was a picture-in-picture video, which has the ability to adhere to another portion of a page without interruption. In a more stunning example, he popped the video completely out of the page and into a pop-up window, where he was able to control the Play & Pause functions of the video from the original source from a completely different DOM. The presenter was able to duplicate the same functionality to another tab instead of a pop-out window as well. It was incredibly impressive, and he posted his public repo here. (Switch to the various branches to see various functionality – I highly suggest the code from the “window” branch.)

Redux Is Dead

Step 1: Import react-easy-state.

Step 2: Wrap a global variable in a store() function, and wrap your export default in a view() function.

Step 3: …

Step 4: Make money!

I’m not sure what Step 3 actually involves, but I know it DOESN’T involve Redux, Providers, or Dispatchers! This incredible library allows a direct mutation of State (so you’re also not writing setState() anymore) across multiple nested components with immediate re-rendering.

 

It basically creates a proxy variable replacing your state variable, then overwrites your setState() & render() calls in the background for you. It’s simple, clean, and effective.

(As a side note, I’ve never actually heard a crowd boo a presenter before when he simply mutated the state variable! People audibly gasped when it worked as intended.)

If you work with React, trying playing with a few new toys!