Getting started with Imba 2

Imba v2 is still under heavy development. As of this writing, the latest alpha release is 2.0.0-alpha.28. In this post, we won't go into what has changed since v1 or the different alpha versions but instead, focus on the fastest way to get started.

What is Imba?

Imba is a programming language for building web apps. It's a friendly full-stack language✌️ You can use it on the server and client. While the language does have performance benefits due to the memoization techniques in use, another great thing with Imba is how easy it makes to just get stuff done. You can write markup, styles and interactive bits all in your .imba files. It compiles down to vanilla JavaScript, works well with the DOM and integrates seamlessly with existing JavaScript.

var marked = require 'marked'
var mdr = marked.Renderer.new

The language is indentation based, which looks really nice when you don't need to close the HTML tags:

### css scoped
p {
    color: red;
}
###

import './app-button'

var counter = 0

tag app-root
    def incr
        counter++

    def render
        <self>
            <p> "Hello there!"
            <p> "Count is {counter}"
            <app-button :click.incr> "increment"

The above will render the following

Hello Imba v2 Alpha 👋

The easiest way to get up and running with an Imba v2 project is to use the imba2-hello-world template. GitHub lets you easily create a new repository from it by clicking: Use this template or clone git clone https://github.com/imba/imba2-hello-world. The template link will only work if you are logged in.

When you have the code locally, you can run the usual commands:

yarn # npm install
yarn start # npm start

This will use rollup to build and run the app. Which you can then see on http://localhost:10001/

Installing Imba v2 manually

To get the bleeding edge version you can install it globally by running

yarn global add imba@pre # npm install -g imba@pre

To update an existing project run

yarn add imba@pre # npm install imba@pre

Similar to v1 this gives you the imba and imbac binaries. The rollup command is currently not included in this and would have to be installed separately:

yarn add imba-rollup # npm install imba-rollup

Note that much is not documented on that part so you will just need to experiment or feel free to ask questions on users.imba.io

Interesting features

The coolest feature of Imba v2 IMHO is that tags now compile down to native web components. This makes it so much easier to start introducing Imba to legacy code bases. With this approach, you can use Imba in an existing app to either replace specific pages or even small components. It's really nice 🥰

You no longer need to use a colon (:) to access attributes but can just use dot (.) like other C like languages. This makes things much more straight forward for non-Ruby programmers who are not used to the implicit self.

# Imba v1
object:x
# Imba v2
object.x

For an exhaustive list of all the changes check the actual pull request Imba 2 - a new age. Other noteworthy changes are the new syntax for slots and the context API. Check out the Imba Changelog for more details on those: https://scrimba.com/playlist/pdq9quP

Summary

Imba v2 is not ready yet for prime time but you can start using it today for simple SPA. It's getting closer to a release but fundamental syntax changes are likely still going to happen up until the actual release. If you want to play around with a bleeding-edge framework today, clone the repository, start coding and contribute!

Thanks.