Javascript – StapesJS Hello World with Code Example

stapesjs

This article represents facts around what is StapesJS and why you would want to make a note of it or, in other words, get started with it. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.

Following are the key points described later in this article:

What is StapesJS?
Key Reasons Why You May Love StapesJS
StapesJS Hello World – Code Example

What is StapesJS?

A tiny Javascript framework, StapesJS provides simple and easy-to-understand-and-use building blocks that could be helpful in coding our web apps using libraries/frameworks such as JQuery, ReactJS, Zepto etc. I must say that I have not tried StapesJS extensively with one of these frameworks. However, that said, I found it very intuitive and easy to use and thus, I am hoping that it might certainly prove helpful in writing JQuery in a structured fashion using OOPs manner. I would suggest you giving it a try and check for yourself. I shall also try it further, especially with ReactJS, and post my experience in later blogs.

Key Reasons Why You May Love StapesJS

I am not an expert with StapesJS. However, I must say that I loved StapesJS for multiple reasons after spending few hours with it. So much so that, I would like to spend more time working with it in near future and, telling about it to others. Following are some of the reasons:

Intuitive: When writing JS code in object-oriented fashion, StapesJS makes it quite intuitive in the sense, that a class extends from Stapes and any other class wanting to inherit could use “subclass” keyword with the class itself. When trying to explain OOPs to beginners, it may come very handy. With existing JS, at times, it become difficult to explain concepts such as class, objects & inheritance to the beginners. In addition, its event handling and data methods are very easy to understand and use.
High Usability:StapesJS makes the code easy to read and understand owing to its simplistic syntax.
Very Tiny (Low Footprint): StapesJS has a very low footprint, e.g., (just 2kb minified and gzipped).
Good for Mobile Sites: Owing to its low footprint, StapesJS could become favorites for usage in building mobile sites.

Stapes Hello World – Code Example

Pay attention to some of the following:

One may note that argument to “Stapes.subclass” is a JS object.
All classes, when using Stapes, inherits from Stapes which is the base class. When creating subclass, one can use “subclass” with class name which will inherit all prototype properties of the parent class.
Keyword “constructor” is explicitly used to define the constructor of the class. This makes the Constructor function stand out unlike normal JS classes. This may come handy when providing training to UI developers willing to learn OOPs concepts.

<html>
<head>
 <title>StapesJS - Hello World</title>
</head>
<body>
<!-- Element printing Hello World -->
<h1 id="hello"></h1>
<script type="text/javascript" src="http://hay.github.io/stapes/stapes.min.js"></script>
<script type="text/javascript">
var HelloWorld = Stapes.subclass({
 constructor: function(name) {
  this.name = name;
 },

 printName: function(elem) {
  elem.innerHTML = "Hello, " + this.name;
 }
});
var hw = new HelloWorld( "Calvin Hobbes");
hw.printName( document.getElementById( "hello") );
</script>
</body>
</html>

Author
Recent Posts

Nidhi Rai

Technology Blogger at Vitalflux.com

Nidhi has been been actively blogging in different technologies such as AI / machine learning and internet technologies. Her field of interest includes AI / ML, Java, mobile technologies, UI programming such as HTML, CSS, Javascript (Angular/ReactJS etc), open-source and other related technologies.