Meiosis Tutorial

Table of Contents

00 - Introduction

Welcome to the Meiosis Tutorial!

The purpose of this tutorial is to explain the Meiosis pattern from the ground up, hopefully without assuming too much prior knowledge beyond the basics of JavaScript.


Besides JavaScript, you will need to know, or learn, about the view library that you would like to use. This tutorial is offered in two versions: one with React, and one with Mithril.

View Libraries

If neither of those is your preferred view library, fear not! It is trivial to use just about any view library with the Meiosis pattern, whether it's a virtual DOM library or even libraries such as lit-html and hyperHTML.

JSX or hyperscript

Also note that if you prefer the JSX syntax, you should read the React version. Again, it is simple to use another view library, such as Preact, Inferno, and so on.

If you prefer the hyperscript syntax, please read the Mithril version of the tutorial. Other view libraries such as snabbdom, domVM, and other hyperscript view libraries are also easy to use with Meiosis.

ES5 or ES6

I purposely used ES5 syntax in the code examples so that readers who are not familiar with ES6 could benefit from the tutorial, without requiring ES6 knowledge. If you prefer ES6, by all means go ahead and use it! It can certainly lead to more concise syntax in some cases.

Embedded Code Examples

The best way to learn is to practice! So, all code examples for this tutorial are embedded into the page using Flems, so that you can edit the code and see the results right there in the page. In fact, I strongly encourage you to try things out with the code, this will help you understand how things work.

You can edit and run the code within the page, or you can also open the code in a new, full-sized page if that is more comfortable. You can do so using the Open Flems in new window at the top-right corner of the code window.

Finally, also note that you can also download and run the code examples for this tutorial, as well as all the Meiosis examples, by cloning the github repository.

Let's get started! Please continue by choosing a version:

Table of Contents

Meiosis is developed by @foxdonut00 / foxdonut and is released under the MIT license.