Overview

Skill Level: Beginner

Developers or Architects with certain basic level of scripting exposure and choices to make

How to choose which of the java scripting tool is beneficiary to achieve the required functionality. What important parameters to be looked into and decision factors to be considered while making the final choice.

Ingredients

One should have an experience to Javascripting or know how an UI / Visualizations are built, what does it take for development of the required functionality and what would be the time frame associated and importantly considering the scalability and use of an application

Step-by-step

  1. Understanding of jQuery

    jQuery is a small, fast, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler. jQuery simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

    jQuery is a lightweight and feature-rich JavaScript Library that helps web developers by simplifying the usage of client-side scripting for web applications using JavaScript. It extensively simplifies using JavaScript on a website and it’s lightweight as well as fast.

    So, using jQuery, we can:

    • Apply styles to make UI more attractive
    • Has nothing to do with models
    • Easily manipulate the contents of a webpage

    JQuery doesn’t have

    • Don’t have a two-way binding feature
    • Cross browser functionality enhancement or requirement is quite poor in jQuery
    • Becomes complex and difficult to maintain when the size of a project increases
    • Sometimes you have to write more code to achieve the same functionality as in Angular.Js

    jQuery has seen lot of improvements compared to years back when it was used with limited functionalities. The issues fixed by jQuery aren’t issues anymore.

     

    It looks like most probably jQuery is going to go away in the near future of technology changes as it has limitation to address larger scale of application development and integration with different FRAMEWORKS that are being introduced

  2. Basics of AngularJS

    Angular is a way bigger framework which is especially suited for big enterprise applications

    In AngularJS you have to have a very structured view and approach on what you want to accomplish. It is scarcely following a linear fashion to complete a task, but rather, the exchanges between various objects take care of the requests and actions, which, then, is necessary as angular is an MVC-Based framework. It also requires an at least general blueprint of the finalized application, since coding depends much on how you want the interactions to be completed.

    Angular JS teaches you how to CODE and accomplish a goal, not just accomplish a goal by any means. Worth to mention that AngularJS fully utilizes the core and heart of Javascripts and paves the way for you to incorporate in your app, the techniques such as DI (dependency-injection). To work with angularJS you should (or must) learn more elevated techniques of coding with Javascript.

    AngularJS is for developing heavy web applications. AngularJS can use jQuery if it’s present in the web-app when the application is being bootstrapped. If it’s not present in the script path, then AngularJS falls back to its own implementation of the subset of jQuery.

    AngularJS is a product by none other the Search Engine Giant Google and it’s an open source MVC-based framework (considered to be the best and only next generation framework). AngularJS is a great tool for building highly rich client-side web applications.

    As being a framework, it dictates us to follow some rules and a structured approach. It’s not just a JavaScript library but a framework that is perfectly designed (framework tools are designed to work together in a truly interconnected way).

    In comparison of features jQuery Vs AngularJS, AngularJS simply offers more features:

    • Two-Way data binding
    • REST friendly
    • MVC-based Pattern
    • Deep Linking, Template
    • Form Validation
    • Dependency Injection
    • Localization
    • Full Testing Environment
    • Server Communication

    Off lately there is a new thing called Angular Express that is being most used by developers given that it provides more enhanced functionalities of data management etc

  3. Overview of reactJS

    ReactJS and React Native are the new technologies for web and mobile development introduced by Facebook. The project was started by a Facebook software engineer, in 2011. To simplify the development process and foster a more comfortable user experience, he decided to create a library that would allow for building a web interface with JavaScript.

    ReactJS library works on the basis of JavaScript and XHP symbiosis. It has been realized that ReactJS was working faster than any other implementation of its kind.

    What is ReactJS? ReactJS is a JavaScript library that combines the speed of JavaScript and uses a new way of rendering webpages, making them highly dynamic and responsive to user input. The product significantly changed the Facebook approach to development. After the library was released as an open-source tool in 2013, it became extremely popular due to its revolutionary approach to programming user interfaces

  4. Other JavaScript tools factors

    Other Javascript tool one has to be aware of atleast knowing what it is there for

    underscoreJS –> Underscore.js is a JavaScript library which provides utility functions for common programming tasks, It is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects.

    Underscore provides over 100 functions that support both your favorite workaday functional helpers: map, filter, invoke — as well as more specialized goodies: function binding, javascript templating, creating quick indexes, deep equality testing, and so on. In reality, i have personally used uncerscoreJS a lot when are working on arrays sort of data where lot of conditions has to be applied and get only the required data sets, this was very helpful

    dojoJS –> Dojo Toolkit is an open source modular JavaScript library designed to ease the rapid development of cross-platform, JavaScript/Ajax-based applications and web sites. dojoUI comes with lot of pre-built libraries you need to build a Web app. Language utilities, UI components, and more, all in one place, designed to work together perfectly. Personally i felt the learning curve on dojo is little higher. But this one of the tools that provides libraries for data management, mobile development, easy integration to NodeJS, widgets, charting, menu handling, data grid and tree handling options.

    VueJs & Others

  5. Comparison or differences

    1) Size of the application, This is one of the important view point one should have when starting any work around Javascript. Some times some of the applications will be a quick turn around of simple charts or develop simple functionalities. In such cases, it is advisable to go with jQuery. Angular & reactJS is good for larger applications

    2) Need of a Framework, One should know what i Javascript Framework and how exactly it is going to help them in application development. This is very important knowledge any of the developers or solution architects should be aware of in not being into a decision position. This defines or puts a method of how one is going to decide the coding structures etc

    3) Security enablement –> Security enablement is not a ready feature avaialble unlike any of the reporting tool. This needs to be carefully thought and implemented. Reason for bringing out this is often the business teams assumes that this is handled by developers during design and development.

    4) State Management –> Statement management is a very key functionality one has to be aware of. This is something we would not envision during the initial development stage, but for sure we will face situiations during the development and wonder if there is a simple and easy way to deal with. For such requirement, i guess Angular and reactJS provides more easier and better options to handle during the course of development

    5) Performance –> Performance is one of the key area where most of the business expects when dealing with user interactions. Personally haven’t come across any of the Javascript or reporting tool which can really meet the realiistic expectatin of the businesses on performance side. There is always one or the other expectations gap. Frankly AngularJS or reactJs is not great in meeting the performance expectation specially if we get into multi threading session of the UI application.

    6) Single Page appliction –> A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. Multi page application (MPA is a traditional kind) of web application. This means that every time the application needs to display the data or submit data back to server it has to request a new page from the server and then render it in the web browser. Definition itself says, SPA application is going to be faster than MPA.

    SPA is fast, as most resources (HTML+CSS+Scripts) are only loaded once throughout the lifespan of application. Only data is transmitted back and forth

    SPA functionality suits very well when ever the UI / functionalities are going to get developed and implemented as stand alone application.

    Small snippet of comparison chart across identified script tools

    Javascript_comparison_chart

     

    Summary –> Reasong for outling some of the above details is to help as a quick guide for any developers / decision makers as to what are the important aspects to be looked for and accordingly take the decisions.

    Disclaimer –> The information content shared above is purely based on knowledge gained working as part of my job functions. Shall keep sharing more and more information as i come across during my future days. Any positive input from people will always help re-fining this article better and improvise on sharing knowledge back to people. Positive inputs / comments will help a lot.

Join The Discussion