Introduction to client-side development

As my previous articles, this also separate to some main parts.

1. Introduction to Client-side Elements

2. View development

3. Component development

First, we are going to discuss about 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 handers for the Views

       •Client-model – Business logic and data

Next will discuss the Views development technologies for the browser-based client-components of web-based applications,

•Browser-based clients’ Views comprises two main elements

      •Content – HTML

     • Formatting – CSS

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

There are different categories of elements in HTML,

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

•Data representational elements (these elements use nested structures)

        • Lists

        • Tables

• Form elements

         • Input

         • Radio buttons, check boxes

         • Buttons

Then will see the importance of CSS, indicating new features of CSS3,

•Used to

     • Decorate / Format content

•Advantages

    • Reduce HTML formatting tags

    • Easy modification

    • Save lot of work and time

    • Faster loading

Let’s Compare and contrast the three main types of CSS selectors,

•There are 3 main selectors

     •Element selector : Simply known as a “type selector”. Used to match one or more html elements of the same name. Ex:  <ul> would match all html unordered lists

     •ID selector: It’s defined using hash or # preceding a string of characters. This matches any html element defined within the same ID.

     •Class selector: declared with a dot. This matches all elements on the page with their class attribute.

Advanced css selectors and specificity,

Specificity in CSS means browsers decide which css property values are the most relevant to an element.

Advanced features are,

• Web fonts – CSS3 web fonts allow you to use custom fonts other than device fonts

• Colors, gradients, backgrounds –

• Transformations and animations

• Media

Next will see the use for CSS media queries in responsive web development,

Responsive design is adjusting the layout of a web page based on the width of the browser and made this possible by CSS media queries.

There are many advantages and disadvantages of three ways of using CSS (inline, internal, external)

Style	Advantages	Disadvantages
Inline	Testing Quick-fixes Smaller websites Lower the HTTP requests	Overriding Must be applied for every element It’s impossible to style pseudo-elements
Internal	Cache problem Pseudo-elements One style of same element No additional downloads	Multiple documents Slow page loading Large file size
External	Full control of page structure Reduced file-size Less load time Higher page ranking	–

There are frameworks/libraries/plugins/tools to develop the Views/web pages. So we are going to discuss their similarities and differences here,

      •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)

Plug-ins are mainly to add widgets to the Views

      • However, may contain interactive components as well

      • Therefore, can be seen as micro-applications

• MODAAL

• DateDropper

•Templates are used to maintain consistency across pages in the web site/application

•Can generate common content easily

     • Headers, navigators, footers

•Template engines are available for both server and client sides

•Client-side (JS-based) template engines

      • NUNJUCKS, PUG, MUSTACHE.JS, HANDLEBARS

•Server-side template engines

       • Twig, jTwig, Thymeleaf, Apache Velocity

Next we will Discuss the client-side component development related aspects in browser-based web applications,

•Browser-based clients’ components comprises 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 client-side component development tools

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

   •Data processing

   •Data persistence

   •Session management (cookies)

  •Communicating (with server components)

 • Web workers – This API is meant to be invoked by web application to spawn background workers to execute scripts which run in parallel to UI page. The concept of web works is similar to worker threads which get spawned for tasks which need to invoked separate from the UI thread.

• Web storage/ sessionStorage – This is for persistent data storage of key-value pair data in Web clients.

• Geolocation – Identify the device location

• File API – Handle the local files

• Image capturing – use local hardware (camera)

Finally, we’ll discuss the new features in JS version 6,

Top JS frameworks/Libraries

• jQuery: Basic and simple. Cover the complexity of JS and provides cross-browser compatibility.

• React: powers Facebook, Ease of Learning, DOM Binding, Reusable Components, and 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

So, I hope you got an idea of client-side development. Will see in the next article.