Design Based Dev

938 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
938
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design Based Dev

  1. 1. Design-based Web Application Development: The Essential New Paradigm Rob Tweed M/Gateway Developments Ltd
  2. 2. Does this sound familiar..?
  3. 3. Does this sound familiar..? • Acting as advisor on web applications to a design consultancy in London • Won a project to develop a pilot for Internet shopping: – Major UK supermarket – Leading US-based IT vendor • Recognised that success critically depended on design
  4. 4. Does this sound familiar..? • 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…
  5. 5. Does this sound familiar..? • Developing it as a web application was beyond the skills of the Design Consultancy • Brought in a team of programmers who specialised in web applications • The rot soon set in….
  6. 6. Does this sound familiar..? • Oracle data model expanded to a diagram the 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
  7. 7. Does this sound familiar..? • From the moment the programmers were involved, the Design Consultancy were out of the loop • Project was in the hands of programmers with no design skills • Project extension: – Given to the software company – Design Consultancy frozen out – Project later crumbled and fizzled out
  8. 8. When was this?
  9. 9. When was this? • 13 years ago, in 1995
  10. 10. Would things be different today?
  11. 11. Would things be different today? • No
  12. 12. It’s the single biggest problem in web/Ajax application development
  13. 13. Why is it a problem? • What makes an application successful? • What differentiates: – Poor applications? – Mediocre applications? – Great applications?
  14. 14. Why is it a problem? • What makes an application successful? • What differentiates: – Poor applications? – Mediocre applications? – Great applications? • It’s not the programming!
  15. 15. Web Applications • What makes an application successful? • What differentiates: – Poor applications? – Mediocre applications? – Great applications? • Answer: Design
  16. 16. 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 no role in the rest of the development lifecycle • Designs are easier to maintain than programs!
  17. 17. 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 of Visual Design and Software Engineering disciplines so designers can understand programming better and software developers would be better at designing the user 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 from Venus”
  18. 18. The industry solution? • There isn’t one
  19. 19. Design-focused Web/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 the way they are…..
  20. 20. What are web Applications? • Programs that: – Generate HTML – Are accessed via HTTP – And they access a database
  21. 21. What are web Applications? • Programs that: – Generate HTML – Are accessed via HTTP – And they access a database • So they therefore require a programmer – Designers understand static HTML pages + CSS – Designers don’t understand programming – Designers don’t understand databases
  22. 22. Why does it get so complex? • The web was never designed as an application platform: – Stateless • No concept of a meaningful ongoing dialogue between browser and web server – HTTP protocol • Simple request/response protocol • Wide open, simple URL + name/value pair structure • Inherently insecure and open to abuse
  23. 23. Why does it get so complex? • The browser only communicates with the web server – The programs that process the requests and generate the HTML responses are hooked in behind the web servers • The web pages are dynamically generated by programs and content depends on: – What the user has done so far – The contents of the database
  24. 24. Why does it get so complex? • 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 a session
  25. 25. But we have frameworks don’t we? • Rather than everyone re-inventing wheels, tools have developed that automate these mechanisms • Almost all are based on the concept of the Model View Controller (MVC)
  26. 26. Web Application: MVC View Web Page 1 Step 1: User decides what to do: eg clicks button or link
  27. 27. Web Application: MVC View Web Page 1 Step 2: URL sent to Controller controller
  28. 28. Web Application: MVC View Web Page 1 Step 3: URL analysed and mapped to Business Controller corresponding logic business logic URL map
  29. 29. Web Application: MVC View Web Page 1 Step 4: Business logic Business Controller View selects next view logic URL map Database (model)
  30. 30. Web Application: MVC View Web Page 1 Web Page 2 Step 5: View is Business Controller View generated logic URL map Database (model)
  31. 31. Web Application: MVC View Web Page 2 Process repeats: User decides what to do: eg clicks button or link
  32. 32. Web Application: MVC View • 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
  33. 33. 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 the application • What the programmers develop is incomprehensible
  34. 34. • To make matters worse:
  35. 35. 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 each programmer – In-page coding is a free-for-all – Cut, paste and modify components • 1 or more years later, nobody can understand their own code, let alone another developer’s – Quicker to rewrite pages than figure out how they work
  36. 36. So how do we solve this problem? • Let’s stand back and look at what we’re doing…
  37. 37. What are web applications? • Programs that: – Generate HTML – Are accessed via HTTP – And they access a database
  38. 38. What are web applications? • Programs that: – Generate HTML – Are accessed via HTTP – And they access a database • Right?
  39. 39. What are web applications? • Programs that: – Generate HTML – Are accessed via HTTP – And they access a database • Right? – Yes of course they are in reality – But do we need to think of them in this way?
  40. 40. What are web applications? • Here’s another way to conceptualise them
  41. 41. What are web applications? • Here’s another way to conceptualise them • They are web pages: – That have some content fetched from a database – Whose flow between them is determined in part by: • the user’s interaction; and/or • content in the database
  42. 42. “Static” web sites Next Next Next Web Page 1 Page Web Page 2 Page Web Page 3 Page
  43. 43. Web Application From a designer’s point of view: Web Page 1 Step 1: fetchData() Run a method that fetches the data needed for the page Database
  44. 44. Web Application From a designer’s point of view: Web Page 1 Step 2: Display the page
  45. 45. Web Application From a designer’s point of view: Web Page 1 Step 3: User decides what to do: eg clicks button or link
  46. 46. Web Application From a designer’s point of view: Web Page 1 Step 4: saveData() Method called that validates and saves data into database Database
  47. 47. Web Application From a designer’s point of view: Next Web Page 1 Page Web Page 2 Step 5: Move to next page
  48. 48. Web Application From a designer’s point of view: Web Page 2 fetchData2() Repeat the process…. Database
  49. 49. Web Application From a designer’s point of view: Web Page 1
  50. 50. 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
  51. 51. “Static” web sites Next Next Next Web Page 1 Page Web Page 2 Page Web Page 3 Page
  52. 52. Design-focused Web Applications Next Next Next Web Page 1 Page Web Page 2 Page Web Page 3 Page save fetch save fetch fetch save Database
  53. 53. 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
  54. 54. Design-focused Ajax framework “Front-end” technology (PHP, JSP, Python etc) Container Page Fetch Method State & Session Management “Back-end” Server
  55. 55. Design-focused Ajax framework Replaces DOM content Event Container XMLHttpRequest Page Page Fragment Request Page Fragment Fetch Method State & Session Management “Back-end” Server
  56. 56. Design-focused Ajax framework Replaces DOM content Event Container Page Page Fragment Request Page Fragment Fetch Method State & Session Management “Back-end” Server
  57. 57. Design-focused Ajax framework Container Page State & Session Management “Back-end” Server
  58. 58. Interfacing design and programming • Clearly need a conceptual interface through which the designer and programmer can inter-operate • This is provided by the “Session” data store
  59. 59. The Session Interface Provides the interface between the designer and the programmer Session Web Page Database Data-store Designer Programmer Using special Using APIs provided syntax to refer to by framework Session values
  60. 60. 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 the page’s data from the physical database
  61. 61. This changes everything • Any designer who can design HTML pages 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
  62. 62. This changes everything • Transitions and method orchestration must be automated – Also session and security management
  63. 63. This changes everything • What’s left for a programmer is trivial: • Fetch • Save/validate
  64. 64. Can this be done? • Our Enterprise Web Developer (EWD) technology is built on these concepts
  65. 65. Example: Ext-JS Grid
  66. 66. Ext-JS Javascript version <html> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=iso-8859-1quot;> <title>Array Grid Example</title> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;../../resources/css/ext-all.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;../../resources/css/xtheme-default.cssquot; /> <script type=quot;text/javascriptquot; src=quot;../../adapter/ext/ext-base.jsquot;></script> <script type=quot;text/javascriptquot; src=quot;../../ext-all.jsquot;></script> <script type=quot;text/javascriptquot; src=quot;array-grid.jsquot;></script> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;grid-examples.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;../shared/examples.cssquot; /> <script language=quot;javascriptquot;> 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: quot;Companyquot;, width: 160, sortable: true, dataIndex: 'company'}, {header: quot;Pricequot;, width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'}, {header: quot;Changequot;, width: 75, sortable: true, renderer: change, dataIndex: 'change'}, {header: quot;% Changequot;, width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'}, {header: quot;Last Updatedquot;, 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=quot;grid-examplequot;></div> </body> </html>
  67. 67. Ext-GWT (Java) version
  68. 68. Ext-GWT (Java) version 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; column = new ColumnConfig(); import com.extjs.gxt.ui.client.store.ListStore; column.setId(quot;symbolquot;); import com.extjs.gxt.ui.client.widget.ContentPanel; column.setHeader(quot;Symbolquot;); com.extjs.gxt.ui.client.widget.LayoutContainer; import column.setWidth(100); import com.extjs.gxt.ui.client.widget.grid.ColumnConfig; configs.add(column); import com.extjs.gxt.ui.client.widget.grid.ColumnData; import com.extjs.gxt.ui.client.widget.grid.ColumnModel; column = new ColumnConfig(); import com.extjs.gxt.ui.client.widget.grid.Grid; column.setId(quot;lastquot;); import com.extjs.gxt.ui.client.widget.grid.GridCellRenderer; column.setHeader(quot;Lastquot;); import com.extjs.gxt.ui.client.widget.layout.FitLayout; column.setAlignment(HorizontalAlignment.RIGHT); import com.extjs.gxt.ui.client.widget.layout.FlowLayout; column.setWidth(75); import com.extjs.gxt.ui.client.widget.table.NumberCellRenderer; column.setRenderer(gridNumber); import com.google.gwt.i18n.client.DateTimeFormat; configs.add(column); import com.google.gwt.i18n.client.NumberFormat; column = new ColumnConfig(quot;changequot;, quot;Changequot;,extends LayoutContainer { public class GridExample 100); column.setAlignment(HorizontalAlignment.RIGHT); column.setRenderer(change); GridExample() { public configs.add(column); setLayout(new FlowLayout(10)); column = new ColumnConfig(quot;datequot;, quot;Last Updatedquot;, 100);NumberFormat.getCurrencyFormat(); final NumberFormat currency = column.setAlignment(HorizontalAlignment.RIGHT); final NumberFormat number = NumberFormat.getFormat(quot;0.00quot;); column.setDateTimeFormat(DateTimeFormat.getShortDateFormat()); final NumberCellRenderer<Grid<Stock>> numberRenderer = new NumberCellRenderer<Grid<Stock>>( configs.add(column); currency); ListStore<Stock> store = new ListStore<Stock>(); change = new GridCellRenderer<Stock>() { GridCellRenderer<Stock> store.add(TestData.getStocks()); String render(Stock model, String property, ColumnData config, int rowIndex, public int colIndex, ListStore<Stock> store) { ColumnModel cm = new ColumnModel(configs); double val = (Double)model.get(property); String style = val < 0 ? quot;redquot; : quot;greenquot;; ContentPanel cp = new ContentPanel(); style='color:quot; + style + quot;'>quot; + number.format(val) + quot;</span>quot;; return quot;<span cp.setBodyBorder(false); } cp.setHeading(quot;Basic Gridquot;);}; cp.setButtonAlign(HorizontalAlignment.CENTER); cp.setLayout(new FitLayout()); GridCellRenderer<Stock> gridNumber = new GridCellRenderer<Stock>() { cp.setSize(600, 300); public String render(Stock model, String property, ColumnData config, int rowIndex, int colIndex, ListStore<Stock> store) { Grid<Stock> grid = new Grid<Stock>(store, cm); return numberRenderer.render(null, property, model.get(property)); grid.setStyleAttribute(quot;borderTopquot;, quot;nonequot;); } grid.setAutoExpandColumn(quot;namequot;); }; grid.setBorders(true); cp.add(grid); List<ColumnConfig> configs = new ArrayList<ColumnConfig>(); add(cp); ColumnConfig column = new ColumnConfig(); } column.setId(quot;namequot;); column.setHeader(quot;Companyquot;); } column.setWidth(200); configs.add(column);
  69. 69. Design-focused version <ewd:config fetchMethod=quot;ewd.test.getAJWGridDataquot;> <ext:config path=quot;/ext-2.2quot; /> <html> <head> <title>Design-focused Development: ExtJS Grid Examples</title> </head> <body> <ext:grid datastore=quot;stocksquot; title=quot;Array Gridquot; stripeRows=quot;truequot; autofill=quot;falsequot; width=quot;600quot; height=quot;350quot;> <ext:gridColumn header=quot;Companyquot; width=quot;265quot; sortable=quot;truequot; /> <ext:gridColumn header=quot;Pricequot; type=quot;floatquot; width=quot;75quot; sortable=quot;truequot; /> <ext:gridColumn header=quot;Changequot; type=quot;floatquot; width=quot;75quot; sortable=quot;truequot; /> <ext:gridColumn header=quot;% Changequot; type=quot;floatquot; width=quot;75quot; sortable=quot;truequot; /> <ext:gridColumn header=quot;Last Updatedquot; width=quot;85quot; type=quot;datequot; dateFormat=quot;n/j h:iaquot; sortable=quot;truequot; /> </ext:grid> </body> </html>
  70. 70. Design-focused version Ajax Navigation <ewd:config fetchMethod=quot;ewd.test.getAJWGridDataquot;> <ext:config path=quot;/ext-2.2quot; /> •Event <ewd:xhtml> •Next Fragment <head> <title>Design-focused Development: ExtJS Grid Examples</title> •Target ID <script language=quot;javascriptquot;> function moveOn(currentRecord,currentRow) { var nvp=quot;record=quot; + currentRecord ; ewd.ajaxRequest(quot;myNextPagequot;,quot;myTargetDivquot;,nvp); } </script> </head> <body> <ext:grid datastore=quot;stocksquot; title=quot;Array Gridquot; stripeRows=quot;truequot; autofill=quot;falsequot; width=quot;600quot; height=quot;350“ onRowSelect=quot;moveOnquot;> <ext:gridColumn header=quot;Companyquot; width=quot;265quot; sortable=quot;truequot; /> <ext:gridColumn header=quot;Pricequot; type=quot;floatquot; width=quot;75quot; sortable=quot;truequot; /> <ext:gridColumn header=quot;Changequot; type=quot;floatquot; width=quot;75quot; sortable=quot;truequot; /> <ext:gridColumn header=quot;% Changequot; type=quot;floatquot; width=quot;75quot; sortable=quot;truequot; /> <ext:gridColumn header=quot;Last Updatedquot; width=quot;85quot; type=quot;datequot; dateFormat=quot;n/j h:iaquot; sortable=quot;truequot; /> </ext:grid> </body> </ewd:xhtml>
  71. 71. The “A” Team • Designer stays in control throughout the lifecyle • Designer doesn’t need to have any knowledge of programming, business logic or database structure/content • Programmer just focuses on business logic to fetch/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
  72. 72. Design-focused Development • Proven benefits: – Much higher productivity compared with conventional techniques – 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!
  73. 73. Conclusions • The programmer-focused approach has had its day • Design, not programming, must take centre-stage • None of the main industry players have a solution • It’s not just theory • Come and see how it can be done!

×