Building Post-Modern Web Applications
Agenda
No Agenda
Agenda
Me
_ Working at SinnerSchrader
_ Joose - JavaScript Meta Object System
_ Bespin - Code in the Cloud
_ http://joose-js.blogspot.com
_ http://twitter.com/cramforce
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.
I won‘t talk about whybut about HOW!
A Brief History of the Web
In the beginning there was the page
A Brief History of the Web
In the beginning there was the page
then there was the application
A Brief History of the Web
In the beginning there was the page
then there was the application
and then there was G-Mail
A Brief History of the Web
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
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.
PMWAs Defining Features
_ Realtime collaboration_ Realtime updates_ Work when offline / with flaky connections_ Application VS. Page
Examples
More PMWA Examples
_ Google Reader/Docs/Etc._ Youtube Realtime_ Beebo_ Papercube_ MobileMe
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
We need new paradigms!
We need new paradigms!Do we?
We need new paradigms!Do we?Yes
We need new paradigms!Do we?Yes; but not for everything
We need new paradigms!Do we?Yes; but not for everythingI was raised by my parents with the formularconservatism = facism - 0.1
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
Some old people already know how to build rich client applications
Some old people already know how to build rich client applications
Some old people already know how to build rich client applications
Lets go concept shopping!
We need to learn from Apple how to build GUIs and let the DIN A4 page behind
Event-Based programming provides for loose coupling in GUI programming
We need to re-apply Model-View-Controller techniques
The Flash guys are years further down this road
We need to re-apply Model-View-Controller techniques
Client logic needs to be responsive. We need concurrency in the browser.
Enabling Technologies
Disabling Technologies
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.
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.
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
Enabling Technologies
Ultra Fast JavaScript
_ Tracemonkey_ Squirrelfish_ V8
Make-The-DOM-Nicer Libraries
_ jQuery_ Dojo_ YUI_ etc.
Widget Libraries
_ jQuery UI_ Dijits_ YUI
Component Frameworks
_ PureMVC_ JavaScript MVC_ SproudCore_ Cappucino_ White Open Space Ready
To Be Filled
Comet
_ Server-Push like technology_ Bending HTTP to itʻs will_ Long polling
Flash
_ Use where appropriate_ Video!
Canvas
_ 2D drawing in the browser_ Will have a big future_ Eliminates many Flash use cases
Coming with HTML5
Local Storage
Local Storage
_ Enables offline apps_ SQL database on the client side
Geo Location
_ The browser knows where you are_ Especially interesting for mobile apps_ But also coming to a home near you
Web Workers
_ Enable multi process JavaScript_ Now we can do hard calculations on the client_ without blocking the UI_ Responsiveness!!!
Example time
Example time
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
Goals
_ Fast_ Responsive_ Ability to edit very large files_ Collaboration - edit file with multiple users_ Extensible_ Embeddable
Show Application
Thanks for the reminder
Event-Driven
_ Source-Code Examples (In Editor)_ Real-World Example_ Open-Document -> Change Syntax Coloring
Responsiveness
_ Use of Canvas_ Web Workers, WorkerFacade
Post Modern Web Applications
Post Modern Web Applications
The tools are here (HTML5, etc).We need to professionalize their usage.
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.
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.
In the next 12 months more and more websites will become post modern web applications
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 ...
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
Thank You for Listening!
http://joose-js.blogspot.com
http://twitter.com/cramforce