design based dev

Design-based WebApplication Development:

The Essential New Paradigm

Rob TweedM/Gateway Developments Ltd

Does this sound familiar..?


• Acting as advisor on web applications to adesign consultancy in London

• Won a project to develop a pilot forInternet shopping:– Major UK supermarket– Leading US-based IT vendor

• Recognised that success criticallydepended on design


• Lots of background design effort– Psychology of shopping– Physical versus virtual store layout

• Storyboard developed and accepted– Designers were competent with HTML/CSS

• Data model designed and accepted– Single A4 page

• So far, so good…


• Developing it as a web application wasbeyond the skills of the DesignConsultancy

• Brought in a team of programmers whospecialised in web applications

• The rot soon set in….


• Oracle data model expanded to a diagramthe size of the board-room table– Incomprehensible to all but the database guy

• Programmers produced a working version– But the code was un-recognisable

• “where’s our HTML gone?”– Could not be maintained by the designers


• From the moment the programmers wereinvolved, the Design Consultancy were outof the loop

• Project was in the hands of programmerswith no design skills

• Project extension:– Given to the software company– Design Consultancy frozen out– Project later crumbled and fizzled out

When was this?

When was this?

• 13 years ago, in 1995

Would things be different today?

Would things be different today?

• No

It’s the single biggest problem inweb/Ajax application development

Why is it a problem?

• What makes an application successful?• What differentiates:

– Poor applications?– Mediocre applications?– Great applications?

Why is it a problem?



• It’s not the programming!

Web Applications



• Answer: Design

What’s the problem?

• Web Application Development:– Assumed to be a programming task– Not a design task

• Designers do not understand:– programming– databases

• After the initial design stage, the designer has norole in the rest of the development lifecycle

• Designs are easier to maintain than programs!

The industry solution?• AjaxWorld: Yakov Fain (Farata Systems), Mar

30, 2008:– Do We Need to Teach Designers Programming?– “Adobe invited professors from different schools to

discuss what has to change in the curriculum ofVisual Design and Software Engineering disciplinesso designers can understand programming better andsoftware developers would be better at designing theuser experience”

– “Do we need to breed new creatures called d-e-s-i-g-n-o-p-e-r and d-e-v-i-g-n-e-r? “

– “Developers are from Mars; designers are fromVenus”

The industry solution?

• There isn’t one

Design-focusedWeb/Ajax Development

• So I’m going to propose a way forward– based on 13 years’ considering the problem– and 10 years’ providing a solution

• Let’s first understand why things are theway they are…..

What are web Applications?

• Programs that:– Generate HTML– Are accessed via HTTP– And they access a database

What are web Applications?


• So they therefore require a programmer– Designers understand static HTML pages + CSS– Designers don’t understand programming– Designers don’t understand databases

Why does it get so complex?

• The web was never designed as anapplication platform:– Stateless

• No concept of a meaningful ongoing dialoguebetween browser and web server

– HTTP protocol• Simple request/response protocol• Wide open, simple URL + name/value pair

structure• Inherently insecure and open to abuse


• The browser only communicates with theweb server– The programs that process the requests and

generate the HTML responses are hooked inbehind the web servers

• The web pages are dynamically generatedby programs and content depends on:– What the user has done so far– The contents of the database


• Programmer’s responsibility to:– Create the illusion of a session– Provide the navigation between generated

pages in response to user activity– Provide a consistent and adequate layer of

security around the URL requests within asession

But we have frameworks don’t we?

• Rather than everyone re-inventing wheels,tools have developed that automate thesemechanisms

• Almost all are based on the concept of theModel View Controller (MVC)

Web Application: MVC View

Web Page 1

Step 1:User decideswhat to do:

eg clicks button or link


Web Page 1

Step 2:URL sent to

controller Controller


Web Page 1

Step 3:URL analysedand mapped tocorrespondingbusiness logic

Controller Businesslogic

URL map


Web Page 1

Step 4:Business logic

selects next view Controller Businesslogic

URL map

View

Database(model)


Web Page 1

Step 5:View is

generated Controller Businesslogic

URL map

View

Web Page 2

Database(model)


Web Page 2

Process repeats:User decideswhat to do:



• Web pages are programmatically-generated markup = the “view”

• The URL is the focus of attention• Closely reflects how it actually works

– Only a very slight level of abstraction• Totally programmer orientated paradigm

– Focuses on the how– The what and the design gets lost in a ton of

code

Creating the “Eh?” Team

• In the MVC paradigm:– Designer storyboards the application– Design agreed– Handed over to programmers– From this point onwards, designer can no

longer participate in the life-cycle of theapplication

• What the programmers develop isincomprehensible

• To make matters worse:

Perpetuating the “Eh?” Team• Little discipline applied by MVC environment• MVC “plumbing” isn’t automated:

– How to submit, post and validate forms is left to eachprogrammer

– In-page coding is a free-for-all– Cut, paste and modify components

• 1 or more years later, nobody can understandtheir own code, let alone another developer’s– Quicker to rewrite pages than figure out how they

work

So how do we solve this problem?

• Let’s stand back and look at what we’redoing…

What are web applications?




• Right?



• Right?– Yes of course they are in reality– But do we need to think of them in this way?


• Here’s another way to conceptualise them


• Here’s another way to conceptualise them• They are web pages:

– That have some content fetched from adatabase

– Whose flow between them is determined inpart by:

• the user’s interaction; and/or• content in the database

“Static” web sites

Web Page 1NextPage Web Page 2

NextPage Web Page 3

NextPage

Web Application

Web Page 1

From a designer’s point of view:

Database

Step 1:Run a method that

fetches the dataneeded for the page

fetchData()

Web Application

Web Page 1


Step 2:Display the

page

Web Application

Web Page 1


Step 3:User decideswhat to do:


Web Application

Web Page 1


Database

Step 4:Method called that

validates and savesdata into database

saveData()

Web Application

Web Page 1


Step 5:Move to

next page

NextPage Web Page 2

Web Application


Repeat the process….

Web Page 2

Database

fetchData2()

Web Application


Web Page 1

Design-focused Web Applications

• Page content and navigation is the primary focus– No programming code needed in pages

• “Fetch” method called when page loads• “Save” methods linked with user-triggered

events (eg submit buttons)• Technical stuff should “just work”:

– Invocation of methods– Orchestration of the MVC mechanics– Session and security management

“Static” web sites


NextPage Web Page 3

NextPage


NextPage Web Page 3

NextPage

Design-focused Web Applications

Database

fetch fetch fetchsave save save

What about Ajax?

• Event-driven DOM manipulation:– replacement of innerHTML

• Page fragments– “pages” that just contain the replacement markup– fetch and save methods

• Just specify 3 key things:– Event– Page fragment name– Target Id

Design-focused Ajax framework

ContainerPage

FetchMethod

State & Session Management

“Back-end” Server

“Front-end” technology (PHP, JSP, Python etc)


ContainerPage

RequestPage

Fragment

Page Fragment

Event

Replaces DOM content

FetchMethod


XMLHttpRequest



ContainerPage

RequestPage

Fragment

Page Fragment

Event

Replaces DOM content

FetchMethod




ContainerPage



Interfacing design and programming

• Clearly need a conceptual interfacethrough which the designer andprogrammer can inter-operate

• This is provided by the “Session” datastore

The Session Interface

Web Page SessionData-store Database

Provides the interface between the designer and the programmer

Programmer

Using APIs providedby framework

Designer

Using specialsyntax to refer toSession values

No data binding!

• Data binding is a scourge!– It begins with a blessing– But it ends in a curse

• The Session data-store de-couples thepage’s data from the physical database

This changes everything

• Any designer who can design HTMLpages can be in control– Abstraction using additional “macro” XML tags– Describe what is required, not how to do it

• No coding apart from occasional, simple Javascript– Designer’s high-level pages compiled to

produce the how• Technology-independent• PHP, JSP, ASP.Net, Ruby, Python, etc


• Transitions and method orchestration mustbe automated– Also session and security management


• What’s left for a programmer is trivial:• Fetch• Save/validate

Can this be done?

• Our Enterprise Web Developer (EWD)technology is built on these concepts

Example: Ext-JS Grid

Ext-JS Javascript version<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Array Grid Example</title><link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /><link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-default.css" /><script type="text/javascript" src="../../adapter/ext/ext-base.js"></script><script type="text/javascript" src="../../ext-all.js"></script><script type="text/javascript" src="array-grid.js"></script><link rel="stylesheet" type="text/css" href="grid-examples.css" /><link rel="stylesheet" type="text/css" href="../shared/examples.css" /><script language="javascript">Ext.onReady(function(){

var store = new Ext.data.SimpleStore({ fields: [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} ] }); store.loadData(myData); var grid = new Ext.grid.GridPanel({ store: store, columns: [ {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'}, {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'}, {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'}, {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'}, {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ], stripeRows: true, autoExpandColumn: 'company', height:350, width:600, title:'Array Grid' }); grid.render('grid-example'); grid.getSelectionModel().selectFirstRow();});</script></head><body><h1>Array Grid Example</h1><div id="grid-example"></div></body></html>

Ext-GWT (Java) version

Ext-GWT (Java) version

column = new ColumnConfig(); column.setId("symbol"); column.setHeader("Symbol"); column.setWidth(100); configs.add(column); column = new ColumnConfig(); column.setId("last"); column.setHeader("Last"); column.setAlignment(HorizontalAlignment.RIGHT); column.setWidth(75); column.setRenderer(gridNumber); configs.add(column); column = new ColumnConfig("change", "Change", 100); column.setAlignment(HorizontalAlignment.RIGHT); column.setRenderer(change); configs.add(column); column = new ColumnConfig("date", "Last Updated", 100); column.setAlignment(HorizontalAlignment.RIGHT); column.setDateTimeFormat(DateTimeFormat.getShortDateFormat()); configs.add(column); ListStore<Stock> store = new ListStore<Stock>(); store.add(TestData.getStocks()); ColumnModel cm = new ColumnModel(configs); ContentPanel cp = new ContentPanel(); cp.setBodyBorder(false); cp.setHeading("Basic Grid"); cp.setButtonAlign(HorizontalAlignment.CENTER); cp.setLayout(new FitLayout()); cp.setSize(600, 300); Grid<Stock> grid = new Grid<Stock>(store, cm); grid.setStyleAttribute("borderTop", "none"); grid.setAutoExpandColumn("name"); grid.setBorders(true); cp.add(grid); add(cp); } }

package com.extjs.gxt.samples.client.examples.grid;

import java.util.ArrayList;import java.util.List;

import com.extjs.gxt.samples.resources.client.TestData;import com.extjs.gxt.samples.resources.client.model.Stock;import com.extjs.gxt.ui.client.Style.HorizontalAlignment;import com.extjs.gxt.ui.client.store.ListStore;import com.extjs.gxt.ui.client.widget.ContentPanel;import com.extjs.gxt.ui.client.widget.LayoutContainer;import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;import com.extjs.gxt.ui.client.widget.grid.ColumnData;import com.extjs.gxt.ui.client.widget.grid.ColumnModel;import com.extjs.gxt.ui.client.widget.grid.Grid;import com.extjs.gxt.ui.client.widget.grid.GridCellRenderer;import com.extjs.gxt.ui.client.widget.layout.FitLayout;import com.extjs.gxt.ui.client.widget.layout.FlowLayout;import com.extjs.gxt.ui.client.widget.table.NumberCellRenderer;import com.google.gwt.i18n.client.DateTimeFormat;import com.google.gwt.i18n.client.NumberFormat;

public class GridExample extends LayoutContainer {

public GridExample() { setLayout(new FlowLayout(10));

final NumberFormat currency = NumberFormat.getCurrencyFormat(); final NumberFormat number = NumberFormat.getFormat("0.00"); final NumberCellRenderer<Grid<Stock>> numberRenderer = new NumberCellRenderer<Grid<Stock>>( currency);

GridCellRenderer<Stock> change = new GridCellRenderer<Stock>() { public String render(Stock model, String property, ColumnData config, int rowIndex, int colIndex, ListStore<Stock> store) { double val = (Double)model.get(property); String style = val < 0 ? "red" : "green"; return "<span style='color:" + style + "'>" + number.format(val) + "</span>"; } };

GridCellRenderer<Stock> gridNumber = new GridCellRenderer<Stock>() { public String render(Stock model, String property, ColumnData config, int rowIndex, int colIndex, ListStore<Stock> store) { return numberRenderer.render(null, property, model.get(property)); } };

List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

ColumnConfig column = new ColumnConfig(); column.setId("name"); column.setHeader("Company"); column.setWidth(200); configs.add(column);

Design-focused version

<ewd:config fetchMethod="ewd.test.getAJWGridData"><ext:config path="/ext-2.2" />

<html><head> <title>Design-focused Development: ExtJS Grid Examples</title></head><body>

<ext:grid datastore="stocks" title="Array Grid" stripeRows="true" autofill="false" width="600" height="350"> <ext:gridColumn header="Company" width="265" sortable="true" /> <ext:gridColumn header="Price" type="float" width="75" sortable="true" /> <ext:gridColumn header="Change" type="float" width="75" sortable="true" /> <ext:gridColumn header="% Change" type="float" width="75" sortable="true" /> <ext:gridColumn header="Last Updated" width="85" type="date" dateFormat="n/j h:ia" sortable="true" /></ext:grid>

</body></html>

Design-focused version

<ewd:config fetchMethod="ewd.test.getAJWGridData"><ext:config path="/ext-2.2" />

<ewd:xhtml><head> <title>Design-focused Development: ExtJS Grid Examples</title><script language="javascript">function moveOn(currentRecord,currentRow) { var nvp="record=" + currentRecord ; ewd.ajaxRequest("myNextPage","myTargetDiv",nvp);}</script></head><body>

<ext:grid datastore="stocks" title="Array Grid" stripeRows="true" autofill="false" width="600" height="350“ onRowSelect="moveOn"> <ext:gridColumn header="Company" width="265" sortable="true" /> <ext:gridColumn header="Price" type="float" width="75" sortable="true" /> <ext:gridColumn header="Change" type="float" width="75" sortable="true" /> <ext:gridColumn header="% Change" type="float" width="75" sortable="true" /> <ext:gridColumn header="Last Updated" width="85" type="date" dateFormat="n/j h:ia" sortable="true" /></ext:grid>

</body></ewd:xhtml>

Ajax Navigation

•Event•Next Fragment•Target ID

The “A” Team• Designer stays in control throughout the lifecyle• Designer doesn’t need to have any knowledge of

programming, business logic or databasestructure/content

• Programmer just focuses on business logic tofetch/validate/process/save data– doesn’t waste any time on the “plumbing”– Isolated from design issues– Standardised processes– Discipline occurs because it’s the line of least

resistance during development

Design-focused Development• Proven benefits:

– Much higher productivity compared with conventionaltechniques

– Applications are focused on design requirements• designer retains control throughout the life-cycle

– Cuts out all the complexity of Ajax– Integrates with most UI/widget libraries

• Leverage “best of breed” instead of reinventing wheels– Significantly lower maintenance than conventional

techniques• Because you just describe the what, not the how• Build an “A” team, not an “eh?” team!

Conclusions

• The programmer-focused approach hashad its day

• Design, not programming, must takecentre-stage

• None of the main industry players have asolution

• It’s not just theory• Come and see how it can be done!