technology trends & disruptions

Technology- Trends & disruptionsThe web evolution &

revolution

Author & Presenter : Vishakha Vaidya

For PG Workshop on "Web technology trends and responsive web design" at 2015 IEEE International

Advance Computing Conference, Bangalore

The evolutionFirst

calculating

machine

1822 1946

First commerci

al computer

Home users non scientists

1964

First mouse

and GUI prototype

1970-71

DRAM/ floppy

1973

Ethernet

1974-81

PC’s

1990

HTML/ WWW

1993

Graphics/ Multimedi

a

Faster calculations

Enterprises resource reuse/sharing

Games

1994

The evolution

Consoles/ joysticks

2000 2003

64 bit processor

Devices

2006

Ninetendo Wii

2006

Laptops Macbook

Pro

2006-09

E book readers

2007

iPhone

2010

iPad

2015

iWatch

Faster rendering/ real time motion

graphics

Smart phones/ multiple devices

2012

AWS even

t

AWS

Multi device applications, responsive web design

Analytics AdvertisingVideo

streamingE-commerce

IOT

The technology life cycle - Characteristics

Competitive

volatility

Technological

Uncertainty

Market Uncertaint

y

Technology

product/ service

The technology s-curve

Source : http://bizshifts-trends.com/2013/09/22/shifting-s-curve-business-sustained-growth-thru-transformation-reinvention-shift-next-s-curve-repeatly/

Technology adoption

Source : https://setandbma.wordpress.com/2012/05/28/technology-adoption-shift/

Web Technologies

Classic Web

Web 2.0

Web 3.0

Web/email/chat

Wiki / blogs / social

Any device/ any place Web 4.0

Sensors/ wearable tech

Content Communication Context Things

We are here

The web technology stack - traditional

Application

PHP

Apache MySQL

OS(Linux/windows)

The web technology stack now

OS

Backend Database / Persistence

Webserver/ server side code

Middleware

Browser/client side code

Linux/ Window

s

Postgresq/ MongoDB/ Redis

Ruby on rails

Nodejs/ apache

jQuery/ Bootstrap/ socket.io

The backend – from SQL to NOSQL to NewSQL

• SQL – query language for managing RDBMS• NOSQL – Not Only SQL• NewSQL vendors, NimbusDB (NuoDB) and GenieDB• Backend as a Service (BaaS)

The web server – from Apache to NodeJS

The web server – from Apache to NodeJS

NodeJS Event loop

Thread pool

Task1

Task2

Task13

Response

The Front end client

Function

Callback

Lets code – A simple NodeJS app

<start>CODE</start>

The message board app1. Setup/write a server2. Design a responsive, single page client, which can

post a message and display the message board containing messages posted by other clients.

The environmentServer

Node JS - a server-side Javascript platform

DOWNLOAD - http://nodejs.org/download/ Node Package Manager

(NPM)express connect socket.io and sockjs

Text editor – Brackets/ sublimetext/ vi/ notepad++

Socket.IO• real-time bidirectional event-based communication.• npm install socket.io• USERS - From Microsoft Office, Yammer, Zendesk,

Trello... to hackathon winners and little startups.

ServerServer (app.js)var app = require('express')();var server = require('http').Server(app);var io = require('socket.io')(server);

server.listen(80);

app.get('/', function (req, res) { res.sendfile(__dirname + '/index.html');});

io.on('connection', function (socket) { socket.emit('news', { hello: 'world' }); socket.on('my other event', function (data) { console.log(data); });});

<script src="/socket.io/socket.io.js"></script><script type="text/javascript">var socket = io.connect('http://localhost:3000');window.onload = function() { var content = document.getElementById("content"); socket.on('message', function (data) {

var html = '<figure>';html+= '<figcaption><p>';html+=data.username;html+= '</p></figcaption><p>'html+=data.msghtml+='</p></figure>';

content.innerHTML += html; });}function Send() { var msg = document.getElementById("Message"); var text = msg.value;

var name = document.getElementById("Name");

socket.emit('send', { msg: text, username: name.value });};

Client

The front end – Responsive web design • The philosophy

What is RESPONSIVE??• Flexible• Adaptive• Respond to environment• Mobile

WHY DO I NEED IT??

Responsive • Flexible Layouts• Relative Viewport Lengths

• Media Queries• @media rule• Example:

@media screen and (max-width: 300px) {    body {        background-color: lightblue;    }}

• Grid based layout - bootstrap

Tools and frameworks

Thank youhttps://in.linkedin.com/in/vishakhavaidya

vvaidya@adobe.com

vishakha@gmail.com