DEV Community

loading...
Cover image for Imba - a JavaScript alternative for increased developer productivity

Imba - a JavaScript alternative for increased developer productivity

somebee profile image Sindre Aarsaether ・3 min read

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.

 "basics"

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).

 "server"

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.

 "styles"

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.

 "bundling"

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.

 "types"

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 :)

Discussion (36)

Collapse
ericvida profile image
Eric Vida • Edited

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

Collapse
somebee profile image
Sindre Aarsaether Author

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!

Collapse
ericvida profile image
Eric Vida • Edited

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

Collapse
valdoghafoor profile image
Valdo Ghafoor • 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 ?
Collapse
somebee profile image
Sindre Aarsaether Author

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 :)
Collapse
wadecodez profile image
Wade Zimmerman

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.

Collapse
joserochadocarmo profile image
José Rocha

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.

Thread Thread
christopher2k profile image
Christopher N. KATOYI

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.

Thread Thread
valdoghafoor profile image
Valdo Ghafoor • 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...

Collapse
konung profile image
konung

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.

Collapse
konung profile image
konung

Looks interesting!

  1. 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 ?
  2. Could imba be used with an existing large backend written in another language like Elixir or Ruby ? Is it hard to set up ?
  3. 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

Collapse
somebee profile image
Sindre Aarsaether Author • 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 :)

Collapse
konung profile image
konung

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

Thread Thread
konung profile image
konung

@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.

Thread Thread
somebee profile image
Sindre Aarsaether Author

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.

Thread Thread
konung profile image
konung

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

Thread Thread
konung profile image
konung • 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?

Collapse
eulores profile image
eulores

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 :-)

Collapse
joserochadocarmo profile image
José Rocha

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

Collapse
jfbrennan profile image
Jordan Brennan • Edited

Memoized DOM looks interesting, but I see proprietary syntax with a mandatory pipeline so I'm out.

Loosely-coupled framework APIs are one thing - it's an acceptable part of the deal - but non-standard syntax like this ties all your source code, and therefore the future of the project, to the framework:

<div#main.note.sticky title='Welcome'> 'Hello'
Enter fullscreen mode Exit fullscreen mode

That's a HUGE cost with no benefit because with virtually every IDE out there devs can already write similar shorthand markup using the standard CSS selectors they already know (even 4 less chars to be exact), hit "Tab", and get real markup:

div#main.note.sticky[title=Welcome]{Hello}

becomes 

<div id="main" class="note sticky" title="Welcome">Hello</div>
Enter fullscreen mode Exit fullscreen mode

The same goes for scoped styles. Riot and Vue have shown how without being so extra:

<template>
  <div class="foo">Foo</div>
</template>

<style scoped>
  .foo { ... }
</style>
Enter fullscreen mode Exit fullscreen mode

I love the idea saying goodbye to observables and "just render" as Imba's memoized DOM suggests, so why not ship that and drop the fluffy syntax?

Collapse
joserochadocarmo profile image
José Rocha

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...

Collapse
intermundos profile image
intermundos

Imba looks appealing a lot. Great work folks!

👏👏👏

Collapse
sebbdk profile image
Sebastian Vargr • Edited

Does the react comparison take into account using React.memo()?

Update:
Found the source:
github.com/somebee/dom-reconciler-...

I don't see the memo method being used, would it make sense to enable memorization?
Otherwise I feel like we are comparing oranges and apples here. :)

Implying React does not support memorization because it's not enabled by default seems a bit misinformed. :)

Collapse
ghana7989 profile image
ghana

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

Collapse
somebee profile image
Sindre Aarsaether Author

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.

Collapse
ghana7989 profile image
ghana

Wow nice
No I am just asking about autocomplete and auto import kind of extension.

Thread Thread
somebee profile image
Thread Thread
ghana7989 profile image
ghana

This is the expected behavior
Thanks 😊

Collapse
joserochadocarmo profile image
José Rocha

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

Collapse
aristidespalmab profile image
Arístides Palma B

Why scrimba do not have a Imba course?

Collapse
somebee profile image
Sindre Aarsaether Author

Yes, we've been waiting until v2 is ready. There will definitely be a course on Imba this year :)

Collapse
joserochadocarmo profile image
José Rocha • Edited

I think they will, maybe because they just finish the v2 this year and have so much change over v1.

Collapse
lucas_castro profile image
Lucas Castro

@somebee : with regards to typing, is it possible to type the output of functions as well?

Also, can we create interfaces and types, like in Typescript? Would that just be done in TS files, and imported and used in.imba files? Or does Imba itself have support for these features?

Overall, this looks very interesting, but a feature-set that can compete with Typescript would probably be the biggest barrier to adoption for me.

Collapse
somebee profile image
Sindre Aarsaether Author

It is not currently possible to annotate the return type of a function without resorting to a jsdoc comment above the function declaration. This is currently a limitation that I hope to resolve before final v2 release. That said, I find the type inference of typescript very powerful, so if you use typed parameters etc it will almost always infer the correct return type.

We're considering support for creating types and interfaces, but for now you'll need to do that in separate .d.ts files :)

Collapse
andregoldstein profile image
André Goldstein

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.

Collapse
katafrakt profile image
Paweł Świątkowski

Wooohoo, it's been some time since I've heard of Imba. Congrats on the new version (if you call it so).

Forem Open with the Forem app