JavaScript UI libraries

Candy time

Ivan Zhekov

Telerik Corporationwww.telerik.com

Front-end Developer

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 simple content

HTML (as a vocab) is 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 LibsAgain, 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 useEmphasis 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 timeLet’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-endsLike 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 librariesBut 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

ResourcesReading 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/

Questions?

JavaScript Libraries

??

? ? ???

?

?

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