Before you go, check out these stories!

0
Hackernoon logoIntroducing Neuron Lang: A New Language For Frontend Development by@underpig

Introducing Neuron Lang: A New Language For Frontend Development

Author profile picture

@underpigunderpig

HTML, CSS, and JavaScript are combined in this elegant language.

The Neuron language is capable of taking the place of all three languages, has widespread browser support, and can be integrated seamlessly and coherently. The Neuron language features the long-awaited unity of HTML, CSS, and JavaScript.

Syntax

Consider the similar syntax in the following snippets:

// Neuron
absoluteValue {
 return([math.abs => #0]);
}
log([absoluteValue => 0]);

// Respective JavaScript
function absoluteValue() {
 return Math.abs(arguments[0]);
}
console.log(absoluteValue(0));

A more grand example, consisting of stylistic properties, would be as follows:

<!-- Neuron Language: -->

<script type = "text/neuron">
 image {
  tag: img;
  src: path/to/image;
  fill: [math.abs => -10] 0 0 0;
  log(this.fill);
 }

 invoke(image);
</script>

<!-- Comparative JavaScript (and HTML): -->

<style>
 #image {
  background-color: rgba(0, 0, 0, 0);
 }
</style>

<img id = "image" src = "path/to/image"/>

<script>
 image = document.getElementById("image");
 image.style.backgroundColor = `rgba(${Math.abs(-10)}, 0, 0, 0)`;
 console.log(image.style.backgroundColor);
</script>

Among the greatest virtues of Neuron is its ability to integrate both properties and methods into its objects.

Objects in Neuron are quite dynamic. Neuronic Objects, like JavaScript functions, can accept arguments and execute script, and like JavaScript objects, can hold properties accessible to itself and to other objects.

In truth, properties can take the form of methods, with the main difference being that methods can be called from beyond the bounds of an object:

fill(0 0 0 0);
fill(0, 0, 0, 0);
fill: 0, 0, 0, 0;
fill: 0 0 0 0;

Neuron is an incredibly efficient language in terms of style and syntax. Neuron can integrate CSS properties and HTML attributes, as well as custom properties as would appear in JavaScript objects. Other useful features of Neuron consist of variables, objects, methods, functions, if and for, and JavaScript bindings. Neuron literals and groupings can be enclosed by brackets: 

log([this.myProperty + 1]px)
.

// for
for (i => 10) {
 log([#i + 1]px);
}

// variables
#var = 0;
myObject.fill = [#var + 1]px;
// myObject.fill is now '1px'

// functions
function {
 log(#0); // #0 represents the first argument
}
function(0);
// logs '0'
function {
 return(#0); // #0 represents the first argument
}
log([function => 0]); // passes '0' as the first argument
// logs '0'

// integrated objects and functions
object {
 fill: 0 0 0 0;
 log(this.fill);
}
invoke(object);
// logs '0 0 0 0' and appends to HTML an element with a fill
// color of rgba(0, 0, 0, 0)

Why Neuron?

The language’s efficiency is eclipsed only by its eloquence.

Neuron’s capabilities exceed far beyond the realm of browser-based applications. Neuron’s command-line interface provides a practical functionality for its applications, as well. Short of being incredibly useful for web applications, Neuron provides an extensive standard library, a dynamic type system, and object-oriented programming.

Other features of Neuron are as follows:

1Concise, consistent, and forgiving syntax

The syntax is concise and surprisingly forgiving. Neuron has a similar syntax to JavaScript, and it’s slick type system and syntax leaves little room for error at the user’s expense.

2. Extensive standard library

As stated above, Neuron’s standard library encapsulates most features of JavaScript, providing the user with the support provided by JavaScript.

3. Efficiency

The compiler is incredibly efficient at no expense. As seen in the previous example, Neuron is capable of taking the place of HTML, CSS, and JavaScript, and is capable of functioning as a standalone executable as well.

4. Support in most browsers without third-party software

Neuron can be integrated in most browsers with the absence of third-party software. Neuron is also capable of being integrated in existing web applications, and can function alongside HTML, CSS, and JavaScript.

What Next?

Neuron is generally easy to use and to learn. As of this writing, it is currently under heavy development, but it is likely that a stable release is set to emerge.

Resources

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!