Tutorial 11 – Client-side development 2 - RiWAs

1. Distinguish the term “Rich Internet Applications” (RIAs) from “Rich Web-based Applications” (RiWAs). 

Definition
What does Rich Internet Application (RIA) mean?
A Rich Internet Application (RIA) is a Web application with many of the same features and appearances as a desktop application. A RIA requires a browser, browser plug-in or virtual machine to deliver a user application. Data manipulation is handled by the server, and user interface and related object manipulation are handled by the client machine

2. Discuss the key features of RiWAs, which make them more advanced than the standard applications. 

Modern day business applications use variety of programming platforms to develop web-based applications. Some applications may be developed in Java, others in .Net, while some other in Angular JS, Node.js, etc.
Most often than not, these heterogeneous applications need some sort of communication to happen between them. Since they are built using different development languages, it becomes really difficult to ensure accurate communication between applications.
Here is where web services come in. Web services provide a common platform that allows multiple applications built on various programming languages to have the ability to communicate with each other.

3. Identify different technologies and techniques used to develop the client-side components of the RiWAs, explaining their use in dedicated environments. 

Angular. Angular is one of the latest web technologies designed specifically for developing dynamic web applications.
Ruby on Rails. Ruby on Rails is a server-side website technology that makes app development much easier and faster.

• YII.
• Meteor JS.
• Express.js.
• Zend.
• Django.
• Laravel.

4. Explain what Delta-Communication is, discussing the advantages of using it. 

Advantages:

• The digital communication systems are simpler and cheaper compared to analog communication systems because of the advances made in the IC technologies.
• In digital communication, the speech, video and other data may be merged and transmitted over a common channel using multiplexing.
• Using data encryption, only permitted receivers may be allowed to detect the transmitted data. This property is of its most importance in military applications.
• Since the transmission is digital and the channel encoding is used, therefore the noise does not accumulate from repeater to repeater in long distance communications.
• Since the transmitted signal is digital in nature, therefore, a large amount of noise interference may be tolerated.
• Since in digital communication, channel coding is used, therefore, the errors may be detected and corrected in the receivers.
• Digital communication is adaptive to other advanced branches of data processing such as digital signal processing, image processing and data compression, etc.

Disadvantages

• Due to analog to digital conversion, the data rate becomes high. therefore more transmission bandwidth is required for digital communication.
• Digital communication needs synchronization in case of synchronous modulation.

5. Compare and contrast synchronous and asynchronous communication in the context of DC. 

Synchronous vs. asynchronous communication

In synchronous communication multiple parties are participating at the same time and wait for replies from each other. One way to visualize the concept of synchronous communications is to imagine a real-time online chat session in which you exchange messages with a live customer support specialist to get help for your broken toaster oven.

Before message exchange in this synchronous scenario can begin, the sender and receiver must establish a communications session and agree which party is going to be in control. Once the session is established, the two-way, give-and-take conversation occurs in actual time. When you type and send a chat message, the party at the other end is present and actively waiting to receive or hear your message and then immediately respond to it. Both parties are working together at the same time with their clocks in lockstep (time zone differences notwithstanding) -- in other words, synchronized.

Asynchronous communication is different. For example, it occurs when that toaster oven manufacturer doesn't offer real-time chat, forcing you instead to send an email message to a company's tech support department. The recipient is neither expecting nor waiting for an incoming message and therefore may not get to it right away.

6. Compare and contrast different types of technologies and techniques available for DC implementation, indicating their pros and cons. 

Pro 
Technology Can Streamline Tedious Tasks
Taking attendance, tracking grades and even answering common student questions can take up a lot of a teacher’s time. Adding technology to the classroom can help eliminate some of these tasks, freeing the teacher to focus on delivering quality lessons to the class. Programs like Top Hat, for instance, allow a teacher to manage tests securely in a digital environment that automatically grades and tracks them, while also allowing greater interaction with students and collaboration in the classroom.

Technology Is a Part of Modern Life
A teacher’s goal is to develop students who are prepared for life as an adult, and today’s adult world is one that utilizes technology. The more opportunities a student has to work with technology in school, the less intimidation the student will feel when entering the workforce and trying to embrace technology in their occupation.

Technology Can Increase Student Engagement
When used well and woven through a lesson by a skilled teacher, technology can increase student engagement. One way to do this is through comprehension checks. Teachers can use tools to check students’ understanding during the lesson, allowing them to make adjustments if students are struggling to grasp a concept. Some tools that allow for this include:

Padlet ― This free tool allows students to add their responses to a classroom display that allows for comprehension checks and collaboration.
Socrative ― This free tool allows teachers to track student progress, while also providing options for using questions to check for understanding during a lesson.
Plickers ― This tool uses QR codes on cards held by students, which means it can be used even in classrooms that do not offer student devices.
In addition, teachers who use technology to present lessons can engage students more easily, because technology is a format most students are drawn to naturally.

Con 
Teachers Fear Adding More Screen Time
Today’s students are getting far more screen time then they should have. According to the Common Sense Census: Media Use by Tweens and Teens study, students ages 8 through 12 spend an average of six hours of time daily on screens for entertainment. This increases to almost nine hours for high school and upper middle school students. Adding technology in the classroom may add more screen time to that statistic. While the screens are used educationally, the overall impact of screen time on the brain is going to increase.

Technology May Not Be Utilized to the Fullest
Adding a computer to the classroom that students can play on when done with their work, use to search Google and access for word processing purposes is not using technology to the fullest in the classroom. In order for technology to be used effectively in the classroom, teachers must be trained on how to incorporate it into their lesson planning well, weaving their instruction around the use of technology.

Technology Can Be a Distraction
Students who have a tablet or computer in front of them during a lesson are going to be tempted to play instead of listening. Teachers must set clear expectations for the appropriate use of technology in order to ensure that this is not a problem.

Technology clearly has both pros and cons when used in the classroom, but the bottom line is this: We are living in a digital world, and students are interacting with technology, and possibly even bringing it with them to school, on a daily basis. The benefits of using technology in the classroom are far-reaching and need to be embraced by modern educators who seek to prepare students for adult life.

7. Discuss the history and the evolution of the XHR and AJAX. 

AJAX is a developer's dream, because you can:

• Update a web page without reloading the page
• Request data from a server - after the page has loaded
• Receive data from a server - after the page has loaded
• Send data to a server - in the background

8. Discuss the role of the DC-engine in RiWAs. 

A DC motor is any of a class of rotary electrical machines that converts direct current electrical energy into mechanical energy. A DC motor's speed can be controlled over a wide range, using either a variable supply voltage or by changing the strength of current in its field winding

Advantages of DC motors
The primary advantage of the DC motor is that it can develop constant torque over a wide speed application. Power supply is an important consideration in the application of DC motors. The most common way to provide DC voltage to a motor from an AC line is through the use of an electronic drive.

9. Explain the role of the DC-Bus, indicating how a web-service can be effectively used to implement it. 

The DC bus in a VFD has found its usage as the technology has evolved. Some of the applications of DC bus, ... Using the DC bus as a discharge medium in the case of faster braking of load. A resister connected to DC bus can act as a brake resister which dissipates surge power generated by fast decelerating load.

12. Discuss the variation of the jQuery ajax() function, explaining all the related options and events. 

The jQuery $.ajax() function is used to perform an asynchronous HTTP request. It was added to the library a long time ago, existing since version 1.0. The $.ajax()function is what every function discussed in the previously mentioned article calls behind the scene using a preset configuration. The signatures of this function are shown below:

$.ajax(url[, options])
$.ajax([options])

The url parameter is a string containing the URL you want to reach with the Ajax call, while options is an object literal containing the configuration for the Ajax request.

• accepts: The content type sent in the request header that tells the server what kind of response it will accept in return
• async: Set this options to false to perform a synchronous request
• beforeSend: A pre-request callback function that can be used to modify the jqXHRobject before it is sent
• cache: Set this options to false to force requested pages not to be cached by the browser
• complete: A function to be called when the request finishes (after success and error callbacks are executed)
• contents: An object that determines how the library will parse the response
• contentType: The content type of the data sent to the server
• context: An object to use as the context (this) of all Ajax-related callbacks
• converters: An object containing dataType-to-dataType converters
• crossDomain: Set this property to true to force a cross-domain request (such as JSONP) on the same domain
• data: The data to send to the server when performing the Ajax request
• dataFilter: A function to be used to handle the raw response data of XMLHttpRequest
• dataType: The type of data expected back from the server
• error: A function to be called if the request fails
• global: Whether to trigger global Ajax event handlers for this request
• headers: An object of additional headers to send to the server
• ifModified: Set this option to true if you want to force the request to be successful only if the response has changed since the last request
• isLocal: Set this option to true if you want to force jQuery to recognize the current environment as “local”

Tutorial 10 – Client-side development 1 - jQuery

1. Is jQuery a framework or a library? Discuss. 

jQuery: It's a library, not a framework

Is jQuery a JavaScript library?

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.

2. Explain the features provided by jQuery? 

JQuery Features

1. Simple and easy: It have predefined method using you can perform any task easily compare to JavaScript. And it is easy to learn.
2. Lightweight: It is very lightweight library - about 19KB in size ( Minified and gzipped ).
3. CSS manipulation: It have predefined css() method for manipulate style for any Html elements.
4. Html manipulation: The jQuery made it easy to select DOM elements, traverse them and modifying their content.
5. Cross browser support: It support all modern web-browser including IE-6.
6. Event handling: It support event handling like click mouse button.
7. JavaScript Library: It is JavaScript library.
8. Ajax Support: It support ajax, you can develop a responsive and feature-rich site using AJAX technology.
9. Built-in Animation: It have predefined method "animate()" for create custom animation on web-page

3. Discuss the advantages and disadvantages of using jQuery in different project scales.

The advantages of jQuery

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. In fact, one of the main reasons why Resig and his team created jQuery was to buy time (in the web development world, time matters a lot).

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.


The disadvantages of jQuery

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.

4. Explain how the jQuery handles the issues related to partial page loads to the browser. 

Load ASP.NET MVC Partial Views Dynamically Using JQuery

Most of the times ASP.NET MVC views are rendered as a result of user navigating to some action. For example, when a user navigates to /home/index in the browser (either through address bar or through a hyperlink), ASP.NET MVC executes the action method and usually returns a view to the browser. This means each view is rendered as a result of a full GET or POST request. At times, however, you may want to load views dynamically through Ajax. This way you can render contents of a view without full page refresh.

5. Discuss the selectors and their use in jQuery. 

What is a jQuery selector?
A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria. Simply you can say, selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.

jQuery reads selectors from right to left.
Using an exact ID is fastest, followed by using an exact tag name, because they use optimized JavaScript-native methods.
Native CSS selectors like :first-child are faster than jQuery selectors like :first .

6. Compare and contrast the use of CSS advanced selectors in jQuery and jQuery’s DOM traversal API, indicating the pros and cons of them. 

CSS advanced selectors 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.


7. Explain the importance of DOM objects and DOM processing in jQuery. 

The functions associated with these objects determine how the objects may be manipulated, and they are part of the object model. The Document Object Model currently consists of two parts, DOM Core and DOM HTML. The DOM Core represents the functionality used for XML documents, and also serves as the basis for DOM HTML.

8. Discuss the benefits of using jQuery event handling over HTML event attributes, providing a list of events supported by jQuery.

jQuery Event Methods
Event methods trigger or attach a function to an event handler for the selected elements.
The following table lists all the jQuery methods used to handle events.

Commonly Used jQuery Event Methods
click() The click() method attaches an event handler function to an HTML element.
dblclick() The dblclick() method attaches an event handler function to an HTML element.

• mouseenter() 
• mouseleave() 
• mousedown() 
• mouseup() 

 9. Explain how to declare jQuery event handlers outside the $(document).ready() function, indicating the need for that, and the related issues and solutions for them. 

What is $( document .ready function () in jquery?

Definition and Usage. The ready event occurs when the DOM (document object model) has been loaded. Because this event occurs after the document is ready, it is a good place to have all other jQuery events and functions. Like in the example above. The ready() method specifies what happens when a ready event occurs.

10. Identify a list of advanced features provided by jQuery and explain their use towards improving the user experience

1) Use the Latest Version of jQuery

With all the innovation taking place in the jQuery project, one of the easiest ways to improve the performance of your web site is to simply use the latest version of jQuery. Every release of the library introduces optimizations and bug fixes, and most of the time upgrading involves only changing a script tag.

You can even include jQuery directly from Google's servers, which provide free CDN hosting for a number of JavaScript libraries.

<!-- Include a specific version of jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<!-- Include the latest version in the 1.6 branch -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

The latter example will include the latest 1.6.x version automatically as it becomes available, but as pointed out on css-tricks, it is cached only for an hour, so you better not use it in production environments.

2) KEEP SELECTORS SIMPLE

Up until recently, retrieving DOM elements with jQuery was a finely choreographed combination of parsing selector strings, JavaScript loops and inbuilt APIs like getElementById(), getElementsByTagName() and getElementsByClassName(). But now, all major browsers support querySelectorAll(), which understands CSS query selectors and brings a significant performance gain.

However, you should still try to optimize the way you retrieve elements. Not to mention that a lot of users still use older browsers that force jQuery into traversing the DOM tree, which is slow.

$('li[data-selected="true"] a')   // Fancy, but slow
$('li.selected a')  // Better
$('#elem')  // Best

3) JQUERY OBJECTS AS ARRAYS

The result of running a selector is a jQuery object. However, the library makes it appear as if you are working with an array by defining index elements and a length.
// Selecting all the navigation buttons:
var buttons = $('#navigation a.button');

// We can loop though the collection:
for(var i=0;i<buttons.length;i++){
    console.log(buttons[i]);    // A DOM element, not a jQuery object
}

// We can even slice it:
var firstFour = buttons.slice(0,4);

If performance is what you are after, using a simple for (or a while) loop instead of $.each(), can make your code several times faster.

4) THE SELECTOR PROPERTY

jQuery provides a property which contains the selector that was used to start the chain.
$('#container li:first-child').selector    // #container li:first-child
$('#container li').filter(':first-child').selector    // #container li.filter(:first-child)

Although the examples above target the same element, the selectors are quite different. The second one is actually invalid - you can't use it as the basis of a new jQuery object. It only shows that the filter method was used to narrow down the collection.

5) CREATE AN EMPTY JQUERY OBJECT

Creating a new jQuery object can bring significant overhead. Sometimes, you might need to create an empty object, and fill it in with the add() method later.
var container = $([]);
container.add(another_element);

This is also the basis for the quickEach() method that you can use as a faster alternative to the default each().

6) SELECT A RANDOM ELEMENT

As I mentioned above, jQuery adds its own selection filters. As with everything else in the library, you can also create your own. To do this simply add a new function to the $.expr[':'] object. One awesome use case was presented by Waldek Mastykarz on his blog: creating a selector for retrieving a random element. You can see a slightly modified version of his code below:
(function($){
    var random = 0;

    $.expr[':'].random = function(a, i, m, r) {
        if (i == 0) {
            random = Math.floor(Math.random() * r.length);
        }
        return i == random;
    };

})(jQuery);

// This is how you use it:
$('li:random').addClass('glow');