Introduction to client-side development

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

VIEW DEVELOPMENT :

Browser-based clients’ Views comprises two main elements

•Content – HTML

• Formatting – CSS

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

VIEW DEVELOPMENT 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

HTML uses different types of elements to define content

•Data representational elements (these elements use nested structures)

• Lists

• Tables

• Form elements

• Input

• Radio buttons, check boxes

• Buttons

VIEW DEVELOPMENT CSS

Used to

• Decorate / Format content

Advantages

• Reduce HTML formatting tags

• Easy modification

• Save lot of work and time

• Faster loading

There are 3 main selectors

•Element selector

• ID selector

•Class selector

Can be used as

1. Inline CSS

2. Internal CSS sheets

3. External CSS sheets

VIEW DEVELOPMENT OTHER TOOLS

There are many frameworks/libraries/plugins to support view development

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

Bootstrap

COMPONENT DEVELOPMENT:

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)

• New in JS6

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

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, 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