1 / 56

JavaScript UI libraries

JavaScript UI libraries. Candy time. Ivan Zhekov. Telerik Corporation. www.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.

latif
Download Presentation

JavaScript UI libraries

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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/

More Related