Lessons learned on the web layer

Slide 1: Lessons learned on the web layer Ignacio Coloma icoloma@extrema-sistemas.com http://extrema-sistemas.com

Slide 2: The goal Make web development simpler.

Slide 3: Why? Because if the web layer receives proper care, quality perceived by the user increases. After all, this layer is everything they will see.

Slide 4: This is not about any specific web framework

Slide 5: Two types of web applications RIA: gwt, flex, silverlight Gray zone: ext, dojo REST: anything else

Slide 6: How to choose? Look at your requirements!

Slide 7: Jakob's law “Users spend most of their time on other sites” Jakob's Law of the Internet User Experience

Slide 8: Playing mine sweeper Guess if your mouse cursor changes Guess if it can be drag-and-dropped. Guess where to right-click. Guess if it is clickable.

Slide 9: No silver bullet “I believe the hard part of building software to be the specification, design and testing of this conceptual construct, not the labor of representing it and testing the fidelity of representation” Frederick P. Brooks, No Silver Bullet (1986)

Slide 10: Your choice Debug real business problems, or debug the right-button menu with IE 6.

Slide 11: Lesson learned RIA is the way to go only if it is a requirement.

Slide 12: One more thing... Slick is always a requirement. Learn to understand the difference between what the user wants and what the user needs.

Slide 13: REST and unobtrusive javascript Old: <input onchange=”something()”> New: <input id=”price”> <script> $('price').observe('change', something); </script>

Slide 14: Should I support javascript-less users? Real users without javascript are a minority

Slide 15: - BUT - Web crawlers Phone browsers Bookmarks Browser history XSS-obsessed sysadmins User-perceived performance Pre-ARIA frameworks

Slide 16: A comparison Graceful downgrade vs Progressive enhancement

Slide 17: Graceful downgrade Design for javascript Downgrade for javascript-less

Slide 18: Example: Date picker Browser Server Render both input field and button If javascript is disabled the button will not work

Slide 19: Progressive enhancement Design for javascript-less Add enhancements if javascript is present.

Slide 20: Date picker (again) Browser Server Render only input field If javascript is enabled, add button

Slide 21: Another example Think autocompleters.

Slide 22: Lesson learned Use the server to generate working HTML. Use javascript to enhance this HTML. Do not generate javascript from the server.

Slide 23: Performance  .1 sec to 1 sec: no feedback necessary  1 sec to 10 sec: use some feedback (spinners, etc)  More than 10 sec: the user moves to other things Jakob Nielsen's Response Times study

Slide 24: Improving performance The Yahoo! list: http://developer.yahoo.com/performance/rules.html contains 34 best practices

Slide 25: This is about a single user! We will be talking about a single user experience Thus, focus in downloading a single page. Typically, you are thinking about multiple users When scaling, your bottleneck may be somewhere else.

Slide 26: Know when to stop Let me introduce a new concept: Fast enough

Slide 27: Use a CDN  YUI: http://yui.yahooapis.com  Dojo: http://aolcdn.com  Anything else*: http://ajax.googleapis.com  They include minified versions** (*) Prototype, Script.aculo.us, Jquery, Mootools... and growing... (**) Life is great

Slide 28: Gzip your responses Gzip static files: js, css, etc. Set your application server to gzip text/* responses.

Slide 29: Minify your javascript files YUI Compressor: http://developer.yahoo.com/yui/compressor/ JSMin: http://www.crockford.com/javascript/jsmin.html Dojo ShrinkSafe: http://dojotoolkit.org/docs/shrinksafe Dean Edwards packer: http://dean.edwards.name/packer/

Slide 30: YUICompressor  YUICompressor is a java library that can be integrated using ant.  There is a maven plugin.  It even detects bad practices in your code.

Slide 31: User-perceived performance  Eager initialization: Netscape Communicator, Word 6.0.  Delayed initialization: Grade-A browsers, Office, Windows.

Slide 32: CSS at the top, JS at the bottom <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Loom Demo - </title> CSS at the top <link href="/loomdemo/css/yaml-3.0.5/core/base.css" rel="stylesheet" type="text/css"></link> <link href="/loomdemo/css/yaml-3.0.5/navigation/nav_vlist.css" rel="stylesheet" type="text/css"></link> <link href="/loomdemo/css/yaml-3.0.5/navigation/nav_slidingdoor.css" rel="stylesheet" type="text/css"></link> <link href="/loomdemo/css/yaml-3.0.5/screen/content_default.css" rel="stylesheet" type="text/css"></link> <link href="/loomdemo/css/yaml-3.0.5/core/print_base.css" rel="stylesheet" type="text/css"></link> <!--[if IE]><link href="/loomdemo/css/yaml-3.0.5/core/iehacks.css" rel="stylesheet" type="text/css"></link><![endif]--> </head> <body> <div id="page_margins"> <div id="page"> downloaded in parallel <div id="header"> <div id="topleft"> <a href="/loomdemo/" title="Demo home">Demo home</a> | <a href="http://loom.extrema-sistemas.org/" title="Loom home">Loom home</a> | <a href="http://loom.extrema-sistemas.org/get-documentation" title="Loom doc">Loom doc</a> </div> <div id="topcenter"> Change language: ( <a href="/loomdemo/support/Locale.action?locale=en" hreflang="en" class="selected">english</a> | <a href="/loomdemo/support/Locale.action?locale=es" hreflang="es" class="">español</a> ) </div> <div id="topnav"> <a href="/loomdemo/other/ViewJspSource.action?jspFilename=/W EB-INF/jsp/ebanking/listAll.jsp&actionName=org.loom.demo.action.ebanking.MortgagesAction" class="strong" title="View source">View source</a> </div> </div> <div id="main"> < <div id="col2"> <div id="col2_content" class="clearfix"> <div id="tips"> <div class="hide-fouc important">Tips are only available with javascript turned on</div> </div> </div> </div> <div id="col3"> <div id="col3_content" class="clearfix"> <form action="/loomdemo/ebanking/Mortgages.action"> <div class="buttonBar"> <input type="submit" value="Delete" class="submit" /> </div> <table id="row"> <thead> <tr> <th class="first"></th> <th class="sortable"> <a href="Mortgages.action?sort=id&amp;event=listAll&amp;dir=asc">ID</a></th> <th class="name sortable"> <a href="Mortgages.action?sort=name&amp;event=listAll&amp;dir=asc">Name</a></th> <th class="sortable"> <a href="Mortgages.action?sort=address&amp;event=listAll&amp;dir=asc">Address</a></th> <th class="date sortable"> <a href="Mortgages.action?sort=principalLoanBalance&amp;event=listAll&amp;dir=asc">Loan</a></th> <th></th> <th class="date sortable"> <a href="Mortgages.action?sort=creationDate&amp;event=listAll&amp;dir=asc">Creation date</a></th></tr></thead> <tbody> <tr class="empty"><td colspan="7">Nothing found to display.</td></tr> </tbody> </table> <input type="hidden" name="__source" value="/WEB-INF/jsp/ebanking/listAll.jsp"/> <input type="hidden" name="event" value="delete"/> </form> <!-- IE Column Clearing --> <div id="ie_clearing"> &#160; </div> </div> </div> </div> <div id="footer"> <p style="float:right">Layout based on <a href="http://www.yaml.de/en/home.html">YAML</a></p> <p>You are currently one of the 1 users browsing this demo site. - <a href="/loomdemo/about.jsp" title="about this demo site">about this demo site</a></p> <p>&copy; 2007 Extrema Sistemas de Informaci&oacute;n - <a href="http://extrema-sistemas.com/en/legal" title="Terms of use">Terms of use</a> - <a href="http://extrema-sistemas.com/en/contact" title="Go to the contact form">Contact</a> - <a href="http://extrema-sistemas.com" title="Go to Extrema home">Extrema home</a> </p> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js" type="text/javascript"></script> <script src="/loomdemo/js/loom-1.0-SNAPSHOT/loom.js" type="text/javascript"></script> <script src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=builder,effects" type="text/javascript"> JS at the bottom </script> <script src="/loomdemo/js/tips.js" type="text/javascript"></script> </body> </html> downloaded sequentially

Slide 33: Lesson learned Get a functional HTML page rendered ASAP. Add javascript later.

Slide 34: Testing javascript Do you test your code?

Slide 35: Find your way  GWT – java code translated to javascript  WebDriver, Selenium – java code testing javascript  Jsunit, Unittest – javascript testing javascript

Slide 36: Three easy steps  Static HTML page with javascript (manual test)  + automatic tests (e.g. unittest.js)  + automatic testsuite (e.g. rake, ant)

Slide 37: Keep in mind You need manual tests! Different browsers, different results.

Slide 38: Lesson learned Design for testing: your javascript library should be a standalone product. Java will not provide you with a manual test.

Slide 39: CSS Frameworks  Reset all browsers to the same starting point.  Avoid browser compatibility issues.  Better default Look & Feel.  Use fonts independent from the O.S.

Slide 40: BUT Your HTML must conform to a predefined structure. This is not for legacy systems!

Slide 41: Should I use a CSS framework? Let me tell you something about profile availability in my world

Slide 42: The typical team Web designer Analysts Developers

Slide 43: So, the answer was... Hell, yeah!

Slide 44: CSS Frameworks  YAML: http://www.yaml.de/en/home.html  Blueprint: http://code.google.com/p/blueprintcss/  Tripoli: http://monc.se/tripoli/  YUI Reset: http://developer.yahoo.com/yui/reset/  ThemeRoller: http://ui.jquery.com/themeroller  Many others...

Slide 45: YAML  Sane CSS  Easy learning curve  Good starting point for your own CSS

Slide 46: Was that all? Hey, time is limited!

Slide 47: Where should I go for more? We learned this while developing Loom – a little about what to do, and a lot about what to avoid. http://loom.extrema-sistemas.org

Slide 48: Thanks Ignacio Coloma icoloma@extrema-sistemas.com http://icoloma.blogspot.com http://extrema-sistemas.com