The goal of this project is to teach developers how to get up and running with the Mithril MVC framework. After an introduction and setup instructions, the first lesson begins with the most basic app. A lesson consists of a guide, which is a live Mithril web app, and comments in the editable source code. Links to pertinent sections of the official Mithril docs will be provided throughout.
There will be two versions of the tutorial, each utilizing different technologies:
- Javascript, HTML, and CSS
- CoffeeScript, HTML, and Stylus
Git on the command line is essential. If you use a git GUI you should know how to switch branches.
The tutorial allows you to live-edit the source code with the help of
Browserify, Watchify, and Live Reload. You will need npm to install these
libraries. To maximize interaction, the tutorial relies on the Google Chrome
web browser and the DevTools within. Firefox and Safari developer tools are
not yet capable of live editing.
- Clone the repo:
$ git clone https://github.com/pelonpelon/mithril-interactive-tutorial.git - Switch to the
mithril-interactive-tutorialfolder. - Install dependencies:
$ npm install - Start the tutorial:
$ npm run tutorial - Open DevTools in Google Chrome:
ALT-CTRL-IorOPT-CMD-I
The Introduction to the tutorial explains how to set up the browser window and DevTools in a vertically split window. This is the setup that works best for me, but arrange your dev environment however is most comfortable.
For each lesson:
- Read the guide in the browser window
- Read the comments in the DevTools editor pane (comments change with each lesson)
- Experiment in the DevTools live editor, debugger, console, etc
- Load the next lesson
The tutorial will be released in three phases:
- Progressive instructions leading to an understanding of everything in the "Getting Started Guide"
- A thorough exploration of the Mithril API with an emphasis on experimentation.
- Working examples to accompany Leo Horie's excellent blog posts.
This tutorial is a work in progress. I plan to add new lessons as time provides. I heartily welcome suggestions and criticism. If you find mistakes, and you will, please submit a comment or pull request.
- Each lesson builds on the last. Some details are intentionally left out so as to focus on a few core concepts. Later lessons should fill in the gaps.
- This tutorial takes a "Components First" approach. By the popularity of React and Web Components it seems clear that components and their role in the structure of MVC apps is readily comprehensible to most developers.
- Mithril MVC framework was created and is diligently maintained by Leo Horie