Client-Side development

Main elements of client-side application components of distributed systems are,

·         Views – what users see (mainly GUIs)

·         Controllers – contain event handers for the Views

·         Client-model – Business logic and data

What are the Views development technologies for  browser-based client-components of web-based applications?

1.        Browser-based clients’ Views comprises two main elements

·         Content – HTML

·         Formatting – CSS

HTML uses different types of elements to define content

·         Structural elements

                        header, footer, nav, aside, article

·         Text elements

Headings – <h1> to <h6>

Paragraph – <p>

line break - <br>

·         Images

·         Hyperlinks

·         CSS (Cascading Style Sheets)

·         JavaScript.

·         Ajax (Asynchronous JavaScript and XML)

·         jQuery (JavaScript Framework Library - commonly used in Ajax development)

·         MooTools (JavaScript Framework Library - commonly used in Ajax development)

2.      Server/client-side components may generate the elements of Views

• PHP (very common Server Side Scripting language - Linux / Unix based Open Source - free redistribution, usually combines with MySQL database)
• Zend Framework (PHP's Object Oriented Web Application Framework)
• ASP (Microsoft Web Server (IIS) Scripting language)
• ASP.NET (Microsoft's Web Application Framework - successor of ASP)
• ColdFusion (Adobe's Web Application Framework)
• Ruby on Rails (Ruby programming's Web Application Framework - free redistribution)
• Perl (general purpose high-level programming language and Server Side Scripting Language - free redistribution - lost its popularity to PHP)
• Python (general purpose high-level programming language and Server Side Scripting language - free redistribution)

Let’ s we are going to talk Controller development technologies for the browser-based client-components of web-based applications

J2EE

Java Platform, Enterprise Edition (Java EE) is the industry standard for developing portable, robust, scalable and secure server-side Java applications. Building on the solid foundation of the Standard Edition, Java EE provides web services, component model, management, and communications APIs that make it the industry standard for implementing enterprise-class web applications.

JSP

JavaServer Pages (JSP) technology enables Web developers and designers to rapidly develop and easily maintain, information-rich, dynamic Web pages that leverage existing business systems. As part of the Java technology family, JSP technology enables rapid development of Web-based applications that are platform independent. JSP technology separates the user interface from content generation, enabling designers to change the overall page layout without altering the underlying dynamic content.

SERVLET

Servlets are the Java platform technology of choice for extending and enhancing Web servers. Servlets provide a component-based, platform-independent method for building Web-based applications, without the performance limitations of CGI programs. And unlike proprietary server extension mechanisms (such as the Netscape Server API or Apache modules), servlets are server- and platform-independent. This leaves you free to select a “best of breed” strategy for your servers, platforms, and tools.

AJAX

Ajax is a web development technique used for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is intended to increase the web page’s interactivity, speed, functionality, and usability.

Ajax is a cross-platform technique usable on many different operating systems, computer architectures, and Web browsers as it is based on open standards such as JavaScript and XML, together with open source implementations of other required technologies.

Now we going to see client-Model development technologies for the browser-based client-components of web-based applications

·         JSP

A technology that provides a consistent way to extend web server functionality and create dynamic web content. The web applications that you develop with JSP technology are server and platform independent.

·         Servlet

A Java program that responds to client requests and generates responses dynamically.

·         EJB

A component architecture for building distributed applications with the Java programming model. Server transactional components are reusable and provide portability across application servers.

·         Web services

Self-contained, modular applications that provide an interface between the provider and the consumer of application resources. You can read more about web services later in this information.

 What are the Different categories of elements in HTML ?

1.Data representational elements

·         List

·         Table 

Example of List :

<ul>

            <li> List 1 </li>

            <li> List 2 </li>

            <li> List 3 </li>

</ul>

2. Form element

·         Input

·         Radio buttons, check boxes

·         Buttons

CSS (Cascading Style Sheet)

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.

Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.

BENIFITS OF USING CSS

• Improves Website Presentation
• Makes Updates Easier and Smoother
• Helps Web Pages Load Faster

LIMITATION OF USING CSS

• Difficult to retrofit in old websites
• Browser Dependent

SELECTORS OF CSS

A CSS selector is the part of a CSS rule set that actually selects the content you want to style.

• UNIVERSAL SELECTOR

The universal selector works like a wild card character, selecting all elements on a page. Every HTML page is built on content placed within HTML tags. Each set of tags represents an elements of the page.

• ID SELECTOR

An ID selector is declared using a hash, or pound symbol (#) preceding a string of characters. The string of characters is defined by the developer. This selector matches any HTML element that has an ID attribute with the same value as that of the selector.

• CLASS SELECTOR

The class selector is the most useful of all CSS selectors. It’s declared with a dot preceding a string of one or more characters. Just as is the case with an ID selector, this string of characters is defined by the developer. The class selector also matches all elements on the page that have their class attribute set to the same value as the class, minus the dot.

CSS 3

CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of new features and additions, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.

1. CSS3 Selectors
2. Pseudo-classes
3. Rounded Corners: border-radius
4. Drop Shadows
5. Text Shadow

INTERNAL vs EXTERNAL vs INLINE CSS

LIBRARIES vs FRAMEWORKS vs TOOLS

• Libraries:A library is an organized collection of useful functionality. A typical library could include functions to handle strings, dates, HTML DOM elements, events, cookies, animations, network requests, and more. Each function returns values to the calling application which can be implemented however you choose.

• Frameworks:A framework is an application skeleton. It requires you to approach software design in a specific way and insert your own logic at certain points. Functionality such as events, storage, and data binding are normally provided for you.

• Tools:A tool aids development but is not an integral part of your project. Tools include build systems, compilers, transpilers, code minifiers, image compressors, deployment mechanisms and more.

client-side component development related aspects in browser-based web applications.

Client side programming has mostly to do with the user interface, with which the user interacts. In web development it's the browser, in the user's machine, that runs the code, and it's mainly done in javascript, flash, etc. This code must run in a variety of browsers.Typically, a client is a computer application, such as a web browser, that runs on a user's local computer, smartphone, or other device, and connects to a server as necessary. Operations may be performed client-side because they require access to information or functionality that is available on the client but not on the server, because the user needs to observe the operations or provide input, or because the server lacks the processing power to perform the operations in a timely manner for all of the clients it serves. Additionally, if operations can be performed by the client, without sending data over the network, they may take less time, use less bandwidth, and incur a lesser security risk.