Maquette with Typescript quick-start

Johan Gorter
Dec 15, 2015 · 3 min read

I am very enthusiastic about writing web applications using Typescript combined with maquette. I think a typed language combined with a virtual DOM really solves a lot of problems and boosts productivity.

But how do you set up such a project? This is actually easier than you might think, so let me show you how you can get started using just a few commands.

All you need is NodeJS and an editor/IDE. This tutorial also works on Windows if you use powershell.

Tutorial

npm i maquette typescript

After that initialize a the current folder as a typescript project by creating a tsconfig.json file using the following command:

./node_modules/.bin/tsc --init --module commonjs --target ES5

You are now ready to start writing code. So launch your favorite editor/IDE. The following cross platform IDE’s support Typescript:

Let’s create a folder /src and put the following two files in there:

app.ts (The example from the maquette website converted to Typescript)

import {h} from 'maquette'var name = ''; // Piece of data

// Plain event handler
function handleNameInput(evt) {
name = evt.target.value;
}

// This function uses the 'hyperscript' notation
// to create the virtual DOM.
export function renderMaquette() {
return h('div', [
h('input', {
type: 'text', placeholder: 'What is your name?',
value: name, oninput: handleNameInput
}),
h('p.output', [
'Hello ' + (name || 'you') + '!'
])
]);
};

main.ts (for bootstrapping the application)

import {createProjector} from 'maquette';
import {renderMaquette} from './app';
createProjector().append(document.body, renderMaquette);

You can now go and experiment with your IDE and see the benefits of using a typed language. For example: watch what happens if you change the initial value of name to the number 42. Or maybe you can try to add a button with an onclick event handler. If you need, you can always run the typescript compiler from the shell using:

./node_modules/.bin/tsc

Running in a webbrowser

npm i webpack webpack-dev-server awesome-typescript-loader

We also need an index page, so create a folder /public and put the following file in there:

index.html

<!DOCTYPE html>
<html>
<head>
<title>Maquette typescript demo</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

And finally we need to tell webpack how the typescript is compiled to a javascript bundle. For this we need the following file in the root of our project.

webpack.config.js

module.exports = {
resolve: {
extensions: ['', '.ts', '.webpack.js', '.web.js', '.js']
},
entry: './src/main.ts',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.ts$/,
loader: 'awesome-typescript-loader'
}
]
}
};

We can now start a server using the following command:

./node_modules/.bin/webpack-dev-server --content-base public/ --inline

You can now open localhost:8080 in your webbrowser and you will see the application running. If you edit the Typescript now and press save, the browser will refresh automatically.

Where to go from here?

  1. Use mocha and chai to write unit tests and run them in NodeJS (hint: you need to install tsd to get the Typescript definitions for mocha and chai)
  2. Use Gulp to make the tools easier to run
  3. Do the maquette tutorial to get to know how maquette works.
  4. Split the app.js file into reusable components

Good luck!

Maquette news

News from maquettejs.org

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store