tl;dr: Using Imba means you win on all fronts: developer productivity and velocity, and user experience.
To coincide with the launch of Nathan Manousos’ great new interactive course, this post is a ten-minute intro to the Imba programming language from the perspective of a ReactJs Dev. I’ll give a brief overview of what Imba is, and then we’ll get into some more detailed examples of how it improves on existing languages and frameworks. Of course we can’t do justice to Imba in just ten minutes, so this post serves as more of an appetizer to pique your curiosity.
So what is Imba?
Imba is a web programming language that's lightning-fast in two ways:
- Imba's time-saving syntax with built-in tags and styles results in less typing and switching files so you can build things fast.
- Imba's groundbreaking memoized DOM is an order of magnitude faster than virtual DOM libraries, so you can build fast things.
In short, Imba is what web dev would be if HTML, CSS and JS were designed today from the ground up.
Is Imba real-world or is this some experimental thing?
To answer that question, check out the “Hello World” below. It’s written in a recordable code editor called a Scrim, which is built with Imba.
Scrims are the main feature of Scrimba.com, a successful ed-tech startup that has thousands of daily users. Oh, and because Imba works on the server as well as the browser, it’s actually the language powering the whole Scrimba.com stack.
Does that Hello World look familiar to you? Probably, because Imba compiles to JavaScript and works inside the JavaScript ecosystem. But where are the parentheses in that console.log? Well, the first thing to know about Imba is that the syntax is terse, expressive, and concise (Inspired by Ruby). Not only can you do away with the parentheses, but you can also wave goodbye to curly braces and semi-colons. And because Imba is whitespace sensitive/indentation based (like Python), you use indents to organise your code, which makes it clutter-free and more readable.
How about an example?
Let’s take a look at an app that consists of three draggable components. Watch it being built in 7 minutes with explanation, and pause whenever you want and play with the code right inside the scrim (interactive video). Just hit play to start from the beginning.
But I can do this in React!
Yes, of course you can. But let’s compare the React code for the same app.
Look at the complexity and the length of the React code! In contrast, the Imba code is shorter, simpler, and faster - by default! And as we know, less code equals fewer bugs.
But I could do it with some packages!
Yes, you could. And that means new APIs to learn, new dependencies to rely on and a bigger bundle size.
Let’s see how the app would look if we used Tailwind CSS for concise styles and React-Draggable for drag and drop:
Let’s look at some stats:
| Lines of code (js+css vs Imba) |
characters | code length score (lower better) |
chunk size (js + css) not gzipped |
chunk size score | |
|---|---|---|---|---|---|
| Imba | 15 | 370 | 1 | 50kb | 1 |
| React | 114 | 2196 | 7.6 | 140kb | 2.8 |
| React +
Tailwind + react-draggable |
53 | 761 | 3.5 | 166kb | 3.3 |
In other words, an Imba codebase can be up to 7 times shorter while being more powerful and having a smaller bundle size.
These are quite impressive numbers. And what’s important to note here is that as your React codebase grows, you’re more likely to include more dependencies since it’s hard to write these specific parts yourself, so you end up with a huge bundle size (hello, Notion) or you end up with a massive codebase that’s hard to maintain. But we all know the former is more common, as developers hit npm install without batting an eyelid.
In contrast, you rarely need to add external dependencies to your Imba codebase. That's because Imba is powerful and expressive out of the box. Scrimba (the biggest Imba codebase) only has 5 dependencies in the front-end and most of these are audio processing packages or a code editor, and it wouldn't make sense to write and maintain these on your own.
Wrapping Up
We have only scratched the surface of Imba, but we’ve already seen how it can hold its own against React both with and without dependencies. Using Imba means you win on all fronts: developer productivity and velocity, and user experience. But there must be a gotcha right?
Well, while Imba is already 10 years old and is a great language to read and write, its community is still small and that’s why Nathan has created this amazing course to learn Imba https://scrimba.com/learn/imba that you can watch for free.
And because it’s a Scrimba course, you can pause the video at any time and edit and run the code the teacher is typing!
If you’ve read this far, you’re an adventurer just like us! Come explore this fast, exciting, and fun language together with like-minded adventurers in the Imba community.