Getting started with Imba
Tags: imba, language, ruby, javascript
Published: 2019-07-25 17:54:05

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][i]! 

## 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][t] in Imba parlance. From the [README][1] 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][i]. More specifically the page on [advanced/performance][2].

## Installing it

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

```bash
# 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

```bash
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][hw] example which you can checkout

```bash
# 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/](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

```bash
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

![client.imba](https://i.imgur.com/irFomkV.png)

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

The actual HTML for loading the app is very short:
```html
<!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`

```bash
$ 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 😃

![Server.imba](https://i.imgur.com/2WiUJBL.png)

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](https://xiyo.no). If you are interested the code is available here [scanf/xiyo.imba](https://github.com/scanf/xiyo.imba)

![xiyo.imba](https://i.imgur.com/dGJBysc.png)

## Tooling

While the Javascript ecosystem can be harnessed for all sort of things you can find on [npmjs.org](https://www.npmjs.com/), 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](https://github.com/athif23/start-imba)

### Getting start-imba

```bash
$ 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

```bash
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][s] is built with Imba. This is also a nice place to experiment since Scrimba has Imba playgrounds you can run interactively. [Sindre Aarsaether][sa], the author of Imba has several great screencasts which you can find by searching for [`Imba`][is].

## 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](http://imba.io/guides/essentials/examples#simple-todo-list). 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][x].

[i]: http://imba.io
[x]: https://dev.to/wuz/getting-started-with-deno-e1m
[0]: https://www.npmjs.com/package/imba
[1]: https://github.com/imba/imba/blob/master/readme.md
[2]: http://imba.io/guides/advanced/performance#performance
[t]: http://imba.io/guides/language/tags
[s]: http://scrimba.com
[sa]: https://github.com/somebee
[hw]: https://github.com/imba/hello-world-imba
[cc]: https://gist.github.com/scanf/ea1cdcdbdbd50152f3abc3cd254d8e29
[is]: https://scrimba.com/search?q=imba