- 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>
- Book: First principles thinking for building winning products - April 19, 2022
- Free AI / Machine Learning Courses at Alison.com - November 16, 2021
- 12 Weeks Free course on AI: Knowledge Representation & Reasoning (IIT Madras) - November 14, 2021
Leave a Reply