Skip to content
EcmaScript Code Writting DSL
JavaScript HTML
Find file
New pull request
Pull request Compare This branch is even with gh-pages.
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


What is it?

Neon is a javascript Class system, designed to wrap up object oriented logic around Javascript objects (which are not truly OO), and to establish a common base language for developers using such classes.

Quick Usage Example

    threshold : 10,
    prototype : {
        isDragging : false,
        startDrag : function() { ... }

Class(UI, 'Widget')({
    HTML : '<div></div>',
    prototype : {
        init : function() { ... },
        render : function() { ... }

Class(UI, 'Overlay').inherits(UI.Widget).includes(Draggable)({
    HTML : '<div class="overlay"></div>',
    prototype : {
        color : 'white',
        init : function() { ... },
        close : function() { ... }

UI.Overlay.threshold // => 10
UI.Overlay.HTML // => '<div class="overlay"></div>'
var overlay = new UI.Overlay({ color : 'black' });
overlay.color; // => 'black'

What does it offer

  • Convenient DSL for creating classes

    The syntax for creating the classes is very similar with that of those OO languages.

  • Inheritance

    Inheritance is pretty much the reason to use OO, so it provides a nice way of subclassing. In esence, it's about extending javascript objects with the properties of the base class.

  • Modules (composition)

    You can include modules or mixins to your classes. You can extend multiple modules to a single class.


Class and Module instantiation

Class([namespace], [className]) // => Factory
Module([namespace], [className]) // => Factory

The optional namespace argument is a valid javascript object of which the created class will be a property, or the global context by default.

The className argument is a string with the name of the class. It is possible to not pass a className, in which case the class will have an autogenerated name, this is common for creating anonymous classes. Note that you cannot have an anonymous class inside a namespace, the first argument will be interpreted as the className.

Class and Module definition

    prototype : {
}); // => Class

The class factory is an executable property, which accepts the class definition as a parameter.

The object properties will be copied by reference as static properties to the class.

The prototype property of the class definition will serve as the base prorotype of the created objects. In fact, this is the standard prototype of Javascript. The properties in it will be copied by reference to all created objects.

Class initialization

init : function( ... )

When instantiating classes, they will call the init method defined in them, if overriden (By default it does nothing).

To create an instance of an object, use the standard Javascript object constructor new. The parameters are passed to the init function

var x = new MyClass()

Class properties

MyClass.className // => Returns the name of the class
MyClass.superClass // => Returns the actual parent class
myInstance.constructor // => Returns a reference to the object's class


Be aware that since javascript's prototype works by reference, all non primitive values will point to the parent's prototype. To avoid this, make sure you assign a new value to those properties after initialization

What does not do

  • super calls

The reasoning behind not including the super functionality is that it requires introspection. Even though is possible, the library tries to not mess with the Javascript way of doing things. If you need to call the same method of a parent class, you can use the function property of the prototype and call it yourself, e.g.

myMethod : function(params) {, params);
  • Private scoping

When working in pure Javascript or using Node module system, it is easy to hide functions by keeping them as a inner closure and not adding them to the prototype of the class. Neon does not have this functionality, since the classes are just wrapped objects and javascript does not have a way to hide properties itself. However, the suggested convention is to name your private methods starting with an underscore (_myMethod) to indicate that the method is private.

Final notes

So, why another Class library system?

Well, first of all, Neon was created around the time most of these libraries were still being developed, so it is natural that many of them appeared simultaneously (especially after the explosion on Node usage) But more importantly, Neon was created in order to make frontend coding more accesible to backend developers, who already know OO languages such as Ruby or PHP, as well as creating a common language in which they could communicate. Neon does not try to emulate other language, and preserves the Javascript good parts, with a nicer syntax.

Something went wrong with that request. Please try again.