In case you missed it there is a new language for doing web development on the block. If you are not happy with the current selection of frameworks and want to try something new. Try Imba!
What is Imba?
Imba is a high level language that compiles down to Javascript. It lets you write concise HTML via a component based system also known as tags in Imba parlance. From the README file:
if ruby and react had an indentation-based child, what would it look like?
That's one of the things I love about Imba. You get to harness the
pleasure of writing in a Ruby like language while getting the benefits of
deploying Javascript.
To learn more about the performance improvements, checkout the official documentation. More specifically the page on advanced/performance.
Installing it
The Imba project provides a package which you can easily install via yarn or npm
# Yarn
yarn global add imba
# NPM
npm install -g imba
# Check Imba is installed
$ imba --version
1.4.4
$ imbac --version
1.4.4
$ imbapack --version
3.12.0
Imba comes with three commands imba, imbac and imbapack. Let's look at them.
imba
The imba cli tool is responsible for reading source code and then it
passes it on to a compiler instance.
$ imba --help
Usage: imba [options] [ -e script | script.imba ] [arguments]
-e, --eval script evaluate script
--es5 evaluate without native let/var/await
-h, --help display this help message
-v, --version display the version number
imbac
imbac is a wrapper for the compiler. In a future post I might explore all of of the options but for now you really only need to know that passing it a Imba file produces a Javascript file.
Usage: imbac [options] path/to/script.imba
-a, --analyze print out the scopes and variables of your script
--es5 compile without native let/var/await
-h, --help display this help message
-m, --source-map generate source map and add inline to .js files
--inline-helpers inline helpers to not depend on imba.js
-o, --output [dir] set the output directory for compiled JavaScript
-p, --print print out the compiled JavaScript
-s, --stdio listen for and compile scripts over stdio
-t, --tokenize print out the tokens that the lexer/rewriter produce
--target [target] explicitly compile for node/web/webworker
-v, --version display the version number
--silent only print out errors (skip warnings)
-w, --watch recompile files on change
--wrap compile with top-level function wrapper
imbapack
imbac is a wrapper around the webpack CLI and it handles the
configuration and processing required for imba files. For brevity the output below has been trimmed
webpack 3.12.0
Usage: https://webpack.js.org/api/cli/
Usage without config file: webpack <entry> [<entry>] <output>
Usage with config file: webpack
Config options:
--config Path to the config file
[string] [default: webpack.config.js or webpackfile.js]
--config-name Name of the config to use [string]
--env Environment passed to the config, when it is a function
[...]
Hello World
The Imba organisation provides a hello world example which you can checkout
# Get the source code
git clone https://github.com/imba/hello-world-imba.git
cd hello-world-imba
# Install the dependencies
npm install
# Run the app
npm run dev
The example should be running at http://localhost:8080/ now.
This example is a simple todo app that lets you add items. The interesting bits are in the src/ directory where we have two files
src/
├── client.imba
└── server.imba
Client side
In the client side example the code relies on webpack to build the site to
dist/client.js. The Imba code looks like this
The compiled Javascript output is a bit long so I won't add it here but you can read it on gist/client.js.
The actual HTML for loading the app is very short:
<!doctype html>
<html lang="en">
<head>
<title>Hello World</title>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css" media="screen">
</head>
<body>
<script src="client.js"></script>
</body>
</html>
Server
Contrary to the client side example, you don't need webpack to run this and can pass the file to imba
$ imba src/server.imba
server is running on port 8080
Why does this work? The server example uses express and is a good example of how Imba is not reinventing everything but allowing you to reuse existing Javascript code while still writing in the classy Imba syntax 😃
Note that while the above example is loading a Javascript file on the client side, you could have rendered the page on the server like I have done below on my toy project xiyo.no. If you are interested the code is available here scanf/xiyo.imba
Tooling
While the Javascript ecosystem can be harnessed for all sort of things you can find on npmjs.org, the tooling in the Imba ecosystem is still very young and evolving. If you would like to start a new project with tools similar to create-react-app and vue-cli, then try athif23/start-imba
Getting start-imba
$ git clone https://github.com/athif23/start-imba
$ npm install -g ./start-imba/
Starting a new project
$ start-imba my-cool-project
start-imba then generates the following structure for you
my-cool-project/
├── dist
│ ├── imba-logo.png
│ ├── index.css
│ └── index.html
├── package.json
├── src
│ ├── components
│ │ └── App.imba
│ ├── index.imba
│ └── styles
│ ├── App.scss
│ └── index.scss
└── webpack.config.js
4 directories, 9 files
After installing the dependencies and starting the webpack server you can start coding
$ yarn
[...]
$ yarn run start
[...]
ℹ ｢wds｣: Project is running at http://localhost:8080/
[...]
Summary
Imba is ready for production use and makes building web apps more fun.
Similar to Ruby the productivity gains you can get are real. You can start deploying it today 😉
The amazing learning platform Scrimba is built with Imba. This is also a nice place to experiment since Scrimba has Imba playgrounds you can run interactively. Sindre Aarsaether, the author of Imba has several great screencasts which you can find by searching for Imba.
Challenge
If you want to start writing but not sure where to start. A couple of improvements you can add to the hello world app is
- [ ] Persist the items on the client.
- [ ] Marking an item as completed.
- [ ] Deleting all completed items.
- [ ] Deleting an item.
If you get stuck take a look at the example on essentials/examples. You can do it! Please share links in the comment if you end up doing something cool with the hello world example.
Thanks for reading and happy coding.
This post was inspired by Getting started with Deno.
Top comments (0)