Sindre Aarsaether

Posted on Jun 10, 2021

Imba - a JavaScript alternative for increased developer productivity

#imba #webdev #javascript

I'm Sindre, CTO at Scrimba.com. We're about to launch a major overhaul of Imba, the programming language we use for everything here at Scrimba. The language has been developed over many years, and it powers both the frontend and backend of Scrimba (100K+ monthly users). Imba is not an academic exercise or a toy project. Check out https://imba.io for more details!

Since we've been flying under the radar for several years I thought I should post about it here now that we are approaching beta of this major update.

The main benefit of Imba is speed. Both in development and performance.

Imba's Memoized DOM approach is an order of magnitude faster than Virtual DOMs (Vue, React). See this article for a short introduction to the approach.
Imba's time-saving syntax with built-in tags and styles results in less typing and switching files
Imba works with node and the npm ecosystem, and integrates tightly with both js and typescript

Here are some of the features worth mentioning 👇

Minimal syntax

Imba's syntax is minimal, beautiful, and packed with clever features. It combines logic, markup and styling in a powerful way. Less keystrokes, and less switching files means you'll be able to build things fast.

Runs on both server and client

Imba powers both the frontend and the backend of Scrimba.com, our learning platform with 100K+ monthly active users. On the frontend, Imba replaces e.g. Vue or React, and on the backend, it works with the Node ecosystem (e.g. npm).

Integrated styling

Inspired by tailwind, Imba brings styles directly into your code. Styles can be scoped to files, components, and even parts of your tag trees. Style modifiers like @hover, @lg, @landscape and @dark can be used for extremely concise yet powerful styling.

Blazing fast, Zero config

Imba comes with a built-in bundler based on the blazing fast esbuild. Import stylesheets, images, typescript, html, workers and more without any configuration. Bundling is so fast that there is no difference between production and development mode - it all happens on-demand.

When you run your app with the imba command it automatically bundles and compiles your imba code, along with typescript, css and many other file types. It provides automatic reloading of both the server and client.

Typing and tooling

The tooling is implemented as a typescript server plugin giving us great intellisense, diagnostics, and even cross-file refactorings that works with js/ts files in the same project. You can import types just like in typescript, and annotate variables, parameters and expressions. Like the language, the tooling is still in alpha, but improving every day.

Get involved!

If you'd like to learn more about Imba, please join our Discord server. We also host community meetings (watch recordings of here).

Imba has been under active development for 6+ years now, and activity is only ramping up. We're looking for contributors who would like to help improve documentation and the ecosystem around Imba.

We really think Imba will add a lot of value in an already crowded space of languages and frameworks. if you're the type who loves to tinker with new things, I'd wholeheartedly recommend you to check it out :)

Top comments (43)

Eric Vida • Jun 10 '21 • Edited

Yes!!!
I can finally write html, css, and js without writing html, css and js.

Sindre Aarsaether • Jun 11 '21

I read this comment as a sarcastic take on the trend of moving markup and styles back into js, but Eric is among a group of very few people who have been using Imba for a very long time already :) He was the driving force behind support for styling in imba!

Eric Vida • Jun 11 '21 • Edited

Haha. Not sarcastic. I love Imba. No going back. I think it's been 4 years since i first started using Imba.

Abdellah Alaoui • Aug 19 '21

Embracing tailwind style is a great idea. Kudos

Valdo Ghafoor • Jun 10 '21 • Edited

Memoized DOM looks awesome but syntax is really not for everyone
IMO it looks messy as there is no separation of concerns nor separator for instructions.
I understand the "more dense code" logic but it's a honey trap.
Separators exists for readability & comprehension, not to annoy people or loose time.

Your bundler seems very close to Vite. Is it alike ?
Is Backend part only node written with your syntax ?
Is there a decoupled version of Memoized Dom so we can use it with current Web Standards ?
If you are trying to solve a specific problem with Imba, what is it ? You talk about productivity but creating a new language will inevitably push people to invest a lot of time in learning it. How do you justify this investment ?

Wade Zimmerman • Jun 11 '21

Came here to say something similar.

IMO, Imba is a DSL for JS framework diehards. For most devs, this language will be too syntactically different. There are too many key words, and the flow is difficult to follow.

That said, I imagine this would be good for fast paced freelance style work. Once learned, you could probably pump out web-apps by the hour.

José Rocha • Jun 12 '21

Too syntactically different?... developers are so blinded nowdays that they even could see a clean and easy language. Imba is extremelly easy and very human friendly, very similar to Ruby and Python. But ok, let continuous to be verbose. Lets write ugly React code.

Christopher N. KATOYI • Jun 14 '21

Verbosity isn’t a BAD BAD thing if it helps readability and comprehension. I also think the comparison with Python isn’t valid. Python isn’t a DSL aim to handle content markup, style and business logic.

Valdo Ghafoor • Jun 14 '21 • Edited

Ruby & Python are old languages and were not designed to be used in Frontend context. It just makes no sense. It would only be useful for backend people coming for some frontend gigs without the deep comprehension of what's really going on in Javascript.

What you call "human friendly" is YOUR opinion. If "human friendly" is just writing "sentences" with spaces as only separator, then I except your code to have the same flaws as humans sentences have: lack of explicit instructions and interpretation issues.

However Javascript & web standards exists without your opinion and millions of devs around the world are very ok with it.
Imba may just be sugar for lazy backends ... (Except memoized dom, this can be pretty good)

Creating new syntaxes may just split our strong community into pieces, and force developers to make a choice and loose job opportunities. Vue & React are close enough to be able to make a switch if needed, because they still rely on JS comprehension.
Imba doesn't...

Verbose is not wasting time, verbose is just explicit...
You loose a small time once while writing it, but you win time in readability/comprehension every time you go over that code again.
It's like tests...

johnaweiss • Dec 26 '22

There are many languages in the world, and room for plenty more. Don't worry, IMBA won't "split" the JavaScript community -- JS is way too huge.

konung • Jun 16 '21

I disagree with "or most devs, this language will be too syntactically different. "

To me comming from Ruby/Elm/Elixir/CoffeeScript this actually looks very intuitive. Much more so than other JS frameworks I used, like React or Angular.

johnaweiss • Dec 26 '22

JS devs have many JS-transpiled languages to choose from, and now they have another. Great!

Sindre Aarsaether • Jun 11 '21

Thanks for talking a look! I understand your initial reaction, the syntax is definitely not for everyone. I don't think it's a honey trap though. I agree that some of the examples may even go too far on not using separators and parenthesis, but it is not like you cannot use them. It is similar to Tailwind in this regard. Looking at it initially it is a lot to take in, but it doesn't take that long to learn, and once you've learned it you're not going back :)

Yes, the bundler is quite similar to vite. Both are using esbuild under the hood, which deservers all of the credit for the speed and flexibility of bundling -- it is an incredible piece of software.
Yes, Imba compiles to straight forward js, and you would use express/koa etc and run through node.
There is no decoupled version of memoized DOM. I would love for other languages to take inspiration from it though.
Tbh, I'm just very passionate about improving the tools I use myself. I'm trying to make Imba the most efficient way to bring ideas (ie scrimba.com) to life. It won't be worth your time investment unless enough other people also find it productive and fun, since having a large community, docs and examples is really important :)

johnaweiss • Dec 26 '22

People learn new languages all the time, and new languages are introduced all the time. No one is forced to learn it. By your logic no one should ever introduce a new language because someone might have to learn something new. The horrors!

johnaweiss • Dec 26 '22

I'm a strong supporter of separation of concerns. Also a huge fan of reducing typing and eliminating verbosity. Why couldn't Imba do both?

konung • Jun 10 '21

Looks interesting!

Could you contrast and compare to other languages / frameworks taking similar approach to help understand advantages of Imba? Like elm, svelte , purescript, reasonML, mint-lang ?
Could imba be used with an existing large backend written in another language like Elixir or Ruby ? Is it hard to set up ?
What are the current limitations & drawbacks of using Imba . I’m partial to elm and svelte , and familiar with some of the hurdles there, that were not quite clear and obvious when I started using them .

Thank you

Sindre Aarsaether • Jun 11 '21 • Edited

I applaud all efforts in improving the tools we all use to make great things! I'm not deeply invested enough in any of these to give a thorough and fair comparison, but generally I do think Imba is the most balanced among them.

Elm, purescript and reasonML are a lot further from js in terms of semantics and ecosystem from my (shallow) understanding. Mint-lang is certainly interesting. Svelte also shares many of the same ideas, but Imba is more opinionated for good and bad.

The support for styling in imba is truly special. Just like tailwind it looks messy at first glance, but the learning curve is not really that steep, and it feels like a super weapon once you master it.

The syntax is imho very elegant and concise, but I'm sure it will appeal more to those coming from ruby than from c-like languages. Most frameworks and languages (including svelte and mint-lang) stick to the jsx-like syntax for tags. Imba takes a much more opinionated approach with flexible event modifiers and powerful touch handling etc right out of the box.

Could imba be used with an existing large backend written in another language like Elixir or Ruby?

We still lack examples and starter-templates for these use-cases, but it should be relatively easy to set up.

What are the current limitations & drawbacks of using Imba?

Imho, the main limitiation is documentation. Too few examples, too many concepts not covered. Also, since Imba is so concise, it is easy to shoot oneself in the foot by not caring about abstractions and separations of concern before your knee-deep in a huge single-file application. As for the language, I think there will be many more pleasant surprises that are not quite clear when you start using it :)

konung • Jun 11 '21

Thank you Sindre for a thorough answer, I will certainly try out Imba :)

konung • Jun 11 '21

@somebee Could you mention, what current features are lacking/WIP? Or maybe there is a Roadmap?
Just trying to guage what limitations are.

i.e. with Elm the limitation (for my projects) turned out to be the delibirate slow release schedule. Creator of the language addressed it many times and gave his (valid) reasons for doing so. But if I knew about that beforehand, I might have not chosen Elm for a project, despite ti's no-runtime-errors guarantee.

Sindre Aarsaether • Jun 14 '21

I will try to put up an official roadmap soon. There are definitely features lacking, but I wouldn't hesitate using it in production. There are things I plan to add, like custom SVG components, but nothing major missing for v2.

Our problem is rather too frequent releases. The main reason we haven't officially moved to beta is that it feels easier to release very frequent updates while in alpha.

konung • Jun 14 '21

:) That's a good problem to have :)

konung • Jun 16 '21 • Edited

@somebee I started going through docs on imba.io website ❤️, and one thing that I found missing/WIP ( for my use cases) is global state-managment Redux-like.

I understand it's possible, but can't find a doc or an exmple or a video-tutorial of one. I noticed you recorded a lot of meetups - is there one per-chance where you discuss & show it?

Matias • Jul 11 '21

Documentation on state is right around the corner and is being discussed in the Discord community right now, but here's a quick answer:

How do I manage global state? / Where do I use Vuex/Redux/Mobx?

The answer is mind boggling because of how simple it is; you don't. It kind of feels like something is missing, coming from the big web frameworks where thinking about state is a huge part of the day to day work.

When working with the web directly, instead of through the virtual DOM layer of abstraction, it can be as simple as this:

1) Make a new file for state to live in - for example state.imba
2) Export a regular Javascript object to use as the default state - for example:

export let state = {
    answer: 42,
    question: "The Ultimate Question of Life, the Universe, and Everything"
}

That covers the concept of global state, MUTATIONS and GETTERS. For the concept of ACTIONS we can add this, for example:

export def increment
    state.answer++

export def decrement
    state.answer--

3) Use it wherever you need. Here's a full app that imports the state above and uses it for an important calculation:

import {
    state
    increment
    decrement
} from './state'

tag app
    <self>
        <h2>
            if state.answer !== 42
                "A number"
            else
                state.question
        <button @click=decrement> "-"
        <pre> state.answer
        <button @click=increment> "+"

imba.mount <app>

Here's a little repo of the above example: github.com/codeluggage/imba-basic-...

konung • Jul 12 '21

Wow . This is awesome !

One more question:
Can you bind to state ? If state changes from one component can you force an automatic update in another component connected/dependent on the same state variable ?

eulores • Jun 10 '21

Feels like Python with the power of Ruby and a slight flavour of Coffeescript, with amazing code density, and continues to be 100% compatible with Javascript.
A dream comes true :-)

José Rocha • Jun 12 '21

And if you give a change, it is very easy and clean.

intermundos • Jun 11 '21

Imba looks appealing a lot. Great work folks!

👏👏👏

André Goldstein • Jun 15 '21

I've been using Imba v2 in alpha/beta for 6 months now and I can honestly say there is nothing else like it.

The speed, the convenience and the way you can use component styles are truly special.

José Rocha • Jun 12 '21

You almost have to be a machine, remember shortcuts. See just how human is not need to close the tag .... the machine needs to know where it is closed not you, like in Python...

José Rocha • Jun 12 '21

It is like Ruby or Python or Tailwindcss, some will love other will hate. I use it and is quite impressive!!

Pavan Chindukuri • Jun 13 '21

I can start using it when there are extensions for vscode like snippets.
Let me know if there are any

Sindre Aarsaether • Jun 14 '21

What kind of snippets are you thinking? The ability to create your own snippets? Imba has a vscode extension that is relatively robust with autocompletions and refactoring tools etc.