Packing for our move to London😯
...'cause I will join
@fb_engineering
in little over a month!
So many people I'm looking forward to be working with 🤩. And so much potential impact to be made!
2016:
#MobX
uses side effects during reads to automatically re-render on changes. Impure! Blasphemy! Untestable!
2019:
#React
suspense uses side effects during reads to automatically re-render on changes! This is the best thing since sliced bread!
#eventualconsistency
I think the JavaScript feature with the biggest unlocked potential are (async) generators. They are perfect for long running processes / conversations.
Here a fun example of their potential: stateful, functional components without using hooks in React:
#MobX
or
@recoiljs
? Saw a lot of questions on whether they're the same, so a quick thread. First of all, Recoil & MobX solve the same problem: efficient render widely shared state. This is a problem React (Context), Redux and most state management libs don't solve.
Woke up last night with the idea that copy-on-write (with structural sharing) would make writing
#Redux
reducers much more straightforward. So, here it is (before and after). Happy new year!
✨ MobX 4 has been released! ✨
- decorate without decorator syntax (CRA!)
- first class support for dynamic, observable data sources
- flows & async when
- extend observable objects dynamically
- API simplifications
- faster, smaller
#mobx
#reactjs
Ok,
@reactjs
hooks are really killing it. Re-implemented the mobx-react bindings in 16 LOC with hooks:
#ReactConf2018
. So. Much. Cleaner. Can hardly express how much messy stuff this fixes... 👏👏🏅🏅👌👌💸💸🧙🧙
Just wondering how many years of software engineering it takes, until you are not disappointed with yourself anymore, when you spend a whole day of fixing build stuff, and then end up with a 5 line diff🤔
Just released
#mobx
6!
👉 makeAutoObservable 😍
👉 Decorator free by default
👉 Fully revamped docs for modern React
👉 Supersedes both MobX 4 and 5
👉 Codemod for migration
Just released Immer 9.0, which ships a lot of TypeScript improvements. The coolest change is that it now can infer the type of a draft if a curried producer is passed to, for example, a React state updater.
Changelog:
Docs:
Here is a fun thought experiment: Can we adopt hooks like a general programming paradigm. As a way to organize code, not necessarily related to UI?
Did a quick re-implement of hooks without React, & applied to raw HTML. The model holds up nicely! 😗
New Blog:
#MobX
now supports standard decorators!
👉 Clean (no constructor code)
👉 30% less overhead
👉 Works out of the box in TypeScript
👉 Some cool news around MobX & signals!
It might be just me, but often using a switch statement instead of if..else nesting helps me to clean up logic.
Instead of creating a nested decision tree it forces to order decisions based on logical priorities which is self documenting.
Reminder: the primary goal of a function is not to enable reuse. The goal is to create a great narrative. Telling a big picture solution, and hiding nitty gritty details
If your primary trigger for creating functions is reuse, code base might not be in the most readable shape
You won't understand OSS until you understand that an OSS project is not the responsibility of it's maintainers, but the shared responsibility of all it's consumers.
Started to teach the girls programming. Super fun so far. Funny enough switched after 2 days from React to
@sveltejs
(never used it), to reduce the amount of ceremony 😅
🎉Just released
#Immer
5.2.0!
👉Addressed all known issues with Map and Set! Recommend to update if you use those
👉Significant bundle size reduction (6KB now in total).
👉Partial core rewrite, to reduce mem footprint and improve perf
💋Next version: TypeScript improvements
Lots of folks have noticed superficial similarities between Svelte's runes and Vue. There definitely are some ways in which we're moving closer to other frameworks — not a bad thing! But in other ways our designs remain quite different
50% of the performance improvements I make is simply making code evaluating lazily.
Being able put "() =>" in front of an arbitrary block of code is such a great and underused feature of JavaScript
Just released Immer 7!
👉 `current` utility to create snapshot of a draft in the middle of a produce! (great for debugging as well)
👉 Support for getters / setters (should help with MobX, Vue etc)
👉 many small fixes and improvements
Since y'all eagerly awaiting hooks anyway, here is a new blog as distraction:
"UI as an afterthought"
Or: how will React context and hooks change the game of state management?
#reactjs
#MobX
For those wondering what I am working on currently
@facebook
: I joined the team that maintains the Flipper mobile debugging studio:
It's pretty cool, and gonna be even better! Such as having first class React Native support.
Frontend tip: I quite regularly spot CSS bugs during development by having Scrollbars set to "Always" on my Mac, as it'll show scrollbars on place where I didn't intend them to.
(Q: Is there a dev tools tick to achieve the same?)
Since l've started to use
@typescript
's typeof, Type['subType'] and ReturnType<> abundantly, I feel like the amount of type annotations I write is halved. Greatly improves refactoring speed as well.
Software Architecture in theory:
👌 Let's subscribe to this beautiful system notification
Software Architecture in practice:
🤷♂️ Let's poll this port and run that command every 2 seconds, and wrap it in an event style API
I created fresh
@eggheadio
course about
#immer
this summer, and it is now publicly available!
It's packed with small tips and tricks and cool applications of some unknown features. So check it out 😊
* 31 Aug - issue gets filed
* Okt - multiple duplicates. Many +1's
* Nov: most of them closed; no reproduction
* 3 Dec, someone create a trivial, 20 LOC reproduction
* Few hours later, fix released
---
Providing a simple reproduction increases chances of a resolution 100-fold
🧙♂🦄Released
#immer
1.5.0🧙♂🦄
Immer can now record the minimal incremental updates to go from one state to the next and replay, undo, or log those changes!
This also makes concurrent state updates possible
It's like git patch / revert / rebase for immutable trees
It took like, eeh.... 2 years or something🙄, and still needs loads of polishing (PRs welcome), but finally MobX-State-Tree now has an official website which should be much easier to navigate around than that mega readme!🎉
👉
My youngest had some troubles learning her number bonds, so I figured to hack something together on
@codesandbox
.
2 hours of work, hosted, no deploy process, works on mobile, installable as app. What a time to be alive 😍 /
I love useMemo, and the memoized functions are in principle easy to testable since deps are known
But in practice they aren't as they close over their deps, preventing hoisting. So I now use a small `useMemoize` utility that encourages me to write them in a testable manner.
Still my best work so far:
👉 absolute pun name
👉 saves characters
👉 no actual new functionality to learn (or offer)
👉 source fits in a tweet but reads like a detective
👉 solves a theoretical perf problem
👊 years later MobX still makes people go home early by keeping complicated projects scalable and fast
🤌the trias politicas of observable > derived > effect has become so much the de-facto mental model, that it has become the standard way of doing reactivity/signals
this is what the mobx-state-tree global store looks like for
@sizzyapp
. it's composed out of all of these files in the video.
after 4 years of adding new features and growing the store, the app is still performant and you can use *any* property from the store in *any* component
Few weeks into Redux, and my favorite / most used devtool after using the official ones a few times is:
if (!isProduction()) {
= store
}
at the end of index.tsx.
Coincidentally also my favorite devtool for MobX 🤔
Today I applied new name & folder conventions to our entire 300KLOC code base. Moved, renamed & splitted dozens classes. Touched 140 files, hundreds of import statements. Only one unit test, no e2e failed entire day. How? Static type checking. Indispensable in large code bases
I've been working on an external project lately where *all* components are stateless. Even the view only state is captured in MST models. It has a benefit I never realized before; all component tests become non interactive snapshot tests.
Should maybe blog about it.
That
#mobx
is being downloaded more than
@preactjs
or
@apollographql
is well beyond any of my expectations. Makes me feel I should investigate it's full potential more and maintain it more actively.
So here is some exciting news! This week is my last week
@mendix
.
Funny enough, I'm not sure yet what my next steps will be 🙃, but quitting allows my family & me to (hopefully) proceed with life in a lower, more flexible gear, making easier to orient on the longer term future
Many reactive libraries still stop just before the place where it get's hard: handling objects and arrays intuitively & first class.
Don't just check counter demos, but more complicated referential state: objects, arrays, maps, refs.
#mobx
Carefully use the word "bug"
A bug is something not working to its specification. Something not working as you intended is an issue, but not a bug. Until you proof it is not according to spec.
Until then don't say: "There is a bug", but: "I have an issue"😎
Super happy that
#immer
won the OS breakthrough of the year award at
@ReactAmsterdam
!
Never stop experimenting! Some day you might stumble upon something really powerful 😊
Bumping
#mobx
-react React version from 0.13 to 16.8.
#React
catched up in so many ways!
- hooks made implementation significantly simpler
- no more patching of life-cycle methods needed
- Provider/inject -> minimal wrappers around createContext
- No need anymore for own devtools
First time in my life I took the effort to write my representative in parliament: Support
#Ukraine
in whatever way possible, incl immediate NATO membership. I don't belief this evil will stop anywhere until checked by counterforce. Thoughts with those in another horrific night🇺🇦
Team building 101: don't use the word "I": "We built this awesome feature". "We messed something up".
Unless of course *you* messed something up; then it's still "I".
Zero idea how other companies fare, but to me feels
@fb_engineering
's internal handling of Corona is exemplary. Zero panic, freedom to act on own consciousness, guidelines to minimize physical interactions from very early on. + lots of wfh infra improvement cranked out last week
Myth busted: Amazon, Microsoft, IBM, SAP, Lyft, Coinbase, Wix, EA/Dice, Infinum, Formidable, DAZN, cypress, jenkins all use
#mobx
(and feel free to add your company to the list😎)
#immer
6.0.0 has been released!
👉Features not needed by everyone have been made opt in, reducing the minimal size from 6.1 to 3.1 kb gzipped
👉Some performance optimizations on large data sets
👉Added compatibility for TS < 3.7
Close. Your. Issues.
Consuming
#OSS
is not like going to a restaurant. It is like visiting your mom. If you got a meal, help with the dishes. The *least* decent thing you could do is to at least closing the issue after it has been answered.
Maintainers aint waiters (or moms)
It's really cool to see fine grained reactivity becoming state of the art in frontend. Couldn't muster the energy to push for it after MST, but
@solid_js
does it far better than I'd have managed.
The unexplored future is signals that produce mutations.
Over a decade ago I was the 1st paid hire of this company (as part time student job). It was on a mission nobody held possible (including me; so I refused payment in shares; students need cash😅). Now the vision has proved 700m$ worth. Proud.
#mendix
one of the biggest wins of
@Docker
is how easy it becomes to test random new tech. Just docker run <some cool new database> without the mess of figuring out build tooling dependencies, freeing up ports etc.
after that, docker-compose for a reproducible env setup is just 😍
#MobX
is downloaded 1 million times a month. At some moment in time that number will sink in.
But it didn't happen yet. Maybe, when I'm retired, staring at my fire place. 🤷♂️
mobx-react
@6
beta is now available!
👉 yarn add mobx-react
@6
.0.0-rc.2
👉 adds support for hooks, and includes all hooks from
👉 Changelog:
👉 Sandbox:
👉 7 -> 4 KB