Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Browser is Dead

The Browser is Dead

Three years ago I had never written a browser application. I had written plenty of web apps, but really I was coding like it's 1999. And did I mention I'm useless at design? So I was writing ugly web apps like it's 1999!

Then I started working with a rather unusual programmer who was writing front office trading apps - traditionally the domain of rich desktop clients - in a browser. In a browser! Surely it would be too slow? And the user experience would suck? But it wasn't. And it didn't. Because the browser isn't just a browser any more.

Three years on I can get from zero to functional faster than I ever thought possible. I can create feature-rich, good-looking apps with zero desktop deployment. I've never felt so empowered by a technology as I do by html5 and modern web development. I'm still useless at design but now it's much less obvious!

In this session I'll show you how to get up and running in record time, and more importantly how to harness this powerful new platform. The browser is dead, long live the browser.

Daniel Terhorst-North
PRO

October 03, 2012
Tweet

More Decks by Daniel Terhorst-North

Other Decks in Programming

Transcript

  1. THE BROWSER IS DEAD…
    Dan North
    Dan North & Associates

    View Slide

  2. …LONG LIVE THE BROWSER!
    Dan North
    Dan North & Associates

    View Slide

  3. The gangs
    1990: Tim Berners-Lee - (WorldWideWeb)
    1993: NCSA – Mosaic
    1994: Netscape - Navigator
    1995: Microsoft - Internet Explorer
    1996: Opera – Opera
    1997: Netscape - Communicator

    2004: Mozilla - Firefox
    2008: Google - Chrome
    @tastapod

    View Slide

  4. The tech
    1991-1995: HTTP, HTML, cookies, SSL, JavaScript
    1996: Java applets, Flash, XML
    1997: HTML 4, CSS
    1999: AJAX (XMLHttpRequest)
    2001-2006: SVG, Canvas
    @tastapod
    http://www.evolutionoftheweb.com

    View Slide

  5. The tech
    2008-now – Everything else!
    – Graphics: 2D and 3D transforms, WebGL, CSS3
    – Client-side storage: localStorage and indexedDB
    – Server-sent I/O: WebSockets and EventSource
    – ECMAScript: fast JavaScript and DOM manipulation
    @tastapod
    http://www.evolutionoftheweb.com

    View Slide

  6. Your humble narrator
    1987-1991 – Pyramid OS/x: elm, telnet, ftp
    1991-1993 – Usenet
    1992 – First time I saw the worldwide web
    Me: meh!
    oops
    1997 – First time I saw Enterprise Java
    Me: meh!
    just saying…
    @tastapod

    View Slide

  7. What is a browser for?
    Rendering J2EE servlet output
    Displaying brochure web sites
    Then suddenly…
    - Google Maps disrupts streetmap.co.uk
    - GMail disrupts HotMail and Yahoo!
    - Google Docs disrupts Microsoft Office
    For an ad company, Google really knows its tech!
    @tastapod

    View Slide

  8. Rule 1: Everything is asynchronous
    Request-response is just selfish programming
    – “You can wait for me, because I’m important”
    Corollary:
    – Modal dialogs are rude
    – Surprise modal dialogs are ruder
    Wild-assed theory:
    – That’s why people like node.js (plus RINSWAN)
    Assume you’re not the most important thing
    @tastapod

    View Slide

  9. Let’s look at that response
    The server sends it to you
    – maybe you asked for it
    – maybe it just cares about you 
    It’s no use unless you can see it
    So the browser renders it for you
    @tastapod

    View Slide

  10. Ceci n’est pas un page
    @tastapod

    View Slide

  11. A brief history of templating
    J2EE had JSP, then velocity, stringtemplate
    – compile into a function that emits HTML
    Rails had ERB, moustache, partials
    – compile into a function that emits HTML
    Django has the Django template system
    – compiles into a function that emits HTML
    @tastapod

    View Slide

  12. We try to get better at templating
    We’re combining the template and the data
    on the server
    Separation of concerns 101
    @tastapod

    View Slide

  13. Rule 2: The DOM is the template
    Let’s have an example
    jQuery knows about DOMs so you don’t have to!
    @tastapod

    View Slide

  14. So where does that leave the server?
    Serving data!
    And a new generation of app servers is born:
    – sinatra
    – flask
    – webbit
    – express, connect
    @tastapod

    View Slide

  15. Rule 3: the server serves data
    Not objects
    Certainly not “transfer objects”
    Let’s have an example
    JSON = JavaScript Object Notation?
    @tastapod

    View Slide

  16. Rule 3: the server serves data
    Not objects
    Certainly not “transfer objects”
    Let’s have an example
    JavaScript Structured Data Notation
    @tastapod

    View Slide

  17. But it still looks a bit 1999…
    Remember I said I was rubbish at design?
    Let’s have an example
    Bootstrap knows about styling so you don’t have to!
    @tastapod

    View Slide

  18. Rule 4: Someone already solved it
    The DOM
    – jQuery, sizzle, zepto
    – knockout, backbone, angular
    JavaScript
    – underscore
    CSS
    – bootstrap, skeleton, 960grid
    @tastapod

    View Slide

  19. I didn’t talk about…
    URLs and history
    The browser as IDE
    The community
    Ubiquitous JavaScript
    @tastapod

    View Slide

  20. So what have I learned?
    The DOM is a template – learn to use it!
    Everything is an event
    You can work truly outside-in
    It pays to be late to the party 
    @tastapod

    View Slide

  21. Go code web apps!
    @tastapod
    http://dannorth.net
    [email protected]
    @tastapod

    View Slide