Getting started with Imba

In case you missed it there is a new language for doing web development on the block. If you are not happy with the current selection of frameworks and want to try something new. Try Imba!

What is Imba?

Imba is a high level language that compiles down to Javascript. It lets you write concise HTML via a component based system also known as tags in Imba parlance. From the README file:

if ruby and react had an indentation-based child, what would it look like?

That's one of the things I love about Imba. You get to harness the
pleasure of writing in a Ruby like language while getting the benefits of
deploying Javascript.

To learn more about the performance improvements, checkout the official documentation. More specifically the page on advanced/performance.

Installing it

The Imba project provides a package which you can easily install via yarn or npm

# Yarn
yarn global add imba

# NPM
npm install -g imba

# Check Imba is installed
$ imba --version
1.4.4
$ imbac --version
1.4.4
$ imbapack --version
3.12.0

Imba comes with three commands imba, imbac and imbapack. Let's look at them.

imba

The imba cli tool is responsible for reading source code and then it
passes it on to a compiler instance.

$ imba --help

Usage: imba [options] [ -e script | script.imba ] [arguments]

  -e, --eval script      evaluate script
      --es5              evaluate without native let/var/await
  -h, --help             display this help message
  -v, --version          display the version number

imbac

imbac is a wrapper for the compiler. In a future post I might explore all of of the options but for now you really only need to know that passing it a Imba file produces a Javascript file.

Usage: imbac [options] path/to/script.imba

  -a, --analyze          print out the scopes and variables of your script
      --es5              compile without native let/var/await
  -h, --help             display this help message
  -m, --source-map       generate source map and add inline to .js files
      --inline-helpers   inline helpers to not depend on imba.js
  -o, --output [dir]     set the output directory for compiled JavaScript
  -p, --print            print out the compiled JavaScript
  -s, --stdio            listen for and compile scripts over stdio
  -t, --tokenize         print out the tokens that the lexer/rewriter produce
      --target [target]  explicitly compile for node/web/webworker
  -v, --version          display the version number
      --silent           only print out errors (skip warnings)
  -w, --watch            recompile files on change
      --wrap             compile with top-level function wrapper

imbapack

imbac is a wrapper around the webpack CLI and it handles the
configuration and processing required for imba files. For brevity the output below has been trimmed

webpack 3.12.0
Usage: https://webpack.js.org/api/cli/
Usage without config file: webpack <entry> [<entry>] <output>
Usage with config file: webpack

Config options:
  --config       Path to the config file
                         [string] [default: webpack.config.js or webpackfile.js]
  --config-name  Name of the config to use                              [string]
  --env          Environment passed to the config, when it is a function
[...]

Hello World

The Imba organisation provides a hello world example which you can checkout

# Get the source code
git clone https://github.com/imba/hello-world-imba.git
cd hello-world-imba
# Install the dependencies
npm install
# Run the app
npm run dev

The example should be running at http://localhost:8080/ now.

This example is a simple todo app that lets you add items. The interesting bits are in the src/ directory where we have two files

src/
├── client.imba
└── server.imba

Client side

In the client side example the code relies on webpack to build the site to
dist/client.js. The Imba code looks like this

The compiled Javascript output is a bit long so I won't add it here but you can read it on gist/client.js.

The actual HTML for loading the app is very short:

<!doctype html>
<html lang="en">
  <head>
    <title>Hello World</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css" media="screen">
  </head>
  <body>
    <script src="client.js"></script>
  </body>
</html>

Server

Contrary to the client side example, you don't need webpack to run this and can pass the file to imba

$ imba src/server.imba
server is running on port 8080

Why does this work? The server example uses express and is a good example of how Imba is not reinventing everything but allowing you to reuse existing Javascript code while still writing in the classy Imba syntax 😃

Note that while the above example is loading a Javascript file on the client side, you could have rendered the page on the server like I have done below on my toy project xiyo.no. If you are interested the code is available here scanf/xiyo.imba

Tooling

While the Javascript ecosystem can be harnessed for all sort of things you can find on npmjs.org, the tooling in the Imba ecosystem is still very young and evolving. If you would like to start a new project with tools similar to create-react-app and vue-cli, then try athif23/start-imba

Getting start-imba

$ git clone https://github.com/athif23/start-imba
$ npm install -g ./start-imba/

Starting a new project

$ start-imba my-cool-project

start-imba then generates the following structure for you

my-cool-project/
├── dist
│   ├── imba-logo.png
│   ├── index.css
│   └── index.html
├── package.json
├── src
│   ├── components
│   │   └── App.imba
│   ├── index.imba
│   └── styles
│       ├── App.scss
│       └── index.scss
└── webpack.config.js

4 directories, 9 files

After installing the dependencies and starting the webpack server you can start coding

$ yarn
[...]
$ yarn run start
[...]
ℹ ｢wds｣: Project is running at http://localhost:8080/
[...]

Summary

Imba is ready for production use and makes building web apps more fun.
Similar to Ruby the productivity gains you can get are real. You can start deploying it today 😉

The amazing learning platform Scrimba is built with Imba. This is also a nice place to experiment since Scrimba has Imba playgrounds you can run interactively. Sindre Aarsaether, the author of Imba has several great screencasts which you can find by searching for Imba.

Challenge

If you want to start writing but not sure where to start. A couple of improvements you can add to the hello world app is

[ ] Persist the items on the client.
[ ] Marking an item as completed.
[ ] Deleting all completed items.
[ ] Deleting an item.

If you get stuck take a look at the example on essentials/examples. You can do it! Please share links in the comment if you end up doing something cool with the hello world example.

Thanks for reading and happy coding.

This post was inspired by Getting started with Deno.

Blog