Getting started with Imba 2
Alexander Alemayhu
Posted on February 17, 2020
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.
Posted on February 17, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.