genealogy of front end technologies

Post on 14-Apr-2017

216 Views

Category:

Engineering

3 Downloads

Preview:

Click to see full reader

TRANSCRIPT

GENEALOGY OF FRONT END TECHNOLOGIES

Invention of Web with HTML as its publishing language

● Tim felt the need of enabling researchers from remote sites in the world to organize and pool together information.

● He suggested to actually link the text in the files themselves.● This idea leads to the invention of Web,● For linking documents together by using buttons on the screen

hypertext is used.

Invention of HTTP

● For this Tim developed his own simple protocol - HTTP(HyperText Transfer Protocol) - for retrieving other documents' text via hypertext links.

● The text format for HTTP was named HTML, for HyperText Mark-up Language.

WHY HTTP?

● To reduce the inefficiencies of the FTP protocol.● Goal was fast request-response interaction● Two seperate TCP connections is established in FTP whereas only

one connection is required in HTTP.● HTTP doesn't require the control-channel to be maintained at the

server or client, so is stateless and simpler to implement.

HTML is based on SGML

● The HTML that Tim invented was strongly based on SGML.● HTML have hypertext links which is not present in SGML.● The idea of using the anchor element with the HREF attribute was

purely Tim's invention.

Invention of Mosaic Browser

● Tim's ideas had caught the eye of researchers of University of Illinois at Champaign-Urbana.

● After realizing the importance of Web, they decided to develop a browser which is called as Mosaic.

JAVASCRIPT

● When the World Wide Web was first created in the early 1990s all web pages were static.

● Netscape was the first to bring out a programming language that would allow web pages to become interactive - they called it Livescript and it was integrated into the browser.

● Upon receiving a trademark license from Sun, the name JavaScript was adopted.

Style sheets for HTML documents begin to take shape

● Bert Bos, Hakon Lie, Dave Raggett, Chris Lilley and others from the World Wide Web Consortium and others met to discuss the deployment of Cascading Style Sheets.

● Cascade defines the order of precedence for how conflicting styles should be applied.

● Initialy the focus was completely towards facilitating websites.● As the penetration of internet went so deep in human lives Web

Applications have become as common as websites in our routine life.● Currently the interface for internet is mainly browsers; it tends to

change slowly; mobile applications is just one possibility.

Websites - Defined by its content

Web Application - Defined by its interaction with the user.

Browser Environment

JavaScript

Document frames

location

history

XML HTTP Request

Object

Array

Function

DOMBOM

ECMAScript

DOM

● A programming API for documents that was extended for use in HTML.

● Originated to allow JavaScript scripts to be portable among Web browsers.

● Maps out an entire page as a hierarchy of nodes.

● Programmers can add, modify, or delete elements and content.

Example<html>

<head>

<title>Sample Page</title>

</head>

<body>

<p>Hello World!</p>

</body>

</html>

HTML

HTML

HEAD

HTML

TITLE

Sample Page

BODY

P

Hello World

BOM

● Allowed access and manipulation of the browser window.● e.g change current URL, do background requests to server with

XMLHttpRequest etc.

How Browser Works?

HTML CSS

DOMTree

Render Tree

JavaScript

Intearction

THANK YOU

top related