Desingning reusable web components

Designing Reusable Web
Components
Joonas Lehtinen / Vaadin

@joonaslehtinen
12-5-17

Agenda

Goal Q&A
• Test app

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

http://jole.virtuallypreinstalled.com/spreadsheet

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

Cross-document CSS3
messaging Document
editing
Multimedia
Microdata
WebGL

Ofﬂine storage
Canvas
Markup
improvements History
management
Forms

Geolocation Drag-and-drop File API

Canvas

state

state

state

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

Subset of IE6
java.lang, java.util

Java to IE7
Widgetset JavaScript
Compiler
Firefox

Your Application UI Safari

simpler
• 100% Java
• Static typing
• Object oriented
• Excellent tooling

less bugs
• Stop debugging
JavaScript spaghetti
• Ignore most
browser differences

client-side
• UI in client
• Asyncronous RPC
• Services (for UI)

Vaadin is a
UI framework
for rich web
applications

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

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

• Initial HTML
• CSS (theme)
• Images
• JavaScript

120k total

• name=”Joonas”
• button clicked
150 bytes

• name=”Joonas”
• button clicked
150 bytes

• Add
notification
466 bytes

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

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
.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

Need
We can not get
the UX we need
with the existing
widgets

Goals
• List of
• real
• quantifiable
• requirements
• for UX

Example goals
• Load and view data in XLS ﬁles
• Show visual overview for numeric cols
• Must support 1000 cell tables
• Supports the latest Firefox & Chrome

Nail down
the minimum viable
set of supported
browser versions
with the customer

Idea
=
UX [how it is used]
+
Tech [how it works]

Always start from
deﬁned goals -
never let idea to
rule your design

Interactions
work with target
browsers?
Performance is
good enough for
target data?

Proto DOD
• Includes main use-cases
• Works in target browsers
• Handles enough data

Never start design
or implementation before
prototyping browser
compatibility
and performance

Design UX and API ﬁrst.
Never continue from
the prototype
implementation

Drawing detailed
wireframes and mockups
and testing them with
users will save
time later

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

Aim for multilayered
design that lets your
users (developers)
change behavior of
your component

DOM classes and
CSS restrictions
must be documented
to make styling easy

Keep component
project separate
from your real
application project

Demo application
must include all features
and serve as example
for your users

Invest in project
setup with a rapid
save-to-see cycle and a
robust build script. These
might not be the same
thing.

https://vaadin.com/wiki/-/wiki/Main/
Component+Add-on+Project+Setup+HOWTO

There is no substitute
for manual testing and
user experience testing

Skip test driven
development, but invest
in regression testing

Pixel level regression
tests take time to set
up, but will be worth it

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

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

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

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

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>");
! }

T out my Spreadsheet!
ry
vaadin.com/addon/spreadsheet

https://github.com/jojule/
spreadsheet/issues

Support HOWTO
Ignore. wont-ﬁx 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

Expert services
Better
Online support
Results
Training
Faster
Tools
vaadin.com/pro

Questions?

joonas@vaadin.com
vaadin.com/joonas
12-5-17 @joonaslehtinen

Desingning reusable web components

More Related Content

Viewers also liked

Similar to Desingning reusable web components

Recently uploaded

Desingning reusable web components