ui components

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/


Web UI Components




HTML 5 )Changes The Rules of The Game(




HTML 5 )Changes The Rules of The Game(Developers are starting to understand the REAL power of web.




Web 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://tympanus.net/Development/FullscreenImageBlurEffect/


- Web examples




http://www.zehfernandes.com/jquery.fullContent/#home


- Web examples




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


- Web examples




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


- Web examples




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


- Web examples




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


- Web examples




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


- 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://w2ui.com/web/demo/grid


- Web examples




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


- Web examples




http://twitter.github.io/bootstrap/


- Web examples




http://usablica.github.io/intro.js/


- Web examples




http://clu3.github.io/bootstro.js/


- Web examples




http://individual11.github.io/Scroll-To/


- Web examples




http://www.position-absolute.com/articles/jquery-engage-a-plugin-taking-a-stab-at-engaging-better-blog-readers/


- Web examples




http://tommoor.github.io/tinycon/


- Web examples




http://fabien-d.github.io/alertify.js/


- Web examples




http://codeseven.github.io/toastr/


- Web examples




http://themergency.com/footable-demo/demo-sorting.htm


- 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://swipejs.com/


- Mobile examples




http://maker.github.io/ratchet/


- Mobile examples




http://jpanelmenu.com/index.html


- Mobile examples




http://quojs.tapquo.com/


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, issues

Community Ecosystem




UI Components - Cross browser compatibility

It is our responsibility as developers to ensure that UI Components we’ve use are compatible for most of the commonly used browsers these days.

Cross browser compatibility




UI Components - Code Complexity

The UI Component API must be easy and fast to implement.

The harder the complexity the harder the maintenance and extension.

Code Complexity




UI Components - Things to consider

RTL support (Hebrew) HTML5 CSS3 - Support/Design/Fall-

back Responsive design Rich API High performance and Scalability File weight (minified CSS/JS)




Custom Web Component Challenges




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 jsdb io sort trending

open-source/Purchase collection of JavaScript libraries

:// . . / /http maker github io ratchet open-source Mobile ui widgets

:// . .http www humblesoftware com/

open-source Graph/Charts

:// . . /http www unheap com open-source/Purchase collection of JavaScript libraries

:// . / /https github com posabsolute- #jquery engage readme

open-source Engage



http://www.jqwidgets.com/

http://tympanus.net/

http://www.jsdb.io/?sort=trending

http://www.jsdb.io/?sort=trending

http://maker.github.io/ratchet/

http://www.humblesoftware.com/

http://www.humblesoftware.com/

http://www.unheap.com/

https://github.com/posabsolute/jquery-engage#readme

https://github.com/posabsolute/jquery-engage#readme


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.

When choosing an ‘open-source’ library pay attention to the license (MIT,GNU).




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

Technology

web examplesclick

mobile examplesclick

choosinga web ui component

purchase prospurchase