SlideShare a Scribd company logo
1 of 77
Download to read offline
Building Post-Modern
Web Applications
Agenda
Agenda




No 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 quot;of, relating to, or being an
era after a modern onequot;

The American Heritage Dictionary describes the
meaning of the same term as quot;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 why
but about HOW!
A Brief History of the Web
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
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
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
Postmodern Web Apps
Postmodern Web Apps
Postmodern Web Apps
More PMWA Examples

_ Google Reader/Docs/Etc.
_ Youtube Realtime
_ Beebo
_ Papercube
_ MobileMe
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
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 everything
I was raised by my parents with the
formular
conservatism = facism - 0.1
We need new paradigms!
Do we?
Yes; but not for everything
I was raised by my parents with the
formular
conservatism = facism - 0.1
Maybe 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
Postmodern Web Apps
Lets go concept shopping!
Postmodern Web Apps
We need to learn from Apple
how to build GUIs and let
the DIN A4 page behind
Postmodern Web Apps
Event-Based programming
provides for loose coupling
in GUI programming
Postmodern Web Apps
We need to re-apply
Model-View-Controller
techniques
We need to re-apply
Model-View-Controller
techniques




                    The Flash guys are years
                    further down this road
Postmodern Web Apps
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
Postmodern Web Apps
_ The browser knows where you are
           _ Especially interesting for mobile apps
           _ But also coming to a home near you

Geo Location
Postmodern Web Apps
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
Postmodern Web Apps
Post Modern Web Applications
Post Modern Web Applications

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

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



    We can learn many things from the „Fat Client“
Post Modern Web Applications

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



     We can learn many things from the „Fat Client“



The ecosystem is catching up (Component Frameworks, etc.).
                     We can help!
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

More Related Content

What's hot

Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Christian Heilmann
 
Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Hacking the Mid-End (Great Lakes Ruby Bash Edition)Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Hacking the Mid-End (Great Lakes Ruby Bash Edition)Michael Bleigh
 
Intro to Web Development from Bloc.io
Intro to Web Development from Bloc.ioIntro to Web Development from Bloc.io
Intro to Web Development from Bloc.ioDouglas Wright
 
Single Page Application presentation
Single Page Application presentationSingle Page Application presentation
Single Page Application presentationJohn Staveley
 
Front end for back end developers
Front end for back end developersFront end for back end developers
Front end for back end developersWojciech Bednarski
 
Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016Christian Heilmann
 
Single Page Application Best practices
Single Page Application Best practicesSingle Page Application Best practices
Single Page Application Best practicesTarence DSouza
 
5 single page application principles developers need to know
5 single page application principles developers need to know5 single page application principles developers need to know
5 single page application principles developers need to knowChris Love
 
Front-End 개발의 괜찮은 선택 ES6 & React
Front-End 개발의 괜찮은 선택  ES6 & ReactFront-End 개발의 괜찮은 선택  ES6 & React
Front-End 개발의 괜찮은 선택 ES6 & React지수 윤
 
10 Web Performance Lessons For the 21st Century
10 Web Performance Lessons For the  21st Century10 Web Performance Lessons For the  21st Century
10 Web Performance Lessons For the 21st CenturyMateusz Kwasniewski
 
What Web Framework To Use?
What Web Framework To Use?What Web Framework To Use?
What Web Framework To Use?Kasra Khosravi
 
Front end developer responsibilities what does a front-end developer do?
Front end developer responsibilities  what does a front-end developer do?Front end developer responsibilities  what does a front-end developer do?
Front end developer responsibilities what does a front-end developer do?Katy Slemon
 
1-01: Introduction To Web Development
1-01: Introduction To  Web  Development1-01: Introduction To  Web  Development
1-01: Introduction To Web Developmentapnwebdev
 
That's crazy! how to build single page web apps
That's crazy! how to build single page web appsThat's crazy! how to build single page web apps
That's crazy! how to build single page web appsChris Love
 
CC 2015 Single Page Applications for the ASPNET Developer
CC 2015   Single Page Applications for the ASPNET DeveloperCC 2015   Single Page Applications for the ASPNET Developer
CC 2015 Single Page Applications for the ASPNET DeveloperAllen Conway
 
JavaScript Functions | JavaScript Tutorial for Beginners | Edureka
JavaScript Functions | JavaScript Tutorial for Beginners | EdurekaJavaScript Functions | JavaScript Tutorial for Beginners | Edureka
JavaScript Functions | JavaScript Tutorial for Beginners | EdurekaEdureka!
 

What's hot (20)

Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017
 
Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Hacking the Mid-End (Great Lakes Ruby Bash Edition)Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Hacking the Mid-End (Great Lakes Ruby Bash Edition)
 
Intro to Web Development from Bloc.io
Intro to Web Development from Bloc.ioIntro to Web Development from Bloc.io
Intro to Web Development from Bloc.io
 
Single Page Application presentation
Single Page Application presentationSingle Page Application presentation
Single Page Application presentation
 
Front end for back end developers
Front end for back end developersFront end for back end developers
Front end for back end developers
 
Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016
 
Single Page Application Best practices
Single Page Application Best practicesSingle Page Application Best practices
Single Page Application Best practices
 
5 single page application principles developers need to know
5 single page application principles developers need to know5 single page application principles developers need to know
5 single page application principles developers need to know
 
Front-End 개발의 괜찮은 선택 ES6 & React
Front-End 개발의 괜찮은 선택  ES6 & ReactFront-End 개발의 괜찮은 선택  ES6 & React
Front-End 개발의 괜찮은 선택 ES6 & React
 
10 Web Performance Lessons For the 21st Century
10 Web Performance Lessons For the  21st Century10 Web Performance Lessons For the  21st Century
10 Web Performance Lessons For the 21st Century
 
What Web Framework To Use?
What Web Framework To Use?What Web Framework To Use?
What Web Framework To Use?
 
Front end developer responsibilities what does a front-end developer do?
Front end developer responsibilities  what does a front-end developer do?Front end developer responsibilities  what does a front-end developer do?
Front end developer responsibilities what does a front-end developer do?
 
Web Development
Web DevelopmentWeb Development
Web Development
 
SxSW 2015
SxSW 2015SxSW 2015
SxSW 2015
 
Ali CV
Ali CVAli CV
Ali CV
 
1-01: Introduction To Web Development
1-01: Introduction To  Web  Development1-01: Introduction To  Web  Development
1-01: Introduction To Web Development
 
That's crazy! how to build single page web apps
That's crazy! how to build single page web appsThat's crazy! how to build single page web apps
That's crazy! how to build single page web apps
 
CC 2015 Single Page Applications for the ASPNET Developer
CC 2015   Single Page Applications for the ASPNET DeveloperCC 2015   Single Page Applications for the ASPNET Developer
CC 2015 Single Page Applications for the ASPNET Developer
 
JavaScript Functions | JavaScript Tutorial for Beginners | Edureka
JavaScript Functions | JavaScript Tutorial for Beginners | EdurekaJavaScript Functions | JavaScript Tutorial for Beginners | Edureka
JavaScript Functions | JavaScript Tutorial for Beginners | Edureka
 
Top java script frameworks ppt
Top java script frameworks pptTop java script frameworks ppt
Top java script frameworks ppt
 

Similar to Postmodern Web Apps

Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampChris Love
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of TechnologiesChris Mitchell
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise
Doing Modern Web, aka JavaScript and HTML5 in the EnterpriseDoing Modern Web, aka JavaScript and HTML5 in the Enterprise
Doing Modern Web, aka JavaScript and HTML5 in the EnterpriseChris Love
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxchitrachauhan21
 
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsThe Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsRapidValue
 
Making Of PHP Based Web Application
Making Of PHP Based Web ApplicationMaking Of PHP Based Web Application
Making Of PHP Based Web ApplicationSachin Walvekar
 
What Are Progressive Web Application Development
What Are Progressive Web Application DevelopmentWhat Are Progressive Web Application Development
What Are Progressive Web Application DevelopmentApp Verticals
 
Comparing Static And Dynamically Generated Content Systems
Comparing Static And Dynamically Generated Content SystemsComparing Static And Dynamically Generated Content Systems
Comparing Static And Dynamically Generated Content SystemsMichelle Alexander
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeCaridy Patino
 
(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe(In)Security Implication in the JS Universe
(In)Security Implication in the JS UniverseStefano Di Paola
 
Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDave Malouf
 
COMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxCOMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxwrite31
 
HTML5 - Moving from hacks to solutions
HTML5 - Moving from hacks to solutionsHTML5 - Moving from hacks to solutions
HTML5 - Moving from hacks to solutionsChristian Heilmann
 

Similar to Postmodern Web Apps (20)

Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of Technologies
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise
Doing Modern Web, aka JavaScript and HTML5 in the EnterpriseDoing Modern Web, aka JavaScript and HTML5 in the Enterprise
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise
 
Back-End Code Essay
Back-End Code EssayBack-End Code Essay
Back-End Code Essay
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
 
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsThe Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
 
Making Of PHP Based Web Application
Making Of PHP Based Web ApplicationMaking Of PHP Based Web Application
Making Of PHP Based Web Application
 
What Are Progressive Web Application Development
What Are Progressive Web Application DevelopmentWhat Are Progressive Web Application Development
What Are Progressive Web Application Development
 
Comparing Static And Dynamically Generated Content Systems
Comparing Static And Dynamically Generated Content SystemsComparing Static And Dynamically Generated Content Systems
Comparing Static And Dynamically Generated Content Systems
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
 
Snipe-It Essay
Snipe-It EssaySnipe-It Essay
Snipe-It Essay
 
(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe
 
How backbone.js is different from ember.js?
How backbone.js is different from ember.js?How backbone.js is different from ember.js?
How backbone.js is different from ember.js?
 
Wordpress development 101
Wordpress development 101Wordpress development 101
Wordpress development 101
 
Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAs
 
COMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxCOMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docx
 
HTML5 - Moving from hacks to solutions
HTML5 - Moving from hacks to solutionsHTML5 - Moving from hacks to solutions
HTML5 - Moving from hacks to solutions
 
Wecreate3
Wecreate3Wecreate3
Wecreate3
 
Wecreate3
Wecreate3Wecreate3
Wecreate3
 

Recently uploaded

Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 

Recently uploaded (20)

Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 

Postmodern Web Apps

  • 4. Me _ Working at SinnerSchrader _ Joose - JavaScript Meta Object System _ Bespin - Code in the Cloud _ http://joose-js.blogspot.com _ http://twitter.com/cramforce
  • 5. The term postmodern is described by Merriam- Webster as meaning either quot;of, relating to, or being an era after a modern onequot; The American Heritage Dictionary describes the meaning of the same term as quot;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.
  • 6. I won‘t talk about why but about HOW!
  • 7. A Brief History of the Web
  • 8. A Brief History of the Web In the beginning there was the page
  • 9. A Brief History of the Web In the beginning there was the page then there was the application
  • 10. A Brief History of the Web In the beginning there was the page then there was the application and then there was G-Mail
  • 12. 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
  • 13. 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.
  • 14. PMWAs Defining Features _ Realtime collaboration _ Realtime updates _ Work when offline / with flaky connections _ Application VS. Page
  • 19. More PMWA Examples _ Google Reader/Docs/Etc. _ Youtube Realtime _ Beebo _ Papercube _ MobileMe
  • 21. 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
  • 22. We need new paradigms!
  • 23. We need new paradigms! Do we?
  • 24. We need new paradigms! Do we? Yes
  • 25. We need new paradigms! Do we? Yes; but not for everything
  • 26. We need new paradigms! Do we? Yes; but not for everything I was raised by my parents with the formular conservatism = facism - 0.1
  • 27. We need new paradigms! Do we? Yes; but not for everything I was raised by my parents with the formular conservatism = facism - 0.1 Maybe I‘m a rebel now
  • 28. Some old people already know how to build rich client applications
  • 29. Some old people already know how to build rich client applications
  • 30. Some old people already know how to build rich client applications
  • 32. Lets go concept shopping!
  • 34. We need to learn from Apple how to build GUIs and let the DIN A4 page behind
  • 36. Event-Based programming provides for loose coupling in GUI programming
  • 38. We need to re-apply Model-View-Controller techniques
  • 39. We need to re-apply Model-View-Controller techniques The Flash guys are years further down this road
  • 41. Client logic needs to be responsive. We need concurrency in the browser.
  • 44. 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.
  • 45. 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.
  • 46. 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
  • 48. Ultra Fast JavaScript _ Tracemonkey _ Squirrelfish _ V8
  • 50. Widget Libraries _ jQuery UI _ Dijits _ YUI
  • 51. Component Frameworks _ PureMVC _ JavaScript MVC _ SproudCore _ Cappucino _ White Open Space Ready To Be Filled
  • 52. Comet _ Server-Push like technology _ Bending HTTP to itʻs will _ Long polling
  • 53. Flash _ Use where appropriate _ Video!
  • 54. Canvas _ 2D drawing in the browser _ Will have a big future _ Eliminates many Flash use cases
  • 57. Local Storage _ Enables offline apps _ SQL database on the client side
  • 59. _ The browser knows where you are _ Especially interesting for mobile apps _ But also coming to a home near you Geo Location
  • 61. Web Workers _ Enable multi process JavaScript _ Now we can do hard calculations on the client _ without blocking the UI _ Responsiveness!!!
  • 64. 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
  • 65. Goals _ Fast _ Responsive _ Ability to edit very large files _ Collaboration - edit file with multiple users _ Extensible _ Embeddable
  • 67. Event-Driven _ Source-Code Examples (In Editor) _ Real-World Example _ Open-Document -> Change Syntax Coloring
  • 68. Responsiveness _ Use of Canvas _ Web Workers, WorkerFacade
  • 70. Post Modern Web Applications
  • 71. Post Modern Web Applications The tools are here (HTML5, etc). We need to professionalize their usage.
  • 72. Post Modern Web Applications The tools are here (HTML5, etc). We need to professionalize their usage. We can learn many things from the „Fat Client“
  • 73. Post Modern Web Applications The tools are here (HTML5, etc). We need to professionalize their usage. We can learn many things from the „Fat Client“ The ecosystem is catching up (Component Frameworks, etc.). We can help!
  • 74. In the next 12 months more and more websites will become post modern web applications
  • 75. 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 ...
  • 76. 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
  • 77. Thank You for Listening! http://joose-js.blogspot.com http://twitter.com/cramforce