Evolution of web and where is it heading?

@pankajparkar

How Web Works?

Source: http://write.flossmanuals.net/summary-of-firefox/how-the-web-works/

@pankajparkar

  • HTML - HyperText Markup language

Tim Berners-Lee

Tim Berners-Lee invented www in 1989

  • HTTP - HyperText Transfer protocol
  • URI - Uniform Resource Identifier (URI)
  • formed W3c.org comittee (1994)

Documents & other resource sharing

World wide web - The Web

@pankajparkar

Pankaj P. Parkar

Senior Software Engineer, Deskera

  • MS MVP

  • Angular GDE

  • Opensource Maintainer

  • Stackoverflow Topuser

GitHub @pankajparkar Twitter Follow

About Me!

(@ngx-lib/multiselect)

@pankajparkar

First Web Page

Source: https://home.cern/topics/birth-web

  • First went live in 1993, though it was ready in 1991

Static HTML Pages

  • Vertical Layout only
  • Content wasn't dynamic
  • Alignment of element was tough (No CSS intially)
  • Browser were able to understand only HTML
  • Img tag with .gif support

@pankajparkar

HTML Journey

HTML 1.0 (1991)

HTML 2.0 (1995)

Form, table(with ceavate), input, button, etc.

form-based file upload, tables, etc

@pankajparkar

Source: https://www.mysamplecode.com/2012/04/generate-html-table-using-javascript.html

 

@pankajparkar

Cascade StyleSheet (CSS)

December, 1996

JavaScript (JS)

December, 1997

Brendan Eich

@pankajparkar

HTML 3.2 (Jan 1997)

HTML 4 (Dec 1997)

 w3c recommended 1st version

standard released under

HTML Journey

HTML 3 (Sept 1996)

Abandoned version

Become official standard Jan 1998

@pankajparkar

Static to Dynamic website

@pankajparkar

Source: http://royal.pingdom.com/2007/12/07/a-history-of-the-dynamic-web/

@pankajparkar

  • Technology like .Net, Java, php, etc came with aspx, jsp, applets, etc. pages to serve web pages with code behind written in there respective languages.
  • These technologies bound data to html page on Server Side itself.
  • Generates dynamic page on server before serving it to client

Adoption of Web

@pankajparkar

Source: http://www.scottgu.com/blogposts/viewdata/step5.png

ASPX Page(.Net)

@pankajparkar

Source: https://docs.jboss.org/tools/4.0.1.Final/en/GettingStartedGuide/html/jsp_application.html

JSP Page (Java)

@pankajparkar

Client

/default.aspx
/main.jsp

html render page

View / Template

Engine

Find page based on route

Rendered

Page

Server Side Rendering

DB

Server

@pankajparkar

Challenges

  • Pulling large dataset on server and render whole page on server takes time
  • Data binding workload on Server side
  • Initial page load time was too high in these cases
  • On each button click page has to send request to server and re-renders the page.

@pankajparkar

MVC, MVVM, MVP, MVV patterns

  • Primarily people focused on segregating clutter code
  • Code segregation added significant amount of improvement in performance and maintenance.
  • Different patterns were accommodated by all competitor market vendors.

M - Model

V  - View / ViewModel

C - Controller

P - Presentor

@pankajparkar

Extensible Markup Language (XML)

<widget>
	<debug>on</debug>
	<window title="Sample Konfabulator Widget">
		<name>main_window</name>
		<width>500</width>
		<height>500</height>
	</window>
	<image src="Images/Sun.png" name="sun1">
		<hOffset>250</hOffset>
		<vOffset>250</vOffset>
		<alignment>center</alignment>
	</image>
	<text data="Click Here" size="36" style="bold">
		<name>text1</name>
		<hOffset>250</hOffset>
		<vOffset>100</vOffset>
		<alignment>center</alignment>
		<onMouseUp>
			sun1.opacity = (sun1.opacity / 100) * 90;
		</onMouseUp>
	</text>
</widget>

@pankajparkar

Flash Animations

  • Dependency on Flash Player (heavy plugin)
  • Animation on web + embeded audio / video Support
  • Different Flash games were made
  • ActionScript was used to perform actions

Source: http://digg.com/2017/best-most-memorable-adobe-flash-websites

@pankajparkar

XMLHttpRequest

  • Designed by Microsoft in 1999
  • Use for loading dynamic content on client side
  • Shipped with Internet Explorer 7.0
  • This helps to refresh part of page.
  • In 2005 jQuery made wrapper around XHR object which is known Ajax. It went viral afterwards.
  • In 2005 Yahoo begun offering Web Services in JSON 

aka XHR (1999)

var request = new XMLHTTPRequest();  
request.onload = function() {  
    console.log(this.responseText);
};
request.open('get', 'endpointUrl');  
request.send();

@pankajparkar

{
    "widget": {
        "debug": "on",
        "window": {
            "title": "Sample Konfabulator Widget",
            "name": "main_window",
            "width": 500,
            "height": 500
        },
        "image": {
            "src": "Images/Sun.png",
            "name": "sun1",
            "hOffset": 250,
            "vOffset": 250,
            "alignment": "center"
        },
        "text": {
            "data": "Click Here",
            "size": 36,
            "style": "bold",
            "alignment": "center",
            "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
        }
    }
}

JSON

  • Douglas Crockford first specified and popularized the JSON format
  • Its way simpler, lighter, readable than XML.

(early 2000)

Adoption to RESTful API / Web Services

  • People started converting their Server to Restful API
  • It would consume by multiple type of application like Native Mobile App, desktop app, etc.
  • Earlier Javascript was only used for displaying alert / validation messages. 
  • Now days Javascript perform major role on client side user interaction.

@pankajparkar

Server

/index.html

Parse and Render it

Request initial page

Ask for dynamic data using XHR

Client Side Rendering

html page content

DB

​HTML

CSS

JS

/user/data

response

@pankajparkar

Client Side Rendering

People started thinking to render their application using AJAX dynamically

Source

Separated HTML page

home.html

contact.html

about.html

<html>
  <head>
    <link href="style.css" />
    <script src="app.js"></script>
  </head>
  <body>
    <header></header>
    <section>
      <sidebar></sidebar>
      Home Content
    </section>
    <footer></footer>
  </body>
</html>
<html>
  <head>
    <link href="style.css" />
    <script src="app.js"></script>
  </head>
  <body>
    <header></header>
    <section>
      <sidebar></sidebar>
      Contact Content
    </section>
    <footer></footer>
  </body>
</html>
<html>
  <head>
    <link href="style.css" />
    <script src="app.js"></script>
  </head>
  <body>
    <header></header>
    <section>
      <sidebar></sidebar>
      About Content
    </section>
    <footer></footer>
  </body>
</html>

@pankajparkar

Single Page Application

(SPA)

  • Super fast in terms of UX interaction.
  • Navigation between pages are smother
  • Full browser features usage by Client Side Rendering 
  • Strategy is to replace placeholder with template based on URL.

index.html

<html>
  <head>
    <link href="style.css" />
    <script src="app.bundle.js"></script>
  </head>
  <body>
    <header></header>
    <section>
      <sidebar></sidebar>
      <placeholder></placeholder>
    </section>
    <footer></footer>
  </body>
</html>

URL: #/home

URL: #/about

URL: #/contact

<div>
   Home Content
<div>
<div>
 About Content
<div>
<div>
 Contact Content
<div>

Single Page Application (SPA) cont..

Few Problems

  • Initial Page load is too high
  • SEO becomes difficult

Solutions

  • Bundling & minification
  • Compression techniques like gzip, deflate of static files
  • Lazy-loading.
  • SEO problem can be solved by using hashbang mode

@pankajparkar

Mobile Web

  • Responsive design
  • Low end mobile devices takes more time to load web application developed for Desktop site.

@pankajparkar

Source: https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e

@pankajparkar

Flash Died

  • Site made with flash takes longer to load.
  • Heavy on mobiles.
  • No smart SEO on embedded Flash
  • In 2007 Iphone stop supporting flash
  • In 2007 audio and video API support added unofficially.

@pankajparkar

Responsive Design

Bootstrap (2011)

Foundation (2011)

Twitter (2006)

Zurb

@pankajparkar

Data Binding

@pankajparkar

  • Earlier day Data binding was quite difficult task in CSR
  • In 2010 two fellows ( knockout & backbone ) came and solved multiple issues of web 
  • Even these framework used to create SPA.
  • But eventually there were several issues with complex data model binding.
  • Later angularjs came around 2012, addressed the missing stuff elegantly.
  • Afterwards other framework came like react, vue, aurelia, mithrill, Angular, etc.

Data Binding + SPA

@pankajparkar

Still we need Faster page loading time...

@pankajparkar

Serverside rendering

using node

  • Understand & Run on Javascript
  • Has chrome v8 engine
  • Can easily help to render dynamic view which uses js
  • No need to worry about SEO, as server is going to return full fledge HTML

@pankajparkar

Isomorphic Application

  • Same code works on server side and client side rendering
  • Create single page application without having to wait long time
  • Run javascript on browser and server side via nodejs

@pankajparkar

Source

Web Development Cycle

Static Pages

Server side rendering

Dynamic page rendering

AJax & JSON

Single Page App

Bundling & Minifiction

Lazyloading & code spliting

Isomorphic App

(with node)

@pankajparkar

Where current web is heading..?

@pankajparkar

HTTP2 / H2

  • One TCP connection 
  • Streams are multiplexed and prioritised. 
  • Header Compression (HPACK)
  • Binary framing layer
    • Prioritisation
    • Flow Control
    • Server push

@pankajparkar

Service Worker

  • A service worker that is run by browser in background, separate from browser
  • It don't have access to DOM
  • It helps in offline caching
  • Can take control over http request
  • Only works in https environment

@pankajparkar

Progressive Web Apps (PWA)

  • Faster page load
  • One click away from accessing content.
  • Smooth animation and navigation.
  • Re-engages with push notification.
  • Good experience over flack internet connection
  • Consistent experience across browsers.
  • Eg. Forbes, flipkart, olx, pinterest, trivago, etc.

@pankajparkar

Web Component

  • HTML and DOM specifications that allow for the creation of reusable widgets or components in web documents and web applications
  • Main reason is to bring component based design engineering

@pankajparkar

Web Assembly

(wasm)

  • WebAssembly is a new type of code that can be run in modern web browsers.
  • it provides a way to run code written in multiple languages on the web at near native speed, with client apps running on the web that previously couldn’t have done so.

@pankajparkar

SSR + PWA

+  HTTP2

+  Service Worker

+  Web Components

+  WebAssembly

+ Micro frontend

+  etc...

@pankajparkar

@pankajparkar

Q & A

@pankajparkar

References

  • http://wiki.c2.com/?ModelViewControllerHistory
  • https://en.wikipedia.org/wiki/Representational_state_transfer
  • https://medium.freecodecamp.org/bd5c786b340d
  • https://www.w3.org/Style/CSS20/history.html
  • ​http://www.yourhtmlsource.com/starthere/historyofhtml.html
  • http://royal.pingdom.com/2007/12/07/a-history-of-the-dynamic-web/
  • http://blog.sqlizer.io/posts/json-history/
  • https://thehistoryoftheweb.com/the-story-of-flash/
  • https://www.demacmedia.com/css3-animation/
  • http://adaptivepath.org/ideas/ajax-new-approach-web-applications/
  • https://medium.com/capital-one-tech/why-everyone-is-talking-about-isomorphic-universal-javascript-and-why-it-matters-38c07c87905

@pankajparkar

Evolution of web and where is it heading?

By Pankaj Parkar

Made with Slides.com

Evolution of web and where is it heading?

This session will cover how web evolved over a time. Also it briefs about what are the major factors that considered as bottlenecks and how it got addressed by various techniques in the evolution journey.

  • 1,170

More from Pankaj Parkar