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

October 03, 2012
Tweet

More Decks by Daniel Terhorst-North

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. What is a browser for? Rendering J2EE servlet output Displaying

    <blink>brochure web sites<marquee> 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
  6. 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
  7. 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
  8. 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
  9. We try to get better at templating We’re combining the

    template and the data on the server Separation of concerns 101 @tastapod
  10. Rule 2: The DOM is the template Let’s have an

    example jQuery knows about DOMs so you don’t have to! @tastapod
  11. So where does that leave the server? Serving data! And

    a new generation of app servers is born: – sinatra – flask – webbit – express, connect @tastapod
  12. Rule 3: the server serves data Not objects Certainly not

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

    “transfer objects” Let’s have an example JavaScript Structured Data Notation @tastapod
  14. 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
  15. Rule 4: Someone already solved it The DOM – jQuery,

    sizzle, zepto – knockout, backbone, angular JavaScript – underscore CSS – bootstrap, skeleton, 960grid @tastapod
  16. I didn’t talk about… URLs and history The browser as

    IDE The community Ubiquitous JavaScript @tastapod
  17. 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