Frontend Training

<date placeholder>

2019 edition

Who we are 🎈

Patrick Iwanicki

Thomas Duffy

Charlie King

Alan Tirado

Agenda

104

• No state 🙅‍♀️
• Local state 🧮
• Context 🌎
• MobX Ⓜ️
• mobx-state-tree 🌳

105

• Jest 🃏
• Mounting Components 🐎
• Enzyme 🔬
• React Testing Library 🧪

What's missing?

• <placeholder>

104

• No state 🙅‍♀️
• Local state 🧮
• Context 🌎
• MobX Ⓜ️
• mobx-state-tree 🌳

No State

Local State

Context

MobX

Why use MobX?

What is it for?

Simple and Scalable State Management

• Reactive
• Automatically Derived State
• React + MobX = ❤️

React

Renders the UI

MobX

Synchronizes  application state with React components

🔄

MobX keeps our application state up-to-date efficiently, only updating parts of it's virtual dependency graph when needed.

React then renders that state, also very efficiently.

Observables & autorun

mobx-state-tree

Questions?

105

• Jest 🃏
• Mounting Components 🐎
• Enzyme 🔬
• React Testing Library 🧪

Jest

Mounting Components

Enzyme

React Testing Library

Questions?