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.

Transcript

1. THE BROWSER IS DEAD… Dan North Dan North & Associates
2. …LONG LIVE THE BROWSER! Dan North Dan North & Associates
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
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
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
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
7. 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
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
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
10. Ceci n’est pas un page @tastapod
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
12. We try to get better at templating We’re combining the template and the data on the server Separation of concerns 101 @tastapod
13. Rule 2: The DOM is the template Let’s have an example jQuery knows about DOMs so you don’t have to! @tastapod
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
15. Rule 3: the server serves data Not objects Certainly not “transfer objects” Let’s have an example JSON = JavaScript Object Notation? @tastapod
16. Rule 3: the server serves data Not objects Certainly not “transfer objects” Let’s have an example JavaScript Structured Data Notation @tastapod
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
18. Rule 4: Someone already solved it The DOM – jQuery, sizzle, zepto – knockout, backbone, angular JavaScript – underscore CSS – bootstrap, skeleton, 960grid @tastapod
19. I didn’t talk about… URLs and history The browser as IDE The community Ubiquitous JavaScript @tastapod
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
21. Go code web apps! @tastapod http://dannorth.net dan@dannorth.net @tastapod