20. JavaScript UI libraries - Web Front-End
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


20. JavaScript UI libraries - Web Front-End



UI and Mobile JavaScript Frameworks ...

UI and Mobile JavaScript Frameworks
Telerik Software Academy: http://html5course.telerik.com
The website and all video materials are in Bulgarian

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;
JS UI Library Fundamentals: API; Widget factory; Customizable base widgets; Templates; AJAX; Animations; Themes;
Proper use: Which widget is suitable for what use; Interchangeable widgets; Nesting of widgets; Don'ts;
What can we do with them. Examples;
Frameworks for mobile. The browser landscape
jQuery Mobile; Components; Examples; Tips



Total Views
Views on SlideShare
Embed Views



2 Embeds 58

http://accessibleelements.in 56 2



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

20. JavaScript UI libraries - Web Front-End Presentation Transcript

  • 1. JavaScript UI libraries Candy timeIvan ZhekovFront-end Developerhttp://joneff.infoTelerik Software Academyacademy.telerik.com
  • 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 2
  • 3. Table of Contents (2) JS UI Library Fundamentals  API  Widget factory  Customizable base widgets  Templates  AJAX  Animations  Themes 3
  • 4. Table of Contents (3) Proper use  Which widget is suitable for what use  Interchangeable widgets  Nesting of widgets  Donts What can we do with them  Examples 4
  • 5. Table of Contents (4) Frameworks for mobile  The browser landscape jQuery Mobile  Components  Examples  Tips 5
  • 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 7
  • 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 8
  • 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 9
  • 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 11
  • 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(){var app = new FeedViewer.App();}); 12
  • 13. 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
  • 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> 14
  • 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 15
  • 16. 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
  • 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 17
  • 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> 18
  • 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) 19
  • 20. KendoUI syntax Sample code <script> $("#autocomplete").kendoAutoComplete(["Item1", "Item2"]); </script> <input id="autocomplete" /> 20
  • 21. Other More widgets More themes, better look Server bindings Examples, documentation Above all, they are a source if inspiration 21
  • 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 23
  • 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 24
  • 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 25
  • 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! 26
  • 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. 27
  • 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 28
  • 29. Proper useEmphasis 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 30
  • 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 31
  • 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 32
  • 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 33
  • 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 34
  • 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 35
  • 36. Practice time Let’s do some UI
  • 37. Ext ComboBox Tabs Grid Tree LayoutManager  Accordion  Border  hBox, vBox Chart 37
  • 38. Dojo Widets Form:  Select (ComboBox)  Button Tree Menu, MenuBar, DropDownMenu, ToolBar Calendar Layout  TabContainer (Tabs)  AccordionContainer (Accordion) 38
  • 39. YUI AutoComplete TabView (Tabs) DataTable (Grid) Calendar MenuNav ScrollView Slider Chart 39
  • 40. jQuery UI AutoComplete Tabs Button DatePicker (Calendar) Dialog Accordion Progressbar Slider 40
  • 41. Kendo UI AutoComplete, ComboBox, DropDownList Calendar, DatePicker, TimePicker Grid Menu TreeView PanelBar (Accordion) Tabs Splitter DataViz: Chart 41
  • 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 43
  • 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 44
  • 45. Mobile JS librariesBut 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 46
  • 47. jQuery Mobile First Level 47
  • 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/ 49
  • 50. Dojo http://dojotoolkit.org/  Docs: http://dojotoolkit.org/documentation/  API: http://dojotoolkit.org/api/ http://dojotoolkit.org/reference-guide/dijit/ 50
  • 51. 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
  • 52. 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
  • 53. 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
  • 54. JavaScript UI libraries курсове и уроци по програмиране, уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET http://academy.telerik.com програмиране за деца – безплатни курсове и уроци ASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC безплатен SEO курс - оптимизация за търсачки алго академия – състезателно програмиране, състезаниякурсове и уроци по програмиране, книги – безплатно от Наков курс мобилни приложения с iPhone, Android, WP7, PhoneGap уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop Дончо Минков - сайт за програмиране free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране безплатен курс "Качествен програмен код" безплатен курс "Разработка на софтуер в cloud среда" C# курс, програмиране, безплатно
  • 55. 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
  • 56. 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