JavaScript UI libraries                                 Candy timeIvan ZhekovFront-end Developerhttp://joneff.infoTelerik ...
Table of Contents What is a JavaScript UI library?   Why do we need them? Prominent JavaScript UI frameworks   jQuery ...
Table of Contents (2) JS UI Library   Fundamentals   API   Widget factory   Customizable base widgets   Templates   ...
Table of Contents (3) Proper use  Which widget is suitable for what use  Interchangeable widgets  Nesting of widgets ...
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...
Why do we need them? Not all sites   are simple Not everything on a page is   simple content HTML (as a vocab) is almos...
Under the hood Two basic   approaches:   Use existing mark up and extend   Generate the entire mark up   And of course...
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, Wi...
Ext syntax   Sample code    Ext.Loader.setConfig({enabled: true});    Ext.Loader.setPath(Ext.ux, ../ux/);    Ext.require(...
Dojo Widgets Called   Dijit Quite flexible   and actively developed Widgets:   Grid, Accordion, Buttons, Upload, Toolb...
Dojo Widgets syntax   Sample code    <script type="text/javascript">    dojo.require("dijit.layout.AccordionContainer"); ...
YUI Created by Yahoo! Home grown and developed Widgets:  Accordion, Calendar, DataTable, Panel,   Scrollarea, Slider, ...
YUI syntax   Sample code (for YUI3)    <script>    var ac = new Y.AutoComplete({           inputNode: #ac-input,         ...
jQuery UI Started simple, now a mess (sort of) Much easier compared to Dojo and Ext Widgets   Accordion, Button, Dialo...
jQueryUI syntax   Sample code    <script>    $(function() {           $( "#accordion" ).accordion();    });    </script> ...
Kendo UI Build on top of jQuery:   Blazing fast templates   Simple skins Widgets:   Autocomplete, Calendar, ComboBox,...
KendoUI syntax   Sample code    <script>    $("#autocomplete").kendoAutoComplete(["Item1", "Item2"]);    </script>    <in...
Other More widgets More themes, better look Server bindings Examples, documentation Above all, they are a source if i...
UI Library fundamentals    The bricks and mortar
API Almost all           aspects of a widget should be reachable trough code   Text, attributes, class names, styles, ch...
Widget Factory Why is it important to have a widget factory:   It enables the creation of more widgets   No need to wai...
Customizable base widgets Know what default settings do Base widgets are good for out of the box cases   That may cover...
Templates Even more customization Templates can make a good widget great Templates can make a good widget suck  Be car...
Ajax Why?   Saves roundtrips to server   Saves full page reload   Generally faster Ajax is not a must in a widget, bu...
Animations You can consider them final touches   IMPO, almost NO widgets need animations    But still, it does look nic...
Proper useEmphasis on PROPER
Accordion Allows stacking multiple panels together, as well as compacting them on demand Could be used for nested menus,...
ComboBox ComboBox extends the native dropdown  Can have autocomplete  Can search in values  Can have templates  Can h...
Grid Use to display   data If you are using paging, make sure you are paging over descent data, to ensure responsiveness...
Menu In desktop UI a menu CAN contain commands   In web it’s usually meant for navigation Don’t confuse users with too ...
Pickers Use only the picker you need:   Reduces complexity of choice   All in one pickers are not always the best choic...
Toolbar Strictly   for commands Learn the different commands Try not to nest more than one level An icon usually 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   Lay...
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   PanelB...
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   H...
Mobile for front-ends (2) Standard support means:   Native Array iterators   Native Object creation   Native animation...
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 get...
jQuery Mobile First Level                                47
Resources Reading list
Ext http://sencha.com/  Learn: http://sencha.com/learn/extjs/?4x  Docs: http://sencha.com/learn/extjs/?4x  Examples: h...
Dojo http://dojotoolkit.org/   Docs: http://dojotoolkit.org/documentation/   API: http://dojotoolkit.org/api/ http://d...
YUI http://developer.yahoo.com/yui/   Version 2: http://developer.yahoo.com/yui/2/ http://yuilibrary.com/   Examples: ...
jQuery http://jquery.com   API: http://api.jquery.com   Source: https://github.com/jquery/jquery http://jqueryui.com  ...
KendoUI http://kendoui.com/  Web: http://demos.kendoui.com/web/overview/  DataViz: http://demos.kendoui.com/dataviz/ove...
JavaScript UI libraries    курсове и уроци по програмиране, уеб дизайн – безплатно     BG Coder - онлайн състезателна сист...
Homework Try to recreate Gmail using any UI library   Ext, jQueryUI, KendoUI have the most widgets You will   need   S...
Free Trainings @ Telerik Academy "Web Design with HTML 5, CSS      3 and    JavaScript" course @ Telerik Academy       h...
Upcoming SlideShare
Loading in …5
×

20. JavaScript UI libraries - Web Front-End

4,274 views

Published on

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

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
4,274
On SlideShare
0
From Embeds
0
Number of Embeds
63
Actions
Shares
0
Downloads
117
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

20. JavaScript UI libraries - Web Front-End

  1. 1. JavaScript UI libraries Candy timeIvan ZhekovFront-end Developerhttp://joneff.infoTelerik Software Academyacademy.telerik.com
  2. 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. 3. Table of Contents (2) JS UI Library Fundamentals  API  Widget factory  Customizable base widgets  Templates  AJAX  Animations  Themes 3
  4. 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. 5. Table of Contents (4) Frameworks for mobile  The browser landscape jQuery Mobile  Components  Examples  Tips 5
  6. 6. What is JS UI? Ask your granny.She doesn’t know neither!
  7. 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. 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. 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. 10. Prominent JS UI Libs Again, a brief, biased overview
  11. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. KendoUI syntax Sample code <script> $("#autocomplete").kendoAutoComplete(["Item1", "Item2"]); </script> <input id="autocomplete" /> 20
  21. 21. Other More widgets More themes, better look Server bindings Examples, documentation Above all, they are a source if inspiration 21
  22. 22. UI Library fundamentals The bricks and mortar
  23. 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. 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. 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. 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. 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. 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. 29. Proper useEmphasis on PROPER
  30. 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. 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. 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. 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. 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. 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. 36. Practice time Let’s do some UI
  37. 37. Ext ComboBox Tabs Grid Tree LayoutManager  Accordion  Border  hBox, vBox Chart 37
  38. 38. Dojo Widets Form:  Select (ComboBox)  Button Tree Menu, MenuBar, DropDownMenu, ToolBar Calendar Layout  TabContainer (Tabs)  AccordionContainer (Accordion) 38
  39. 39. YUI AutoComplete TabView (Tabs) DataTable (Grid) Calendar MenuNav ScrollView Slider Chart 39
  40. 40. jQuery UI AutoComplete Tabs Button DatePicker (Calendar) Dialog Accordion Progressbar Slider 40
  41. 41. Kendo UI AutoComplete, ComboBox, DropDownList Calendar, DatePicker, TimePicker Grid Menu TreeView PanelBar (Accordion) Tabs Splitter DataViz: Chart 41
  42. 42. Mobile for front-ends Like for web, but different
  43. 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. 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. 45. Mobile JS librariesBut we already have libraries?!?
  46. 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. 47. jQuery Mobile First Level 47
  48. 48. Resources Reading list
  49. 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. 50. Dojo http://dojotoolkit.org/  Docs: http://dojotoolkit.org/documentation/  API: http://dojotoolkit.org/api/ http://dojotoolkit.org/reference-guide/dijit/ 50
  51. 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. 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. 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. 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. 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. 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

×