What You Can Do with 1kB of JavaScript

by on

20 years ago, programming was done for limited-memory devices which meant that it was important that the program size was kept small. Today, it's not an important factor as both space and memory are available in abundance.

So, why talk about concise programs? Writing and reading small programs leads to a better understanding of the language it's written in. It shows a language's capability to write small and elegant code. Smaller code usually results in program which runs fast and consist of fewer bugs.

Online Chess

Javascript is a language with quirks which results in many possibilites. We take a look at some of the best examples of Javascript programs which are written in less than 1kB. 1kB gives the developer enough space to write a simple program but, to develop a complex application such as a chess engine, shown later, requires clever optimizations and making intelligent use of the language's behavior.

Riot JS - A MVP Framework

Riot JS

URL: github.com/moot/riotjs

Riot JS is a really tiny client-side MVP framework which promises to include all the building blocks of a website - template engine, router, event library, and claims to follow a strict MVP pattern. This as yet unreleased framework's small size means that it should be very fast and embeddable. There will be lesser to learn and lesser proprietary idioms to understand due to its size.

Chess Engine - Computation

Online Chess

URL: 1kchess.an3.es/

The 1kB Chess Engine is brilliant example of computational work that can be accomplished in Javascript. It contains a complete chess engine where a player plays against the computer. It implements both castling and en passant capture. The small limitation is that the player can only play as the white piece and pawn promotion is restricted to queen.

Revolving Globe - Quine

Revolving Globe

URL: aem1k.com/world/

The revolving globe is a beautiful example of what can be accomplished succinctly in JavaScript code. It showcases a revolving globe surrounded by its source code. It's a quine - a program which reproduces its source code.

Minecart Animation


URL: js1k.com/2013-spring/demo/1459

Part of the js1k competition, it recreates the popular Minecraft game's minecart animation. It shows a small cart moving in a tunnel-like environment. The animations are smooth and fast. Its a great example of animation capabilities of Javascript.

3D Bee

3D Bee

URL: js1k.com/2013-spring/demo/1451

This demo, which was also a part of the js1k competition, shows the 3D capabilities of Javascript. Unlike the previous example of Minecart, it includes colors and textures. The 3D capabilities of Javascript are shown in this example.

Bouncing Beholder - A 2D platformer

Bouncing Beholder

URL: marijnhaverbeke.nl/js1k/

Bounching Beholder is another demo part of the Spring 2013 js1k competition. It's a simple 2D platformer where the objective is to move in the world collecting coins without falling through the top. Collision detection, randomized world generation and a few other techiniques requried for game making were adapted to fit into a small codebase. It shows the game creation capabilites of Javascript.

Spider Solitaire

Spider Solitaire

URL: js1k.com/2011-trail/demo/952

Spider Solitaire is another example of a game recreated in Javascript to fit less than 1kB. The source code for the game is readable and implements both the visuals required and the game logic cleanly.

Graphical Layout Engine

Graphical Layout Engine

URL: js1k.com/2010-first/demo/618

The Graphical Layout Engine which was part of a large database modelling tool reduced to 1kB of Javascript. It makes use of nodes and connectors between them to display a simple graphical model. It also adds simple motion blur animations.

Javascript as a language provides a lot of possibilities. Along with Javascript, other languages such as Ruby, and Python also offer the same capabilites in terms of elegant and concise code.

We mentioned a few examples of what can be done in just 1kB. Even with such restrictions, some amazing creations can be made. Think of the possibilites without any such restrictions.

Share the Love

Published in javascript | Tagged with javascript, front-end, web-development






Talk to us, that's always a good idea!