UPDATED ANSWER

Tough question to answer. The rough equivalent of MobX without MobX would be to have an event emitter for each object property, array entry etc. that lives in your state. Then there would be a function (computed) that you would need to subscribe to the correct event emitters to fire them whenever a value changes. After which you would need to notify your own observers. This mechanism is in general terms covered in this blog post: monterail.com/blog/2016/how-to-build-a-reactive-e…

Then you just have the raw inefficient basics covered; you would need to make sure after that that no events are fired if the values don't actually change even if they are recomputed, and that if a computed value depends on another computed value, the event emitters, which are completely unaware of each other, are triggered in the right order :)

How that is done is explained in this MobX specific Magic MobX talk and blog In depth explanation of Mobx

After that, create a nice api around all that, so that the event emitters are hidden inside property getters / setters. If you want to have a rough general idea what MobX does for you, check:

Manage Javascript Application State with MobX or this talk Practical MobX, both by Matt Ruby.

If you want a framework which you can mimic in 100LoC, go #Redux :)

ORIGINAL ANSWER

Here is an example of MobX + yoyo: http://embed.plnkr.co/xZEiC9vzS0ann8CXQpc8 (see main.ts) (Ok, actually it is typescript, but nothing typescript specific in there). Otherwise, please specify the question in more detail, what would you like to see? It is quite open-ended now :)

The data layer (GitHub Repo. Directory) in this simple todo app; relies on MobX, and it is all Vanilla JS (except for the MobX part, that is).

The React views (read: components, for instance TodoApp.js) depend on the @observer decorator, to cause a re-render whenever there is a change in the data layer.

If you were using Vanilla JS, you would wrap a "render" function — which would update your DOM, the Vanilla JS way, whenever there's a change in the data layer — with MobX's autorun function (docs).

Hi!

I wrote an article about implementing transparent reactivity with ES6 Proxies a while ago, which walks you through a roughly 100 loc example. You can find it here.

It has some differences from MobX, but it might give you some inspiration (: