Client-side Development

Hey guys! Welcome back to my Programming Applications and Frameworks article series. From this article, I would like to discuss some interesting facts about Client-side development. Let's move on to the introduction.

What is this Client-side development?

Client-side development 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.
Its main tasks are:
  • validating the input (Validation must be done in the server. A redundant validation in the client could be used to avoid server calls when speed is very critical.)
  • animation
  • manipulating UI elements
  • applying styles
  • some calculations are done when you don't want the page to refresh so often

Main elements of client-side application components of distributed systems

There are 3 main elements in the client-side application of distributed systems
  1. Views - what users see (mainly GUIs)
  2. Controllers - contain event handlers for the views
  3. Client-model - Business logic and data

Views development technologies

There are two main categories of coding, scripting, and programming for creating Web Applications:
1. Client Side Scripting / Coding - Client Side Scripting is the type of code that is executed or interpreted by browsers.
Client Side Scripting is generally viewable by any visitor to a site (from the view menu click on "View Source" to view the source code).
Below are some common Client Side Scripting technologies:
  • HTML (HyperText Markup Language)
  • 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)
  • Dojo Toolkit (JavaScript Framework Library - commonly used in Ajax development)

2. Server Side Scripting / Coding - Server Side Scripting is the type of code that is executed or interpreted by the web server.
Server Side Scripting is not viewable or accessible by any visitor or the general public.

 Below are the common Server Side Scripting technologies:
  • 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 - the 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)

Controller development technologies

J2EE (wiki)
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 (wiki)
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.
Servlets (wiki)
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 (wiki)
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.

Client-Model development technologies

ASP.NET Core applications are web applications and they typically rely on client-side web technologies like HTML, CSS, and JavaScript. By separating the content of the page (the HTML) from its layout and styling (the CSS), and its behavior (via JavaScript), complex web apps can leverage the Separation of Concerns principle. Future changes to the structure, design, or behavior of the application can be made more easily when these concerns are not intertwined.


HTML

HTML (HyperText Markup Language) is the standard markup language used to create web pages and web applications. Its elements form the building blocks of pages, representing formatted text, images, form inputs, and other structures. When a browser makes a request to a URL, whether fetching a page or an application, the first thing that is returned is an HTML document. This HTML document may reference or include additional information about its look and layout in the form of CSS, or behavior in the form of JavaScript.

CSS

CSS (Cascading Style Sheets) is used to control the look and layout of HTML elements. CSS styles can be applied directly to an HTML element, defined separately on the same page, or defined in a separate file and referenced by the page. Styles cascade based on how they are used to select a given HTML element. For instance, a style might apply to an entire document but would be overridden by a style that applied to a particular element. Likewise, an element-specific style would be overridden by a style that applied to a CSS class that was applied to the element, which in turn would be overridden by a style targeting a specific instance of that element (via its id).

JavaScript


JavaScript is a dynamic, interpreted programming language that has been standardized in the ECMAScript language specification. It is the programming language of the web. Like CSS, JavaScript can be defined as attributes within HTML elements, as blocks of the script within a page, or in separate files. Just like CSS, it's generally recommended to organize JavaScript into separate files, keeping it separated as much as possible from the HTML found on individual web pages or application views.

Let's discuss what are the categories of elements in HTML


Every HTML element is a member of one or more content categories. these categories group elements that share common characteristics. This is a loose grouping (it doesn't actually create a relationship among elements of these categories), but they help to define and describe the categories' shared behavior and their associated rules, especially when you come upon their intricate details. It's also possible for elements to not be a member of any of these categories.

There are three types of content categories:

  • Main content categories, which describe common rules shared by many elements.
  • Form-related content categories, which describe rules common to form-related elements.
  • Specific content categories, which describe rare categories shared only by a few elements, sometimes only in a specific context.
Main content categories -
  1. Metadata content
  2. Flow content
  3. Section content
  4. Heading content
  5. Phrasing content
  6. Embedded content
  7. Interactive content
  8. Palpable content
  9. Form-associated content
Secondary categories
  1. Script-supporting elements

Do you know about CSS and the importance of it?


Cascading Style Sheets, commonly known as CSS, is an integral part of the modern web development process. It is a highly effective HTML tool that provides easy control over layout and presentation of website pages by separating content from design.

Although CSS was introduced in 1996, it gained mainstream popularity by the early 2000s when popular browsers started supporting its advanced features. The latest version, CSS3, has been available since 1998 and was last updated in September 2008. 
Benefits of CSS -
Improves Website Presentation -
The standout advantage of CSS is the added design flexibility and interactivity it brings to web development. Developers have greater control over the layout allowing them to make precise section-wise changes.
As customization through CSS is much easier than plain HTML, web developers are able to create different looks for each page. Complex websites with uniquely presented pages are feasible thanks to CSS.
Makes Updates Easier and Smoother -
CSS works by creating rules. These rules are simultaneously applied to multiple elements within the site. Eliminating the repetitive coding style of HTML makes development work faster and less monotonous. Errors are also reduced considerably.
Since the content is completely separated from the design, changes across the website can be implemented all at once. This reduces delivery times and costs of future edits.
Helps Web Pages Load Faster -
Improved website loading is an underrated yet important benefit of CSS. Browsers download the CSS rules once and cache them for loading all the pages of a website. It makes browsing the website faster and enhances the overall user experience.

 There are 3 types of CSS

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Inline CSS -

For Inline CSS every style content is in HTML elements. It is used for a limited section. Whenever our requirements are very small we can use inline CSS.

It will affect only single elements. In HTML we require that various HTML tag's views are different so then we use inline Cascading Style Sheets. There is a disadvantage of inline Cascading Style Sheets. It must be specified on every HTML tag. There is a lot of time consumed by that and it is not the best practice for a good programmer and the code will be quite large and very complex.

Internal CSS -

In internal CSS the style of CSS is specified in the <head> section. This is internal CSS, it affects all the elements in the body section. Internal CSS is used in the condition when we want a style to be used in the complete HTML body. For that, we can use the style in the head tag.

External CSS -

In External CSS we create a .css file and use it in our HTML page as per our requirements. Generally, external Cascading Style Sheets are used whenever we have many HTML attributes and we can use them as required; there is no need to rewrite the CSS style again and again in a complete body of HTML that inherits the property of the CSS file. There are two ways to create a CSS file. The first is to write the CSS code in Notepad and save it as a .css file, the second one is to directly add the style sheet in our Solution Explorer and direct Visual Studio to use it on our HTML page.
How to create and use an External CSS.
  1. Right-click on your application name in Visual Studio 2012.
  2. Add a style sheet.
  3. Write your CSS code and save it.
  4. Open your HTML page and drag down the style sheet.
  5. Save and RUN.

 Advanced Sectors in CSS
  1. Adjacent Sibling Selector: It selects all the elements that are adjacent siblings of specified elements. It selects the second element if it immediately follows the first element.
  2. Attribute Selector: It selects a particular type of inputs.
  3. nth-of-type Selector: It selects an element from its position and types.
  4. Direct Child Selector: It selects any element matching the second element that is a direct child of an element matching the first element. The element matched by the second selector must be the immediate children of the elements matched by the first selector.
  5. General Sibling Selector: It selects only the first element if it follows the first element and both children are of the same parent element. It is not necessary that the second element immediately follows the first element.
  6. Element Selector: It selects the text enclosed inside the mentioned element.
  7. ID Selector: It selects the changes made to a specific text on a page as it can be used only once on a page.
  8. Class Selector: It is the same as ID selector but it can be used a number of times in a page
  9. Star Selector: The changes made will be made to the whole page.
  10. Descendant Selector: It makes changes only to those elements which are inside the other element.

Do you know about CSS media Rule

The media rule is used in media queries to apply different styles for different media types/devices.
Media queries can be used to check many things, such as:
  • width and height of the viewport
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution
Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.
You can also use media queries to specify that certain styles are only for printed documents or for screen readers (media type: print, screen, or speech).
In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.

Models of Web app components


For a web app to be stable and fail-proof, it’s important to leverage components of a web application and choose a model that suits your specific business needs.

One web server (with database)

This is the simplest and the riskiest model, where a single database is a part of the web app’s only server. If the server goes down, so does the web app. Such a raw model may suit some test projects or private practices. Still, if you want your web app to be reliable, we suggest looking at the other options.

Two+ web servers, one database

To scale web servers horizontally, you need to have your database run from a physically separate machine than a web server. The idea is for a web server not to store any data: even when it gets information from a client, the web server processes it, writes the data to the database and forgets about it. This is also known as ‘stateless architecture’.
With at least two web servers, you avoid a single point of failure. Even if one of the web servers will ever go down, another one will take over immediately. All requests will be automatically readdressed to the new server, and the web app will keep running. Also, a database run from a separate machine is better protected and vetted. Still, if your only database crashes, the entire system will crash as well.

Two+ web servers, two+ databases

With this model, you have two options: databases store identical data or have the data evenly distributed among them. In the first case, no more than 2 databases is usually needed; when one is down, the other can replace it, loss-free. Since data aren’t replicated in the second case, some data may become temporarily unavailable if one of the many databases crashes.
Still, this model is considered the most fail-proof: neither web servers nor databases have single points of failure. If the scale is large, with more than 5 web servers or databases, it’s also wise to have load balancers installed. They will analyze all incoming requests and shrewdly allocate them to keep the workload under control.

What is this ECMAScript 6?

ECMAScript 6 is also known as ES6 and ECMAScript 2015. JavaScript 6 also another name for this ECMAScript 6. These some interesting and new features in JS 6.

  1. Default Parameters in ES6
  2. Template Literals in ES6
  3. Multi-line Strings in ES6
  4. Destructuring Assignment in ES6
  5. Enhanced Object Literals in ES6
  6. Arrow Functions in ES6
  7. Promises in ES6
  8. Block-Scoped Constructs Let and Const
  9. Classes in ES6
  10. Modules in ES6

Client-side Programming Languages & Frameworks

Now that you’ve got a broad view of what front-end technology is and does, here’s a look at some of the most widely used scripting languages and front-end frameworks. Languages are almost always used in the context of their frameworks, which make quick work of complicated code with libraries of pre-packaged, shareable code, and lots of add-ons. Your developer may use one or a combination of these when building the front end of your site.
JavaScript Frameworks:
  • AngularJS: An incredibly robust JavaScript framework for data-heavy sites
  • JQuery, jQuery Mobile: A fast, small, JS object library that streamlines how JavaScript behaves across different browsers
  • Node.js: A server-side platform that uses JavaScript, and is changing the way real-time applications can communicate with the server for faster response times and more seamless user experience. It works with another JavaScript framework, Express.js, to build server-side Web applications.
  • Bootstrap: A mobile-first framework that uses HTML, CSS, and JavaScript to facilitate rapid responsive app development
  • React, for user interface design
  • Express.js, Backbone.js, Ember.js, MeteorJS, and more
  • TypeScript: A compile-to-JavaScript language that is a superset of JavaScript, created by Microsoft
  • AJAX (JavaScript + XML)—a technology that allows specific parts of a site to be updated without a full-page refresh by asynchronously connecting to the database and pulling JSON– or XML-based chunks of data.
  • VBScript & JScript are Microsoft’s front-end scripts that run on the ASP.NET framework. JScript is Microsoft’s reverse-engineered version of JavaScript.
  • ActionScript, which creates animated interactive web applications for Adobe Flash Play
  • Java (as “applets”) snippets of back-end code that run independently with a run-time environment in the browser

That's all about Client-side development for this article and thank you very much for reading. I hope to meet you guys with another interesting topic in Programming Applications & Frameworks. Until then good luck


Reference -
















Comments

  1. Maryna23 March 2021 at 09:10

    Speaking of web app architecture, if you want to learn more about it, you can find all the needed information here.

    ReplyDelete
  2. ayesha.irshad26 September 2022 at 04:44

    Before picking a programming language, you must assess its expressiveness. There are Top 3 programming Languages which can help you Choosing the proper language for your brand's mobile application.

    ReplyDelete

Post a Comment

Popular Posts