In Defence of HTML

or let's not throw out the last 20 years just yet

you keep saying this word "web" (Part I)

I'll begin with a fundamental philosophical question. I'll state my position, but move on, because in many ways it's a matter of belief, even of faith. You either effectively accept it or not.

To me, and I know to many others, the web is something more, indeed much more than anything which runs in a browser. It is much more than something simply built with the technologies of the web. It is something open, interoperable, something which aims to reach as much of the world as possible.

Approaches to developing for the web which are inherently antithetical to these core principles of the web, are to me, not really about the web.

But as I said, these are issues of belief, and not what I want to focus on today.

you keep saying this word "web" (Part II)

Let's think for a moment about what we build, when we build things for the web

We build traditional web sites, still I'd argue the vast majority of the content of the web. These are document-centric, though may, and indeed increasingly do include interactive, application-like content.

We also are now frequently building more application-like, less document-like experiences. This as we know has been going on for quite some time, but for most of that time, much of our application logic has resided on the server, with the client being a largely dumb interface.

In recent years (though examples of this, like Google Maps and Gmail go back quite some way) our client-side applications have become more sophisticated, aided in particularly by the ability to send data rather than entire pages to and from the server.

In the last 3 or 4 years, with the success of mobile application platforms like iOS and Android, we've seen the rise in the expectation that particularly mobile applications which run in the browser will be more native-like.

And in response to this, a particular architecture has emerged to build these kind of native-like applications, the Single Page Application

Developers building these SPAs have found that there are particular challenges to developing them with web technologies. In particular, performance, and the ability to work offline.

Before we continue, I'd like to note that even if all of these concerns are completely true, and that there are no alternatives to addressing the shortcomings of traditional web technologies for building SPAs, we are still only focussing on

  • a small subset of all the types of application we are building for the web
  • a certain historical set of circumstances (currently poor browser engine in Android, lack of JIT compilers in webviews in iOS, first iteration of appcache)

I'm not saying the criticisms, the challenges that James has outlined are not real, not painful, and don't need solving.

It's understandable with all the frustration we have in solving a specific problem, we look to make something new, break the past's shackles, get it right this time.

But, I am suggesting we need to be very careful when looking to make profound changes to systems that have served us well for a long time now.

The second system effect

The general tendency is to over-design the second system, using all the ideas and frills that were cautiously sidetracked on the first one

Fred Brooks,the Mythical Man Month

I fel this for two key reasons.

The trite one is, "the second system effect", as described by Fred Brooks in his classic of Software Engineering, The Mythical Man Month, which seems to apply very much to many of the suggestions we see in regards to how to do the web over.

The general tendency is to over-design the second system, using all the ideas and frills that were cautiously sidetracked on the first one

You don't know what you've got 'til it's gone

Joni Mitchell, Big Yellow Taxi

The second, hopefully less trite response is rather than trying to solve a specific problem we have right now by throwing out many years of robust, solid, well thought out, well understood technologies and patterns, we should at least weigh very carefully what it is that will be gone if we just inject everything into the body.

Simplicity versus easiness

Rich Hickey

I'm going to be quite up front here. Most of the rest of this presentation is inspired by a presentation by Rich Hickey, developer of the language Clojure, on the difference between something being easy and something being simple. You should find it and watch it. It's fantastic

(By the way, if you haven't picked up on the vibe yet, this is really a presentation about Software Engineering and the web.)

Hickey observes that we often conflate easiness with simplicity, but that these are quite profoundly different.

Simplicity (and it's obverse, complexity) is a feature of the thing we build, of our code. Is origins come from the latin meaning "single folded", as opposed to complexity, whose origins mean "many folded", or intertwined.

Easiness on the other hard is a subjective experience that we as developers have, unrelated to what we actually build.

Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better.

Edsger Dijkstra

As Dijkstra notes, simplicity is hard work. But absolutely vital to building reliable systems.

It is not a daily increase, but a daily decrease. Hack away at the inessentials

Bruce Lee

There have been a great many quotations about simplicity, we all know many, from Einstein, Leonardo, Frank Lloyd Wright, but I'll leave the last word to the master, Bruce Lee. "It is not a daily increase, but a daily decrease. Hack away at the inessentials"

  • We've known for a long time that complex systems become increasingly expensive, take increasingly longer to build, often are never completed
  • we know adding new features is difficult
  • we know maintaining them is hard

And I'm going to argue that we've got away with not paying enough attention to issues like complexity for too long when we build for the web, particularly on the client side for a number of reasons

  • For a long time, what we've been building has been intrinsically quite simple
  • A lot of what we build is quite trivial (these are not the same thing), so their complexity, and its implications have been hidden
  • We've long been used to throwing things out and starting again, rather than having to maintain systems over long periods of time

In the world of traditional software development, you simply can't get away with complexity. Many systems are decades old. How many of the things we build have even lasted years?

Simplicity

For most of the history of the web, the tools we've used to develop with have been quite simple

  • We've used HTML for our content
  • We've used CSS to style that content
  • We've used JavaScript and the DOM to add behavior

Easiness

But using these technologies isn't necessarily easy

  • Sometimes because of the underlying ways in which they work. For instance CSS works quite differently from almost any technology most developers will be familiar with. We treat this difference as a bug, which we try to solve with technologies like SASS, which I'll return to a little later
  • Sometimes, because the implementations of these technologies is poor, or inconsistent (if there'd only ever been IE6, developing for the web would doubtless be easier)

Creeping complexity 1.0

So, over time we've added layers of technology and practice to help address the difficulty of developing for the web. Now, not all of these are "bad", but all of these add complexity.

We stumbled on UA sniffing, which made addressing the challenge of cross browser inconsistency easier to deal with.

We developed CSS hacks, to target different browsers with the same CSS code base. These are largely no longer needed, but add complexity to learning and maintaining code bases We added doctype switching, to allow us to develop a single CSS code base that would work in older browsers and newer ones which supported a standards based implementation of CSS and HTML.

all of these added a complexity that continues to impact years later. They make it harder to learn to be a web developer, they make our code larger, more difficult to read and to maintain.

but they did address what we considered at the time fundamental challenges. Pages needed to look as nearly identical as possible across all browsers.

This is a belief we now no longer hold strongly, and indeed as we address the challenges and opportunities of fragmented viewing contexts, from small mobile devices, to tablets, to laptops and desktops, to high resolution monitors to True HD TVs, we have rejected it.

All of this complexity, which still haunts us today was in a way about premature optimisation. Complexity has a long half life, and we need to be very careful about adding it to what we do.

Complexity 2.0

With the rise of web applications around a decade ago, we encountered the challenge of inconsistent DOM implementations (we'd already discovered these problems years earlier with DHTML, but they re emerged as what we tried to do in the browser became more complex, and as browsers other than Internet Explorer gained some sort of traction).

Prototype, Dojo, Mootools, JQuery, and other monolithic JavaScript libraries emerged to help us manage the challenges of these inconsistent implementations. They also added inconsistent features to address the shortcomings of the DOM, and JavaScript. They made our lives easier. but they added complexity as well.

  • On top of learning JavaScript and the DOM, we needed to learn the features, concepts and often new syntaxes of these libraries
  • We needed to manage versioning issues
  • We needed to start considering their impact on performance, and so developed minifying as a way of reducing their impact on downloads

Now

And

And increasingly meta toolsets (e.g. Yeoman. HTML5 Boilerplate, Mobile BoilerPlate) for helping us work with all these other toolsets

And to even use them you need Ruby on Rails, or Node.js set up

And this is just for client side development!

And I think we are travelling along a very slippery path of ever increasing complexity, in service of ostensible ease.

Progress, far from consisting in change, depends on retentiveness. When change is absolute there remains no being to improve and no direction is set for possible improvement: and when experience is not retained…, infancy is perpetual. Those who cannot remember the past are condemned to repeat it

George Santayana

Because I'm old, and having been around the block a few times, I frequently come back to this observation by George Santayana

Progress, far from consisting in change, depends on retentiveness. When change is absolute there remains no being to improve and no direction is set for possible improvement: and when experience is not retained…, infancy is perpetual. Those who cannot remember the past are condemned to repeat it

"The Software Crisis"

The major cause of the software crisis is that the machines have become several orders of magnitude more powerful! To put it quite bluntly: as long as there were no machines, programming was no problem at all; when we had a few weak computers, programming became a mild problem, and now we have gigantic computers, programming has become an equally gigantic problem.

Edsger Dijkstra, The Humble Programmer

The term "Software Crisis" was originally coined used at first NATO Software Engineering Conference. in 1968

Some years later, Dijkstra wrote

The major cause of the software crisis is that the machines have become several orders of magnitude more powerful! To put it quite bluntly: as long as there were no machines, programming was no problem at all; when we had a few weak computers, programming became a mild problem, and now we have gigantic computers, programming has become an equally gigantic problem.

Edsger Dijkstra, The Humble Programmer (EWD340), Communications of the ACM

You should read The Humble Programmer, it's not too long, and blends Dijkstra's personal story, with that of the infancy of our industry (Software Engineering) and deeper ideas about our wat it is we do.

As we saw, Dijkstra's counter intuitive response to this was to simplify (not to make things easier)

Separation of Concerns

Separation of concerns (SoC) is the process of breaking a computer program into distinct features that overlap in functionality as little as possible. A concern is any piece of interest or focus in a program.

How did the software engineering world respond to this?

Perhaps the key principle, again a term coined by Dijkstra was the "separation of concerns"

"Separation of concerns (SoC) is the process of breaking a computer program into distinct features that overlap in functionality as little as possible. A concern is any piece of interest or focus in a program. Typically, concerns are synonymous with features or behaviors. Progress towards SoC is traditionally achieved through modularity and encapsulation, with the help of information hiding.

Separation of Concerns

Sound familiar? You know that thing some web folks have been banging on about since the 1990s? HTML for content, CSS for presentation, JavaScript for Behaviour Not only was this good practice, it was baked directly into core technologies of the web

When we use HTML, CSS, JS in the way they were designed, we get separation of concerns out of the box. For free.

yet we do things like this

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Kitchen Sink</title> <link rel="stylesheet" href="../../resources/css/sencha-touch.css" type="text/css" title="senchatouch" id="senchatouch" /> <link rel="stylesheet" href="../../resources/css/android.css" type="text/css" title="android" id="android" disabled="true" /> <link rel="stylesheet" href="../../resources/css/apple.css" type="text/css" title="apple" id="apple" disabled="true" /> <link rel="stylesheet" href="../../resources/css/bb6.css" type="text/css" title="blackberry" id="blackberry" disabled="true" /> <link rel="stylesheet" href="resources/css/sink.css?2" type="text/css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="../../sencha-touch.js"></script> <script type="text/javascript" src="all-classes.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body></body> </html>

yet we do things like this

and this

Ext.ux.UniversalUI = Ext.extend(Ext.Panel, { fullscreen: true, layout: 'card', items: [{ cls: 'launchscreen', html: '<div><img src="resources/img/sencha.png" width="210" height="291" /><h1>Welcome to Sencha Touch</h1> <p>This is a comprehensive collection of our examples in an <br /> easy-to-navigate format. Each sample has a “view source” button which dynamically displays its associated code.<br /><br /> <span>Sencha Touch β (' + Ext.version +')</span></p></div>' }], backText: 'Back', useTitleAsBackText: true, initComponent : function() { this.navigationButton = new Ext.Button({ hidden: Ext.is.Phone || Ext.orientation == 'landscape', text: 'Navigation', handler: this.onNavButtonTap, scope: this });

And this

and this

["userprofile","init",[{"username":"cucinadigitale","bio":"Rome based. Well-loved bicycles, worn-in Chuck Taylors and descriptive hand gestures. This is my Italy. iPhone only. twitter: @cucinadigitale","website":"http:\/\/cucinadigitale.com","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_4342289_75sq_1311108938.jpg","full_name":"Nicolee Drake","counts":{"media":1270,"followed_by":106905,"follows":299},"id":"4342289"},{"username":"webdirections","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_224526012_75sq_1348019603.jpg","id":"224526012","full_name":"Web Directions"},{"incoming_request":false,"followed_by":false,"outgoing_request":false,"following":false,"blocking":false,"is_private":false},[{"type":"image","location":null,"comments":{"count":37,"data":[{"created_time":"1352289573","text":"Eheh bella \ud83d\ude04\ud83d\udc4f","from":{"username":"romanswe","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_29900552_75sq_1351528114.jpg","id":"29900552","full_name":"RomanSwe"},"id":"319350549682309222"},{"created_time":"1352289588","text":"Love!","from":{"username":"mimilam1989","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_201001206_75sq_1343649735.jpg","id":"201001206","full_name":"mariam"},"id":"319350672256649321"},{"created_time":"1352289654","text":"How funny would it be if that car reverse","from":{"username":"dopestroke91","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_201607374_75sq_1351030015.jpg","id":"201607374","full_name":"dopestroke91"},"id":"319351224403216501"},{"created_time":"1352289674","text":"\u2728\ud83d\udc4f\ud83d\udc4f\ud83d\udc4f\u2728Hermosa!!!","from":{"username":"marcelrasquin","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_196127400_75sq_1342804798.jpg","id":"196127400","full_name":"Marcel Rasquin"},"id":"319351397720246393"},{"created_time":"1352289693","text":"nice pic..","from":{"username":"sztruk","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_181156382_75sq_1351134410.jpg","id":"181156382","full_name":"sztruk"},"id":"319351555434465405"},{"created_time":"1352289804","text":"Beutiful picture, she looks so pretty behind the mirror.","from":{"username":"lascanasdejordi","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_246716175_75sq_1351967577.jpg","id":"246716175","full_name":"Jordi Canals Vi\u00f1as"},"id":"319352481092192394"},{"created_time":"1352289809","text":"Ahah funny","from":{"username":"juliettebhj","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_27228621_75sq_1348419049.jpg","id":"27228621","full_name":"Juliette Delory"},"id":"319352530073274507"},{"created_time":"1352289853","text":"Are you in debt? Do you need some c4sh easily well then check out @hamood2541 to make c4sh on the internet.","from":{"username":"leitosjare87","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_217486576_75sq_1346704972.jpg","id":"217486576","full_name":"olexander victor"},"id":"319352897360087193"}]},"caption":{"created_time":"1352287072","text":"Pit stop @moscerina #rome #italy","from":{"username":"cucinadigitale","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_4342289_75sq_1311108938.jpg","id":"4342289","full_name":"Nicolee Drake"},"id":"319329564723759951"},"link":"http:\/\/instagr.am\/p\/RufEeQo8rJ\/","likes":{"count":1823,"data":[{"username":"vcancel0517","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_204957856_75sq_1351884453.jpg","id":"204957856","full_name":"Veronica Cancel"},{"username":"aktionak","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_1955494_75sq_1340515004.jpg","id":"1955494","full_name":"Akbal Singh"},{"username":"lurians","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_53893927_75sq_1347707395.jpg","id":"53893927","full_name":"Lurian Santos"},{"username":"its_irissmit","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_29738157_75sq_1347481713.jpg","id":"29738157","full_name":"Iris Smit"},{"username":"luna_rios2148","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_174041358_75sq_1349824220.jpg","id":"174041358","full_name":"Sandi Buzzell"},{"username":"leitosjare87","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_217486576_75sq_1346704972.jpg","id":"217486576","full_name":"olexander victor"},{"username":"yuuukey","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_24833299_75sq_1350840046.jpg","id":"24833299","full_name":"yuuukey"},{"username":"ayu_p_0708","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_50771190_75sq_1338078502.jpg","id":"50771190","full_name":"ayu_p_0708"},{"username":"armand_emir","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_209151703_75sq_1345179075.jpg","id":"209151703","full_name":"armand_emir"},{"username":"wouhooo","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_30123097_75sq_1350054636.jpg","id":"30123097","full_name":"wouhooo"}]},"created_time":"1352287037","images":{"low_resolution":{"url":"http:\/\/distilleryimage5.s3.amazonaws.com\/b05b9a7628cc11e2adac22000a1fbe03_6.jpg","width":306,"height":306},"thumbnail":{"url":"http:\/\/distilleryimage5.s3.amazonaws.com\/b05b9a7628cc11e2adac22000a1fbe03_5.jpg","width":150,"height":150},"standard_resolution":{"url":"http:\/\/distilleryimage5.s3.amazonaws.com\/b05b9a7628cc11e2adac22000a1fbe03_7.jpg","width":612,"height":612}},"user_has_liked":false,"id":"319329270401059529_4342289","user":{"username":"cucinadigitale","website":"http:\/\/cucinadigitale.com","bio":"Rome based. Well-loved bicycles, worn-in Chuck Taylors and descriptive hand gestures. This is my Italy. iPhone only. twitter: @cucinadigitale","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_4342289_75sq_1311108938.jpg","full_name":"Nicolee Drake","id":"4342289"}},{"type":"image","location":null,"comments":{"count":134,"data":[{"created_time":"1352288359","text":"Good joop","from":{"username":"bad90boy","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_226497531_75sq_1350416481.jpg","id":"226497531","full_name":"bad90boy"},"id":"319340361222966231"},{"created_time":"1352288373","text":"Nice pic","from":{"username":"kyoko1119","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_182639439_75sq_1349739561.jpg","id":"182639439","full_name":"kyoko1119"},"id":"319340484325788632"},{"created_time":"1352288432","text":"hey nice pic","from":{"username":"frances_cummins","profile_picture":"http:\/\/images.instagram.com\/profiles\/anonymousUser.jpg","id":"241470546","full_name":"frances_cummins"},"id":"319340971359980506"},{"created_time":"1352288502","text":"Nice","from":{"username":"odiro","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_203794979_75sq_1344178915.jpg","id":"203794979","full_name":"odiro"},"id":"319341562714901473"},{"created_time":"1352288553","text":"Nice shot \ud83d\udc4d","from":{"username":"jejetop","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_9455640_75sq_1350245694.jpg","id":"9455640","full_name":"jeje ~"},"id":"319341989938318315"},{"created_time":"1352289118","text":"\u0634\u0646\u0648 \u0627\u0644\u062d\u0644\u0648 \u0628\u0627\u0644\u0645\u0648\u0636\u0648\u0639 \u061f\u061f","from":{"username":"gfsha","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_216035877_75sq_1346472599.jpg","id":"216035877","full_name":"Bu_9Lo0o7 AL-7addad"},"id":"319346729266956345"},{"created_time":"1352289689","text":"great shot","from":{"username":"kellykc96","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_210014181_75sq_1349079987.jpg","id":"210014181","full_name":"Kelly C"},"id":"319351520680462458"},{"created_time":"1352289838","text":"\u2764\u2764\u2764","from":{"username":"pamelarenner","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_145762876_75sq_1338049729.jpg","id":"145762876","full_name":"Pamela"},"id":"319352766397139093"}]},"caption":{"created_time":"1352280012","text":"\ud83c\uddfa\ud83c\uddf8 #bicycle \u2764!!! #bicime #bicichic #rome #italy #cyclelove #bikesaroundtheworld","from":{"username":"cucinadigitale","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_4342289_75sq_1311108938.jpg","id":"4342289","full_name":"Nicolee Drake"},"id":"319270341235165325"},"link":"http:\/\/instagr.am\/p\/RuRZ54o8nO\/","likes":{"count":4077,"data":[{"username":"bennyfedora12","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_38888608_75sq_1349042120.jpg","id":"38888608","full_name":"brhsr80@gmail.com"},{"username":"alikobeissi","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_40333776_75sq_1349707353.jpg","id":"40333776","full_name":"Ali Kobeissi"},{"username":"marcelrasquin","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_196127400_75sq_1342804798.jpg","id":"196127400","full_name":"Marcel Rasquin"},{"username":"gals1051","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_43630121_75sq_1347556308.jpg","id":"43630121","full_name":"\ud83d\udd3a\ud83d\udd3b\ud83d\udd3a\ud83d\udd3b\ud83d\udd3aHELLO\ud83d\udd3a\ud83d\udd3b\ud83d\udd3a\ud83d\udd3b\ud83d\udd3a"},{"username":"loukag","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_1846730_75sq_1352207523.jpg","id":"1846730","full_name":"{ L \u00d8 U K \u039b G }"},{"username":"aestheticinfusion","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_44609744_75sq_1345163617.jpg","id":"44609744","full_name":"Andrew D"},{"username":"mnbvcxz_27","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_211638647_75sq_1350309982.jpg","id":"211638647","full_name":"mnbvcxz_27"},{"username":"eug_piet","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_34635322_75sq_1348404907.jpg","id":"34635322","full_name":"Evgeniya Pie"},{"username":"ihateyouusername","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_192669020_75sq_1344614211.jpg","id":"192669020","full_name":"Little Monster"},{"username":"pamelarenner","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_145762876_75sq_1338049729.jpg","id":"145762876","full_name":"Pamela"}]},"created_time":"1352279872","images":{"low_resolution":{"url":"http:\/\/distilleryimage2.s3.amazonaws.com\/0201037228bc11e2af9022000a1f9a23_6.jpg","width":306,"height":306},"thumbnail":{"url":"http:\/\/distilleryimage2.s3.amazonaws.com\/0201037228bc11e2af9022000a1f9a23_5.jpg","width":150,"height":150},"standard_resolution":{"url":"http:\/\/distilleryimage2.s3.amazonaws.com\/0201037228bc11e2af9022000a1f9a23_7.jpg","width":612,"height":612}},"user_has_liked":false,"id":"319269170521033166_4342289","user":{"username":"cucinadigitale","website":"http:\/\/cucinadigitale.com","bio":"Rome based. Well-loved bicycles, worn-in Chuck Taylors and descriptive hand gestures. This is my Italy. iPhone only. twitter: @cucinadigitale","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_4342289_75sq_1311108938.jpg","full_name":"Nicolee Drake","id":"4342289"}},{"type":"image","location":null,"comments":{"count":108,"data":[{"created_time":"1352253748","text":"Awesome shot. Point your camera anywhere in Italy and it looks amazing huh?","from":{"username":"ravivora","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_95982_75sq_1311138134.jpg","id":"95982","full_name":"Ravi Vora"},"id":"319050027549051354"},{"created_time":"1352254067","text":"Nice!","from":{"username":"historyforsale","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_215944014_75sq_1346973325.jpg","id":"215944014","full_name":"\ud83c\uddfa\ud83c\uddf8 \ud83d\udc8f \u261d"},"id":"319052701753395773"},{"created_time":"1352265280","text":"Great shot again!","from":{"username":"ryanmagundayao","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_42932206_75sq_1347342444.jpg","id":"42932206","full_name":"Ryan Magundayao"},"id":"319146765337217477"},{"created_time":"1352278774","text":"Love the vintage look on it","from":{"username":"zdan007","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_214844706_75sq_1346254028.jpg","id":"214844706","full_name":"zdan007"},"id":"319259955165382684"},{"created_time":"1352279068","text":"Lovely photo","from":{"username":"danielleforever22","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_34177896_75sq_1338651624.jpg","id":"34177896","full_name":"Danielle Grace Franco"},"id":"319262425031624760"},{"created_time":"1352284065","text":"Cool :)","from":{"username":"wagenugraha","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_31991863_75sq_1349018908.jpg","id":"31991863","full_name":"wagenugraha"},"id":"319304346118638107"},{"created_time":"1352284418","text":"\u041e\u0442\u043b\u0438\u0447\u043d\u043e","from":{"username":"belkassevera","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_179653422_75sq_1351887607.jpg","id":"179653422","full_name":"Svetlana Mechonoschina"},"id":"319307304688405058"},{"created_time":"1352289539","text":"\u592a\u597d\u770b\u4e86\uff01","from":{"username":"fuck517","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_8603959_75sq_1314245701.jpg","id":"8603959","full_name":"fuck517"},"id":"319350265149114469"}]},"caption":{"created_time":"1352239021","text":"Amor Divino #vespa #vespagram #rome #italy #vscocam","from":{"username":"cucinadigitale","profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_4342289_75sq_1311108938.jpg","id":"4342289","full_name":"Nicolee Drake"},"id":"318926484593166877"},"link":"http:\/

And this

readwrite
  • and we have
    • "web sites" like ReadWrite Web that have 19 iframes on a single page
    • and load up to 20 scripts!
    • and uses Bootstrap
  • it's just a website people
  • Now, this is not simply about methodological purity. Complexity has costs.

learnability

For me, the first challenge for computing science is to discover how to maintain order in a finite, but very large, discrete universe that is intricately intertwined. And a second, but not less important challenge is how to mould what you have achieved in solving the first problem, into a teachable discipline: it does not suffice to hone your own intellect …, you must teach others how to hone theirs. … teaching yourself is discovering what is teachable.

you guessed it (yeah Dijkstra)

learnability

For me, the first challenge for computing science is to discover how to maintain order in a finite, but very large, discrete universe that is intricately intertwined. And a second, but not less important challenge is how to mould what you have achieved in solving the first problem, into a teachable discipline: it does not suffice to hone your own intellect …, you must teach others how to hone theirs. … teaching yourself is discovering what is teachable.

you guessed it (yeah Dijkstra)

  • Once upon a time, we could incrementally approach the challenges of learning to develop for the web.
    • Learn the principles of markup with HTML
    • Learn CSS, and master it over time
    • Learn JavaScript and DOM programming
  • we could view source, and work out how something had been built
  • That's not to say this is perfect, but to observe this is something that has worked well for a long time. We discard such things at our peril

  • With the SPA style of development
    • developers need to be increasingly very good at JavaScript, which in itself is not a bad thing,
    • but also have strong knowledge of specific frameworks, build tools, and on, and on

workflow

when concerns were strictly separated - markup, presentation, behavior, then working on each in isolation, with specialized skills or areas of focus was far easier than having these concerns conflated

build cycles (WTF!)

build cycles (WTF!)

Maybe I'm old fashioned, but the ability to simply drop a file onto a browser, and refresh a window to rebuild is one of the pure joys of working on the web. As someone who comes from (and ocasionally still experiences) the edit compile run, cycle, the immediacy of developing for the web with nothing more than HTML, CSS and JavaScript files is frankly nearly miraculous

An don't get me started on installing and keeping up to date build tools, ruby gems, preprocessors, …

But ironically, here I've fallen into Rich Hickey's trap. I'm talking about ease, and process, not the simplicity or complexity of what we are building. So let's turn to this issue, and the impact of JavaScript everywhere on the artefacts we're building

debuggability

debuggability

  • Developers make simple mistakes like typographical errors
  • We do complex things
  • Really difficult bugs to fix are subtle. They don't throw syntax errors. They just do weird stuff
  • Really complex bugs are difficult to reproduce, because of the stateful nature much of development. What this means is the same code can produce different outcomes based on the state of the system its applied to.

debuggability

debuggability

As developers, we've long been frustrated with CSS errors and bugs. But at least the bugs are reproducible and deterministic. Same HTML + Same CSS gives the same DOM and values.

With CSS and HTML, discovering why this element has these properties set to these values is relatively straightforward. Our tools are well adapted to this problem, but the truth is the problem really isn't complicated.

debuggability

But

Now, there are times when we will need to change the DOM programmatically. But I'd argue that we should resort to this only when it is essentially impossible to do with CSS and HTML alone.

And in order to make that decision, you really need to understand HTML and CSS well. Not just their syntax, but their essence.

Mastery

to obtain the deepest benefit from learning a new language, you must learn to think in the new language, not just learn to translate your favourite programming language syntax and idioms into it.

(Not Dijkstra) Eugene Wallingford

Mastery

to obtain the deepest benefit from learning a new language, you must learn to think in the new language, not just learn to translate your favourite programming language syntax and idioms into it.

(Not Dijkstra) Eugene Wallingford

Compile to JavaScript

  • Of late, there's been an explosion in languages which target JavaScript. CoffeeScript being the recent dominant player.
  • Which introduces significant challenges in each of these areas (learnability - can you just know CoffeeScript and not JavaScript?) but in particular debuggability.
  • Without sourcemaps (more complexity) the challenging of debugging returns to the stone age of console.log
  • The tools we've built, and practices we've developed over years to help make building web sites and applications more robust, are obviated overnight.

In and of themselves, each of these innovations - CoffeeScript, SASS, various MVC frameworks, various tools may appear to bring much, and the case can be made for exchanging ease for some additional, but manageable complexity.

but as we pile innovation on innovation, we have an increasingly fragmented, non interoperable, fragile stack of technologies that rely on one another (I need node.js to use yeoman to give me ...

And there's a far bigger issue lurking than just debuggability.

Maintainability

With most websites, even the biggest, we continue to build, keep them alive, then rebuild completely

On the web, particularly the front end, we're used to throwing things away and starting over again with alarming frequency.

We build all kinds of one off, essentially disposable apps - throw it against the wall, see if it has traction.

And let's face it, in particular the "native like" SPAs we build often don't do all that much.

But as more and more of what was traditionally desktop software becomes web based, this luxury of build to dispose will soon pass.

It's well known in software engineering that rewriting applications, rather than incrementally improving them is highly corelated with negative outcomes. Some of the most significant applications of their day have essentially vanished because of massive rewrites.

In the Web, this is precisely what happened with Netscape, ceding Internet Explorer almost complete dominance of the browser for nearly a decade.

You might argue that ultimately Firefox demonstrates that this was the right response, but essentially that was a new application, not a new version of Netscape.

maintainability

  • are we
    • building for this maintainability?
    • choosing technologies that will be around for a long time?
    • choosing technologies which are widely understood, and will be for the foreseeable future?
  • or are we
    • forever chasing the new?
    • failing to learn from the past?
    • condemning ourselves to "perpetual infancy"?

BTW, everything I'm talking about applies, I think not just to the issue of building everything directly with JS, it also applies to

languages which compile to JS solutions to the problems with CSS, like LESS and SASS

basically, what we are trying to do, is shoe horn into these languages, CSS and JavaScript ideas, idioms, principles that aren't core to them.

to obtain the deepest benefit from learning a new language, you must learn to think in the new language, not just learn to translate your favourite programming language syntax and idioms into it.

Remember Eugene Wallingford's observation

... to obtain the deepest benefit from learning a new language, you must learn to think in the new language, not just learn to translate your favourite programming language syntax and idioms into it.

Declarative programming is the web's revolution

And what we are really missing is one of the genuinely revolutionary aspects of developing for the web.

Its declarative nature (particularly HTML and CSS).

Declarative programming versus imperative programming

And what we are really missing is one of the genuinely revolutionary aspects of developing for the web.

  • With imperative programming we have
    • statefulness
    • variables
    • side effects
  • It is about specifying how the computer should perform a task

Declarative programming versus imperative programming

  • With declarative programming we have
    • statelessness
    • no side effects
    • deterministic outcomes
  • It is about specifying what tasks a computer should perform
  • It's associated with more robust, maintainable systems

And we want to throw all this out? Essentially for our own convenience?

An example: SASS

An example: SASS

Just to prove it's not all about JavaScript,

  • CSS is a declarative programming paradigm
    • you state what you want to happen in various conditions
    • when those conditions occur, the browser applies the CSS
    • there are no side effects
    • the same CSS on the same DOM tree produces the same outcomes

SASS

SASS

  • We have variables
  • We have loops
  • we have calculations
  • In essence, we have state
  • We have turned a declarative programming language into an imperative one

Why?

Are we insane?

Why?

  • For Convenience
  • To make our lives easier
  • We've made our applications
    • harder to debug
    • less readable
    • less maintainable
  • Not to mention the setup and maintenance of our build systems

Are we insane? I'm quite serious, are we fucking insane?

Easiness versus Complexity

Easiness versus Complexity

We now have

  1. a total lock-in into the future to one non-standard even if widely adopted technology
  2. a vastly diminished pool of people who can work on this project
  3. significantly increased complexity in debugging
  4. significantly increased development environment complexity

not to mention increasing the complexity of our field.

and for what?

OK, enough of the negativity

OK, enough of the negativity

This a is not a call to do nothing new, to not innovate in the areas I've been discussing.

Rather, it's a call to start appreciating the real nature of what we are doing

Increasingly, the web is the platform for enterprise, consumer, client server, mobile, pretty much all kinds of application

We have to grow up

While the web's long status among many as a toy, at best a publishing medium has also given us the upside of not having the harsh glare of rigorous criticism being turned on what we do.

And that's not going to last.

The things we build are going to be required to do more and more. Not just additional functionality, but last longer, be more robust and secure and performant.

We have to grow up, and take these challenges seriously

The good news

The good news

  • We already have the foundations
    • HTML
    • CSS
    • JavaScript
    • The DOM
    • The increasing sophistication of javascript engines, and just in time compilers
    • The increasing power of HTML5 and other device apis and capabilities.

Now is not the time to turn our backs on these. To wish we could do the web over (again and again). To boil the ocean.

Good engineering is about making well researched and reasoned decisions about the tools and technologies we use, for the specific purpose we are using them for.

Which means really understanding these technologies

Not relying on tools and scaffolding and syntactic sugar.

And now is not the time to seek out easiness, at the price of the increasing complexity of the systems we build.

  • Development is much more than writing code
  • Reducing the number of keystrokes may feel like we are being more efficient, but it is measuring the wrong thing
  • We need to be measuring the complexity of our systems
  • We need to be measuring the robustness of our systems
  • And now is not the time to seek out easiness, at the price of the increasing complexity of the systems we build.
  • It is the time to double down on them, continue to improve them, all the while understanding what makes them so powerful
  • It's time for the web to take its place at the grown ups table.
  • And it's the responsibility of people like us to make that happen
  • Let's not throw that responsibility, and opportunity away.

Thank you

Save the contents of the field above to a file in the same folder as this one.