ui components - js-il.com

Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |

Alex Choroshin Web/SharePoint

Developer E4D Solutions LTD

www.e4d.co.il www.choroshin.com

JavaScript UI Components

Israel JavaScript Conference

mailto:[email protected]

http://www.js-il.com/

http://www.e4d.co.il/

http://www.choroshin.com/


What’s all about?




HTML 5 )Changes The Rules of The Game(




UI Components




Today we will Show you demos that will make you say wow!




- Web examples

Click on the image for example



http://tympanus.net/Development/FlipboardPageLayout/


- Web examples




http://tympanus.net/Development/Calendario/


- Web examples




http://tympanus.net/Development/GammaGallery/


- Web examples




http://tympanus.net/Development/FullscreenImage3DEffect/


- Web examples




http://demos.devexpress.com/DXTREME/Visualization/#chart/03_rangeselectorsbackgroundviewimageonbackground


- Web examples




http://tympanus.net/Development/FullscreenImageBlurEffect/


- Web examples




http://tympanus.net/Development/ImageTransitions/


- Web examples




http://tympanus.net/Development/MergingImageBoxes/


- Web examples




http://tympanus.net/Development/SimpleDropDownEffects/


- Web examples




http://amsul.ca/pickadate.js/


- Web examples




http://demos.kendoui.com/dataviz/donut-charts/index.html


- Web examples




http://demos.devexpress.com/DXTREME/Visualization/#chart/02_piecustomappearancedoughnutwithselection


- Web examples




http://www.highcharts.com/demo/line-basic/gray


- Web examples




http://www.chartjs.org/


- Web examples




http://demos.kendoui.com/web/grid/index.html


- Web examples




http://www.datatables.net/


- Web examples




http://yuilibrary.com/yui/docs/datatable/datatable-recordtype.html


- Web examples




http://w2ui.com/web/demo/grid


- Web examples




http://tympanus.net/Development/3DBookShowcase/


- Mobile examples




http://demo.mobiscroll.com/calendar/calendarordate


- Mobile examples




http://demos.kendoui.com/mobile/overview/index.html#overview-cities


- Mobile examples




http://lab.cubiq.org/iscroll/examples/simple/


- Mobile examples




http://cubiq.org/dropbox/SwipeView/demo/gallery/


UI Components

What is the difference between:Plugin and a Widget?

Plugin : optional software additions that enhance and/or add functionality to a web browser (Adobe Flash Player, JQuery)

Widget : It's a small application with limited functionality that can be installed and executed within a web page by an end user (Calendar, Chart)




UI Components

Things to consider when choosing a Web UI Component




UI Components - Purchase or use “Open-source” ?

Purchase - Pros Support Documentation Stable

Purchase - Cons Flexibility

Purchase or use “Open-source” ?




‘Open-source’ - Pros

Flexibility Free

‘Open-source’ - Cons

Support Documentation Stable

UI Components - Purchase or use “Open-source” ?




UI Components - Community Ecosystem

Active Community Many different sources of guidance, best

practice, and technical information If we use an ‘open-source’ component ,

number of contributors

Community Ecosystem




UI Components

Cross browser compatibility RTL support (Hebrew) HTML5 CSS3 Responsive design




UI Components - Web Components

The Challenges – Build a Custom Web Component

Building large, single-page web apps with a smart component models isn’t easy today. Web Components help developer encapsulate they HTML, CSS and JavaScript so it doesn’t interfere with the rest of the page and the page doesn’t interfere with it.





Google Believes Web Components Are The Future Of Web Development

So what is this all about? Essentially, Web Components give developers an easier way to create web sites and recyclable widgets on these sites with the help of the HTML, CSS and JavaScript they already know.




Web Componenthttp://jsfiddle.net/choroshin/h3mez/

http://html5-demos.appspot.com/static/webcomponents/index.html#6



http://jsfiddle.net/choroshin/h3mez/




UI Components - Web ComponentsWith Shadow DOM, elements can get a new kind of node associated with them. This new kind of node is called a shadow root. An element that has a shadow root associated with it is called a shadow host. The content of a shadow host isn’t rendered; the content of the shadow root is rendered instead.





A number of Google engineers are also working on Project Polymer, which aims to write a web application framework that’s built upon the idea of Web Components and will allow developers to use the ideas behind Web Components on browsers that don’t even feature all of the necessary technologies yet.



http://www.polymer-project.org/faq.html



It’s worth noting that, for the time being, developers can’t rely on this to work in all browsers. Chrome Canary includes support for Web Components, but it’s hidden behind a number of flags



chrome://flags/


Polymer

http://jsfiddle.net/choroshin/KdG2S/






UI Components - Web Components Resources

http://techcrunch.com/2013/05/19/google-believes-web-components-are-the-future-of-web-development/


http://www.polymer-project.org/ http://www.html5rocks.com/en/tutorials/webcomponents/sha

dowdom/

http://www.youtube.com/watch?feature=player_embedded&v=0g0oOOT86NY

http://www.w3.org/TR/2013/WD-components-intro-20130606/









http://www.polymer-project.org/

http://www.polymer-project.org/

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/






http://www.w3.org/TR/2013/WD-components-intro-20130606/


UI Components – List of Web UI ComponentsURL Purchase/open-source Type

:// . .http demos kendoui com Purchase Ui widgets

:// . . /http demo mobiscroll com Purchase Mobile ui widgets

:// . . /http www highcharts com Purchase Charts

:// . /http cubiq org open-source Mobile ui widgets

:// . . /201http www nobodymuch com2/09/ - - -datatables jquery plugin sort- - .filter tables html

open-source DataGrid

:// . /http yuilibrary com open-source Ui widgets

:// . . /http www devexpress com Supp/ /#! = 5ort Demos platform html

Purchase Ui widgets

:// . . /http www chartjs org open-source Charts

:// 2 . / /http w ui com web open-source DataGrid

:// . / . /http amsul ca pickadate js open-source Date picker

:// . . /http www datatables net open-source DataGrid

:// . . / /1http www hotscripts com blog5- - - - -javascript data grids enhance ht

- /ml tables

open-source DataGrid collection



http://demos.kendoui.com/

http://demo.mobiscroll.com/

http://www.highcharts.com/

http://cubiq.org/

http://www.nobodymuch.com/2012/09/datatables-jquery-plugin-sort-filter-tables.html



http://yuilibrary.com/

http://www.devexpress.com/Support/Demos/#!platform=html5

http://www.devexpress.com/Support/Demos/#!platform=html5

http://www.chartjs.org/

http://w2ui.com/web/

http://amsul.ca/pickadate.js/

http://www.datatables.net/

http://www.hotscripts.com/blog/15-javascript-data-grids-enhance-html-tables/




UI Components – List of Web UI Components

URL Purchase/open-source Type

:// . . /http www jqwidgets com open-source Ui widgets

:// . /http tympanus net open-source Ui widgets\plugins



http://www.jqwidgets.com/

http://tympanus.net/


Summary Do not be afraid to try new Web

Components. Before developing a new Web

Component, try to find one. Sometimes a purchased Web Component

is not the best one for you, today we have a great professional ‘open-source’ Web Component.




www.js-il.com

18.6.13





Thankswww.choroshin.com

Alex Choroshin Web/SharePoint

Developer E4D Solutions LTD www.e4d.co.il www.choroshin.com




http://www.e4d.co.il/


ui components - js-il.com

Technology

web examplesclick

mobile examplesclick

web components

singlepage web apps

choosinga web ui component

shadow dom

calleda shadow root

page doesntinterfere