Maquette with Typescript quick-start

Published in

Maquette news

3 min readDec 15, 2015

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

Let’s get started, create an empty folder for the project and then run the following command to install maquette and typescript:

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

Ok now, let’s see how we can run this Typescript in a webbrowser. For this, we will use webpack with some extras, so let’s get them:

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?

Ok, we demonstrated how easy it is to combine typescript, webpack and maquette to get started. The tutorial ends here, but there is way more to explore. You can try the following ideas for example:

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)
Use Gulp to make the tools easier to run
Do the maquette tutorial to get to know how maquette works.
Split the app.js file into reusable components

Good luck!

Maquette with Typescript quick-start

Tutorial

Running in a webbrowser

Where to go from here?

Written by Johan Gorter