JavaScript UI libraries

1. JavaScript UI libraries Candy time Ivan Zhekov Telerik Corporation www.telerik.com Front-end Developer

2. 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

3. Table of Contents (2) • JS UI Library Fundamentals • API • Widget factory • Customizable base widgets • Templates • AJAX • Animations • Themes

4. 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

5. Table of Contents (4) • Frameworks for mobile • The browser landscape • jQuery Mobile • Components • Examples • Tips

6. What is JS UI? Ask your granny.She doesn’t know neither!

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

8. 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

9. 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

10. Prominent JS UI Libs Again, a brief, biased overview

11. 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

12. 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(){varapp = new FeedViewer.App();});

13. 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...

14. 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>

15. 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

16. YUI syntax • Sample code (for YUI3) <script> varac = new Y.AutoComplete({ inputNode: '#ac-input', source : ['friends', 'Romans', 'countrymen'] }); </script> <input id="ac-input" type="text“ />

17. 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

18. 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>

19. 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)

20. KendoUI syntax • Sample code <script> $("#autocomplete").kendoAutoComplete(["Item1", "Item2"]); </script> <input id="autocomplete" />

21. Other • More widgets • More themes, better look • Server bindings • Examples, documentation • Above all, they are a source if inspiration

22. UI Library fundamentals The bricks and mortar

23. 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

24. 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

25. 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

26. 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!

27. 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.

28. 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

29. Proper use Emphasis on PROPER

30. 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

31. 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

32. 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

33. 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

34. 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

35. 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

36. Practice time Let’s do some UI

37. Ext • ComboBox • Tabs • Grid • Tree • LayoutManager • Accordion • Border • hBox, vBox • Chart

38. Dojo Widets • Form: • Select (ComboBox) • Button • Tree • Menu, MenuBar, DropDownMenu, ToolBar • Calendar • Layout • TabContainer (Tabs) • AccordionContainer (Accordion)

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

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

41. Kendo UI • AutoComplete, ComboBox, DropDownList • Calendar, DatePicker, TimePicker • Grid • Menu • TreeView • PanelBar (Accordion) • Tabs • Splitter • DataViz: Chart

42. Mobile for front-ends Like for web, but different

43. 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

44. 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

45. Mobile JS libraries But we already have libraries?!?

46. 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

47. jQuery Mobile

48. Resources Reading list

49. 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/

50. Dojo • http://dojotoolkit.org/ • Docs: http://dojotoolkit.org/documentation/ • API: http://dojotoolkit.org/api/ • http://dojotoolkit.org/reference-guide/dijit/