First Step: Life Cycle, Code and Performance of “SmartControls” (Part-3)
Code
“SmartControls” code is written in well formatted documented. Every Control has many options for different kind of functionality. HandlebarJS is used as JavaScript rendering engine. JQuery is used for solving cross browser issues. All components are written in simple and concise coding. “SmartControls” controls come with multiple themes & control variations. Every control has one base type. User can extend that base type to create new control variation. “SmartListing” comes with multiple control variations (e.g, a CheckboxGroup have three variations according to functionality, i.e, CheckboxGroup,ScrollCheckboxGroup,PopupCheckboxGroup). “SmartListing” component has extensive quantities of controls themes and layout options. User could easily alter any layout template.
Flexibility
One of finest feature of “SmartControls” is flexibility. These components are designed for developer, designer of any kind of user. The developer can easily extend the current functionality of any control. The designer can easily change layout templates, or create new themes for “SmartControls” controls. These controls follow the simple flow of working.
Extendable
“SmartControls” provide the following features to extend functionality.
- 1) User has flexibility to create new component and registered with “SmartControls” components.
- 2) User can extend any control to create new control type
- 3) User can add any 3rd party control plugin with “SmartControls” (e.g, Select2 JQuery plugin)
Debugging and Testing
“SmartControls” components follow the modern development trends. Every component comes with tests (Unit Test). “SmartControls” provides a basic debugging tool, which provide a debugging facility during development phase.
Components Life Cycle
The controls in “SmartControls” components have two states. First state is called normal state, when no default values are set (e.g, CheckboxGroup in filter bar with not value selected). In the second state, control has default value. This state is called persistent state of the control(e.g, CheckboxGroup in filter bar checked some options). These states are handled by “SmartControls” components. “SmartControls” helps to build two type of web applications.
Traditional HTTP Web Application
In the traditional HTTP web application, when a user clicks on any filter control or submit any search form. The page reloads and a query parameter is added in current URL. The URL Registry store all query parameter and supply it into control based on key. Filter or search form controls get default values from URL Registry on every page reload. “SmartListings” receives notification on every page reload and load data according to selected filter options. In traditional HTTP web application user can set the default values for “SmartFilter” or “SmartForms” controls. All values come from URL query parameters.
Single Page Application(SPA)
SPA have two variations.
- 1) Ajax based (no query parameters in URL)
- 2) Route based (Modern JavaScript Frameworks, AngularJS, ExpressJS, BackboneJS etc)
Performance Strategies
Multiple HTML Rendering
The “SmartControls” provides the diverse approach to create UI controls for web page. The control could be created by server-side rendering engine (e.g, Twig, Blade etc) or JavaScript rendering engines (e.g, Handlebar, ejs etc). In simple functionality user can use any approach to create UI controls. But in complex approach, mostly both approaches work together. The dynamic control is created by JavaScript rendering engine, because it needs to dynamically set default value (i.e., control options or values etc.).
Use Minimal Options
These components use multiple strategies for control creation (i.e, a Checkbox could be created using server side language or client side language like JavaScript or HTML). “SmartControls” provides the library files according to user needs. It totally depends on user requirements. This strategy saves the repeating control's creation life cycle. Dynamic Control creation always eats the browser memory. Minimal option provides the facility to overcome browser memory leak issues. In minimal option, the control is created by server-side language (i.e, controls in Twig) and events implemented by JavaScript. This approach is mostly used for traditional HTTP web application where the page is refreshed when an event is fired.
JavaScript Events
“SmartControls” components have a centralized event register, which keep track of every event. This event register properly disposes dynamic created events. This event register provides help for debugging memory related issues.
Why I write code in VanillaJS instead of JavaScript Frameworks?
Why I prefer to write “SmartControls” components in VanillaJS instead of well reputed JavaScript Frameworks like AngularJS or BackboneJS? This question arises. Follow points answers this question.
Point#1
During intial stage of development i wrote my component(SmartControls) in BackboneJS. Because BackboneJS is light weight and follows the MVC architecture. In simple control rendering Backbone Views were working fine. When I started to render nested control using BackboneJS View, I found some performance issues, that were consuming large amount of browser memory. Objective of my component was to be resource efficient. My requirement is not meeting to use BackboneJS to build my components. I studied some BackboneJS source code, there I found this code snippet.
_createElement: function(tagName) {
return document.createElement(tagName);
}
It is creating DOM element dynamically.
Point#2
JavaScript support VanillaJS to extends its functionality. It means “SmartControls” components could easily port to any modern JavaScript framework and provides compatibility with all modern JavaScript framework.
Point#3
Freedom of code, JavaScript provides the flexibility to write code with freedom (Build anything attitude).
Point#4
Easy migration from JavaScript ES5 to ES6