postmodern web apps

77
Building Post-Modern Web Applications

Upload: malteubl

Post on 08-May-2015

3.093 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Postmodern Web Apps

Building Post-Modern Web Applications

Page 2: Postmodern Web Apps

Agenda

Page 3: Postmodern Web Apps

No Agenda

Agenda

Page 4: Postmodern Web Apps

Me

_ Working at SinnerSchrader

_ Joose - JavaScript Meta Object System

_ Bespin - Code in the Cloud

_ http://joose-js.blogspot.com

_ http://twitter.com/cramforce

Page 5: Postmodern Web Apps

The term postmodern is described by Merriam-Webster as meaning either "of, relating to, or being an era after a modern one" The American Heritage Dictionary describes the meaning of the same term as "Of or relating to art, architecture, or literature that reacts against earlier modernist principles, as by reintroducing traditional or classical elements of style or by carrying modernist styles or practices to extremes.

Page 6: Postmodern Web Apps

I won‘t talk about whybut about HOW!

Page 7: Postmodern Web Apps

A Brief History of the Web

Page 8: Postmodern Web Apps

In the beginning there was the page

A Brief History of the Web

Page 9: Postmodern Web Apps

In the beginning there was the page

then there was the application

A Brief History of the Web

Page 10: Postmodern Web Apps

In the beginning there was the page

then there was the application

and then there was G-Mail

A Brief History of the Web

Page 11: Postmodern Web Apps
Page 12: Postmodern Web Apps

Post Modern Web Applications

_ feel more like a 90s area desktop application than they do feel like a web page

_ talk to backend systems in highly asynchronous and bi-directional fashion

_ implement complex logic within the client_ backend system must scale to large numbers of simultaenously

connected users

Page 13: Postmodern Web Apps

PMWAs

_ Web 2.0 was about reapplying existing technologies to create more powerful web sites_ Ajax_ Re-Rendering only parts of a page_ „Look what we have here, letʻs make something cool with it“

_ PMWAs are about getting it right_ Wir haben die Plattform endlich im Griff.

Page 14: Postmodern Web Apps

PMWAs Defining Features

_ Realtime collaboration_ Realtime updates_ Work when offline / with flaky connections_ Application VS. Page

Page 15: Postmodern Web Apps

Examples

Page 16: Postmodern Web Apps
Page 17: Postmodern Web Apps
Page 18: Postmodern Web Apps
Page 19: Postmodern Web Apps

More PMWA Examples

_ Google Reader/Docs/Etc._ Youtube Realtime_ Beebo_ Papercube_ MobileMe

Page 20: Postmodern Web Apps
Page 21: Postmodern Web Apps

FAIL

_ User experience conventions for web pages fail for PMWAs_ Traditional HTML and JavaScript programming techniques do

not fit PMWAs_ The HTTP request pattern does not fit the use cases of PMWAs_ Relational databases do not scale to web scale

Page 22: Postmodern Web Apps

We need new paradigms!

Page 23: Postmodern Web Apps

We need new paradigms!Do we?

Page 24: Postmodern Web Apps

We need new paradigms!Do we?Yes

Page 25: Postmodern Web Apps

We need new paradigms!Do we?Yes; but not for everything

Page 26: Postmodern Web Apps

We need new paradigms!Do we?Yes; but not for everythingI was raised by my parents with the formularconservatism = facism - 0.1

Page 27: Postmodern Web Apps

We need new paradigms!Do we?Yes; but not for everythingI was raised by my parents with the formularconservatism = facism - 0.1Maybe I‘m a rebel now

Page 28: Postmodern Web Apps

Some old people already know how to build rich client applications

Page 29: Postmodern Web Apps

Some old people already know how to build rich client applications

Page 30: Postmodern Web Apps

Some old people already know how to build rich client applications

Page 31: Postmodern Web Apps
Page 32: Postmodern Web Apps

Lets go concept shopping!

Page 33: Postmodern Web Apps
Page 34: Postmodern Web Apps

We need to learn from Apple how to build GUIs and let the DIN A4 page behind

Page 35: Postmodern Web Apps
Page 36: Postmodern Web Apps

Event-Based programming provides for loose coupling in GUI programming

Page 37: Postmodern Web Apps
Page 38: Postmodern Web Apps

We need to re-apply Model-View-Controller techniques

Page 39: Postmodern Web Apps

The Flash guys are years further down this road

We need to re-apply Model-View-Controller techniques

Page 40: Postmodern Web Apps
Page 41: Postmodern Web Apps

Client logic needs to be responsive. We need concurrency in the browser.

Page 42: Postmodern Web Apps

Enabling Technologies

Page 43: Postmodern Web Apps

Disabling Technologies

Page 44: Postmodern Web Apps

The Internet Explorer 6 Dillemma

_ Progress in web development has been hindered by the need to be compatible with a 7 year old complete failure.

_ This will end in 2010.

Page 45: Postmodern Web Apps

The Internet Explorer 6 Dillemma

_ Progress in web development has been hindered by the need to be compatible with a 7 year old complete failure.

_ This will end in 2010.

Page 46: Postmodern Web Apps

The Internet Explorer 6 Dillemma

_ Progress in web development has been hindered by the need to be compatible with a 7 year old complete failure.

_ This will end in 2010.

Internet Explorer 6 is steadily vanishing

Page 47: Postmodern Web Apps

Enabling Technologies

Page 48: Postmodern Web Apps

Ultra Fast JavaScript

_ Tracemonkey_ Squirrelfish_ V8

Page 49: Postmodern Web Apps

Make-The-DOM-Nicer Libraries

_ jQuery_ Dojo_ YUI_ etc.

Page 50: Postmodern Web Apps

Widget Libraries

_ jQuery UI_ Dijits_ YUI

Page 51: Postmodern Web Apps

Component Frameworks

_ PureMVC_ JavaScript MVC_ SproudCore_ Cappucino_ White Open Space Ready

To Be Filled

Page 52: Postmodern Web Apps

Comet

_ Server-Push like technology_ Bending HTTP to itʻs will_ Long polling

Page 53: Postmodern Web Apps

Flash

_ Use where appropriate_ Video!

Page 54: Postmodern Web Apps

Canvas

_ 2D drawing in the browser_ Will have a big future_ Eliminates many Flash use cases

Page 55: Postmodern Web Apps

Coming with HTML5

Page 56: Postmodern Web Apps

Local Storage

Page 57: Postmodern Web Apps

Local Storage

_ Enables offline apps_ SQL database on the client side

Page 58: Postmodern Web Apps
Page 59: Postmodern Web Apps

Geo Location

_ The browser knows where you are_ Especially interesting for mobile apps_ But also coming to a home near you

Page 60: Postmodern Web Apps
Page 61: Postmodern Web Apps

Web Workers

_ Enable multi process JavaScript_ Now we can do hard calculations on the client_ without blocking the UI_ Responsiveness!!!

Page 62: Postmodern Web Apps

Example time

Page 63: Postmodern Web Apps

Example time

Page 64: Postmodern Web Apps

Bespin

_ an experiment to build a text editor that works in the browser_ shows what can be done with modern web browsers_ absolutely zero Internet Explorer 6 compatibility

Page 65: Postmodern Web Apps

Goals

_ Fast_ Responsive_ Ability to edit very large files_ Collaboration - edit file with multiple users_ Extensible_ Embeddable

Page 66: Postmodern Web Apps

Show Application

Thanks for the reminder

Page 67: Postmodern Web Apps

Event-Driven

_ Source-Code Examples (In Editor)_ Real-World Example_ Open-Document -> Change Syntax Coloring

Page 68: Postmodern Web Apps

Responsiveness

_ Use of Canvas_ Web Workers, WorkerFacade

Page 69: Postmodern Web Apps
Page 70: Postmodern Web Apps

Post Modern Web Applications

Page 71: Postmodern Web Apps

Post Modern Web Applications

The tools are here (HTML5, etc).We need to professionalize their usage.

Page 72: Postmodern Web Apps

Post Modern Web Applications

We can learn many things from the „Fat Client“

The tools are here (HTML5, etc).We need to professionalize their usage.

Page 73: Postmodern Web Apps

Post Modern Web Applications

We can learn many things from the „Fat Client“

The ecosystem is catching up (Component Frameworks, etc.). We can help!

The tools are here (HTML5, etc).We need to professionalize their usage.

Page 74: Postmodern Web Apps

In the next 12 months more and more websites will become post modern web applications

Page 75: Postmodern Web Apps

In the next 12 months more and more websites will become post modern web applications

The whole ecosystem of web development will need to adapt ...

Page 76: Postmodern Web Apps

In the next 12 months more and more websites will become post modern web applications

The whole ecosystem of web development will need to adapt ...

... from user experience, over design to software development

Page 77: Postmodern Web Apps

Thank You for Listening!

http://joose-js.blogspot.com

http://twitter.com/cramforce