technology trends & disruptions
TRANSCRIPT
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