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