Client Side Development

-

What is Client Side Development 

      Client side programming 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.

In client side development there are some important elements used like

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


Difference between Client side and Server side development

  
Server-side Programming

Server-side programming, is the general name for the kinds of programs which are run on the Server.

Uses
  • Process user input.
  • Compiles pages.
  • Structure web applications.
  • Interact with permanent storage (SQL, files).

Example Languages

  • PHP
  • Python
  • ASP.Net in C#, C++, or Visual Basic.
  • Nearly any language (C++, C#, Java). These were not designed specifically for the task, but are now often used for application-level web services.

Client-side programming

Much like the server-side, Client-side programming is the name for all of the programs which are run on the Client.

Uses
  • Make interactive webpages.
  • Make stuff happen dynamically on the web page.
  • Interact with temporary storage, and local storage (Cookies, localStorage).
  • Send requests to the server, and retrieve data from it.
  • Provide a remote service for client-side applications, such as software registration, content delivery, or remote multi-player gaming.

Example languages

  • JavaScript (primarily)
  • HTML*
  • CSS*
  • Any language running on a client device that interacts with a remote service is a client-side language.
*HTML and CSS aren't really "programming languages" per-se. They are markup syntax by which the Client renders the page for the User.
 

Client Side Programming Languages and Framework


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.

HTML and CSS

     These are the core building blocks of any site. HTML dictates a site’s organization and content. CSS comprises the code for every graphic element—from backgrounds to fonts—that make up the look and feel of a website.


HTML

     Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web. 


The basic elements of an HTML page are:
  • 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.
  • A list, denoted using the <ul> (unordered list), <ol> (ordered list) and <li> (list element) tags.
  • An image, denoted using the <img> tag
  • A divider, denoted using the <div> tag
  • A text span, denoted using the <span> tag

CSS 

       Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
  • id - Denotes the unique ID of an element in a page. Used for locating elements by using links, JavaScript, and more.
  • class - Denotes the CSS class of an element.
  • style - Denotes the CSS styles to apply to an element.
  • data-x attributes - A general prefix for attributes that store raw information for programmatic purposes.

Benefits of using CSS
  • Easier to maintain and update
  • Greater consistency in design
  • More formatting options
  • Lightweight code
  • Faster download times
  • Search engine optimization benefits
  • Ease of presenting different styles to different viewers
  • Greater accessibility
Types of CSS

CSS comes in three types:
  • In a separate file (external)
  • At the top of a web page document (internal)
  • Right next to the text it decorates (inline)

External CSS
       External style sheets are separate files full of CSS instructions (with the file extension .css). When any web page includes an external stylesheet, its look and feel will be controlled by this CSS file (unless you decide to override a style using one of these next two types). This is how you change a whole website at once. And that's perfect if you want to keep up with the latest fashion in web pages without rewriting every page.

      Advantages of External CSS:
  • 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.

Internal CSS
      Internal styles are placed at the top of each web page document, before any of the content is listed. This is the next best thing to external, because they're easy to find, yet allow you to 'override' an external style sheet -- for that special page that wants to be a nonconformist.

       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.

Inline CSS
     Inline styles are placed right where you need them, next to the text or graphic you wish to decorate. You can insert inline styles anywhere in the middle of your HTML code, giving you real freedom to specify each web page element. On the other hand, this can make maintaining web pages a real chore.
     
       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.


JavaScript

     JavaScript is client-side scripting. The most widely used client-side script—nearly every site’s front end is a combination of JavaScript and HTML and CSS. JavaScript is fueled by an array of excellent frameworks that simplify it and give it more agility.


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






Comments

Post a Comment

Popular posts from this blog

What Is Programming

-
Image
What is Programing?         Computer programming is the process of designing, writing a code and building an executable computer program for accomplishing a specific computing task. What is a Programming Paradigm?         Programing paradigm is the way of writing programing codes.  Simply its a classification of codes based on there features.  Different types of programing Paradigms  Imperative Imperative programming paradigm of computer in which describe a sequence of steps that change the state of the computer. It describes the how a program should accomplish a certain task. Sequence of statement. Order of execution of statement is very important. They contain state. They can change state. They represent state with the data field. Existence of loops and sections.     Declarative Declarative programing paradigm in which the programmer define what to accomplish ...
Read more

Distrbuted Systems

-
Image
Distributed System A distributed system is collection of independent computers that appears to its users as a single system in order to achieve a common goal. Distribution computing :- Distributed computing is a field of computer science that studies distributed systems. Features of distributed system is  It has a single authority. It can be worldwide. It can be typical service like infrastructure services or application service It has concurrency. It has independent failures. No global clock. Necessity for a Distributed system Sharing of information and services. Possibility to add components that improves availability, reliability, fault tolerance performance, scalabilty.  Continuing advances in communication technology. If one machine crashes, the system as a whole can still survive. Higher availability and improved reliability.  Modular expand-ability. Allow Many users to access the common database. Ex:- Intranets, Inte...
Read more

Client Side Development 2 - RiWAs

-
Image
Rich Web Base Applications Rich Internet applications (RIA) are Web-based applications that have some characteristics of graphical desktop applications. Built with powerful development tools, RIAs can run faster and be more engaging. They can offer users a better visual experience and more interactivity than traditional browser applications that use only HTML and HTTP. RiWAs Features Direct Interaction :- An RIA can use a wider range of controls that allow greater efficiency and enhance the user experience. In RIAs, for example, users can interact directly with page elements through editing or drag-and-drop tools. They can also do things like pan across a map or other image. Partial page updating :- RIAs incorporate additional technologies, such as real-time streaming, high-performance client-side virtual machines, and local caching mechanisms that reduce latency (wait times) and increase responsiveness. Better Feedback :- Because of their ability to change parts...
Read more