Tutorials

Mithril & CoffeeScript Tutorial

NOTES

CoffeeScript

What is CoffeeScript? How is it different from JavaScript? How do I make an object? How do I make a subclass? Examples of How to do both.

Mithril

How do I make a basic page? (view) How do I define a route? How do I go from page to page? How do I get data from a database? (model How do I change/update some data?

Introduction

For those of us new to CoffeeScript and Mithril, the challenges inherent with learning a new language, and a new framework can lead to more than a few headaches. This page is for starting out with SuperPhy and learning how to program the front-end interface. The target audience is for this is a new Coop, with experience programming, but not necessarily any experience with either Mithril or CofeeScript.

The reason we are writing wiki article is because you are going to have a great time coding if you follow the following mindset:

I will program in the same coding style as my peers and predesessors! I will follow a Common Coding Style!

The links provided may or may not conform to the styles we are using in SuperPhy. It is important to note that it is far easier to work with legacy code if you know what different tropes of objects do.

Getting Started

You should skim or read the following links in order to get a base of knowledge to work with going forward:

• CoffeeScript Overview
• Mithril 101 - Getting Started
• Mithril 102 - How routing works
• Mithril 103 - Components

@ is the CoffeeScript version of JavaScript's this keyword. a static component is a component that doesn't have a controller to deal with interactions. All the the data displayed in the view is either passed in as arguments from a parent component, or is static data in the class. (See Hello World!)

Hello World!

class Hello
    @view: (ctrl) ->
	    m('.', "Hello World!")

m.route(document.body, "/"
    "/": Hello
)

Explanaiton:

We created a class Hello.