THE CLIENT-SIDE DEVELOPMENT

-

 The main elements of client-side application components of distributed systems

•Distributed systems use client-side elements for users to interact with •These client-side elements include 
       •Views – what users see (mainly GUIs) 
       •Controllers – contain event handlers for the Views 
       •Client-model – Business logic and data



The Views development technologies for the browser-based client-components of web-based applications

•Content – HTML

• Formatting – CSS


 The Controller development technologies for the browser-based client-components of web-based applications
(HTML, CSS, JavaScript) and server-side technologies such as PHP, ASP,.Net, C#, Python, etc. 
as well as a database to store and retrieve information from 
(MySQL, Oracle, SQL Server).

Different categories of elements in HTML, proving examples for their use 

  • Block Elements. Block elements appear on the screen as if they have a linebreak before and after them. ...
  • Inline Elements. ...
  • Grouping HTML Elements. ...
  • The <div> tag. ...
  • The <span> tag
  • A text header, denoted using the <h1> , <h2> , <h3> , <h4> , <h5> , <h6> tags.
  • A paragraph, denoted using the <p> tag.
  • A horizontal ruler, denoted using the <hr> tag.
  • A link, denoted using the <a> (anchor) tag.

•Structural elements
• header, footer, nav, aside, article

Text elements
 Headings
 Paragraph –
 Line break -
Images
Hyperlinks


Data representational elements (these elements use
nested structures)
• Lists
• Tables
• Form elements
• Input
• Radio buttons, checkboxes
• Buttons
 The importance of CSS, indicating new features of CSS3 

Cascading Style Sheets or CSS are an important way to control how your Web pages look. CSS can control the fonts, text, colors, backgrounds, margins, and layout. But it can be very difficult to learn CSS, and some people would rather not learn it.


Used to
• Decorate / Format content
•Advantages
• Reduce HTML formatting tags
• Easy modification
• Save a lot of work and time
• Faster loading

 Some formatting categories
Positioning
Size
Alignment
Font / Text

Color / Background / Border

 3 main types of CSS selectors

•Element selector
•ID selector
•Class selector

The advanced CSS selectors, explaining the specificity

CSS is one of the most powerful tools that are available to web designers (if not the most powerful). With it, we can completely transform the look of a website in just a couple of minutes, and without even having to touch the markup. But despite the fact that we are all well aware of its usefulness, CSS selectors are still not used to their full potential and we sometimes have the tendency to litter our HTML with excessive and unnecessary classes and ids, divs and spans.
CSS Specificity

Before delving into the realms of advanced CSS selectors, it’s important to understand how CSS specificity works, so that we know how to properly use our selectors and to avoid us spending hours debugging for a CSS issue that could be easily fixed if we had only paid attention to the specificity.

The use of CSS media queries in responsive web development 
Media query is a CSS technique introduced in CSS3.
It uses the rule@media to include a block of CSS properties only if a certain condition is true.

example:

   @media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }}

Media types
all
braille, embossed, speech, hanheld, projection, screen, tv
print, tty
<link media=“(min-width: 30em)” …
<link media=“screen and (min-width: 30em)” …
@media (min-width: 30em) { … }
@media screen and (min-width: 30em) { … }

2 approaches 
1. Large res first 
2. Small res first

 The pros and cons of 3 ways of using CSS (inline, internal, external)  
Internal CSS
 Advantages of Internal CSS:
  • Only one page is affected by stylesheet.
  • Classes and IDs can be used by internal stylesheet.
  • There is no need to upload multiple files. HTML and CSS can be in the same file.
Disadvantages of Internal CSS:
  • Increased page loading time.
  • It affects only one page – not useful if you want to use the same CSS on multiple documents
External CSS
 Advantages of External CSS:
  • The smaller size of HTML pages and cleaner structure.
  • Faster loading speed.
  • Same .css file can be used on multiple pages.
Disadvantages of External CSS:
  • Until external CSS is loaded, the page may not be rendered correctly.
Inline CSS
Advantages of Inline CSS:
  • Useful if you want to test and preview changes.
  • Useful for quick-fixes.
  • Lower HTTP requests.
Disadvantages of Inline CSS:
  • Inline CSS must be applied to every element
Frameworks/libraries/plugins/tools to develop the Views/web pages, and discuss their similarities and differences  

They dynamically generate HTML+CSS code
 •In server and/or client-side 
•May have JS-based advanced interactive features
• jQuery – A JS library, but can be seen a framework too. It
wraps the complexity of pure JS. There are lots of JS
frameworks, libraries, and plugins built using jQuery. Good for
DOM processing.
• jQuery UI – Focus on GUI development
• Bootstrap – to rapidly design and develop responsive web
pages and templates
• Angular – a JS framework/platform to build frontend
applications
• React – a JavaScript library for building user interfaces (and
the application, which uses that UI)

Pros:
  • small distribution size
  • the shallow learning curve, considerable online help
  • concise syntax
  • easy to extend
Cons:
  • adds a speed overhead to native APIs
  • less essential now that browser compatibility has improved
  • usage has flat-lined
  • some industry backlash against the unnecessary use

 The client-side component development related aspects in browser-based web applications 
•Browser-based clients’ components comprise two main aspects
 •Controllers
 •Client-model

 •The components of browser-based clients are developed using JS/JS-based frameworks, libraries, and plugins.

Main features of the client-side component
development tools
•DOM processing (dynamic content generation, change, removal)
•Data processing
•Data persistence
•Session management (cookies)
•Communicating (with server components)

 The new features in JS version 6 
  • JavaScript let
  • JavaScript const
  • Exponentiation (**) (EcmaScript 2016)
  • Default parameter values
  • Array.find()
  • Array.findIndex()
Frameworks/libraries/plugins/tools to develop the client-side components of browser-based applications, and discuss their similarities and differences 

jQuery: Basic and simple. Cover the complexity of JS and provides cross-browser compatibility.
• React powers Facebook, Ease of Learning, DOM Binding, Reusable Components, Backward Compatibility
• Angular: Support for Progressive Web Applications, Build Optimizer, Universal State Transfer API and DOM, Data Binding and MVVM
• Vue: lightweight, with a much-needed speed and accuracy

Generic client-side features 
•Form/data validation 
•Dynamic content generating/updating 
•Some business logic (client-model) 
•Delta-Communication (AJAX, SSE, WS) 
•Data formatting/preparation



Comments

Post a Comment

Popular posts from this blog

RESTful Web services

-
Image
 RESTful Web services 1. Message oriented communication Vs Resource oriented communication Message Oriented Communication describes that involves the passing of data between applications using a communication channel that carries self-contained units of information (messages). In this communication environment, messages are generally sent and received asynchronously. Also senders and receivers are never aware of each other. Instead, they send and receive messages to and from the messaging system. It is the responsibility of the messaging system (MOM) to get the messages to their intended destinations. A resource-oriented communication or architecture (ROA) represents blueprint of how supporting the inter networking of resources. A resource, in this context, is any entity that can be identified and assigned a uniform resource identifier (URI). Identifies four essential concepts underlying the resource-oriented architecture: Resources Their names (URIs) T...
Read more

RiWAs - Client-side development 2

-
Image
Distinguish the term “Rich Internet Applications” (RIAs) from “Rich Web-based Applications” (RiWAs) •Rich Web-based applications    •Use advanced GUIs    •Use Delta-Communication    •Provide rich user experience  •Most of the web-based applications nowadays are RiWAs  The key features of RiWAs, which make them more advanced than the standard web-based applications •Rich GUIs in RiWAs use Delta-Communication to communicate with the server components •DC happens behind the GUI   •Eliminates page refreshes •DC can process asynchronously   •Eliminates page freezing •DC works faster   •Eliminates the work-wait pattern  Different technologies and techniques used to develop the client-side components of the RiWAs, explaining their use in dedicated environments. AJAX Adobe Flash ,  Flex  and  Adobe Integrated Runtime (AIR) Microsoft Silverlight Curl  (an object-oriented language with emb...
Read more