Michel Weststrate

Flipper is Facebooks internal, extensible mobile devtool platform, used by the mobile devs that work on the Facebook, WhatsApp, Instagram and many more apps.

Are you a React Native developer? Have you always been longing for the rich ecosystem of developer tooling that exists for the web in e.g. Chrome and Firefox?

Flipper is Facebooks internal, extensible mobile devtool platform, used by the mobile devs that work on the Facebook, WhatsApp, Instagram and many more apps.

Recently the React Native and Flipper team have been working hard to add first class support for React Native as well. This means that monitoring network traffic and performance, using the React Devtools, inspecting device and application logs or even debugging JavaScript can now can now be conveniently done using one coherent tool.

And best of all: Flipper is extensible, so let's build our own extension while at it!

2020

ReactEurope

Flipper: The Extensible DevTool Platform for React Native

JavaScript Proxies are fun and powerful, but you should probably never use them! Learn why. Plus, see how Immer makes working with immutability easy, 

Immer is a tiny package that allows you to work with immutable data structures with unprecedented ease. It doesn't require learning new data structures or update APIs, but instead creates a temporarily draft tree which can be modified using the standard JavaScript APIs. 

Immer makes all the ceremony that is needed to perform deep updates in immutable objects obsolete.

Brace yourself; for example your Redux reducers will become twice as short without giving up on any of the semantic constraints.

Immer (optionally) uses proxies under the hood. Proxies are an exotic JavaScript feature that is nowadays available in all modern browsers. What are they, how do they work and why should you (not) use them? How did they make Immer possible?

Join this talk to learn how you can finally use immutability in JavaScript without fighting the language. Or just to get an idea about the powerful patterns that are possible nowadays in JavaScript, by using proxies.

2019

JSNation

Immer, Immutability and the Wonderful World of Proxies

GraphQL and mobx-state-tree are match made in heaven; both are a model first oriented technologies. GraphQL optimizes data fetches and mutations. Adding mobx-state-tree to this mix, makes this model even richer: It allows client only state, actions and derived data to be mixed into our data models. We can go even further and mix in different behavior for different types of clients, while still using our GraphQL models as source of truth. Finally we can have the best of both worlds: straightforward data propagation, over the network and in the client. Leveraging the DX convenience and performance optimizations of both technologies.

Combining GraphQL + mobx-state-tree

The creator of MobX talks about his journey with the library and open source, reactive programming, client-side state management and learning new things.

MobX is downloaded a million times per month, and used by many large and small companies, such as Microsoft, Amazon, Lyft, SAP and DICE.

By now, it is 3,5 years ago (in other words, ancient!) that I've wrote it and started building a community around it. In this talk I will both reflect on the product and my journey into the Open Source Software world:

* What makes a great open source library? (Can we even answer that question)
* What is so appealing about the programming model of MobX? (Reactive programming, yet, not scary?)
* How is it possible that open source even works. What does it mean to be a good OSS citizen? (Yeah, I'm looking at you!)
* Why do so many maintainers burn out? (And how to avoid that)

Reflection on the past often gives clues about the future:

* What is the future of MobX and client side state management?
* And what is the future of open source? How can we foster innovation. And maintenance?

Expect a highly personal talk about a successful open source project. Some first hand experiences from an author that still tries to figure out how much of all that is just dumb luck in the end :).

React Finland

MobX - The Journey

Immer is a tiny package that allows you to work with immutable data structures with unprecedented ease. It doesn't require learning new data structures or update APIs, but instead creates a temporarily shadow tree which can be modified using the standard JavaScript APIs. The shadow tree will be used to generate your next immutable state tree. This shadow tree is maintained using Proxies.

Proxies are an exotic javascript feature that is nowadays available in all modern browsers. What are they, how do they work and why should you (not) use them?

Join this talk to learn more about Proxies, or about how to deal with immutability data structures with a better DX as was ever possible so far. Brace yourself; your reducers will become twice as short without giving up on any of the semantic constraints.

Slides for the talk: (including source code of the demos): http://immer-react-next-2018.surge.sh

2018

ReactNext

Ask Me Anything session, moderated by Gerard Sans. Based on Michel's previous talk.

ReactiveConf

AMA with Michel Weststrate

The React prop-types package is a simple runtime type system that is used for property validation. But runtime type systems can do many more things than just data validation. Because they are very flexible (as you can basically reuse the entire hosting language to express your types) it will be much less likely that you will run into structures that cannot be expressed in the type system. You can generate runtime types on the fly from other sources (json-schema, graphql etc) or compose them together.

In this talk I will walk you through some runtime type systems, like prop-types, tcomb and mobx-state-tree. But also show you how runtime- and compile-time type systems like TypeScript or Flow can co-exist and leverage each other.

If you thought so far Higher Order Components or render callbacks where cool, in this talk I will show you that these patterns can be applied in general to any data structure you have.

The fun of runtime type systems (Or: "Funtime type systems")

Get a deeper understanding on the difference between state and data. A deeper understanding of JavaScript itself.

Many teams have been discussing on whether to go the immutable or mutable state route. Flux or MVC or MVVM? Redux, MobX or Apollo? 

Instead of answering the question, in this talk we will look at JavaScript code on a more fundamental level: How do data structures work in JavaScript. What assumptions can be we make if we treat them to be immutable? Or mutable? How can we express concepts like identities, references, collections, mutations, derivations in either case? And can we bent the rules between the two? 

This talk will provide you a deeper understanding of the difference between state and data. A deeper understanding of JavaScript itself. Which will help you to improve the state you manage, regardless of the library you use to implement that.

React Amsterdam

There and back again: grokking state and data

React and its component model is nowadays the most appealing abstraction to declaratively describe user interfaces. The core concepts are so powerful that we can apply them outside the DOM, like in React-VR, Sound manipulation, games etc. 

In this talk I will demonstrate that all the core ideas powering React are so powerful that we can even translate them to a completely different field: state management. MobX-state-tree applies these very same concepts to make data management declarative, elegant and easy to reason about.

2017

React, But For Data

Last years there have been great developments in state management libraries. Both Redux and MobX sprung from the React community and provide stand-alone, generic state management solutions. Both have gained big in popularity, and both have their own strengths and weaknesses. What can we learn from both approaches? Can we get the best of both worlds? Can we add a little Boabab and Cerebral to the mix? Is it possible to create a transparent reactive, snapshotable state container. With support for JSON patches, replayable actions, serialization, complex object graphs. With Redux & MobX compatibility, strong typing and runtime type checks out of the box. Get a glimpse of what next-gen state management might look like with mobx-state-tree. Largely designed by the MobX community and enforcing many best practices that have evolved over the last year.

Next generation state management

"Reactive programming" still sounds scary to many developers. As if it is an elevated way of thinking, only accessible to the chosen few. Nothing is less true! It is the most natural way to look at programming problems. 

You just might not realize it yet! In this talk, Michel will demonstrate that many complex UI problems, such as form validation and routing, can all be seen as '*actions* that change *facts* which leads to *reactions*'. And as soon as we start distinguishing those concepts in our applications; our code will become more declarative, more concise and less imperative.

Complexity: Divide and Conquer!

Mutable or immutable based state management. That is the question. But what if we could have both? In this talk we will explore an opinionated state container that serves both worlds. A single coin with two different sides. Mutable properties, instance methods, immutable trees, structural sharing, replay-able actions, time travelling, derived values, patches.. etc. This what next-gen state management might look like.

2016

Immer-mutable state management

At Mendix we use MobX to manage the state of our visual enterprise application studio. In this talk we will take a look behind the scenes and see how MobX simplifies concerns like authentication, data fetching and routing. The strong decoupling of state and UI helps us to iterate on our UI more quickly. 

The architecture of the studio is pluggable and we will see how MobX helps integrating external producers and consumers of state into the product. In the end, we believe that this approach results in a code base that is sane and accessible. In which we get things done quickly.

Real World MobX

State is the heart of each application and there is no quicker way to create buggy, unmanageable applications then by producing inconsistent state. Hence many state management solutions try to restrict the ways in which you can modify state, for example by making state immutable. But this introduces new problems; data needs to be normalised, referential integrity can no longer be guaranteed and it becomes next to impossible to use powerful concepts like prototypes.

At Mendix these restrictions where unacceptable and so MobX was born. MobX makes state management simple again by addressing the root issue: it makes it impossible to produce an inconsistent state. This makes state management simple and scalable again.

Slides are https://speakerdeck.com/reactamsterdam/michel-weststrate-mendix-rotterdam-state-management-is-easy

State Management is Easy

The ability to express essential complexity in a simple way is crucial for any code-base. At Mendix we did an interesting discovery during the development of a complex MDD tool. React, mutable data structures and transparent reactive programming are a match made in heaven. We published a library that leverages these concepts; Mobservable. It helps you to write simple, declarative, yet highly efficient code. Your future code maintainers will love you for applying it.