SlideShare a Scribd company logo
1 of 89
Download to read offline
Designing Reusable
  Web Components
         Joonas Lehtinen, PhD
             Vaadin Ltd - CEO
                 vaadin.com/vaadin

               @joonaslehtinen
Agenda

         Goal                                  Q&A
         • Test app




                               Designing Web Component
         Technology            Step-by-step
         •HTML5 / Canvas
         •Google Web Toolkit
         •Vaadin Framework



16. huhtikuuta 12
16. huhtikuuta 12
                     1
                    Goal
http://jole.virtuallypreinstalled.com/spreadsheet




16. huhtikuuta 12
16. huhtikuuta 12
Technology



16. huhtikuuta 12
16. huhtikuuta 12
                    2
                    Technology
16. huhtikuuta 12
<!doctype html>



16. huhtikuuta 12
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

16. huhtikuuta 12
“new shiny”


16. huhtikuuta 12
Cross-document                CSS3
        messaging                                Document
                                                  editing
     Multimedia
                                                Microdata
        WebGL

              Offline storage
                                                  Canvas
     Markup
  improvements                                   History
                                               management
                     Forms

    Geolocation                Drag-and-drop     File API
16. huhtikuuta 12
Canvas



                    state

                    state

                    state



16. huhtikuuta 12
http://vj.jole.fi/



16. huhtikuuta 12
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




16. huhtikuuta 12
Google Web Toolkit


16. huhtikuuta 12
Subset of                       IE6
              java.lang, java.util

                                       Java to     IE7
                    Widgetset        JavaScript
                                      Compiler
                                                  Firefox

             Your Application UI                  Safari




16. huhtikuuta 12
simpler
                    • 100% Java
                    • Static typing
                    • Object oriented
                    • Excellent tooling

16. huhtikuuta 12
less bugs
                    • Stop debugging
                      JavaScript spaghetti
                    • Ignore most
                      browser differences

16. huhtikuuta 12
client-side
                    • UI in client
                    • Asyncronous RPC
                    • Services (for UI)

16. huhtikuuta 12
16. huhtikuuta 12
Vaadin is a
                    UI framework
                     for rich web
                     applications


16. huhtikuuta 12
java     html

16. huhtikuuta 12
Layers of abstraction
                   backend frontend
                                                  RPC         browser browser
                    server   server
                   any language   any language   json / xml     java   ➠   javascript
ExtJS GWT Vaadin




                   required       required       optional     optional     optional


                   required       required       required     required     optional


                   required       required       required        X         required


 16. huhtikuuta 12
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 Toolkit



16. huhtikuuta 12
How does it
                    work, really?


16. huhtikuuta 12
16. huhtikuuta 12
•   Initial HTML
                    •   CSS (theme)
                    •   Images
                    •   JavaScript

                    120k total




16. huhtikuuta 12
• name=”Joonas”
                    • button clicked
                    150 bytes




16. huhtikuuta 12
16. huhtikuuta 12
• name=”Joonas”
                    • button clicked
                    150 bytes



                    • Add
                      notification
                    466 bytes

16. huhtikuuta 12
https://vaadin.com/demo




16. huhtikuuta 12
16. huhtikuuta 12
16. huhtikuuta 12
Download for Free
          vaadin.com/book




     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
             adin.com
                     /



SBN 978
        -9   52-92-67
                     53-8
                            90000

9 7 8 95 2
           9    267538
 $29.95




                                                4th Editio
                                                          n




          674 pages
   16. huhtikuuta 12
brought to you by...
 #85
   Get More Refcardz! Visit refcardz.com


                                           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
   w.dzone.com




                                             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 handle
16. huhtikuuta 12 develop new components with the Google Web Toolkit (GWT)
16. huhtikuuta 12
                    3
                    Designing
                    Step-by-step
16. huhtikuuta 12
16. huhtikuuta 12
Need
                     We can not get
                    the UX we need
                    with the existing
                             widgets

16. huhtikuuta 12
Goals
                    • List of
                    • real
                    • quantifiable
                    • requirements
                    • for UX

16. huhtikuuta 12
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




16. huhtikuuta 12
Nail down
                    the minimum viable
                      set of supported
                     browser versions
                     with the customer


16. huhtikuuta 12
Idea
                    =
                    UX [how it is used]
                    +
                    Tech [how it works]

16. huhtikuuta 12
16. huhtikuuta 12
16. huhtikuuta 12
16. huhtikuuta 12
Always start from
                      defined goals -
                    never let idea to
                     rule your design



16. huhtikuuta 12
16. huhtikuuta 12
Works with
                    target browsers?




16. huhtikuuta 12
Interactions
                    work with target
                    browsers?
                    Performance is
                    good enough for
                    target data?




16. huhtikuuta 12
Proto DOD
                    • Includes main use-cases
                    • Works in target browsers
                    • Handles enough data


16. huhtikuuta 12
Never start design
               or implementation before
                  prototyping browser
                     compatibility
                   and performance


16. huhtikuuta 12
16. huhtikuuta 12
Design UX and API first.
                     Never continue from
                         the prototype
                       implementation



16. huhtikuuta 12
Drawing detailed
                    wireframes and mockups
                     and testing them with
                         users will save
                           time later


16. huhtikuuta 12
16. huhtikuuta 12
Shamelessly copy UX.
                    Then your users already
                      know how to use it.



16. huhtikuuta 12
16. huhtikuuta 12
Aim for multilayered
                    design that lets your
                     users (developers)
                     change behavior of
                      your component


16. huhtikuuta 12
16. huhtikuuta 12
DOM classes and
                      CSS restrictions
                    must be documented
                    to make styling easy



16. huhtikuuta 12
16. huhtikuuta 12
Keep component
                     project separate
                      from your real
                    application project



16. huhtikuuta 12
Demo application
                    must include all features
                     and serve as example
                         for your users



16. huhtikuuta 12
16. huhtikuuta 12
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
https://vaadin.com/wiki/-/wiki/Main/
                    Component+Add-on+Project+Setup+HOWTO




16. huhtikuuta 12
16. huhtikuuta 12
There is no substitute
                    for manual testing and
                    user experience testing



16. huhtikuuta 12
Skip test driven
                    development, but invest
                     in regression testing



16. huhtikuuta 12
Pixel level regression
                    tests take time to set
                    up, but will be worth it



16. huhtikuuta 12
Never trust that
                    your changes would not
                     break other browsers
                    and skip cross-browser
                            testing


16. huhtikuuta 12
It is impossible to use
                        too much time in
                       polishing UX for a
                     reusable component.



16. huhtikuuta 12
16. huhtikuuta 12
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 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.markdown


16. huhtikuuta 12
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 - http://poi.apache.org/

                    Apache Commons Codec 1.5 - Required by POI - http://commons.apache.org/codec/


             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 & Author
16. huhtikuuta 12
             Apache License 2.0
16. huhtikuuta 12
16. huhtikuuta 12
16. huhtikuuta 12
16. huhtikuuta 12
16. huhtikuuta 12
16. huhtikuuta 12
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
T out my Spreadsheet!
                     ry
                     vaadin.com/addon/spreadsheet




16. huhtikuuta 12
https://github.com/jojule/
                       spreadsheet/issues




16. huhtikuuta 12
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 it


16. huhtikuuta 12
16. huhtikuuta 12
                    4
                    Q&A
Questions?
              Comments?



                joonas@vaadin.com     Expert services
                  vaadin.com/joonas                   Better
                    @joonaslehtinen   Online support
                            #vaadin                   Results
                                             Training
                                                      Faster
                                               Tools

                                             vaadin.com/pro

16. huhtikuuta 12

More Related Content

Viewers also liked

A 20 minute introduction to AngularJS for XPage developers
A 20 minute introduction to AngularJS for XPage developersA 20 minute introduction to AngularJS for XPage developers
A 20 minute introduction to AngularJS for XPage developersMark Leusink
 
Component Driven Design and Development
Component Driven Design and DevelopmentComponent Driven Design and Development
Component Driven Design and DevelopmentCristina Chumillas
 
OCR and Content Management with SAP and Imaging
OCR and Content Management with SAP and ImagingOCR and Content Management with SAP and Imaging
OCR and Content Management with SAP and ImagingVerbella CMG
 
Angular.js in XPages
Angular.js in XPagesAngular.js in XPages
Angular.js in XPagesMark Roden
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...Mark Roden
 
Why Social Media Chat Bots Are the Future of Communication - Deck
Why Social Media Chat Bots Are the Future of Communication - DeckWhy Social Media Chat Bots Are the Future of Communication - Deck
Why Social Media Chat Bots Are the Future of Communication - DeckJan Rezab
 
Sap vendor invoice management
Sap vendor invoice managementSap vendor invoice management
Sap vendor invoice managementsaisree92
 
Search Content vs. Social Content
Search Content vs. Social ContentSearch Content vs. Social Content
Search Content vs. Social ContentSemrush
 

Viewers also liked (10)

A 20 minute introduction to AngularJS for XPage developers
A 20 minute introduction to AngularJS for XPage developersA 20 minute introduction to AngularJS for XPage developers
A 20 minute introduction to AngularJS for XPage developers
 
Component Driven Design and Development
Component Driven Design and DevelopmentComponent Driven Design and Development
Component Driven Design and Development
 
OCR and Content Management with SAP and Imaging
OCR and Content Management with SAP and ImagingOCR and Content Management with SAP and Imaging
OCR and Content Management with SAP and Imaging
 
Angular.js in XPages
Angular.js in XPagesAngular.js in XPages
Angular.js in XPages
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
 
Image compression
Image compressionImage compression
Image compression
 
JPEG Image Compression
JPEG Image CompressionJPEG Image Compression
JPEG Image Compression
 
Why Social Media Chat Bots Are the Future of Communication - Deck
Why Social Media Chat Bots Are the Future of Communication - DeckWhy Social Media Chat Bots Are the Future of Communication - Deck
Why Social Media Chat Bots Are the Future of Communication - Deck
 
Sap vendor invoice management
Sap vendor invoice managementSap vendor invoice management
Sap vendor invoice management
 
Search Content vs. Social Content
Search Content vs. Social ContentSearch Content vs. Social Content
Search Content vs. Social Content
 

Similar to Desingning reusable web components

Html5 with Vaadin and Scala
Html5 with Vaadin and ScalaHtml5 with Vaadin and Scala
Html5 with Vaadin and ScalaJoonas Lehtinen
 
Rich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScriptRich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScriptGjokica Zafirovski
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and morefaming su
 
Canvas Based Presentation - Zeroth Review
Canvas Based Presentation - Zeroth ReviewCanvas Based Presentation - Zeroth Review
Canvas Based Presentation - Zeroth ReviewArvind Krishnaa
 
Joy of Inkscape - at StixCamp
Joy of Inkscape - at StixCampJoy of Inkscape - at StixCamp
Joy of Inkscape - at StixCampDonna Benjamin
 
Easy charting with
Easy charting withEasy charting with
Easy charting withMajor Ye
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebGeorge Kanellopoulos
 
Web Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaosWeb Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaosMatteo Papadopoulos
 
OSCOM 4: Managing Beautiful Websites with Cocoon
OSCOM 4: Managing Beautiful Websites with CocoonOSCOM 4: Managing Beautiful Websites with Cocoon
OSCOM 4: Managing Beautiful Websites with Cocoonnobby
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
 
S60 3rd FP2 Widgets
S60 3rd FP2 WidgetsS60 3rd FP2 Widgets
S60 3rd FP2 Widgetsromek
 
soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch
 

Similar to Desingning reusable web components (20)

Html5 with Vaadin and Scala
Html5 with Vaadin and ScalaHtml5 with Vaadin and Scala
Html5 with Vaadin and Scala
 
Rich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScriptRich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScript
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 
Canvas Based Presentation - Zeroth Review
Canvas Based Presentation - Zeroth ReviewCanvas Based Presentation - Zeroth Review
Canvas Based Presentation - Zeroth Review
 
Joy of Inkscape - at StixCamp
Joy of Inkscape - at StixCampJoy of Inkscape - at StixCamp
Joy of Inkscape - at StixCamp
 
Easy charting with
Easy charting withEasy charting with
Easy charting with
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 
Web Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaosWeb Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaos
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tourHTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
 
OSCOM 4: Managing Beautiful Websites with Cocoon
OSCOM 4: Managing Beautiful Websites with CocoonOSCOM 4: Managing Beautiful Websites with Cocoon
OSCOM 4: Managing Beautiful Websites with Cocoon
 
Html5
Html5Html5
Html5
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
Html5
Html5Html5
Html5
 
S60 3rd FP2 Widgets
S60 3rd FP2 WidgetsS60 3rd FP2 Widgets
S60 3rd FP2 Widgets
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5
 

More from Joonas Lehtinen

More from Joonas Lehtinen (20)

Web Components for Java Developers
Web Components for Java DevelopersWeb Components for Java Developers
Web Components for Java Developers
 
Vaadin Components @ Angular U
Vaadin Components @ Angular UVaadin Components @ Angular U
Vaadin Components @ Angular U
 
Vaadin & Web Components
Vaadin & Web ComponentsVaadin & Web Components
Vaadin & Web Components
 
Vaadin Components
Vaadin ComponentsVaadin Components
Vaadin Components
 
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 editionVaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
 
Hybrid webinar
Hybrid webinarHybrid webinar
Hybrid webinar
 
Vaadin 7.2
Vaadin 7.2Vaadin 7.2
Vaadin 7.2
 
Vaadin intro
Vaadin introVaadin intro
Vaadin intro
 
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conferenceVaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
 
Hybrid applications
Hybrid applicationsHybrid applications
Hybrid applications
 
Notes on architecture
Notes on architectureNotes on architecture
Notes on architecture
 
Vaadin roadmap-devoxx-2013
Vaadin roadmap-devoxx-2013Vaadin roadmap-devoxx-2013
Vaadin roadmap-devoxx-2013
 
Beoynd Vaadin 7
Beoynd Vaadin 7Beoynd Vaadin 7
Beoynd Vaadin 7
 
Vaadin 7
Vaadin 7Vaadin 7
Vaadin 7
 
Vaadin7
Vaadin7Vaadin7
Vaadin7
 
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on componentsHackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
 
Vaadin7
Vaadin7Vaadin7
Vaadin7
 
Vaadin today and tomorrow
Vaadin today and tomorrowVaadin today and tomorrow
Vaadin today and tomorrow
 
Migration from vaadin 6 to vaadin 7 devoxx france 2013
Migration from vaadin 6 to vaadin 7   devoxx france 2013Migration from vaadin 6 to vaadin 7   devoxx france 2013
Migration from vaadin 6 to vaadin 7 devoxx france 2013
 
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-javaVaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
 

Recently uploaded

UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 

Recently uploaded (20)

UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 

Desingning reusable web components

  • 1. Designing Reusable Web Components Joonas Lehtinen, PhD Vaadin Ltd - CEO vaadin.com/vaadin @joonaslehtinen
  • 2. Agenda Goal Q&A • Test app Designing Web Component Technology Step-by-step •HTML5 / Canvas •Google Web Toolkit •Vaadin Framework 16. huhtikuuta 12
  • 7. 16. huhtikuuta 12 2 Technology
  • 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 purposes 16. huhtikuuta 12
  • 12. Cross-document CSS3 messaging Document editing Multimedia Microdata WebGL Offline storage Canvas Markup improvements History management Forms Geolocation Drag-and-drop File API 16. huhtikuuta 12
  • 13. Canvas state state state 16. huhtikuuta 12
  • 15. 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 16. huhtikuuta 12
  • 16. Google Web Toolkit 16. huhtikuuta 12
  • 17. Subset of IE6 java.lang, java.util Java to IE7 Widgetset JavaScript Compiler Firefox Your Application UI Safari 16. huhtikuuta 12
  • 18. simpler • 100% Java • Static typing • Object oriented • Excellent tooling 16. huhtikuuta 12
  • 19. less bugs • Stop debugging JavaScript spaghetti • Ignore most browser differences 16. huhtikuuta 12
  • 20. client-side • UI in client • Asyncronous RPC • Services (for UI) 16. huhtikuuta 12
  • 22. Vaadin is a UI framework for rich web applications 16. huhtikuuta 12
  • 23. java html 16. huhtikuuta 12
  • 24. Layers of abstraction backend frontend RPC browser browser server server any language any language json / xml java ➠ javascript ExtJS GWT Vaadin required required optional optional optional required required required required optional required required required X required 16. huhtikuuta 12
  • 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 Toolkit 16. huhtikuuta 12
  • 26. How does it work, really? 16. huhtikuuta 12
  • 28. Initial HTML • CSS (theme) • Images • JavaScript 120k total 16. huhtikuuta 12
  • 29. • name=”Joonas” • button clicked 150 bytes 16. huhtikuuta 12
  • 31. • name=”Joonas” • button clicked 150 bytes • Add notification 466 bytes 16. huhtikuuta 12
  • 35. Download for Free vaadin.com/book 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 adin.com / SBN 978 -9 52-92-67 53-8 90000 9 7 8 95 2 9 267538 $29.95 4th Editio n 674 pages 16. huhtikuuta 12
  • 36. brought to you by... #85 Get More Refcardz! Visit refcardz.com 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 w.dzone.com 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 handle 16. huhtikuuta 12 develop new components with the Google Web Toolkit (GWT)
  • 37. 16. huhtikuuta 12 3 Designing Step-by-step
  • 40. Need We can not get the UX we need with the existing widgets 16. huhtikuuta 12
  • 41. Goals • List of • real • quantifiable • requirements • for UX 16. huhtikuuta 12
  • 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 & Chrome 16. huhtikuuta 12
  • 43. Nail down the minimum viable set of supported browser versions with the customer 16. huhtikuuta 12
  • 44. Idea = UX [how it is used] + Tech [how it works] 16. huhtikuuta 12
  • 48. Always start from defined goals - never let idea to rule your design 16. huhtikuuta 12
  • 50. Works with target browsers? 16. huhtikuuta 12
  • 51. Interactions work with target browsers? Performance is good enough for target data? 16. huhtikuuta 12
  • 52. Proto DOD • Includes main use-cases • Works in target browsers • Handles enough data 16. huhtikuuta 12
  • 53. Never start design or implementation before prototyping browser compatibility and performance 16. huhtikuuta 12
  • 55. Design UX and API first. Never continue from the prototype implementation 16. huhtikuuta 12
  • 56. Drawing detailed wireframes and mockups and testing them with users will save time later 16. huhtikuuta 12
  • 58. Shamelessly copy UX. Then your users already know how to use it. 16. huhtikuuta 12
  • 60. Aim for multilayered design that lets your users (developers) change behavior of your component 16. huhtikuuta 12
  • 62. DOM classes and CSS restrictions must be documented to make styling easy 16. huhtikuuta 12
  • 64. Keep component project separate from your real application project 16. huhtikuuta 12
  • 65. Demo application must include all features and serve as example for your users 16. huhtikuuta 12
  • 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. https://vaadin.com/wiki/-/wiki/Main/ Component+Add-on+Project+Setup+HOWTO 16. huhtikuuta 12
  • 70. There is no substitute for manual testing and user experience testing 16. huhtikuuta 12
  • 71. Skip test driven development, but invest in regression testing 16. huhtikuuta 12
  • 72. Pixel level regression tests take time to set up, but will be worth it 16. huhtikuuta 12
  • 73. Never trust that your changes would not break other browsers and skip cross-browser testing 16. huhtikuuta 12
  • 74. It is impossible to use too much time in polishing UX for a reusable component. 16. huhtikuuta 12
  • 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 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 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.markdown 16. huhtikuuta 12
  • 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 - http://poi.apache.org/ Apache Commons Codec 1.5 - Required by POI - http://commons.apache.org/codec/ 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 & Author 16. huhtikuuta 12 Apache License 2.0
  • 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. T out my Spreadsheet! ry vaadin.com/addon/spreadsheet 16. huhtikuuta 12
  • 86. https://github.com/jojule/ spreadsheet/issues 16. huhtikuuta 12
  • 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 it 16. huhtikuuta 12
  • 89. Questions? Comments? joonas@vaadin.com Expert services vaadin.com/joonas Better @joonaslehtinen Online support #vaadin Results Training Faster Tools vaadin.com/pro 16. huhtikuuta 12