Client-Side Development Rich Web based Applications

Client-Side Development Rich Web based Applications

Rich Internet applications (RIA) are Web-based applications that have some characteristics of graphical desktop applications. Built with powerful development tools, RIAs can run faster and be more engaging. They can offer users a better visual experience and more interactivity than traditional browser applications that use only HTML and HTTP.

Early Internet users mostly exchanged text-based electronic mail messages. Then along came HTML and the World Wide Web, and soon people were looking at graphically enhanced Web pages designed by specialists and served up on demand. All these applications mainly involved reading text on-screen and dealing with material that was preformatted and essentially static.

To do tasks like manipulate data and interact with sophisticated business logic, users relied on specialized software on their computers and networks. Then someone thought about providing applications through standard Web pages that people could access with their browsers.


[ Related: Tech event calendar: Upcoming shows, conferences and IT expos ]
That this was even possible was a tribute to the power of the Web, but the underlying technology was also a terrible limitation. The static, stateless nature of HTTP meant that interaction was one-sided and disconnected, relegated to an asynchronous style reminiscent of green-screen mainframe applications from the 1970s.

These days, we are doing much better.

Today, programmers can embed almost any functionality they want inside a Web-based graphical interface, making it look and act as if it were traditional, shrink-wrapped software.

With modern tools, developers can create complex application screens using a variety of mixed media such as multiple fonts, bit-map and vector graphic files, animations, online conferencing, audio and video. Those applications offer functionality that goes far beyond mere reading and browsing, and they can be served up over the Web. We call these rich Internet applications.

[ Learn Java from beginning concepts to advanced design patterns in this comprehensive 12-part course! ]
RIA Characteristics
A number of key features differentiate RIAs from traditional Web applications.

Direct interaction: In a traditional page-based Web application, interaction is limited to a small group of standard controls: checkboxes, radio buttons and form fields. This severely hampers the creation of usable and engaging applications. An RIA can use a wider range of controls that allow greater efficiency and enhance the user experience. In RIAs, for example, users can interact directly with page elements through editing or drag-and-drop tools. They can also do things like pan across a map or other image.

Partial-page updating: Standard HTML-based Web pages are loaded once. If you update something on a page, the change must be sent back to the server, which makes the changes and then resends the entire page. There's no other way to do it with HTTP and HTML. With traditional Web-based apps, network connectivity issues, processing limitations and other problems require users to wait while the entire page reloads. Even with broadband connections, wait times can be long and disruptive.

But RIAs incorporate additional technologies, such as real-time streaming, high-performance client-side virtual machines, and local caching mechanisms that reduce latency (wait times) and increase responsiveness. A number of commercial development tools (see below) permit this partial-page updating.

Rich Internet applications: The tools
The list of current technologies that can be used to build modern RIAs is long. Here are some of them:

• AJAX
• Adobe Flash, Flex and Adobe Integrated Runtime (AIR)
• Microsoft Silverlight
• Curl (an object-oriented language with embedded HTML markup)
• Google Gears
• OpenLaszlo and Webtop
• Oracle WebCenter

Better feedback: Because of their ability to change parts of pages without reloading, RIAs can provide the user with fast and accurate feedback, real-time confirmation of actions and choices, and informative and detailed error messages.

Consistency of look and feel: With RIA tools, the user interface and experience with different browsers and operating systems can be more carefully controlled and made consistent.

Offline use: When connectivity is unavailable, it might still be possible to use an RIA if the app is designed to retain its state locally on the client machine. (Developments in Web standards have also made it possible for some traditional Web applications to do that.)

Performance impact: Depending on the application and network characteristics, RIAs can often perform better than traditional apps. In particular, applications that avoid round trips to the server by processing locally on the client are likely to be noticeably faster. Offloading such processing to the client machines can also improve server performance. The downside is that small, embedded and mobile devices -- which are increasingly common -- may not have the resources necessary to use such apps.

What is Ajax and Where is it Used in Technology?

Ajax is not a programming language or a tool, but a concept. Ajax is a client-side script that communicates to and from a server/database without the need for a postback or a complete page refresh. The best definition I’ve read for Ajax is “the method of exchanging data with a server, and updating parts of a web page – without reloading the entire page.” Ajax itself is mostly a generic term for various JavaScript techniques used to connect to a web server dynamically without necessarily loading multiple pages. In a more narrowly-defined sense, it refers to the use of XmlHttpRequest objects to interact with a web server dynamically via JavaScript.

Benefits of Ajax
There are 4 main benefits of using Ajax in web applications:

Callbacks: Ajax is used to perform a callback, making a quick round trip to and from the server to retrieve and/or save data without posting the entire page back to the server. By not performing a full postback and sending all form data to the server, network utilization is minimized and quicker operations occur. In sites and locations with restricted bandwidth, this can greatly improve network performance. Most of the time, the data being sent to and from the server is minimal. By using callbacks, the server is not required to process all form elements. By sending only the necessary data, there is limited processing on the server. There is no need to process all form elements, process the ViewState, send images back to the client, or send a full page back to the client.
Making Asynchronous Calls: Ajax allows you to make asynchronous calls to a web server. This allows the client browser to avoid waiting for all data to arrive before allowing the user to act once more.
User-Friendly: Because a page postback is being eliminated, Ajax enabled applications will always be more responsive, faster and more user-friendly.
Increased Speed: The main purpose of Ajax is to improve the speed, performance and usability of a web application. A great example of Ajax is the movie rating feature on Netflix. The user rates a movie and their personal rating for that movie will be saved to their database without waiting for the page to refresh or reload. These movie ratings are being saved to their database without posting the entire page back to the server.
Technical Aspects of Ajax
Ajax callbacks can be done by instantiating an XMLHttpRequest object in the client-side JavaScript. The XMLHttpRequest object can be used to directly call server-side objects like pages and web services. These pages and web services will either save and/or return data.

segue-blog-what-is-ajax-and-where-is-it-used-in-technology

Ajax was originally an acronym for Asynchronous JavaScript and XML. “Asynchronous” means that multiple events are happening independently of one another. Once a client initializes an Ajax callback to the server, the client will not need to wait for a response and can continue to use the web application while the request is being processed. Once done, the server will send a response back to the client and the client will process it as necessary.

What Advances have Been Made to Ajax?
JavaScript is the client-side programming language and XML is a markup language to define data. JSON is another markup language to define data. JSON (JavaScript Object Notation) is much easier to use with JavaScript than XML. When it comes to Ajax and JavaScript, JSON Web Services are replacing XML Web Services.

Another major advance to JavaScript and Ajax is the JavaScript object library called jQuery. This free, open-source software is a wrapper around JavaScript. jQuery is used to easily write client-side JavaScript to navigate and manipulate a page and make asynchronous Ajax callbacks.

By using jQuery and JSON Web Services, Ajax callbacks have become standard programming practices for designing and developing web applications.

The Ajax Control Toolkit is a suite of controls created by Microsoft that is integrated into Visual Studio and can be dragged and dropped onto web forms just like html and server controls. These controls are intended to be used for Ajax callbacks. However, they can also be used as normal client and or server controls. For example, Asp.Net does not come with the Tabs controls. However, the Ajax Control Toolkit does. The Tab control can postback to the server just like server controls.

Where Should Ajax be Used?
Ajax should be used anywhere in a web application where small amounts of information could be saved or retrieved from the server without posting back the entire pages. A good example of this is data validation on save actions. Another example would be to change the values in a drop down list-box based on other inputs, such as state and college list boxes. When the user selects a state, the college list box will repopulate with only colleges and universities in that state.

Another great example is when the client needs to save or retrieve session values from the server, based on a user preference such as the height, width or position of an object. Adjusting the width could make a callback to the server to set the session variable for the new width. This way, whenever the page is refreshed, the server can adjust the object’s width based on this session variable. Otherwise, the object would go back to its initial default width.

Other features include text hints and autocomplete text boxes. The client types in a couple of letters and a list of all values that start with those letters appear below. A callback is made to a web service that will retrieve all values that begin with these characters. This is a fantastic feature that would be impossible without Ajax and is also part of the Ajax Control Toolkit.

Segue recently used Ajax to support a client application that had problems due to limited bandwidth and page size. The combination caused the application to take too long to retrieve data and display it on the page. Sometimes, the web server would simply not have the resources to handle the request and timeout. The best solution for this issue was Ajax.


To solve this problem, we created JSON Web Services on the web server in order to retrieve the details about the selected item. The JSON web service would retrieve the data and convert into JSON and return a JSON string. Instead of posting back to the server, the client would call the web service when an item was selected from the list box. We used jQuery to make an asynchronous Ajax call to the web service. Once the client retrieved the data back from the web service, more client side processing was done to display the information on the page. The time it took to display the details on the page after the item was selected was instantaneous. There was no page flicker, refresh or postback involved.

References:
https://www.seguetech.com/ajax-technology/
https://www.computerworld.com/article/2551058/rich-internet-applications.html

Client-Side Development jQuery.

Introduction

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

It is simply a framework/library, which can hide the complexity of the pure JS

·         Cross-browser compatible

·         Backward compatible

The purpose of jQuery is to make it much easier to use JavaScript on your website.

Features provided by jQuery

jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

The jQuery library contains many features:

·         Reveal GUI elements

·         Change content (based on users’ actions)

·         Change CSS

·         Delta-Communication (Ajax)

·         HTML/DOM manipulation

·         CSS manipulation

·         HTML event methods

·         Effects and animations

·         Utilities such as feature detection

·         Deferred and Promise objects to control asynchronous processing

·         JSON parsing

·         Extensibility through plug-ins

·         Cross-browser support

DOM manipulation − The jQuery made it easy to select DOM elements, negotiate them and modifying their content by using cross-browser open source selector engine called Sizzle.

Event handling − The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.

AJAX Support − The jQuery helps you a lot to develop a responsive and featurerich site using AJAX technology.

Animations − The jQuery comes with plenty of built-in animation effects which you can use in your websites.

Lightweight − The jQuery is very lightweight library - about 19KB in size (Minified and gzipped).

Cross Browser Support − The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+

Latest Technology − The jQuery supports CSS3 selectors and basic XPath syntax.

The advantages and disadvantages of using jQuery in different project scales

The main advantage of jQuery is that it is much easier than its competitors. You can add plugins easily, translating this into a substantial saving of time and effort. The open source license of jQuery allows the library to always have constant and fast support, constantly publishing updates. The jQuery community is active and extremely hardworking. Another advantage of jQuery over its competitors such as Flash and pure CSS is its excellent integration with AJAX.

·         jQuery is flexible and fast for web development

·         It comes with an MIT license and is Open Source

·         Bugs are resolved quickly

·         Excellent integration with AJAX

·         It has an excellent support community

·         It has Plugins

One of the main disadvantages of jQuery is the large number of published versions in the short time. It does not matter if you are running the latest version of jQuery, you will have to host the library yourself (and update it constantly), or download the library from Google (attractive, but can bring incompatibility problems with the code).

In addition to the problem of the versions, other disadvantages that we can mention:

jQuery is easy to install and learn, initially. But it’s not that easy if we compare it with CSS

If jQuery is improperly implemented as a Framework, the development environment can get out of control.

How the jQuery handles the issues related to partial page loads to the browser

Suppose when we want to load different views conditionally inside a single view. We are rendering nested view inside a single view/page based on menu items click in the parent view. If I click on the back button or forward button of the browser, it will not work as usual when we navigate from one page to another in web application and the way it saves the navigation history of different pages.

So, for the case, when we are on the same page, but we are setting the nested view dynamically based on condition, we need some identifying criteria for each different nested view in the same page/View.

we use the concept of Fragment URLs for identification purpose. We will use the concept of hash-based URLs which contain the character of sequences preceded by # at the end of actual URL of page/View. We can append different character sequences preceded by # For each different nested view inside a single view which is set conditionally. The benefit of using this technique is that these are stored in the browser history and with this, if we click on back & forward buttons, the page is not refreshed and only the characters sequences changes, that we can handle partial view updates on the Page on browser events.

The selectors and their use in jQuery

jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

jQuery can use CSS selectors

Additionally, provides advanced selectors to access elements faster and efficiently.

The element Selector

The jQuery element selector selects elements based on the element name.

You can select all <p> elements on a page like this:

$("p")

The #id Selector

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.

An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.

To find an element with a specific id, write a hash character, followed by the id of the HTML element:

$("#test")

The .class Selector

The jQuery .class selector finds elements with a specific class.

To find elements with a specific class, write a period character, followed by the name of the class:

$(".test")

More Examples of jQuery Selectors

The importance of DOM objects and DOM processing in jQuery

The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. In the DOM specification, the term "document" is used in the broad sense - increasingly, XML is being used as a way of representing many kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents. Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data.

With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions - in particular, the DOM interfaces for the internal subset and external subset have not yet been specified.

jQuery provides API to traverse through the DOM. These DOM navigating APIs are faster than advanced CSS like selectors.

The jQuery Object

When creating new elements (or selecting existing ones), jQuery returns the elements in a collection. Many developers new to jQuery assume that this collection is an array. It has a zero-indexed sequence of DOM elements, some familiar array functions, and a. length property, after all. The jQuery object is more complicated than that.

DOM and DOM Elements

The Document Object Model (DOM for short) is a representation of an HTML document. It may contain any number of DOM elements. At a high level, a DOM element can be thought of as a "piece" of a web page. It may contain text and/or other DOM elements. DOM elements are described by a type, such as <div>, <a>, or <p>, and any number of attributes such as src, href, class and so on. For a more thorough description, refer to the official DOM specification from the W3C.

Elements have properties like any JavaScript object. Among these properties are attributes like. tagName and methods like .appendChild(). These properties are the only way to interact with the web page via JavaScript.

The jQuery Object

It turns out that working directly with DOM elements can be awkward. The jQuery object defines many methods to smooth out the experience for developers. Some benefits of the jQuery Object include:

Compatibility – The implementation of element methods varies across browser vendors and versions.

Convenience – There are also a lot of common DOM manipulation use cases that are awkward to accomplish with pure DOM methods. For instance, inserting an element stored in new Element after the target element requires a rather verbose DOM method:

Getting Elements Into the jQuery Object

When the jQuery function is invoked with a CSS selector, it will return a jQuery object wrapping any element(s) that match this selector.

Purpose of DOM

The DOM defines a standard for accessing documents: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

DOM Element Methods

.get()

Retrieve the DOM elements matched by the jQuery object.

.index()

Search for a given element from among the matched elements.

Also in: Deprecated > Deprecated 1.8 | Removed

.size()

Return the number of elements in the jQuery object.

.toArray()

Retrieve all the elements contained in the jQuery set, as an array.

Advanced features provided by jQuery and explain their use towards improving the user experience

Form Manipulations

Forms are always an integral part of a website. It is so common that you can find them on almost every blog. This makes it essential for developers to focus on forms and refine them for the best user experience possible.

1. jQuery Login Form

As a web developer, you can either use a plugin or build a sliding panel from scratch.

2. Hide Some Useful Info with Spoiler Revealer

You can improve how users reveal information thanks to the spoiler revealer technique. You can find a tutorial on the subject here. It is elegant and provides a sense of exploration for the end user.

3. Form Submission Without Page Refresh

When a form is submitted, the page refreshes in order to send the info to the server. However, you can make it look swift by using jQuery to do form submissions without a page refresh. CodeTuts has a clear tutorial on the topic.

Navigation Menus

Navigations also plays a crucial role in user experience. They dicated how a user navigates through the website and a good navigation menu determines how the user feels about the website.

4. jQuery Plugin for Smooth Navigation

You can use a lot of jQuery plugins to ensure smooth navigation. There are many plugins out there and that’s why we recommend reading the list of 20 jQuery plugins which will let you improve the user experience. If you fancy not using a plugin, you can also check out the tutorials on how to create different types of menus using jQuery. The choice of which navigation menu technique depends on you.

You can also create simple jQuery tabs which can come handy during navigation. The tabs should be responsive and offer smooth navigation. You can follow the detailed tutorial on Web Designer Hut to learn more.

Content Manipulation

You can also manipulate content using jQuery. By doing so, you can customize the content according to your choice and customize it for the best user experience possible.

5. Text Size Slider

User experience is also about providing users an option to change things which, in return, gives them more control. Therefore, you may want to give your readers the ability to change the text size slider. You can implement it either by using a plugin or by manually coding it.

6. jQuery Pagination

Pagination provides the necessary pages to the website and it helps readers to easily digest the content better.

7. Content Slider

With a content slider, you can manipulate content in a cool format. Want to slow down the slider or change how the slider animates? If you do, you can customize the slider with jQuery. You can also create a fully custom slider if you want.

You can create a simple content slider with the help of CSS3 and jQuery. Moreover, you can use check out the content slider plugins available online.

Animation Effects

Animations also play a crucial role in improving user experience. There are tons of jQuery animation libraries that you can utilize to make the website pop, not only in terms of looks but also user experience.

8. Smooth Content Scrolling

Adding small bits of customization to scrolling can add value to your website. Make scrolling not only fun but a seamless experience. You can also opt to put all the posts on a single page and offer unlimited scrolling. Many websites do that, including the Forbes website. The flow is what you need. Scrolling can also open interactivity options that might be missing from the vanilla website.

You can use plugins to achieve the desired result. There are many different types of animations and functionalities that you can achieve with these plugins. Check out the comprehensive article by CSS Author on the jQuery scrolling plugin which contains 75+ plugins. You can also check out a detailed tutorial on them and get a better understanding of implementing custom jQuery scrolling.

9. jQuery Fading Menu

You can also improve the menu by adding fading animation to it. This animation will make the menu react to user input, thus improving interactivity and user experience. It will also entice visitors to click and reduce bounce rate.

Image Manipulation

If you are running an image-heavy website, you may want to add image manipulation features to it. Clearly, there are plenty of ways you can add functionality.

10. Image Cropping and Zoom

Our last jQuery technique that can further improve user experience is image cropping and zoom. You can use Cropper, a jQuery image cropping plugin to add functionality to the website. You can also use jQuery zoom by Jack Moore to get the desired results.

References:

https://api.jquery.com/category/miscellaneous/dom-element-methods/

https://www.w3.org/TR/WD-DOM/introduction.html

https://dzone.com/articles/10-new-jquery-techniques-for-better-user-experienc

https://www.w3schools.com/jquery/jquery_selectors.asp

https://jquery.com/

https://www.lorecentral.org/2017/11/advantages-disadvantages-jquery.html

https://www.w3schools.com/jquery/jquery_intro.asp

https://en.wikipedia.org/wiki/JQuery