technology trends & disruptions

Download Technology  trends &  disruptions

Post on 13-Apr-2017

174 views

Category:

Technology

1 download

Embed Size (px)

TRANSCRIPT

Technology- Trends & disruptions

Technology- Trends & disruptionsThe web evolution & revolutionAuthor & Presenter : Vishakha VaidyaFor PG Workshop on "Web technology trends and responsive web design" at 2015 IEEE International Advance Computing Conference, Bangalore

The evolution

First calculating machine18221946First commercial computerHome users non scientists1964First mouse and GUI prototype1970-71DRAM/ floppy1973Ethernet1974-81PCs1990HTML/ WWW1993Graphics/ MultimediaFaster calculationsEnterprises resource reuse/sharingGames1994

Charles Babbageconceives of a steam-driven calculating machine that would be able to compute tables of numbers.

1973:Global networking becomes a reality as the University College of London (England) and Royal Radar Establishment (Norway) connect to ARPANET. The termInternetis born.1974:The first Internet Service Provider (ISP) is born with the introduction of a commercial version of ARPANET, known as Telenet.

1991:CERN introduces theWorld Wide Webto the public.

2

The evolution

Consoles/ joysticks2000200364 bit processorDevices2006Ninetendo Wii2006Laptops Macbook Pro2006-09E book readers2007iPhone2010iPad2015iWatchFaster rendering/ real time motion graphicsSmart phones/ multiple devices2012AWS eventAWSMulti device applications, responsive web designAnalyticsAdvertisingVideo streamingE-commerceIOT

Charles Babbageconceives of a steam-driven calculating machine that would be able to compute tables of numbers.

1973:Global networking becomes a reality as the University College of London (England) and Royal Radar Establishment (Norway) connect to ARPANET. The termInternetis born.1974:The first Internet Service Provider (ISP) is born with the introduction of a commercial version of ARPANET, known as Telenet.

1991:CERN introduces theWorld Wide Webto the public.

3

The technology life cycle - CharacteristicsCompetitive volatilityTechnological UncertaintyMarket UncertaintyTechnology product/ service

The technology s-curveSource : 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 TechnologiesClassic WebWeb 2.0Web 3.0Web/email/chatWiki / blogs / socialAny device/ any placeWeb 4.0Sensors/ wearable techContentCommunicationContextThings

We are here

The web technology stack - traditionalApplicationPHPApacheMySQLOS(Linux/windows)

The web technology stack nowOSBackend Database / PersistenceWebserver/ server side code MiddlewareBrowser/client side codeLinux/ WindowsPostgresq/ MongoDB/ RedisRuby on railsNodejs/ apachejQuery/ Bootstrap/ socket.io

The backend from SQL to NOSQL to NewSQL

SQL query language for managing RDBMSNOSQL Not Only SQLNewSQL vendors,NimbusDB(NuoDB) andGenieDBBackend as a Service (BaaS)

Backend Development is all about defining and managing the critical components such as the core functional logic, APIs, databases, application logic and application integration. The skills of a backend developer can make a big difference to website design and its various features and functionalities. Lets take a look at the current backend development trends to understand its impact on website development.Backend as a Service (BaaS) speeds up mobile app development, improves scalability and reduces the need for server-side code, proponents say.An alternative to mobile middleware, BaaS uses the cloud to connect back-end data to the front end of mobile apps. The approach is new, but some industry viewers say the space is growing rapidly: Analyst group MarketsandMarkets predicts that the BaaS market will be worth $7.7 billion by 2017.

NoSQL databases are increasingly used inbig dataandreal-time webapplications.Most NoSQL stores lack trueACIDtransactions ACID(Atomicity,Consistency,Isolation,Durability) i10

The web server from Apache to NodeJS

Asynchronous I/OIt's built to handle asynchronous I/O from the ground up and is a good match to a lot of common web- and network-development problems.The boom in unstructured data that the world has seen in the last few years is one of the main reasons relational databases are no longer sufficient for many companies needs. One reason we have seen this boom in unstructured data is the global ease of access to the Internet. Contributing to this boom is the ubiquity of social media,11

The web server from Apache to NodeJS

NodeJS Event loop

Thread poolTask1Task2Task13ResponseThe Front end clientFunctionCallback

Apacheis thread and process based i.e each request is handled by a separate thread or process (depending upon configuration), which means if the process is waiting for the I/O, whole thread is blocked.Node JShas asynchronous, even driven I/O. Every nodejs instance runs in a single thread and due to its asynchronous nature, it can handle far more number of concurrent requests as compared to apache.Node.jsbuilt onChrome's JavaScript runtimeevent-driven, non-blocking

12

Lets code A simple NodeJS app

CODE

The message board appSetup/write a serverDesign a responsive, single page client, which can post a message and display the message board containing messages posted by other clients.

The environmentServerNode JS - a server-side Javascript platformDOWNLOAD - http://nodejs.org/download/Node Package Manager (NPM)express connect socket.io and sockjs

Text editor Brackets/ sublimetext/ vi/ notepad++

Socket.IOreal-time bidirectional event-based communication.npm install socket.ioUSERS - 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); });});

var socket = io.connect('http://localhost:3000');window.onload = function() { var content = document.getElementById("content"); socket.on('message', function (data) {var html = '';html+= '';html+=data.username;html+= ''html+=data.msghtml+=''; 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

17

The front end Responsive web design The philosophy

What is RESPONSIVE??FlexibleAdaptiveRespond to environmentMobile

WHY DO I NEED IT??

Responsive Flexible LayoutsRelative Viewport LengthsMedia Queries@media ruleExample:@media screen and (max-width: 300px){ body{background-color:lightblue; }}

Grid based layout - bootstrap

The first part, flexible layouts, is the practice of building the layout of a website with a flexible grid, capable of dynamically resizing to any width. Flexible grids are built using relative length units, most commonly percentages oremunits. These relative lengths are then used to declare common grid property values such aswidth,margin, orpadding.

min-width,max-width,min-height, andmax-heightproperties.21

Tools and frameworks

Thank you

https://in.linkedin.com/in/vishakhavaidya

vvaidya@adobe.com

vishakha@gmail.com