Your SlideShare is downloading. ×
0
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
20. JavaScript UI libraries - Web Front-End
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

20. JavaScript UI libraries - Web Front-End

3,579

Published on

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

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,579
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
108
Comments
1
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×