In my day…

Web development has changed a lot.

I was aware that there have been many changes in the last few years, and I’ve seen maturity come to web platforms in the form of standardisation and common reusable libraries and frameworks - and I don’t mean reusable in the way we used to “reuse” stuff by nicking it off other people’s websites when we saw something cool.

I used to be a web developer. Sort of. Some times I’ve been on the bleeding edge, and others... I remember using JavaScript to call back-end services with an XML payload before people were using the term AJAX, but I also remember working on an enterprise um... “classic”... JSP application only “recently” - in fact that was probably the last job where I did anything that looked like web development.

So this blog post is going to chart the progress of web development through my own experience. Of course, this doesn’t by any means cover the whole spectrum, but I think my experience has been not unusual for a Java programming working through the noughties.

Over the course of my career I moved further away from the UI, because certainly early on the money and status was in “back end”, whatever that means, and not “front end”. Which is ridiculous, really, especially as back then you couldn’t really follow best practices and clean code and test first and all that awesome stuff when doing front end development because none of the browsers played by the rules and frankly if you got it working at all you were a bloody genius. And that’s not even considering the fact that as a “front end” developer you should be thinking about actual real human beings who use your product, and actual real human beings are messy things and understanding them is not (we’re told) traditionally a domain that we developers are naturally proficient in.

Anyway, I digress. This was supposed to be a history lesson. Or a nostalgia trip. Or possibly Ranty Trish waving her walking stick in the air and shouting “You kids don’t know how good you’ve got it these days”. If nothing else, I hope that it makes other “back end” developers like myself appreciate how much things have moved on.

Let’s go back to the olden days, before I’d even graduated: picture a time before smart phones - before phones were even common (I was horribly mocked at university for being poncy enough to have a mobile), before we knew if all this work we were doing to combat the millennium bug was going to stop the end of the world. I was doing my first summer internship at Ford, and a contractor from Logica (who don't seem to exist any more??) told me that if I was messing around with web pages and HTML (my friends and I had geocities-and-equivalent sites) I should look at this JavaScript thing to make my pages “dynamic”. I didn’t have to just use GIFs to bring my page to life, I could move stuff around on the page. I think I wrote a “you are in a crowded room”-type adventure game, because my background was BASIC and that’s what you do.

Actually I haven’t even mentioned that we were creating these websites to stay in touch with each other. We’d discovered guest books, and used them to write comments and share stories since we’d all moved out of our home town to go to different universities. Man, why didn’t I invent Facebook back then? That’s what we needed.

Anyway.

A year later, I was back at Ford doing my sandwich year-in-industry. The first project I worked during this time was a web-based reporting tool that needed to dynamically display hierarchical data. We chose JavaScript trees to render this data - my year of messing around with my website paid off, and I was able to use my “cutting edge” Javascript skills in a real production environment. Yay? The back end was CGI - I think I was writing in Perl, but don’t tell anyone that. I was learning Java at university, but this was a new language and I don’t think Ford was using it yet.

The next project was a very ambitious one - be the first car manufacturer to sell new cars on the web. Ford was well ahead of their time - the millennium bug had not killed us all, but people were barely buying books online, never mind spending tens of thousands of pounds on a car they’d never driven. But it wasn’t just ahead of its time from a business point of view, technically it was very advanced too - we used lots of “DHTML” (as we were now calling it), a new-fangled technology called ASP, and we were writing modular, reusable COMponents. We used XSLT to parse the XML from the COM objects, and the ASP figured out whether you were Netscape or Internet Explorer (Firefox wasn’t even a gleam in the inventor’s eye, and forget Chrome, I think we using Alta Vista (whaaaat? AltaVista got bought by Yahoo??) not some new-fangled search engine beginning with G) so it could use the right XSLT to turn the XML into HTML that was readable by the browser you were using. My job was to get the DHTML pages rendering and animating correctly in both IE4 and Netscape 4. That was a lot of fun for me, but also very challenging. And imagine my shock when a few months later I tested the site from the university UNIX machines to find that Netscape rendered it completely differently under UNIX. I learnt a lesson about how important it was to test on different platforms.

We had some smart Microsoft people helping us out with this project, and, because it was 2000 and the dot com crash hadn’t happened just yet, we also had a lot of young, overpaid, overconfident contractors who believed anything was possible. I learnt a lot during this time, not just about the technology, but also about different approaches to shaping your IT career. And about how much you could earn before you were 25. I was definitely going to be a programmer when I left university the next year.

Yeah, so... I graduated in 2001. If you were around then, you’ll remember that getting a job was a bit more difficult than I had anticipated, especially as these young, overpaid contractors were now desperately grabbing anything they could find. But that’s a story for another day.

I didn’t go back to Ford straight away, I’d “been there and done that”. I worked on the website for Common Purpose. On the first day, they sat me down with a book on JSP and Servlets, and that was my reading material for the next few weeks. If I’d been fresh out of university where we’d been doing Applets, and where I’d written a Swing app on the side for my Dad’s school, this would have been a big mindset change for me. But having worked on the ASPs it wasn’t such a big shift. I did, however, like how JSPs and servlets made the separation between the view and all-of-the-other-logic-stuff a bit clearer - back in ASP-land we’d settled on a convention of dealing with the form data from the previous page in the first part of the ASP, and rendering the new page in the second part. To this day I still don’t know what we should have been doing instead. But in JSP-land it only took me... I dunno, about 6 months I think, to get the website up and running. The most difficult section was registrations. And yes, I was a graduate, and yes, I was new, but that was a good turnaround for a web application “in those days”.

In my spare time I used what I’d learnt on the blews website. I even had a section where people could log in and comment on photos - we had whole conversations on this website. It was a way for me and my friends to stay in touch. If I’d cracked the photo-uploading instead of it being a manual process for me, I would have invented Facebook. If only I’d known....

The work dried up and there was nothing else for a graduate in the early noughties, so I went back to Ford. My first role back I picked the same technologies we’d been using before - XML, XSLT, only this time we were using JSPs instead of ASP. Our project had a very tight budget and we’d worked out that using open source Java technologies and running the application on one of the many UNIX machines lying around the place was a lot cheaper than the Microsoft solution. I think we were the first team in Ford Europe to pick Java at a time when the recommended approach was Microsoft. We delivered on time and under budget, and Java was the way forward for the department from then on. But on this project I met a guy who would impact my career probably more than he even realises, a guy I’d work with again later. He told me that in Java we no longer used Vector by default, but ArrayList (whaaat? What’s an ArrayList? I had no idea what the differences were between Java 1.1, which we’d learnt at university, and Java 1.2, which was now standard). And questioned my choice of XML/XSL. Although I’d been learning new technologies and growing, he was the one who made it clear to me that I needed to keep myself ahead of the curve with the technologies I was using, or planned to use, if I wanted to stay relevant and make my life easier.

On the next project I worked with a genius guy who was definitely keeping ahead of the curve - he was using JavaScript to send small XML payloads to the server (which was coded in Java), and rendering the response in place on the page instead of reloading the whole thing. Mind. Blown. I didn’t even hear the term Ajax until a year or more later. We were fortunate in that this was once again an internal application, so we controlled the browser. This was back in the days when you wanted your users to be on IE5, as this was the only browser that supported this functionality.

The next few projects/jobs I worked on were all more pedestrian variations on the JSP theme - first I learnt Struts, which at least made us realise there was a model, a view, and a controller. Then at Touch Clarity I learnt about Spring MVC, which actually put the validation errors next to the boxes which cause the error - by default, without you having to mess around. Spring was a revelation too, a framework that really tried not to get in your way. It was also frustrating because you needed to understand its lifecycle, but it did so much heavy lifting for you, it sped up standard CRUD-app web development enormously.

A couple of years passed, during which time I was still working on a web application (for an investment bank) but I can’t for the life of me remember what technologies we used (other than Java). I know it was hard to test and I know the tricky stuff was “back end” not “front end”.

In the next project where I had any control of the technology, I picked Spring since I’d had such a good experience previously. It took 4 developers a couple of months or so to develop an admin application for a trading app. Given the previous timescales I’d worked with, this seemed pretty good. Until a few months later and two other guys on the project produced an admin app for our bank users in a matter of weeks. I can’t remember what they used, maybe Grails? But it was another demonstration of how I really should have been researching the field instead of simply sticking with what I knew, especially when I knew my knowledge was a couple of years out of date.

Fast forward to LMAX, and we were using GWT, pre-2.0 - I think this probably feels natural if you’ve been a Swing or AWT developer, but I’m still not convinced it’s a sound web platform (although I know it has improved). It was great because cross-browser was no longer an issue, but it was bad because it separates you from the underlying HTML, which means you can seriously mess up without realising. It’s also hard to use CSS correctly when you don’t have access to all the HTML components.

So we come to more-or-less the present day, as it should be fairly obvious that during the time I’ve been working on the MongoDB Java Driver I haven’t done a lot of GUI development. I’m lucky because attending lots of conferences means I see a lot more of the current-trending technologies, but up until a couple of weeks ago I hadn’t had a chance to play with any of them.

So now I’ve been trying Angular.js, Bootstrap, and UI Bootstrap. My goodness. It’s a whole 'nother world. I’m seeing at conferences and user groups that developers are increasingly polyglot, so maybe there’s no such thing as “just” a Java developer any more, but if you are “just” a Java developer, I think it could be... interesting... to get your head around some of the techniques. Since we don’t have closures, our callbacks are ugly and we tend not to program that way. Async is not something that comes naturally in a Java environment, I believe, although after working that way at LMAX I’m personally sold on it. Old-world JavaScript developers like I am/was might also find it hard to understand you can have clean, testable JavaScript code which Just Works. It didn’t even occur to me to worry about browser compatibility, and my app not only worked on my phone as well as my laptop, but looked really phone-ish and awesome with very minimal effort.

I’m currently on a plane on the way to QCon London where I’m going to demo this Brave New World of web development (together with a nice Java back end to prove how awesome Java is to work with and, of course, a MongoDB database). So it is not my intention in this post to explore what this new world looks like. But I have seen the Present, and it’s a lot better than the Past. Kids These Days don’t know how good they’ve got it - they’ve never had to struggle, to fight the browser, to hand-craft their JavaScript like we have, or had to work with raw, low-level JSPs and Servlets.

Now things are easier. There are standards, there are libraries, there are best practices and YouTube videos showing you how to create apps in 60 minutes (back in My Day I had to borrow someone else’s browser to use the Internet, and I debated for years the value of spending my own actual money on a Javascript actual paper actual book, which I could not afford). Now, you can get something quite pretty and functionally interesting, working in a lot less time than I realised. But that doesn’t mean the Kids These Days have it easier - it means there is so much more potential. Instead of beating your head against trying to get a specific version of IE to do what you want, instead of having to write separate pages for different browsers (although maybe that still goes on), you can be exploring so much further into the possible, try things that no-one else has done yet. It opens up so many interesting possibilities for apps on all platforms.

Exciting times.

So next time someone asks me “What is the de facto front-end framework for Java?” I’m going to say HTML5, CSS and JavaScript.

CSS for Developers: Cross Browser Table Border Behaviour

One of the aims of this series is to highlight some stupid gotchas in support for CSS in the different browsers.

Today's gotcha is table borders.

Yes, yes, I said don't use tables. What I means is, don't use tables for layout. But you can use tables for, you know, tabular data. Like, for examples, lists of instruments and their bid and ask prices.

But you should know that even when you use strict mode, Internet Explorer has slightly... eccentric... rendering behaviour for tables. Actually to be specific, it's IE7 only.

Continue reading "CSS for Developers: Cross Browser Table Border Behaviour"

GWT: Why VerticalPanel is Evil

At LMAX we adopted Google Web Toolkit pretty early on. One of the motivations for using it was so we only had to worry about recruiting Java guys, and then we could all work on every part of the application including the web UI. Sure, you can learn a bunch of different skills if you want to, but it reduced context-switching and kept the skill set we were hiring for to a nice short list.

The problem is that GWT does a very nice job of pretending to be Java whilst actually compiling down to HTML and JavaScript. If you don't have some understanding of the end result (the DOM the browser is going to be rendering) it's going to be hard to get the performance you need from a low-latency trading application.

My number one bug-bear with GWT is VerticalPanel. To the uninitiated developer, this seems like the sort of thing that will be useful everywhere. You often want stuff stacked on top of each other - think menus, lists, the layout of a dialog. What is not obvious is that it uses tables for layout under the covers, and I've mentioned in the past that Tables Should Not Be Used For Layout.

A much less obvious way of getting the same result with (usually) no extra effort is to use FlowPanel. This is rendered as a div, and most of the time the elements that get inserted into it will render in a vertical stack.

VerticalPanel Code

VerticalPanel panel = new VerticalPanel();
panel.add(/* your widget */);
panel.add(/* your second widget */);

VerticalPanel Rendered As HTML

<table>
  <tbody>
    <tr>
      <td>
        <!– your widget here –>
      </td>
     <tr>
    <tr>
      <td>
        <!– your second widget here –>
      </td>
     <tr>
  </tbody>
<table>

FlowPanel Code

FlowPanel panel = new FlowPanel();
panel.add(/* your widget */);
panel.add(/* your second widget */);

FlowPanel Rendered As HTML

<div>
  <!– your widget here –>
  <!– your second widget here –>
</div>

You can see that the DOM generated for a very similar-looking 3 lines of code is much much smaller for FlowPanel.

Who Cares?

Right, but we're only talking about a few more elements, and browsers are pretty smart about optimising these things. Right?

Maybe. But if you use VerticalPanel for all your containers, for every box which needs to be a slightly different colour, for every place you want to change the alignment slightly, things get very big very fast. This is an example of real code from an early prototype, where we had several nested panels (not unheard of if you've got a complex dialog box with lots of elements in it. Like, say, a deal ticket). And I've stripped out a lot of the table attributes that made this even more heinous:

<table>
  <tbody>
    <tr>
      <td align="left”>
        <table id="panel1”>
          <tbody>
            <tr>
              <td align="left” style="vertical-align: top;">
                <table class="orders-input”>
                  <tbody>
                    <tr>
                      <td align="left”>
                        <table class="row”>
                          <tbody>
                            <tr>
                              <td align="left”>
                                <table id="container”>
                                  <tbody>
                                    <tr>
                                      <table id="panel2”>
                                        <tbody>
                                          <tr>
                                            <td align="left”>
                                              <table class="controls”>
                                                <tbody>
                                                  <tr>
                                                    <td align="left”>
                                                      <!– widget –>

For every table element and associated elements (tbody, tr, td), you would get a single div element instead if you simply replace every instance of VerticalPanel in this stack with a FlowPanel.

<div>
  <div id="panel1”>
    <div class="orders-input”>
      <div class="row”>
        <div id="container”>
          <div id="panel2”>
            <div class="controls”>
              <!– widget –>

See? Much nicer.

This is exactly what we did do, and we saw a noticeable speed improvement across all browsers - noticeable to a real user, not just some millisecond improvement on a performance test. Mind you, users' brains are amazing things and your system has to react in less than 0.1 seconds for a user to perceive it as instantaneous. So even in a browser, every millisecond counts.

In addition to improved performance, you get a nice bonus: now the layout is no longer controlled by tables, you can really easily shove stuff around and make things look pretty with the clever use of CSS. If you're really lucky, you can chuck that stuff over to your designers and not have to do another GWT compile when someone wants to move things 3 pixels to the left. Which they will.

CSS for Developers: Horizontal Layout Using CSS

I'm a Java Developer. But I'm also a Web Developer. Web Developers have been so badly maligned over the last decade or so that I always feel wary (and sometimes slightly ashamed) admitting this. There's some sort of assumption that Web Developers (and Front End Developers) aren't real programmers. Similarly, "real" developers don't like to be tainted by coming into contact with that nasty "front end stuff" in case someone mistakes them for a designer.

Trust me, no-one is going to mistake a Java Developer for a designer. For a start, when designers wear geeky glasses it's ironic. Or chic. Or something.

But developers will be forced to do something around the front end at some point in their lives. Even if it's because they're sick of manually kicking off some process and want to give the users a big red button to press instead.

Continue reading "CSS for Developers: Horizontal Layout Using CSS"

On the perils of Front End Design

I'm reading Joel Spolsky's User Interface Design for Programmers. A thought that's struck me is about architecture. It's easy to get fooled into thinking building software is a bit like being the architect for a building. I'm not even going to go into the differences between engineering practices à la building design and good practice software design. I'm going to start from the easy point, the stuff you can see.

Continue reading "On the perils of Front End Design"