Introduction

What is Imba?

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.

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/somebee/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/somebee/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!

Syntax & Semantics

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, _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 function hello(){ 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($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);

Getting started

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.