ReactFoo 2019

MobX has been a powerful and popular state management library for React. It’s a different take on state-management compared to Redux. Rather than relying on immutable data, like we do in Redux, MobX actually encourages mutable data! This may sound counter-intuitive and counter-productive but it works really well in practice. You can think of MobX as Declarative-Redux!

Outline

MobX has been a powerful and popular state management library for React. It’s a different take on state-management compared to Redux. Rather than relying on immutable data, like we do in Redux, MobX actually encourages mutable data! This may sound counter-intuitive and counter-productive but it works really well in practice. Think of MobX as Declarative Redux.

Internally MobX provides a system called Tranparent Functional Reactive Programming (TFRP), that makes the UI State highly reactive and treats everything else as an observation of this state. In fact, the core concept in MobX is the notion of Observables (No, not the RxJS Observable) that carry the reactive state of the UI. Everything else, including the UI is an observer of this mutable Observable State.

Building UIs with React using MobX is a surprisingly refreshing and above all fun! It can handle the entire gamut of UI complexity from simple todo-lists, to complex async form-validation and constantly ticking data-flows as in a Trading Dashboard. All of this with a mental-model that stays pretty much the same even in the face of growing domain complexity of the app!

So, let’s explore MobX with this introductory session focusing on:

• Observable state tree
• Handling side-effects in your UI with autorun, reaction, when
• Solving interesting use-cases in MobX to tie all the concepts together
• Learning to think the MobX way

Speaker bio

Pavan Podila has been building Frontend applications since 2001. In this time he has used a variety of technologies, tools and platforms ranging from Java, .Net/WPF to iOS/macOS and of course the Web platform.

For the past 10 years he has been building large scale financial apps for some of the big names on the Wall St. Most of his focus these days is on Angular (1.x, 2.x), React, Node.js and a variety of client-side tools and libraries.

Pavan is a Google Developer Expert (GDE) for Web Technologies. He is a published author of WPF Control Development Unleashed, was Microsoft MVP for Client App Dev (2008 - 2011) and is the creator of QuickLens, a Mac App for UI Designers/Developers. He also likes to write articles and create videos courses at Tuts+. Current side project is to finish up a Packt Book on MobX and build courses on theuidev.com.

He loves to spend his free time playing Ping Pong or sketching on his iPad Pro.

When time permits, he also blogs at blog.pixelingene.com

• Twitter
• LinkedIn

Links

• Have given several talks in the past. The ones that are recorded are:
• Talk on State of Statement in React at Charleston, SC for SyntaxCon 2017: https://www.youtube.com/watch?v=LWuOj0etYBQ
• Talk on ngrx/Store at Google Office, NYC: https://www.youtube.com/watch?v=CdY5RkMAPAA&t=328s