JavaScript UI libraries
Candy time
Ivan Zhekov
Front-end Developer
Telerik Corporation
www.telerik.com
Table of Contents
 What is a JavaScript UI library?
 Why do we need them?
 Prominent JavaScript UI frameworks
 jQuery -> jQuery UI
 Dojo -> Dojo Widgets
 YUI
 Ext
 KendoUI
 Other
Table of Contents (2)
 JS UI Library
Fundamentals
 API
 Widget factory
 Customizable base widgets
 Templates
 AJAX
 Animations
 Themes
Table of Contents (3)
 Proper use
 Which widget is suitable for what use
 Interchangeable widgets
 Nesting of widgets
 Don'ts
 What can we do with them
 Examples
Table of Contents (4)
 Frameworks for mobile
 The browser landscape
 jQuery Mobile
 Components
 Examples
 Tips
What is JS UI?
Ask your granny.
She doesn’t know neither!
What is JS UI?
 Everything we said
about JS libraries applies
here: it’s pre-written code that aims to
facilitate and /or jump start development,
especially AJAX based tasks with focus on UI
interface instead of common tasks
 In addition:
 Widgets
 Templates
 Themes
 Keyboard navigation
Why do we need them?
 Not all sites
are simple
 Not everything on a page is
 HTML (as a vocab) is
simple content
almost never enough
 Richer UI, especially for so called “apps”
 We could write everything from scratch, but
once we extract practices and base patterns,
we get a JS UI library
Under the hood
 Two basic
approaches:
 Use existing mark up and extend
 Generate the entire mark up
 And of course, hybrid
 Two concepts for themes:
 Unique
 OS like (native)
 Most libs allow
stacking (nesting) of widgets
Prominent JS UI Libs
Again, a brief, biased overview
Ext
 A spin off from YUI
 Originally
called YUI-Ext, then just Ext
 Now part of Sencha
 Widgets
 Grid, Chart, Tabs, Window, Tree, Layout
Manager, Toolbar, Menu, Combo, Forms …
 Downsides
 No JS, no HTML
 Kinda hard
Ext syntax

Sample code
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.Action',
'Ext.tab.*',
'Ext.button.*',
'Ext.form.*',
'Ext.layout.container.Card',
'Ext.layout.container.Border',
'Ext.ux.PreviewPlugin'
]);
Ext.onReady(function(){var app = new FeedViewer.App();});
Dojo Widets
 Called
Dijit
 Quite flexible and actively developed
 Widgets:
 Grid, Accordion, Buttons, Upload, Toolbar,
Menu, Editor, Dialog, Calendar…
 Downsides:
 Too many things to write
 Exotic and kinda hard...
Dojo Widgets syntax

Sample code
<script type="text/javascript">
dojo.require("dijit.layout.AccordionContainer");
</script>
<div data-dojo-type="dijit.layout.AccordionContainer">
<div data-dojo-type="dijit.layout.ContentPane"
title="Heeh, this is a content pane">
Hi!
</div>
<div data-dojo-type="dijit.layout.ContentPane"
title="I am a title">
Another one
</div>
...
</div>
YUI
 Created by Yahoo!
 Home grown and developed
 Widgets:
 Accordion, Calendar, DataTable, Panel,
Scrollarea, Slider, Tabs, Charts…
 Downsides:
 Not so many widgets
 Not so widely used
 Hard
YUI syntax

Sample code (for YUI3)
<script>
var ac = new Y.AutoComplete({
inputNode: '#ac-input',
source : ['friends', 'Romans', 'countrymen']
});
</script>
<input id="ac-input" type="text“ />
jQuery UI
 Started simple, now a mess (sort of)
 Much easier compared to Dojo and Ext
 Widgets
 Accordion, Button, Dialog, Datepicker, Slider,
Tabs, Progress bar and few more…
 Downsides:
 Not so many widgets
 Still magical
jQueryUI syntax

Sample code
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
<div id="accordion">
<h3><a href="#">First header</a></h3>
<div>First content</div>
<h3><a href="#">Second header</a></h3>
<div>Second content</div>
</div>
Kendo UI
 Build on top of jQuery:
 Blazing fast templates
 Simple skins
 Widgets:
 Autocomplete, Calendar, ComboBox,
DatePicker, DropDownList, Grid, Menu,
NumericBox, PanelBar (accordion) …
 Downsides:
 No IE6 (yes, it’s a down side)
KendoUI syntax

Sample code
<script>
$("#autocomplete").kendoAutoComplete(["Item1", "Item2"]);
</script>
<input id="autocomplete" />
Other
 More widgets
 More themes, better look
 Server bindings
 Examples, documentation
 Above all, they are a source if inspiration
UI Library fundamentals
The bricks and mortar
API
 Almost all
aspects of a widget should be
reachable trough code
 Text, attributes, class names, styles, children...
 Yes, there is no real private in JS, but something
similar can be achieved nevertheless
 Widget should provide events mechanism and
the ability to plug into events via handlers
 If there is a click event, plugs should allow
hooking on both mouse down AND mouse up
Widget Factory
 Why is
it important to have a widget factory:
 It enables the creation of more widgets
 No need to wait for the core developers
 Thus come third party components
 Thus providing more choice
 Thus having broader ecosystem
 Do consider that not all
third party widgets are
as good as the base ones
 Nor properly coded
Customizable base widgets
 Know what default settings do
 Base widgets are good for out of the box cases
 That may cover up to 80% or more of the cases
 The rest of the cases need customization
 Prefer explicit over declarative
syntax e.g.:
 Settings in a script tag, not a data-* attribute
 If you have common settings, consider a
consolidated settings object
 Use the proper widget with proper settings
Templates
 Even more customization
 Templates can make a good widget great
 Templates can make a good widget suck
 Be careful – don’t overdo templates!
 There are a couple of template frameworks
 Not all of them perfect
 If there aren’t templates, or you need other
templates, Google for integration tips
 Don’t overdo templates!
Ajax
 Why?
 Saves roundtrips to server
 Saves full page reload
 Generally faster
 Ajax is not a must in a widget, but a should!
 Not all widgets need Ajax
 Don’t try Ajaxifying prematurely!
 If there is Ajax
– show it!
 Use loading panel, screen fading, etc.
Animations
 You can consider them final touches
 IMPO, almost NO widgets need animations
 But still, it does look nice
 Animations are costly!
 Be careful when animating sibling
containers
 1 pixel jog “feature”
 Be aware
that content may have different size
 If needed, ensure that dimensions are set
 Use relative > absolute elements when possible
Proper use
Emphasis on PROPER
Accordion
 Allows
stacking multiple panels together, as
well as compacting them on demand
 Could be used for nested menus, but don’t
 Two or three levels is
fine
 If you need a fourth, perhaps rethink the design
 Be careful when animating:
 Siblings may give you 1 pixel jog
 Expandable content
ComboBox
 ComboBox
extends the native dropdown
 Can have autocomplete
 Can search in values
 Can have templates
 Can have tree like content
 Can have grid like content
 Beyond that, do not force the ComboBox
 Do not use for anything else but dropdown
 Don’t overcomplicate the content
Grid
 Use to display
data
 If you are using paging, make sure you are
paging over descent data, to ensure
responsiveness of your application
 Consider editing types:
 Inline vs. Edit template
 If default sorting
is needed, usually the left
most column does it fine
 It’s good to have odd / even row indicators
Menu
 In desktop UI a menu CAN contain commands
 In web it’s usually meant for navigation
 Don’t confuse users with too much choice
 Keep the menu compact both horizontally and
vertically; mind the levels of nesting
 Be consistent the way menu items open:
 If you are using hover once, use it always
 Be careful for RTL, menu over frames and
other menus – those are tricky
Pickers
 Use only the picker you need:
 Reduces complexity of choice
 All in one pickers are not always the best choice
 Remember that there are different formats
both for date and time e.g.:
 10:00 pm vs. 22:00
 21/07/1983 vs. 7/21/1983
 When not sure, use month names, not numbers
 Adjust time step interval if needed
Toolbar
 Strictly
for commands
 Learn the different commands
 Try not to nest more than one level
 An icon usually helps, but a tooltip
is better
 If space is not enough, move icons to the top
or bottom of the text
 If space is till not enough either reorganize or
remove the text labels altogether
 Grouping buttons and using separators
helps
Practice time
Let’s do some UI
Ext

ComboBox

Tabs

Grid

Tree

LayoutManager
 Accordion
 Border
 hBox, vBox

Chart
Dojo Widets

Form:
 Select (ComboBox)
 Button

Tree

Menu, MenuBar, DropDownMenu, ToolBar

Calendar

Layout
 TabContainer (Tabs)
 AccordionContainer (Accordion)
YUI

AutoComplete

TabView (Tabs)

DataTable (Grid)

Calendar

MenuNav

ScrollView

Slider

Chart
jQuery UI

AutoComplete

Tabs

Button

DatePicker (Calendar)

Dialog

Accordion

Progressbar

Slider
Kendo UI

AutoComplete, ComboBox, DropDownList

Calendar, DatePicker, TimePicker

Grid

Menu

TreeView

PanelBar (Accordion)

Tabs

Splitter

DataViz: Chart
Mobile for front-ends
Like for web, but different
Mobile for front-ends
 Somewhat less powerful devices
 Advanced standards
support:
 CSS 3
 New JavaScript API
 HTML 5
 SVG support (canvas, not so much)
 Drag and drop is implied
 But no :hover
Mobile for front-ends (2)
 Standard
support means:
 Native Array iterators
 Native Object creation
 Native animations
 Native eye candy
 Standard
libraries are not fit
 No need to support old browsers
 Code duplicates native methods
Mobile JS libraries
But we already have libraries?!?
Mobile JS libraries
 Without the need of old browser
support,
almost everyone can make a lib now
 And they are just getting started
 Focus on one lib
 But keep an eye on the rest
 If a lib
is WebKit friendly, it’s probably good
 There are other engines too, so choose wisely!
 Developing without an actual device is hard
 You could use Chrome
jQuery Mobile
Resources
Reading list
Ext
 http://sencha.com/
 Learn: http://sencha.com/learn/extjs/?4x
 Docs: http://sencha.com/learn/extjs/?4x
 Examples: http://sencha.com/products/extjs/examples/
Dojo
 http://dojotoolkit.org/
 Docs: http://dojotoolkit.org/documentation/
 API: http://dojotoolkit.org/api/
 http://dojotoolkit.org/reference-guide/dijit/
YUI
 http://developer.yahoo.com/yui/
 Version 2: http://developer.yahoo.com/yui/2/
 http://yuilibrary.com/
 Examples: http://yuilibrary.com/yui/docs/examples/
 API: http://yuilibrary.com/yui/docs/api/
 Theater: http://yuilibrary.com/theater/
 http://yuiblog.com/
jQuery
 http://jquery.com
 API: http://api.jquery.com
 Source: https://github.com/jquery/jquery
 http://jqueryui.com
 Demos: http://jqueryui.com/demos/
 Themes: http://jqueryui.com/themeroller/
 http://jquerymobile.com
 Demos: http://jquerymobile.com/demos/1.0/
 Themes: http://jquerymobile.com/themeroller/
KendoUI
 http://kendoui.com/
 Web: http://demos.kendoui.com/web/overview/
 DataViz: http://demos.kendoui.com/dataviz/overview/
 Mobile: http://demos.kendoui.com/mobile/
 Themes: http://demos.kendoui.com/themebuilder/
JavaScript Libraries
Questions?
http://academy.telerik.com
Homework
Homework
 Try to recreate Gmail using any UI library
 Ext, jQueryUI, KendoUI have the most widgets
 You will
need
 Splitter / Layout manager
 Grid
 Menu
 Menubutton, checkboxes …
 Do as much as you find comfortable
 But at the least have read state for messages