Sunday, May 19, 2019

Client-side development 2 - RiWAs

The Art of Anwsering May 19, 2019 0

Rich web application

A Rich Web Application(RiWA) which is originally called a Rich Internet Application (RIA) is a Web application with a significant number of indistinguishable highlights and appearances from a work area application. A RIA requires a program, program module or virtual machine to convey a client application. Information control is dealt with by the server, and UI and related item control are taken care of by the customer machine.

key features of Rich Web-based Applications

1. Performance impact
Contingent upon the application and system qualities, RIAs can frequently perform superior to customary applications. Specifically, applications that maintain a strategic distance from round outings to the server by handling locally on the customer are probably going to be quicker detectable. Offloading such preparing to the customer machines can likewise improve server execution.

2. Better feedback

In light of their capacity to change portions of pages without reloading, RIAs can furnish the client with quick and exact input, ongoing affirmation of activities and decisions, and educational and point by point mistake messages.

3. Direct interaction

In a traditional page-based Web application, interaction is limited to a small group of standard controls: check boxes, radio buttons and form fields. But RIA can use a wider range of controls that allow greater efficiency and enhance the user experience.

4. Partial-page updating

Standard HTML-based Web pages are stacked once. On the off chance that you update something on a page, the change must be sent back to the server, which rolls out the improvements and after that resend the whole page. There's no other method to do it with HTTP and HTML. With customary Web-based applications, organize availability issues, handling constraints and different issues expect clients to pause while the whole page reloads. Indeed, even with broadband associations, hold up times can be long and problematic.

5. 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.

Technologies and Techniques

Silverlight : Works best with .NET platform. Wouldn't consider to join it with Java, Ruby on Rails, PHP or something. Tools are commercial.

JavaFX / Java Applet : It's rather experimental, graphical tools and IDE are poor. The idea is to declarative (but not XML) code swing interface and run it as applet.

Flash/Flex (Flash Platform) : The most mature one. Works with all server side technologies using simple Http service, Web Service byte the best integration is by AMF services (efficient binary protocol). Integration is on different levels. Basic remote calls (it's enough for 90% projects) are available for all platforms (.NET, Java EE, PHP, RoR). but there are library for hi-level iteration (data synchronization, data push, client-server events or even client-server dependency injection) for Java EE : Adobe Life cycle Data Services (commercial) or GraniteDS and Tide Framework (free, works which JBoss Seam). Flex SDK (compiler and lib) is free, but Flex-builder is commercial.

Adobe AIR : AIR stands for Adobe Integrated Run time which run Flex or HTML+JavaScript applications on desktop (works similar to java Virtual Machine + WebStart). For flex applications integrations with remote systems are the same as above. AIR application is installed on client machine like and runs like any app. Have access to file system too. AIR runs on Windows, Mac and Linux/BSD too.

DELTA-COMMUNICATION TECHNOLOGIES

Simple-Pull-Delta-Communication (SPDC):

•Used in AJAX

•Single XHR request to the server

•Client-side: Native JS support

•Server-side: special technology is not needed

Polling is used to simulate data-push

•Send XHR requests periodically to the server

•Client-side: Native JS support

•Server-side: special technology is not needed

•Can increase network traffic (less scalable)

•Blank responses can waste resources

Web Socket (WS) is bi-directional

•Supports both data-pull and true data-push

•Client-side: HTML5 provides native JS support

Server-side: Need a WS server. Complex.

•Reduce network traffic than polling/Comet/SSE(highly scalable, 10CK is addressed)

Comet is used to simulate data-push

• Long-lived XHR requests

•Client-side: Native JS support

•Server-side: Need a streaming server. Special technology is not needed, can be implemented with standard web technologies

•Reduce network traffic than polling (more scalable)

•Blank responses are eliminated

Architecture

The client-side controller contains the event handlers for the GUI. The events are triggered at the GUI of the Views. Views are in the client-side. subsequently, the events are triggered at the client-side. Some business-rationale are not very information driven, complex, or basic. Structures approvals, GUI components controls. They can be actualized in client-side. Client-side controller and model lessen the round outings to the server. Subsequently, improve the exhibition and increment the adaptability.

The DC bus in a VFD has discovered its utilization as the innovation has developed. A portion of the uses of DC bus, Common DC applications where a solitary rectifier unit acts a wellspring of capacity to numerous inverted units through normal DC bus.

XHR & AJAX

XMLHttpRequest (XHR) is an API available to web browser scripting languages such as JavaScript. It is used to send HTTP or HTTPS requests to a web server and load the server response data back into the script. And for AJAX request, an Ajax call is an asynchronous request initiated by the browser that does not directly result in a page transition.

An Ajax ("Asynchronous Javascript and XML") request is sometimes called an XHR request ("XmlHttpRequest"), which is the name most browsers give the object used to send an Ajax request, because at least initially Ajax calls involved the sending and receiving of XML but now it's just as common to send/receive JSON, plain text or HTML.

jQuery ajax() function

1. jQuery.ajax() : Perform an asynchronous HTTP(Ajax) request.

2. jQuery.get() : Load data from the server using a HTTP GET request.

3. jQuery.getJSON() : Load JSON-encoded data from the server using a GET HTTP request.

4. jQuery.getScript() : Load a JavaScript file from the server using a GET HTTP request, then execute it.

5. jQuery.post() : Load data from the server using a HTTP POST request.

6. serialize() : Encode a set of form elements as a string for submission.

7. load() : Load data from the server and place the returned HTML into the matched elements.

REFERENCES
[1] https://www.computerworld.com/article/2551058/rich-internet-applications.html
[2] https://stackoverflow.com/questions/2055430/list-of-rich-web-application-technologies
[3] https://www.quora.com/What-is-the-difference-between-Ajax-request-and-XHR-request
[4] http://api.jquery.com/category/ajax/

Client-side development 1 - jQuery

jQuery selectors

The Art of Anwsering May 07, 2019 0

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.
A framework is something that usually forces a certain way of implementing a solution, whereas jQuery is just a tool to make implementing what you want to do easier.

Features provided by jQuery

Html/DOM Manipulation: The jQuery made it easy to select DOM elements, traverse them and modifying their content.
CSS Manipulation: It have predefined css() method for manipulate style for any Html elements.
Event Handling: It support event handling like click mouse button.
Built-in Animation: It have predefined method "animate()" for create custom animation on web-page.
Ajax Support: It support ajax, can develop a responsive and feature-rich site using AJAX technology.

Advantages of jQuery

- Its light weight when compared to other javascript frameworks
- It has a wide range of plugins available for various specific needs

- It is easier for a designer to learn jQuery as it uses familiar CSS syntax.

Disadvantages of jQuery

- One of the main disadvantages of jQuery is the large number of published versions in the short time.
- 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 pages load to the browser?

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

jQuery Selectors

1) element Selector:

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

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

2) #id Selector

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

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});

3) .class Selector
The jQuery .class selector finds elements with a specific class.

$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});

In some additional advanced web applications, would like additional management than simply referencing many component varieties or one with a particular ID. An web page will contain many parts, therefore it would possibly not even apprehend the elements' names. To complete this quality, jQuery and CSS have advanced selectors that allow to select parts supported location within the page or by descendants or maybe by adjacent siblings. it would not apprehend the IDs, categories or names of those parts, however still able to question them supported hypertext mark-up language location. within the example of an inventory of orders for a client, this is able to profit, do not know the IDs for every order component. Instead, will be able to reference them supported the instrumentation that holds them or their location to a different component.

Filter selectors area unit thought-about advanced selectors that permit you traverse hypertext mark-up language components supported proximity or location. There area unit various filter selectors, however you'll run into many additional usually than others.

Document Object Model (DOM)

jQuery Event Methods

$("p").click(function(){
$(this).hide(); });

$("p").dblclick(function(){
$(this).hide(); });

$("#p1").mouseup(function(){

alert("Mouse up over p1!"); });

Advanced Features
'this' - (this) object refers to the current object within the scope.
Data attributes
Refactoring with DOM objects
Target on specific elements with generic names
Filters
CSS manipulation
Animation

REFERENCES
[1] https://www.w3schools.com/jquery/jquery_intro.asp
[2] https://learn.jquery.com/about-jquery/

[3] https://www.tutorialspoint.com/jquery/jquery-dom.htm
[4] https://slideplayer.com/slide/9324760/

Introduction to client-side development

View development

The Art of Anwsering April 12, 2019 0

There are 3 main elements of client-side application which are use in distributed systems to interact with users.
1. Views
2. Controllers
3. Client-model

The view manages the display of information and also facilitates interaction with user. However, it does not act on user interaction that is the job of the controller.
The controller interprets the mouse and keyboard inputs from the user, informing the model and the view to change as appropriate.

The model manages the behavior and data of the application domain, responds to requests for information about its state (usually from the view), and responds to instructions to change state (usually from the controller). It maintains the state and notified observers of change in information.

Different categories of elements in HTML

1. Structural elements

- header

ex:

       <h1>Most important heading here</h1>
       <h3>Less important heading here</h3>
       <p>Some additional information here</p>
     </header>

- footer

Defines a footer for a document.

ex:

<p>Posted by: ABC</p>
<p>Contact information: <a href="#">abc@gmail.com</a>.</p>
</footer>

- nav

Defines a set of navigation links.

ex:

<nav>

- aside

Defines some content aside from the content it is placed in.

ex:

<aside>

<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

- article

Specifies independent, self-contained content.

ex:

<article>
<h1>Google Chrome</h1>

<p>Google Chrome is a free, open-source web browser</p>
</article>

2. Text elements

- Headings : <h1> to <h6>

Used to define HTML headings.

ex:

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

- Paragraph : <p>

Defines a paragraph.

ex:

<p>This is a paragraph.</p>

- Line break : <br>

Inserts a single line break.

ex:

Hello<br>World.

3. Images

Defines an image in an HTML page.

ex:

4. Hyperlinks

Defines a hyperlink, which is used to link from one page to another.

ex:

<a href="https://www.w3schools.com">Visit W3Schools</a>

5. Data representational elements

- Lists

Defines a list item.

ex:

<ul>

<li>Coffee</li>
<li>Tea</li>
</ul>

- Tables

Defines an HTML table.

ex:

<table>

   <tr>
       <th>Month</th>
       <th>Savings</th>
   </tr>
   <tr>
       <td>January</td>
       <td>$100</td>
  </tr>
</table>

6. Form elements

- Input

Specifies an input field where the user can enter data.

ex:

First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

- Radio buttons, check boxes

Define a radio button and a check box..

ex:

<input type="radio" name="gender" value="male"> Male

- Buttons

Defines a click-able button.

ex:

<button type="button">Click Me!</button>

Cascading Style Sheets (CSS)

Advantages :

Reduce HTML formatting tags
The basic idea behind CSS is to separate the structure of a document from the presentation of the document. HTML is meant for structure. It was never intended for anything else. All those additions though make HTML clumsy and work against it’s main purpose of structuring a document. HTML is there to let a browser know that this block of text is a paragraph and that block of text is a heading for this paragraph.

Easy modification
Without all the extra HTML for styling the structure of document is much more readable making it easier to update with out breaking the document. All of CSS can be moved to a separate file making it easier to update styles as well.

Save lot of work and time and Faster loading
Using cascading style sheets generally leads to less code behind web pages which helps the download times of a page. When browser sees a table in code it needs to read through all code twice. Once to understand the structure of the table and once again to actually display the content within the table. The extra time slows up the page. Using tables in the layout of a web page generally leads to a greater use of images on that page. Images are often the heaviest element of a pages and are usually the major culprit in slowing down pages. Sure the images can be optimized to make them smaller, but they are still larger than a line of code and each image requires another request by the browser to the server.

Advanced features
- Web fonts - CSS3 web fonts allow to use custom fonts other than device
fonts (web safe fonts)
- Colors, gradients, backgrounds

- Media

There are 3 main selectors in CSS.
- Element selector
- ID selector
- Class selector

Advanced Selectors in CSS

Attribute Selector:
It selects a particular type of inputs.
  input[type="checkbox"]{background:orange;}

Adjacent Sibling Selector:
  It select ul tags which immediately follows the h4 tag.
h4+ul{border: 4px solid red;}

Direct Child Selector:
  It selects any element matching the second element that is a direct child of an element matching the first element.
p > div {background-color: DodgerBlue;}

3 ways of using CSS

- External stylesheet
This is a standalone .css file that is linked from a web page. The advantage of external stylesheets is that it can be created once and the rules applied to multiple web pages. Should need to make widespread changes to the site design, can make a single change in the stylesheet and it will be applied to all linked pages, saving time and effort.

- Internal stylesheet
This holds CSS rules for the page in the head section of the HTML file. The rules only apply to that page, but can configure CSS classes and IDs that can be used to style multiple elements in the page code. Again, a single change to the CSS rule will apply to all tagged elements on the page.

- Inline styles
This relate to a specific HTML tag, using a style attribute with a CSS rule to style a specific page element. They’re useful for quick, permanent changes, but are less flexible than external and internal stylesheets as each inline style create must be separately edited should decide to make a design change.

Frameworks

Framework is a collection of libraries, tools, rules, structures, and control, to build software systems.

- At development time,

Create the structure of the application,

Place the code in necessary places,

May use the given libraries to write the code,

Can include additional libraries and plugins.

- At runtime,

Frame will call the code.

Libraries

Libraries provide an API; the coder can use it to develop some features, when writing code.

- At development time,

Add the library to the project (source code files, modules, packages, executable, etc.).

Call the necessary functions/methods using the given packages/module/classes.

- At runtime,

It will called by the code.

Plugins

Plugins provide specific tools for development.

- At development time,

The plugin (source code files, modules, packages, executable, etc.) is placed in the project,

Apply some configurations using code.

- At runtime,

Plug-in will be invoked via the configurations

Main features of client-side component development tools :

- DOM processing (dynamic content generation, change, removal)

- Data processing

- Data persistence

- Session management (cookies)

- Communicating (with server components)

New features in JS version 6

RFERENCES

[1] http://projectmanagementdud.blogspot.com/2013/03/model-view-controller-mvc-simply.html

[2] https://www.w3schools.com/tags/tag_nav.asp
[3] http://estelle.github.io/CSS-Workshop/part_07_fonts.html#slide21
[4] https://gist.github.com/magicznyleszek/809a69dd05e1d5f12d01
[5] https://www.hostpapa.ca/knowledgebase/understanding-external-internal-inline-css-styles/

The Framework Blog

Hot

Post Top Ad

Post Top Ad

Sunday, May 19, 2019

Client-side development 2 - RiWAs

Tuesday, May 7, 2019

Client-side development 1 - jQuery

jQuery Event Methods

Friday, April 12, 2019

Introduction to client-side development

Post Top Ad

Author Details

Social

Recent

Popular

Comments

Tags

About Us

Contact Form