Forgotten Callbacks, Getting a Closure

Robin Jangu — Fri, 08 Jul 2022 12:23:00 +0000

Reason why JS is adored all over the internet is because of the powerful libraries and tools that empower us in making efficient web pages in very less time. Closure is one of the perks of JS which is used quite a lot. Now, every once while these commonly used phenomenons double cross the developers and fall prey to the dark side. In this blog we will understand how closures and callbacks result in memory leakage.

Have you heard about Minify JSON? It is a JavaScript library that removes whitespace and comments from blocks of JSON-like content, while preserving its syntax.

Closure and Callbacks

When you define any function in javascript, all the data in that parent function can be accessed by any other function that you define within the parent function’s boundaries. Closures provide you with associating the data and referencing to another function within.

function strongestavenger() {
    var name = "HULK";                     // name is a local variable created by 
                                           // strongestavenger
    function displayName() {               // displayName() is the inner function, a closure
                            alert (name);  // displayName() uses variable declared in 
                                           // the parent function       
                           }
    displayName();    
}
strongestavenger();

The strongestavenger would display HULK, when you initiated the function strongestavenger. DisplayName() is the closure that has access to the name which stores HULK in it.

Callbacks as the name itself indicates are nothing but when a function and its components are called.

var shield_data = getData();
setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
        // Do stuff with node and shield_data
        node.innerHTML = JSON.stringify(someResource));
    }
}, 1000);

Callbacks and closures are basically work on the principle of referencing the data nodes for usage. So what will happen if these nodes are removed, or the data itself is deleted. Both of them will result in Memory leakage and will cripple the browser’s efficiency. DOM node referencing also works in the same manner and their effect is also the same.
Closures and with recursion if not properly used may easily handicap the browsers, mix it with a redundant variables and you have got a recipe for disaster.

Do you know? JSON Prettify is a common format for storing data, but it can be hard to read. Prettify JSON will indent the JSON file, make sure stuff is lined up in a similar manner, and will put closing parenthesis in the same space every time.

Solution

Old versions of internet explorers had bugs due to which memory leakage due to forgotten callbacks and closures resulted in crashing. The problem then was that they couldn’t differentiate between javascript and DOM nodes cyclic differences. Even in the latest versions of the browsers today are not that efficient that they can reduce the memory leakage to zero. Till the time the node can be reached within the parent (window) function they can’t be swept by the garbage collection.

It is impossible to not use closures while scripting, what can be done is keeping in check where the leakage is happening. Using browser profiling (mentioned in the memory debugging blog) time lapse we can easily detect the increase in memory. Find the root cause, what event or function is causing this surge and then explicitly delete them.

Especially if you are using jQuery, it is imperative that you don’t use eventlisteners too much. If you are writing script which requires events to be made, make events on list rather than making a list of events.

Check this out: Base64 decoding- A way of translating text form into binary data so that it can be transmitted more easily via e-mail and HTML form data.

Choosing The Right JavaScript Framework

Robin Jangu — Tue, 05 Jul 2022 10:12:00 +0000

The emergence of unique frameworks with each of them having distinct characteristic advantages has caused a rift in our wonderful JavaScript community. Developers advocating for their favorites as the golden era of technological wonder has started, the sun has set for the outdated libraries. Amidst all this chaos comes a very irritating question as to which framework is the best, to which the answer is all of them. LambdaTest offers the most advanced cloud-based software testing platform, which supports various automation frameworks like Selenium testing, Cypress testing, Playwright, End to end testing and more. While there are countless alternatives to the libraries, the important thing is to understand your requirements and then consider choosing. While there are countless alternatives to the libraries, the important thing is to understand your requirements and then consider choosing.

Framework or Libraries

Both these terms are synonymous and often times are interchangeable. In layman terms both Framework and library are codes of JavaScript, the difference lies in their functionality. While frameworks are codes by using which a developer can customize everything within the software/app/website by modifying the codes in accordance with the framework rules, libraries, on the other hand, provide you with the functionality that can be directly used by you while scripting.

Isomorphic

Often termed as a universal framework, they have changed the way everything is done. The main motivation behind the framework was to optimize the website loading time and streamline JS bundles. This was also the main reason behind its popularity.

a Few years ago the client-side and server-side frameworks used to be different. JavaScript was opted more for client-side, because it ignores a few errors providing the user with a seamless experience. Python and PHP were mostly used on the server-side.

When the concept of isomorphic library came into existence, developers started using these libraries. The Isomorphic framework breaks the barrier between server and client-side. It allows developers to use components of the framework on both ends. Because of this the JS bundle also gets a little sleeker as instead of having two frameworks, the solution now share one.

REACT

The reason behind the rising popularity of React JS is because of the unparalleled support and love showed by the community of JavaScript developers. It also helps that Facebook and Instagram back this wonderful library.

React has made quite an impact on both designers and developers, and the feature-rich library has made complex integrations a bit easier. It enables the developers to make encapsulated components that manage their own state and then these components are composed to make complex UI. Features like lazy loading have been successfully implemented on a large scale because of it. Using React Boilerplate and React Starter-kit you can easily make interactive interfaces. The concept of reacting is to put HTML in JS rather than vice versa because JavaScript is more powerful than HTML.

They provide you with a predefined environment and let you code.
The declarative view makes the coding predictable hence the code becomes easy to debug. Using React will push you to make your own framework. Pairing it with Next.js will smoothen things on the server side and all the heavy lifting will be done on the back-end.

React stack usually includes Redux, React.route, React.saga and Node.js.
Myntra to exploits react although they only use parts of it because such a website has minimal interaction between sibling components. React has a high rendering performance when there is a complicated component change with frequent UI changes. They prefer preact because it’s smaller and provides them greater speed. eBay on the other hand spice things up by adding Angular and Ember along with the preact library. That seems to be the trend in modern e-commerce websites.

Npm is a trustworthy package manager. Earlier npm had too many issues as the packages were scattered, Yarn was introduced as directory for npm. It is a godsend for developers, npm has vast community support and npm too has become faster and almost equal to yarn in terms of package management. React and Redux come handy while handling the packages. Start up with your free practical React Redux testing.

Do you know web workers lets you run scripts from within your web page and isolate them from your environment.

Angular

Angular is TypeScript JavaScript which is backed and maintained by Google. This powerful framework has been deployed by Google, Healthcare.gov, Weather.com, Microsoft and Forbes. TypeScript is in itself a pro and a con. While the autonomy of TypeScript makes it easier to debug but the problem arises with the fixed patterns that over complicate simple and easier to do things. Also the steep learning curve makes it tough for people to take initiative and follow this. If you have dealt with object oriented programming in the past then Angular is for you.

Angular is more of a framework rather than library because it tells you how your code must be written. Build tools in angular are complex to understand too. Almost everyone agrees that Angular is bloated as its size is about 150 kb gzipped. Unlike the virtual DOM of React and Vue they have fully fledged DOM that makes it hectic and bloated. Virtual DOM is a new concept that has just started gaining ground but it is fast as now only changes have to be pushed.
Apart from this the syntax and libraries require due research and discipline in Angular.

Vue

Vue is simply the best of both worlds, meaning it lies somewhere between the dictatorship of Angular and democratic chaos of React. This young JS framework has gained some serious popularity without having been associated or backed by any giant. The framework is used by Alibaba, Nintendo and Gitlab. A team of 16 people made Vue into a very simple yet efficient JS framework.

Too many cooks spoil the broth, working on the similar motto ex google employee Evans set out to achieve benchmarks in the JavaScript. Vue uses JS ES5 or ES6 depending upon how the user wishes and also supports TypeScript. The only problem with Vue is that it is comparatively young and doesn’t yet have a lot of libraries and support packages but the npm stats make it clear that it is gaining popularity and its community is growing at a rapid pace. It is a perfect blend of flexibility and coding discipline, it provides just enough framework that you don’t feel bound. Just like React has Redux, Vue has Vuex but if you are familiar you can use Redux with Vue too. Memory allocation and performance with Vue is great and size too is smallest than its competition Frameworks and libraries i.e. 23 k gzipped.

Vue makes use of the latest tech trends and inculcates within it without complicating the whole project. Combining Vue 2.0 with server side rendering (SSR), Vuex and a GraphQL client like Apollo that you end up with super light, fast and robust application while providing a great user and developer experience too.

Check this out: cross document messaging- If you want to send a message or update data on one page to another on the same domain, you don’t need to write any code; just use postMessage.

Polymer

Google introduced polymer to empower the developers to fully take advantage of the latest web technologies. Youtube has renovated it gaming stream using Polymer, it is indeed very fast. The most notable feature in Polymer is the ability to reuse custom elements to interoperate with a browser’s built-in elements. Polymer.dom was released with an intent to enable the developers of the DOM manipulation which paved the way for new libraries and frameworks to be used with it.

Version 2 of Polymer also include data system improvements resulting in easier debugging and making it easier for the data flow between elements. If you deal with array handling a lot then polymer is quite a magician. Polymer version 3 soon to be out has left bower and moved to npm for version management.
Polymer App Toolbox helps you build and deliver cutting-edge Progressive Web Apps with minimal overhead and payload, by leveraging powerful web platform features like Web Components, Service Worker and HTTP/2.

The Toolbox provides a component-based architecture, responsive layouts, a modular router, localization support, turnkey support for local storage and offline caching, and efficient delivery of unbundled app resources. Adopt these features individually, or use them together to build a full-featured Progressive Web App.

Preact

Most of the people are afraid of using React mainly because of its size and performance. Preact was introduced mainly due to the following reasons, and it is amazing how easily you can swap your react with the preact counterparts. Preact is known to have quite a reputation in enhancing the performance of mobile web applications. Changing React & React DOM with Preact-compat paired with Webpack and boom all your worries go out of the window.

Using preact will reduce your main app bundle by at least one third (may vary depending on app), the only catch being that testing gets complicated. The alternative to this maybe using react for development and preact for production. Enzyme which is used in react is preact-compat integrable. Lyft and Uber used preact and it improved the performance because it is simply faster and smaller. Like react it also has virtual DOM that acts as a reagent enhancing its speed.

Hey! Have you heard about DOM Parsing and Serialization? Use the DOMParser and XMLSerializer classes to parse and serialize DOM trees. The XMLSerializer can also serialize HTML strings into an XML document fragment, or vice versa.

Conclusion

Maturity in JS is accepting the fact that there is no ‘best’ overall framework or library. In the end it boils down to what your project requires, and it is always advisable to use more than one library. For instance React components can be used to limit along with Vue quite a lot of times.

If you have a big team then Angular provides an extra edge because of its fixed procedures and syntax. Both Angular and Vue are great if you love using templates. If server-side rendering is the objective then both React and Vue have potential to solve your problems, same will be the case if you are using it for startups.

Personally, though I favor Vue out of all three. With Vue you have functioning frameworks enough for you to start scripting, no additional libraries need to be connected. Most companies are switching from Angular to Vue just to bridge the gap between senior and junior developers because it is easy to learn. The only problem with Vue is that its very young and community needs to adopt it in order for us to realize its full potential. The polymer is futuristic, for now not a lot of developers are using it. After some time time, it will be mainstream and its support
and community will flourish.

JavaScript world is a lot bigger than you might think, expand your horizons and learn more and more about different frameworks and libraries. Tell us about your experiences in the comment section.

Happy Scripting!

Also, LambdaTest offers the most advanced cloud-based software testing platform, which supports various automation frameworks like Selenium, Cypress testing, Playwright, End to end testing and more.

DEV Community: Robin Jangu