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