Desingning reusable web components

1,041 views

Published on

My presentation at Jfokus 2013

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

  • Be the first to like this

No Downloads
Views
Total views
1,041
On SlideShare
0
From Embeds
0
Number of Embeds
79
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Desingning reusable web components

  1. 1. Designing Reusable Web Components Dr. Joonas Lehtinen Vaadin @joonaslehtinen
  2. 2. AgendaWhat do we Q&Awant todesign? Designing Web ComponentTechnology Step-by-step•HTML5 / Canvas•Google Web Toolkit•Vaadin Framework
  3. 3. Goal
  4. 4. 1Goal
  5. 5. http://jole.virtuallypreinstalled.com/spreadsheet
  6. 6. 2Technology
  7. 7. <!doctype html>
  8. 8. Element Description<article> An independent piece of content for a document e.g. blog entry, forum entry<aside> A piece of content that is somehow related to the rest of the page<audio> Audio media content<canvas> A component for rendering dynamic bitmap graphics on the fly. e.g games<command> A command that the user can invoke: a button, radio button or checkbox<datalist> Together with the new list attribute for the <input> element can be used to make combo boxes<details> Additional information or controls that the user can obtain on demand, to provide details on the document, or parts of it<embed> Used for plug-in content<figure> A piece of self-contained flow content referenced as a single unit from the main flow of the document<figcaption> Caption for a<footer> Footer for a section; may contain information about author, copyright information, etc.<header> A group of introductory or navigation aids<hgroup> Header of a section<keygen> A key pair generation control for user authentication in forms<mark> A run of text in one document marker or highlighted for reference purposes
  9. 9. “new shiny”
  10. 10. Cross-document CSS3 messaging Document editingMultimedia Microdata WebGL Offline storage Canvas Markupimprovements History management FormsGeolocation Drag-and-drop File API
  11. 11. Canvas state state state
  12. 12. http://vj.jole.fi/
  13. 13. brought to you by...#151 Get More Refcardz! Visit refcardz.com CONTENTS INCLUDE: Introduction to Canvas HTML 5 Canvas A Comparison with SVG Canvas Performance Creating a Canvas and More! By Simon Sarris INTRODUCTION TO CANVAS The HTML <canvas> element allows for on-the-fly creation of graphs, Canvas SVG diagrams, games, and other visual elements and interactive media. It also Support - allows for the rendering of 2D and 3D shapes and images, typically via Safari, Firefox, and Opera have at ers. Almost all modern smart phones. JavaScript. least some support. Internet Explorer 9+ has support. Almost all modern <canvas id=”canvas1” width=”500” height=”500”></canvas> smart phones. <script type=”text/javascript”> var can = document.getElementById(‘canvas1’); limited support through the excanvas var ctx = can.getContext(‘2d’); library. “Hello World!”, 50, 50); </script> Stateful- ness surface surface Canvas is perhaps the most visible part of the new HTML5 feature set, with new demos, projects, and proofs of concept appearing daily. remembered about their state. Canvas is a very low-level drawing surface with commands for making Other Consider- 10,000 objects. lines, curves, rectangles, gradients and clipping regions built in. There is ations very little else in the way of graphics drawing, which allows programmers must be programmed yourself. to create their own methods for several basic drawing functions such objects, statefulness is built in and as blurring, tweening, and animation. Even drawing a dotted line is (rendering nothing) if scripting is event handling is much easier. something that must be done by the programmer from scratch. disabled. many programs such as Illustrator can Canvas is an immediate drawing surface and has no scene graph. This output SVG means that once an image or shape is drawn to it, neither the Canvas nor its drawing context have any knowledge of what was just drawn. animation. Accessi- For instance, to draw a line and have it move around, you need to do bility DOM objects objects. much more than simply change the points of the line. You must clear the Canvas (or part of it) and redraw the line with the new points. This - and web crawlers. contrasts greatly with SVG, where you would simply give the line a new ment functionality is strongly advised position and be done with it. against, even in the specification itself. You can visit the evolving specification for Canvas at the WHATWG site: Hot http://www.whatwg.org/specs/web-apps/current-work/multipage/ disabled. Tip the-canvas-element.html. Browser Support and Hardware Acceleration Canvas is supported by Firefox 1.5 and later; Opera 9 and later; and newer versions of Safari, Chrome, and Internet Explorer 9 and 10. The latest versions of these browsers support nearly all abilities of the Canvas element. A notable exception is drawFocusRing, which no browser supports effects. Hardware acceleration is supported in some variation by all current browsers, though the performance gains differ. It is difficult to benchmark between the modern browsers because they are changing frequently, but so far IE9 seems to consistently get the most out of having a good GPU.HTML5 Canvas On a machine with a good video card it is almost always the fastest at rendering massive amounts of images or canvas-to-canvas draws. Accelerated IE9 also renders fillRect more than twice as fast as the other major browsers, allowing for impressive 2D particle effects [1]. Chrome often has the fastest path rendering but can be inconsistent between releases. All browsers render images and rects much faster than paths or text, so it is best to use images and rects if you can regardless of which browsers you are targeting. DZone, Inc. | www.dzone.com
  14. 14. Google Web Toolkit
  15. 15. Subset of IE6java.lang, java.util Java to IE7 Widgetset JavaScript Compiler FirefoxYour Application UI Safari
  16. 16. simpler• 100% Java• Static typing• Object oriented• Excellent tooling
  17. 17. less bugs• Stop debugging JavaScript spaghetti• Ignore most browser differences
  18. 18. client-side• UI in client• Asyncronous RPC• Services (for UI)
  19. 19. Vaadin is aUI framework for rich web applications
  20. 20. java html
  21. 21. Web application layers Backend Web Java to RPC JavaScript server server JavaScriptVaadin required required optional optional optionalGWT required required required required optionalJS required required required required
  22. 22. Vaadin UI componentarchitecture HTTP(S)Server UI comp. Client UI comp.• Button, Table, Tree, ... • Rendering• API you program with • Event handling• State • Runs on JavaScript Java Java • Compiled with JDK • Google Web Toolkit
  23. 23. How does itwork, really?
  24. 24. • Initial HTML• CSS (theme)• Images• JavaScript250k total
  25. 25. • name=”Joonas”• button clicked150 bytes
  26. 26. • name=”Joonas”• button clicked150 bytes• Add notification466 bytes
  27. 27. http://demo.vaadin.com/ dashboard
  28. 28. Download for Free vaadin.com/bookJava fra mepplicatio work ns thatd make you and00 0 ~700 pages
  29. 29. DesigningStep-by-step
  30. 30. 3DesigningStep-by-step
  31. 31. Need We can not getthe UX we needwith the existing widgets
  32. 32. Goals• List of• real• quantifiable• requirements• for UX
  33. 33. Example goals • Load and view data in XLS files • Show visual overview for numeric cols • Must support 1000 cell tables • Supports the latest Firefox & Chrome
  34. 34. Nail downthe minimum viableset of supportedbrowser versionswith the customer
  35. 35. Idea=UX [how it is used]+Tech [how it works]
  36. 36. Always start fromdefined goals -never let idea torule your design
  37. 37. Works withtarget browsers?
  38. 38. Interactionswork with targetbrowsers?Performance isgood enough fortarget data?
  39. 39. Proto DOD• Includes main use-cases• Works in target browsers• Handles enough data
  40. 40. Never start designor implementationbefore prototypingbrowser compatibilityand performance
  41. 41. Design UX andAPI first.Never continuefromthe prototypeimplementation
  42. 42. Drawing detailedwireframes & mockupsand testing them withusers will savetime later
  43. 43. Shamelessly copy UX.Then your usersalreadyknow how to use it.
  44. 44. Aim for multilayereddesign that lets yourusers (developers)change behavior ofyour component
  45. 45. DOM classes andCSS restrictionsmust be documentedto make styling easy
  46. 46. Keep componentproject separatefrom your realapplication project
  47. 47. Demo applicationmust include allfeaturesand serve as examplefor your users
  48. 48. Invest in projectsetup with a rapidsave-to-see cycle and arobust build script.These might not be thesame thing.
  49. 49. https://vaadin.com/wiki/-/wiki/Main/Component+Add-on+Project+Setup+HOWTO
  50. 50. There is no substitutefor manual testing anduser experience testing
  51. 51. Skip test drivendevelopment, but investin regression testing
  52. 52. Pixel level regressiontests take time to setup, but will be worth it
  53. 53. Never trust thatyour changes would notbreak other browsersand skip cross-browsertesting
  54. 54. It is impossible to usetoo much time inpolishing UX for areusable component.
  55. 55. 35 Search… Explore Gist Blog Help jojule jojule / spreadsheet Admin Unwatch Fork Pull Request 1 1 Code Network Pull Requests 0 Issues 0 Wiki 0 Stats & Graphs Simple spreadsheet component for Vaadin — Read more https://vaadin.com/addon/spreadsheet  Clone in Mac ZIP SSH HTTP Git Read-Only git@github.com:jojule/spreadsheet.git Read+Write access branch: master Files Commits Branches 1 Tags Downloads Latest commit to the master branch https://github.com/jojule/spreadsheet Update README.markdown jojule authored 4 hours ago commit 7453f467b1spreadsheet / name age message history design a day ago Developing [Joonas Lehtinen] src 19 hours ago Version 0.1 [Joonas Lehtinen] README.markdown 4 hours ago Update README.markdown [jojule] licensing.txt 19 hours ago Version 0.1 [Joonas Lehtinen] pom.xml 18 hours ago Fixed add-on name [Joonas Lehtinen] README.markdown
  56. 56. README.markdownSpreadsheet for VaadinThe widget shows a spreadsheet - either from XLS file or by setting the cell contents programmatically.This version is very limited and should be considered to be an early alpha -version. Try out the demo to see if it would be useful for you. Imainly built it for an upcoming presentation.SpreadsheetView class should be also usable in GWT without Vaadin Framework, but then you must implement SpreadsheetModel byyourself.Dependencies Apache POI 3.8 - http://poi.apache.org/ Apache Commons Codec 1.5 - Required by POI - http://commons.apache.org/codec/Release notesInitial release with severe limitations: All columns and rows have fixed sizes No cell styling is supported No graphs are supported No merged cells are supported Performance for larger spreadsheets is really bad Only one spreadsheet widget is supported on screen at onceLicense & Author
  57. 57. T out my Spreadsheet! ry vaadin.com/addon/spreadsheet
  58. 58. https://github.com/jojule/ spreadsheet/issues
  59. 59. Support HOWTO Ignore. wont-fix in best case. (the usual open source way)Issuereported by Fix after 6 months,actual user! maybe... Fix immediately and thank the user who reported it
  60. 60. ? Tue Vaadin &20:00 C4 GWT BOF Wed Intro to14:00 C4 Vaadin 7 joonas@vaadin.com vaadin.com/joonas @joonaslehtinen

×