Imba is a new programming language for the web that compiles to performant JavaScript. It is heavily inspired by ruby and python, but developed explicitly for web programming (both server and client). Imba treats DOM elements as a first-class citizens. These elements are compiled to an inline dom, which is an order of magnitude faster than todays virtual dom implementations. We truly believe that it opens up for a new way of developing web applications.
yarn global add imba # npm install -g imbavar self = {};
self.yarn(global(self.add(self.imba()))); // npm install -g imbaRather than being an academic exercise, Imba has been developed over several years, alongside actual applications. Imba has been fine-tuned to ease the challenges we face when developing rich, dynamic apps (and sites).
Imba compiles down to clean and readable JavaScript. Your formatting, indentaiton, and comments are included. You can use any existing JavaScript library seamlessly from Imba, and vica-versa.
You can use all the syntactic sugar in Imba without needing to worry about the performance and readability of the compiled code, and building your views using Imba's native support for tags results in unprecedented performance.
var number = 42
var opposite = true
var string = "the answer is {number}"
var regex = /answer is (\d+)/
var info =
name: 'Imba'
version: Imba.VERSION
repository: 'https://github.com/imba/imba'
inspiration: ['ruby','python','react','coffeescript']
creator: 'Sindre Aarsaether'
contributors: [
'Sindre Aarsaether' # github.com/somebee
'Magnus Holm' # github.com/judofyr
'Slee Woo' # github.com/sleewoo
]var Imba = require('imba');
var number = 42;
var opposite = true;
var string = ("the answer is " + number);
var regex = /answer is (\d+)/;
var info = {
name: 'Imba',
version: Imba.VERSION,
repository: 'https://github.com/imba/imba',
inspiration: ['ruby','python','react','coffeescript'],
creator: 'Sindre Aarsaether',
contributors: [
'Sindre Aarsaether', // github.com/somebee
'Magnus Holm', // github.com/judofyr
'Slee Woo' // github.com/sleewoo
]
};
Even though Imba has been used privately, in production, for more than a year (powering scrimba.com), the community is in the early stages, and documentation is still sparse. We're incredibly grateful for any feedback, suggestions, and help with the documentation!
Even though the syntax and semantics of Imba is much more related to Ruby than JavaScript, it does compile down to plain performant JavaScript, and is fully compatible with any existing JavaScript library. Imba does not extend any native types from JavaScript. Arrays are arrays, strings are strings, numbers are numbers, classes are constructors with prototypes and so forth. If you simply like Imba better, there is no reason not to write your npm package in Imba, even if it is supposed to be used in the general JavaScript ecosystem. In fact, Imba produces very readable JavaScript, by keeping your indentation, comments, and coding style.
# Strings
var single = 'single quotes'
var double = "double quotes"
var interpolation = "string has {double}"
# Numbers
var integer = 42
var float = 42.10
# Objects
var object = {name: 'Imba', type: 'Language'}
# Arrays
var array = [1,2,3,4,5]
# Regular expressions
var regex = /number is (\d+)/
# Functions
def hello
console.log 'got here'
return 'world'
# Classes
class Todo
# automatic getter/setter declaration
prop title
def initialize title
# instance variables
@title = title
@completed = no
def complete
@completed = yes
# Tags
var item = <div.header> "This is a div"
var list = <ul.list> for item in ["one","two","three"]
<li> <span.name> itemvar t0, Imba = require('imba'), _2 = Imba.createTagList, self = {}, _1 = Imba.createElement;
// Strings
var single = 'single quotes';
var double = "double quotes";
var interpolation = ("string has " + double);
// Numbers
var integer = 42;
var float = 42.10;
// Objects
var object = {name: 'Imba',type: 'Language'};
// Arrays
var array = [1,2,3,4,5];
// Regular expressions
var regex = /number is (\d+)/;
// Functions
self.hello = function (){
console.log('got here');
return 'world';
};
// Classes
function Todo(title){
// instance variables
this._title = title;
this._completed = false;
};
Todo.prototype.title = function(v){ return this._title; }
Todo.prototype.setTitle = function(v){ this._title = v; return this; };
Todo.prototype.complete = function (){
return this._completed = true;
};
// Tags
var item = (_1('div').flag('header').setText("This is a div"));
var list = (t0 = (t0=_1('ul')).flag('list')).setContent((function tagLoop($0) {
var t1;
for (let i = 0, items = ["one","two","three"], len = $0.taglen = items.length; i < len; i++) {
(t1 = $0[i] || (t1=_1('li',$0,i)).setContent(t1.$.A || _1('span',t1.$,'A',t1).flag('name'),2)).end((
t1.$.A.setContent(items[i],3)
,true));
};return $0;
})(t0.$['A'] || _2(t0.$,'A')),4);
This guide assumes knowledge of HTML, CSS and JavaScript (or another programming language). It will be especially helpful to know React to grasp how tags and custom tags work.
The easiest way to get started with Imba is to play around in the scrimba.com Hello World example. If you rather want to try Imba in your own environment you can clone hello-world-imba and follow the instructions in the readme. There are plugins available for Sublime Text, VSCode and Atom.