JavaScript UI libraries

Candy time

Ivan Zhekov

Telerik Software Academyacademy.telerik.com

Front-end Developerhttp://joneff.info

http://html5course.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

Other2

Table of Contents (2) JS UI Library Fundamentals

API

Widget factory

Customizable base widgets

Templates

AJAX

Animations

Themes

3

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

4

Table of Contents (4) Frameworks for mobile

The browser landscape

jQuery Mobile Components

Examples

Tips

5

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

7

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

8

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

9

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

11

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();}); 12

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

13

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>

14

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 15

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

16

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

17

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>

18

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)

19

KendoUI syntax Sample code

<script>$("#autocomplete").kendoAutoComplete(["Item1", "Item2"]);</script>

<input id="autocomplete" />

20

Other More widgets More themes, better look Server bindings Examples, documentation

Above all, they are a source if inspiration

21

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

23

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

24

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

25

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!

26

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.

27

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

28

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

30

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

31

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

32

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

33

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

34

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

35

Practice timeLet’s do some UI

Ext ComboBox Tabs Grid Tree LayoutManager

Accordion

Border

hBox, vBox Chart

37

Dojo Widets Form:

Select (ComboBox)

Button Tree Menu, MenuBar, DropDownMenu,

ToolBar Calendar Layout

TabContainer (Tabs)

AccordionContainer (Accordion)38

YUI AutoComplete TabView (Tabs) DataTable (Grid) Calendar MenuNav ScrollView Slider Chart

39

jQuery UI AutoComplete Tabs Button DatePicker (Calendar) Dialog Accordion Progressbar Slider

40

Kendo UI AutoComplete, ComboBox,

DropDownList Calendar, DatePicker, TimePicker Grid Menu TreeView PanelBar (Accordion) Tabs Splitter DataViz: Chart

41

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

43

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

44

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

46

jQuery Mobile First Level

47

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/

49

Dojo http://dojotoolkit.org/

Docs: http://dojotoolkit.org/documentation/

API: http://dojotoolkit.org/api/

http://dojotoolkit.org/reference-guide/dijit/

50

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/

51

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/

52

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/

53

форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно

програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки

уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop

уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC

безплатен курс "Разработка на софтуер в cloud среда"

BG Coder - онлайн състезателна система - online judge

курсове и уроци по програмиране, книги – безплатно от Наков

безплатен курс "Качествен програмен код"

алго академия – състезателно програмиране, състезания

ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия

курс мобилни приложения с iPhone, Android, WP7, PhoneGap

free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно

?

? ? ??

?? ?

?

?

?

??

?

?

? ?

Questions?

?

JavaScript UI libraries

http://academy.telerik.com

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

55

Free Trainings @ Telerik Academy

"Web Design with HTML 5, CSS 3 and JavaScript" course @ Telerik Academy html5course.telerik.com

Telerik Software Academy academy.telerik.com

Telerik Academy @ Facebook facebook.com/TelerikAcademy

Telerik Software Academy Forums forums.academy.telerik.com