Presentation is loading. Please wait.

Presentation is loading. Please wait.

Candy time Ivan Zhekov Telerik Corporation www.telerik.com Front-end Developer.

Similar presentations


Presentation on theme: "Candy time Ivan Zhekov Telerik Corporation www.telerik.com Front-end Developer."— Presentation transcript:

1 Candy time Ivan Zhekov Telerik Corporation Front-end Developer

2  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  JS UI Library Fundamentals  API  Widget factory  Customizable base widgets  Templates  AJAX  Animations  Themes

4  Proper use  Which widget is suitable for what use  Interchangeable widgets  Nesting of widgets  Don'ts  What can we do with them  Examples

5  Frameworks for mobile  The browser landscape  jQuery Mobile  Components  Examples  Tips

6 Ask your granny. She doesn’t know neither!

7  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  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  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 Again, a brief, biased overview

11  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  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();});

13  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  Sample code dojo.require("dijit.layout.AccordionContainer"); Hi!

Another one
...
Another one
...
"> Hi!
Another one ...">  Sample code dojo.require( Hi! Another one ..." title=" Sample code dojo.require("dijit.layout.AccordionContainer"); Hi! Another one ...">

15  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  Sample code (for YUI3)

17  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  Sample code First header First header First content First content Second header Second header Second content Second content

19  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  Sample code

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

22 The bricks and mortar

23  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  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  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  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  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  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 Emphasis on PROPER

30  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 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  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  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  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  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 Let’s do some UI

37  ComboBox  Tabs  Grid  Tree  LayoutManager  Accordion  Border  hBox, vBox  Chart

38  Form:  Select (ComboBox)  Button  Tree  Menu, MenuBar, DropDownMenu, ToolBar  Calendar  Layout  TabContainer (Tabs)  AccordionContainer (Accordion)

39  AutoComplete  TabView (Tabs)  DataTable (Grid)  Calendar  MenuNav  ScrollView  Slider  Chart

40  AutoComplete  Tabs  Button  DatePicker (Calendar)  Dialog  Accordion  Progressbar  Slider

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

42 Like for web, but different

43  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  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 But we already have libraries?!?

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

48 Reading list

49   Learn:  Docs:  Examples:

50   Docs:  API: 

51   Version 2:   Examples:  API:  Theater: 

52   API:  Source: https://github.com/jquery/jquery https://github.com/jquery/jquery   Demos:  Themes:   Demos:  Themes:

53   Web:  DataViz:  Mobile:  Themes:

54 Questions?

55

56  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


Download ppt "Candy time Ivan Zhekov Telerik Corporation www.telerik.com Front-end Developer."

Similar presentations


Ads by Google