#EighthBlogDone

[enigmaticlearner]

Time for Client-side development!

In my eighth blog article today we are going to have a look at introduction to Client-side development.

As discussed in the fourth blog article,Distributed systems use client-side elements.Also we now know that client-side elements are

•Views – what users see (mainly GUIs) •Controllers – contain event handlers for the Views •Client-model – Business logic and data

We will be focusing on tools and technologies used to develop Client-side designs.

1.View development Browser-based clients’ Views has two main elements HTML CSS

HTML is used in making content while CSS is used in formatting.

*HTML-Hyper Text Markup Language This describes the structure of web pages using markup.

HTML elements are represented by tags. The following elements to perform it's functionality.

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

•Text elements Tags are used to label content of the following. Headings – <h1> to <h6> Paragraph – <p> Line break - <br>

• Images Using <img> tag images can be inserted to web pages.

•Hyperlinks <hr> can be used to embed web links into web pages.

Other than these basic elements,HTML uses elements like •Data representational elements Data structure like Lists and tables are used for nesting purposes.

•Form elements These contain radio buttons,check boxes,buttons and so on.

*CSS-Cascading Style Sheets CSS are used to design web pages.

Things like the following can be done using CSS.. , Aligning Font and text editing. Color and background controls. Positioning.

CSS has three main selectors known, •Element selector • ID selector •Class selector

Also advanced selectors include pseudo classes and pseudo elements.

CSS can be used as, 1. Inline CSS 2. Internal CSS sheets 3. External CSS sheets

* Inline CSS Are used to include designs of a single element inside the code itself.

* Internal CSS sheets Used if a single page has to be included with a unique style.

* External CSS sheets Are coded as separate CSS file and used whenever needed.

*Media Query

This is a CSS technique introduced in CSS3. It uses @media rule when including a block of CSS properties. This happens only if a certain condition is true.

To learn more on HTML and CSS these links can be used..

https://www.w3schools.com/htmL/html_intro.asp

https://www.w3schools.com/css/css_howto.asp

Frameworks and libraries and plugins

View development uses frameworks,libraries and plugins too..

Some of the sophisticated tools are, jQuery,jQuery UI,Angular,React,Bootstrap,NodeJS and etc.

1.jQuery jQuery is a JavaScript Library.But this works as a framework too.

2.Angular This framework is operated by the Google.Front end applications are developed by this.

3.React Another JS library which became very popular within a short period of time.User interfaces can be built using this.

4.Bootstrap Out of frameworks this is very popular as it supports HTML, CSS, and JavaScript.It is free to download. The dimensions of a web page viewed in a computer can be adjusted to be viewed by a mobile phone as appropriate by reducing the screen size.

More information can be found in W3Schools website,

https://www.w3schools.com/bootstrap/

https://www.w3schools.com/jquery/

*Templates

Templates can maintain consistency across pages in the web site or applications. Most templates can be edited easily and they are free to be downloaded. Templates can be found 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

Like we discussed in the beginning of the article,browser-based clients has the two main components as,controllers and client and models.

And the above discussed frameworks,libraries and templates are used to develop these components.

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

* Generic client-side features •Form/data validation When data is entered to forms they must be validated importantly. JS can be used for this basically.

•Dynamic content generating/updating Once data is entered it must be generated and updated as wanted with user levels if needed.

•Some business logic (client-model) Business logic is used when front end and back end coding is done.

•Delta-Communication (AJAX, SSE, WS) Tools like AJAX is used to update web pages without reloading, requesting or receiving or sending data from a server

•Data formatting/preparation Data should be able to format as required and prepared for final use.

References

[1] Wikipedia.com. “ HTML ”. [Accessed: April 26, 2019].

[2]W3Schools.com. “CSS”. [Accessed: April 26 , 2019].

[3]W3Schools.com. “Bootstrap“. [Accessed: April 26 , 2019].