Exploring Mitosis

Agenda

Mitosis

  1. What is it?
  2. Who is building it?
  3. Why might you use it?
  4. Initial Thoughts
  5. Resources

What is it?

Mitosis logo - Write components once, compile to every framework

What is it?

  • A JSX syntax that defines mitosis components
  • A "mitosis Intermediate Representation (IR)" - This is essentially a JSON AST that mitosis uses for compiling.
  • Command line tooling that will take all your mitosis jsx files, transform it to the IR, then take the IR and compile it to all the targets you define in your mitosis.config.js file.

What is it?

Mitosis flow

What is it?

          
          export function MyComponent() {
            const state = useStore({
              name: 'Steve',
            });

            return (
              <div>
                <input value={state.name} onChange={(event) => (state.name = event.target.value)} />
              </div>
              );
            }

What is it?


{
  "@type": "@builder.io/mitosis/component",
  "state": {
    "name": "Steve"
  },
  "nodes": [
    {
      "@type": "@builder.io/mitosis/node",
      "name": "div",
      "children": [
        {
          "@type": "@builder.io/mitosis/node",
          "bindings": {
            "value": "state.name",
            "onChange": "state.name = event.target.value"
          }
        }
      ]
    }
  ]
}

What is it?


import Context from './simple.context.lite';
import { useContext, setContext } from '@builder.io/mitosis';

export default function ComponentWithContext(props: { content: string }) {
  // you can access the context using `useContext`
  const foo = useContext(Context);

  // you can use `setContext` to provide a new value for the context
  setContext(Context, {
    foo: 'baz',
    content() {
      return props.content;
    },
  });

  return (
    // you can also use `Context.provider` to provide a new value for the context
    <Context.Provider value={{ bar: 'baz' }}>{foo.value}</Context.Provider>
  );
}

What is it?

Hooks & Lifecycle methods

  1. useRef
  2. useStyle
  3. useMetadata
  4. useDefaultProps
  5. onInit
  6. onMount
  7. onUnMount
  8. onUpdate

Who is building it?

builder.io logo

The folks over at BuilderIO 's main product is a "visual headless CMS", which is the only other mitosis frontend aside from the JSX syntax.

The are also behind the great open source tools partytown and qwik .

Why might you use it?

Interesting Usecases

  1. Maintaining a design system and component library for consumers using varied frontend frameworks
  2. Dramatically lower the investment to bring your design system and core components to alternate platforms
  3. Your organization needs to build things for your customers to use in their own software

Initial Thoughts

Pros

  1. Active development
  2. Attentive responses
  3. Helpful devs and community
  4. Fast compilation and works surprisingly well
  5. JS ecosystem needs more agnostic first tools

Initial Thoughts

Cons

  1. Large and complex surface area
  2. Still early days, documentation needs to mature some
  3. Could be difficult to get contributors
  4. Hard to see support for specific targets & understand semantic differences between targets
  5. Always have to deal with platform constraints & specific device UX paradigms

Initial Thoughts

Advice

  1. Standardize & document Mitosis IR
  2. Collaborate wtih framework authors
  3. Make a npm create mitosis template

Resources

Thank you!

matthewsimo