Web applications need to be interactive, simple and fast -- an challenge that web designers address with a variety of scripting tools. Swagnik Choudhury of Foradian Technologies decided to use JQuery over plain Javascript when he had to create a compelling web page for version 3.0 of the company's flagship school management software, Fedena. He shares his experience here:
Gone are the days of so called “Static” or “Semi Static” webpages. With the World Wide Web growing past its silver jubilee, web technologies evolving and outperforming their old selves every single day, the requirements and expectations of end-users have also come a long way. So, if you have a web based product, you have to set your sails and keep moving in the direction of this evolution, to stay alive in the race of being the best in your class. And so did we.
As of recent times, the benchmark of a web application is how interactive it is with users, how simply and quickly a user can accomplish the intended purpose with minimum number of page redirection and how fast the server responds to user actions. The modern age web applications mark the minimization of total page count and maximization of single page functionality. To achieve this, from a developer’s point of view, it is important to make the system perform as many actions as possible on the client side, without having to send request to the server. This, in fact takes a lot of unnecessary pressure off the server as well, which in turn improves its response time. And in case server interaction is needed and its response has to be shown to the user, only the required part of the page can be updated, instead of reloading the entire page or redirecting to a new one. As a result, less data has to be downloaded every time which also makes the whole process faster. And this is exactly where client side scripting aides like JQuery and asynchronous server interaction techniques like Ajax, come to the party.
What is JQuery?
JQuery can be formally defined as “a cross-platform JavaScript library designed to simplify the client-side scripting of HTML”. So, ideally JQuery is a collection of functions written in Javascript, and once the library is included, we just need to call these functions in the places we need and with the required parameters if any, and it can do wonders with a minimum effort from the developer’s end.
Why choose JQuery over plain Javascript?
JQuery is nothing but Javascript only. Whatever JQuery can do, the same can be achieved by using plain old Javascript as well. But it would be way more tedious. And it would require significantly adverse knowledge of Javascript as well. Let us take up the example of a simple JQuery function like .slideToggle(). When called upon an HTML element, it provides smooth up and down sliding of the element while hiding and showing it respectively. We can even control several aspects of the process like sliding speed, delay of start after clicking etc. simply by passing appropriate parameters while calling the function. Now imagine, how much time and effort we need to accomplish the same in plain Javascript. So, the prime advantage of JQuery over Javascript is that it saves time, effort and obviously “Lines of Code”, and last but not the least, the developer only needs to know the syntax and what it does, and not the big chunks of underlying javascript code. Moreover, there are hundreds of JQuery plugins and widgets available for every other need of developers and the count is increasing every single day. So, before jumping into sculpting any new idea with JQuery from scratch, we can just go through these already available plugins and widgets, and nine out of ten times we will find one, that can push us much closer to the finish line at once.
How we implemented JQuery in Fedena 3.0
Fedena has always been known for its simplicity and quality user experience. Moving along the path of evolution, Fedena has gone through a massive makeover in its version 3.0. While the designing team has to be given most of the credit, the contribution of JQuery has also been immense. Let us highlight the most important of those.
The Main Menu
The main menu slides down when the “Menu” icon on the top bar is clicked, and it slides up again if we click anywhere in the page except the menu itself. This has been implemented simply by using the .slideUp() and .slideDown() JQuery functions. The links are grouped under different tabs based on their categories. When we click on any tab, an AJAX request is sent through JQuery to fetch the links that come under that category and the lower
is updated with the new links. Once a tab is clicked for the first time, the links for that tab are cached, thereby saving time for result fetching in future. Now, if we hover on a link, and if the link has associated sub-links, the sub-menu comes out to the right of the link, and to the left if sufficient space is not available on the right side. To set the position of the sub-menu, first we keep it hidden, find out the “top” and “left” of the link using the .offset() function, find the heights and widths of the link, the sub-menu and the main menu div using .height() and .width(), do required calculations with them to find out an ideal position for the sub-menu, set its position using .position() and finally show it using .show(). Simple enough.
The Data Palettes
The “Data Palettes” page is the new generation substitute for the old Fedena Dashboard. It provides each user with an informative and customizable homepage instead of just a collection of links. On clicking on the “Manage Dashlets” link at the top, a dashlet selection menu slides down with all the available dashlets. The user has to select the ones he wants to see and hit “Save”. The selection menu slides up and the lower main div is updated with the latest selections. While this process is completed entirely using JQuery and AJAX, the lower main div is where we have used JQuery and AJAX at their best. In fact, everything we do here, is through JQuery and AJAX only. The entire div is divided into 3 columns and each dashlet is assigned a particular column number and sequence number when they are selected. The dashlets can be just dragged and dropped from one position to another, and after each such rearrangement, an AJAX request is sent through JQuery to update the column number and sequence number of each affected dashlet. So, the next time the user comes to this page, he will find it just as he left. Each dashlet gives a particular information for a particular date selected from the attached JQuery Date Selector or the forward and backward date navigators on its two sides. Of the 3 icons in the top-right corner, the first is “Refresh”. The entire content slides up and comes down with the updated set of data. The second one is a “Minimize / Maximize” toggle. Any action on this will update the state in the database as well through AJAX. So if you leave it minimized, you will find it the same the next time you come back. The last one is the “Remove” option which removes the dashlet from the user’s selections. We got the concept of dragging and dropping from the “JQuery Portlet” widget, customized that and included all these features on top of it to bring out our “Data Palettes”.
While, these are the two places where we used JQuery and AJAX the most, there are several other places like the “Manage Quick Links” page, the “User logout” and “Sibling Switching” dropdowns etc, where we have used them as well. In fact, many places where scripting was done previously by prototype or plain Javascript, we changed that to JQuery. Such has been the love and addiction for this powerful and friendly library, since we started working with it.
August 16 2014
Foradian Technologies is a Bangalore-based company that builds innovative web applications for education domain. Fedena, the flagship product of Foradian is multipurpose open source school management software used by educational institutions, students and teachers worldwide for all administration, management and learning related activities. Globally, Fedena is partnering with thousands of educational institutions across developing nations of South America, Africa and Asia and their products and services are used by more than 40,000 schools and colleges in 100+ countries around the world.