Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Desingning reusable web components


Published on

Many toolkits offer a wide range of widgets for building rich web applications on top of HTML5 platform. For a real world application these are rarely enough, making development of custom user interface components a necessity. Unfortunately, designing reusable components is far from trivial.

In this presentation we discuss best practices for designing reusable web components. During the presentation we review all the steps for building a new user interface component starting from an early idea up to packaging and distributing the component. The component is prototyped in HTML and JavaScript, implemented Google Web Toolkit and Vaadin Framework usign HTML5 canvas. All of these technologies are introduced during the presentation.

Sources for the component built:


Published in: Technology, Design
  • Sex in your area is here: ♥♥♥ ♥♥♥
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ ♥♥♥
    Are you sure you want to  Yes  No
    Your message goes here
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ●●●
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Desingning reusable web components

  1. 1. Designing Reusable Web Components Joonas Lehtinen, PhD Vaadin Ltd - CEO @joonaslehtinen
  2. 2. Agenda Goal Q&A • Test app Designing Web Component Technology Step-by-step •HTML5 / Canvas •Google Web Toolkit •Vaadin Framework16. huhtikuuta 12
  3. 3. 16. huhtikuuta 12 1 Goal
  4. 4. huhtikuuta 12
  5. 5. 16. huhtikuuta 12
  6. 6. Technology16. huhtikuuta 12
  7. 7. 16. huhtikuuta 12 2 Technology
  8. 8. 16. huhtikuuta 12
  9. 9. <!doctype html>16. huhtikuuta 12
  10. 10. 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 purposes16. huhtikuuta 12
  11. 11. “new shiny”16. huhtikuuta 12
  12. 12. Cross-document CSS3 messaging Document editing Multimedia Microdata WebGL Offline storage Canvas Markup improvements History management Forms Geolocation Drag-and-drop File API16. huhtikuuta 12
  13. 13. Canvas state state state16. huhtikuuta 12
  14. 14. huhtikuuta 12
  15. 15. brought to you by... #151 Get More Refcardz! Visit 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 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.com16. huhtikuuta 12
  16. 16. Google Web Toolkit16. huhtikuuta 12
  17. 17. Subset of IE6 java.lang, java.util Java to IE7 Widgetset JavaScript Compiler Firefox Your Application UI Safari16. huhtikuuta 12
  18. 18. simpler • 100% Java • Static typing • Object oriented • Excellent tooling16. huhtikuuta 12
  19. 19. less bugs • Stop debugging JavaScript spaghetti • Ignore most browser differences16. huhtikuuta 12
  20. 20. client-side • UI in client • Asyncronous RPC • Services (for UI)16. huhtikuuta 12
  21. 21. 16. huhtikuuta 12
  22. 22. Vaadin is a UI framework for rich web applications16. huhtikuuta 12
  23. 23. java html16. huhtikuuta 12
  24. 24. Layers of abstraction backend frontend RPC browser browser server server any language any language json / xml java ➠ javascriptExtJS GWT Vaadin required required optional optional optional required required required required optional required required required X required 16. huhtikuuta 12
  25. 25. Vaadin UI component architecture 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 Toolkit16. huhtikuuta 12
  26. 26. How does it work, really?16. huhtikuuta 12
  27. 27. 16. huhtikuuta 12
  28. 28. • Initial HTML • CSS (theme) • Images • JavaScript 120k total16. huhtikuuta 12
  29. 29. • name=”Joonas” • button clicked 150 bytes16. huhtikuuta 12
  30. 30. 16. huhtikuuta 12
  31. 31. • name=”Joonas” • button clicked 150 bytes • Add notification 466 bytes16. huhtikuuta 12
  32. 32. huhtikuuta 12
  33. 33. 16. huhtikuuta 12
  34. 34. 16. huhtikuuta 12
  35. 35. Download for Free Vaadin is a for build n open source ing mod J look gre ern web ava framework at, applicat your use perform well a ion rs happ nd make s that y. you and http://va /SBN 978 -9 52-92-67 53-8 900009 7 8 95 2 9 267538 $29.95 4th Editio n 674 pages 16. huhtikuuta 12
  36. 36. brought to you by... #85 Get More Refcardz! Visit CONTENTS INCLUDE: About Vaadin Getting Started with Vaadin Creating An Application Components Layout Components Themes Data Binding and more... By Marko Grönroos ABOUT VAADIN Web Browser External Client-Side Resources Vaadin is a server-side Ajax web application development Engine framework that allows you to build web applications just like AJAX Requests with traditional desktop frameworks, such as AWT or Swing. An Servlet Container Java File application is built from user interface components contained Servlet Resources hierarchically in layout components. Data In the server-driven model, the application code runs on Application UI Binding Default Class Component Theme a server, while the actual user interaction is handled by a client-side engine running in the browser. The client-server Inherits Events Changes Inherits communications and any client-side technologies, such as User Event Data Application Application HTML and JavaScript, are invisible to the developer. As the Application Listener Model Themes Resources client-side engine runs as JavaScript in the browser, there is no need to install plug-ins. Vaadin is released under the Apache Database License 2.0. Web Java Vaadin Your Web Figure 2: Architecture for Vaadin Applications Browser Web UI Java Service Client-Side Server Components Application You can get a reference to the application object Engine EJB Hot Tip from any component attached to the application with DB Event Listeners Figure 1: Vaadin Client-Server Architecture In the event-driven model, user interaction with user interface If the built-in selection of components is not enough, you can components triggers server-side events, which you can handle16. huhtikuuta 12 develop new components with the Google Web Toolkit (GWT)
  37. 37. 16. huhtikuuta 12 3 Designing Step-by-step
  38. 38. 16. huhtikuuta 12
  39. 39. 16. huhtikuuta 12
  40. 40. Need We can not get the UX we need with the existing widgets16. huhtikuuta 12
  41. 41. Goals • List of • real • quantifiable • requirements • for UX16. huhtikuuta 12
  42. 42. Example goals • Load and view data in XLS files • Show visual overview for numeric cols • Must support 1000 cell tables • Supports the latest Firefox & Chrome16. huhtikuuta 12
  43. 43. Nail down the minimum viable set of supported browser versions with the customer16. huhtikuuta 12
  44. 44. Idea = UX [how it is used] + Tech [how it works]16. huhtikuuta 12
  45. 45. 16. huhtikuuta 12
  46. 46. 16. huhtikuuta 12
  47. 47. 16. huhtikuuta 12
  48. 48. Always start from defined goals - never let idea to rule your design16. huhtikuuta 12
  49. 49. 16. huhtikuuta 12
  50. 50. Works with target browsers?16. huhtikuuta 12
  51. 51. Interactions work with target browsers? Performance is good enough for target data?16. huhtikuuta 12
  52. 52. Proto DOD • Includes main use-cases • Works in target browsers • Handles enough data16. huhtikuuta 12
  53. 53. Never start design or implementation before prototyping browser compatibility and performance16. huhtikuuta 12
  54. 54. 16. huhtikuuta 12
  55. 55. Design UX and API first. Never continue from the prototype implementation16. huhtikuuta 12
  56. 56. Drawing detailed wireframes and mockups and testing them with users will save time later16. huhtikuuta 12
  57. 57. 16. huhtikuuta 12
  58. 58. Shamelessly copy UX. Then your users already know how to use it.16. huhtikuuta 12
  59. 59. 16. huhtikuuta 12
  60. 60. Aim for multilayered design that lets your users (developers) change behavior of your component16. huhtikuuta 12
  61. 61. 16. huhtikuuta 12
  62. 62. DOM classes and CSS restrictions must be documented to make styling easy16. huhtikuuta 12
  63. 63. 16. huhtikuuta 12
  64. 64. Keep component project separate from your real application project16. huhtikuuta 12
  65. 65. Demo application must include all features and serve as example for your users16. huhtikuuta 12
  66. 66. 16. huhtikuuta 12
  67. 67. Invest in project setup with a rapid save-to-see cycle and a robust build script. These might not be the same thing.16. huhtikuuta 12
  68. 68. Component+Add-on+Project+Setup+HOWTO16. huhtikuuta 12
  69. 69. 16. huhtikuuta 12
  70. 70. There is no substitute for manual testing and user experience testing16. huhtikuuta 12
  71. 71. Skip test driven development, but invest in regression testing16. huhtikuuta 12
  72. 72. Pixel level regression tests take time to set up, but will be worth it16. huhtikuuta 12
  73. 73. Never trust that your changes would not break other browsers and skip cross-browser testing16. huhtikuuta 12
  74. 74. It is impossible to use too much time in polishing UX for a reusable component.16. huhtikuuta 12
  75. 75. 16. huhtikuuta 12
  76. 76. 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  Clone in Mac ZIP SSH HTTP Git Read-Only Read+Write access branch: master Files Commits Branches 1 Tags Downloads Latest commit to the master branch Update README.markdown jojule authored 4 hours ago commit 7453f467b1 spreadsheet / 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.markdown16. huhtikuuta 12
  77. 77. README.markdown Spreadsheet for Vaadin The 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. I mainly built it for an upcoming presentation. SpreadsheetView class should be also usable in GWT without Vaadin Framework, but then you must implement SpreadsheetModel by yourself. Dependencies Apache POI 3.8 - Apache Commons Codec 1.5 - Required by POI - Release notes Initial 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 once License & Author16. huhtikuuta 12 Apache License 2.0
  78. 78. 16. huhtikuuta 12
  79. 79. 16. huhtikuuta 12
  80. 80. 16. huhtikuuta 12
  81. 81. 16. huhtikuuta 12
  82. 82. 16. huhtikuuta 12
  83. 83. 16. huhtikuuta 12
  84. 84. PaperStack notes = new PaperStack();!! @Override! public void init() { // === Layout ========================================================! ! HorizontalLayout lo= new HorizontalLayout();! ! Window mainWindow = new Window("Postitnotes Application", lo);! ! lo.setSizeFull();! ! lo.addComponent(notes);! ! lo.setComponentAlignment(notes, Alignment.MIDDLE_CENTER);! ! setMainWindow(mainWindow);!!! ! notes.setWidth("350px");! ! notes.setHeight("350px");! ! // === Note 1 ========================================================! ! notes.addComponent(new Label("<h1>TODO / Today</h1><div style=font-size: 24px>” + “<p>Enjoy the conference...</p></div>", Label.CONTENT_XHTML), "#fef49c"); // === Note 2 ========================================================! ! notes.addComponent(new Label("<h1>TODO / Tomorrow</h1><div style=font-size: 24px>” + “<p>Learn Vaadin!</p></div>", Label.CONTENT_XHTML), "#b2ffa1"); // === Note 3 ========================================================! ! notes.addComponent(new Label("<div style=font-size: 60px><center><br/><br/><br/>” + “DOUBLE<br/><br/><br/>SPEED</center></div>", Label.CONTENT_XHTML), "#b2ffa1"); // === Note 4 ========================================================! ! com.vaadin.ui.RichTextArea rta = new RichTextArea();! ! rta.setSizeFull();! ! notes.addComponent(rta);! ! rta.setValue("<span style=font-size: 35pt; color: green;>You can use any “ + “Vaadin components here...</span>");! }16. huhtikuuta 12
  85. 85. T out my Spreadsheet! ry huhtikuuta 12
  86. 86. spreadsheet/issues16. huhtikuuta 12
  87. 87. Support HOWTO Ignore. wont-fix in best case. (the usual open source way) Issue reported by Fix after 6 months, actual user! maybe... Fix immediately and thank the user who reported it16. huhtikuuta 12
  88. 88. 16. huhtikuuta 12 4 Q&A
  89. 89. Questions? Comments? Expert services Better @joonaslehtinen Online support #vaadin Results Training Faster Tools huhtikuuta 12