babel-handbook VS Immer

For more information about building Babel plugins, check the Kent's Babel Handbook or this awesome Babel handbook by Jamie.

Babel does this by compiling down JavaScript code written with the latest standards into a version that will work everywhere today. This process is known as source-to-source compiling, also known as transpiring. Source: Jamie Kyle

I'll be honest, my approach to getting used to working with ASTs is a bit weird, but it worked for me. For some reason the thought of working with the TypeScript AST sounds really attractive to me. I'm sure most people recommend to start deep diving into babel first before getting used to working with an AST with the TypeScript compiler, but I started it the other way around. There is a great library called ts-morph that focuses on making it easier for developers to work with the TypeScript compiler. Learning hands on with ts-morph while getting used to their compiler api made babel much easier to understand without ever touching babel.

Those videos gave me a base for the task but I needed more sources to achieve it, so I read a lot of source code for other libraries built with babel-plugin-macros, read the plugin's authoring documentation and Jamie Kyle's Babel Handbook.

If you want to learn more about parsing, reading the code of an actual recursive parser might be a better idea. Esprima is a decent place to start if you're interested in JS grammar. Then you can look at the babel handbook to learn more about AST transformations. From there, the literature gets quite a bit more heavy. If you get this far and are willing to push further, you'll probably want to grab yourself a copy of the dragon book at a minimum.

Babel handbook

Immer, which means always in German, is a little package that makes working with an immutable state more convenient. Winner of the 2019 JavaScript Open Source Award for "Most impactful contribution".

Immer Documentation

For deeply nested structures, achieving immutability can be more challenging. Libraries like Immutable.js and Immer provide tools for creating and managing immutable data structures.

Immer is a lightweight package that simplifies working with immutable states. Immutable data structures ensure efficient data change detection, making it easier to track modifications. Additionally, they enable cost-effective cloning by sharing unchanged parts of a data tree in memory.

```

It looks like it’s mutating, but both the reducers and update() uses immer* under the hood, so we still respect immutability under the hood.

Cami supports redux devtools so you can use that for time-travel debugging too!

—-

* https://github.com/immerjs/immer

I heard that immutability libraries like immer.js [0] help with this. Anyone go this way and had good success? Is this 'the way'?

[0]: https://immerjs.github.io/immer/

So, that's what we built, and we built it in the most obvious way — using JavaScript Proxy objects to track mutations and reflect those changes across Appsmith’s framework. Initially things looked good — it worked, aside from a few hacks to make some data types work with map and set, and we were following the example of other projects that had similar requirements. If it was good enough for them, it should be good enough for us, right?

But is immer really the ultimate answer? The performance problem of immer is more prominent in large arrays and deep-level object scenarios. See this issue description, many authors in the community began to try to make breakthroughs, and noticed that structura and mutative, I found that it is indeed many times faster than immer as they said, but it still fails to solve the problem of both fast speed and good development experience. I will analyze the two issues in detail below.