Ui components
-
Upload
alex-choroshin -
Category
Technology
-
view
997 -
download
0
Transcript of Ui components
![Page 1: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/1.jpg)
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
![Page 3: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/3.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
HTML 5 )Changes The Rules of The Game(
![Page 4: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/4.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
HTML 5 )Changes The Rules of The Game(
![Page 5: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/5.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
HTML 5 )Changes The Rules of The Game(Developers are starting to understand the REAL power of web.
![Page 7: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/7.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Today we will Show you demos that will make you say wow!
![Page 8: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/8.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 9: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/9.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 10: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/10.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 11: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/11.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 12: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/12.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 13: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/13.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 14: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/14.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 15: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/15.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 16: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/16.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 17: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/17.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 18: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/18.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 19: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/19.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 20: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/20.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 21: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/21.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 22: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/22.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 23: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/23.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 24: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/24.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 25: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/25.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 26: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/26.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 27: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/27.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 28: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/28.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 29: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/29.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 30: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/30.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 31: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/31.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 32: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/32.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 33: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/33.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
![Page 34: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/34.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Mobile examples
Click on the image for example
![Page 35: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/35.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Mobile examples
Click on the image for example
![Page 36: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/36.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Mobile examples
Click on the image for example
![Page 37: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/37.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Mobile examples
Click on the image for example
![Page 38: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/38.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Mobile examples
Click on the image for example
![Page 39: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/39.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Mobile examples
Click on the image for example
![Page 40: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/40.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Mobile examples
Click on the image for example
![Page 41: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/41.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.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)
![Page 42: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/42.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
UI Components
Things to consider when choosing a Web UI Component
![Page 43: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/43.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
UI Components - Purchase or use “Open-source” ?
Purchase - Pros Support Documentation Stable
Purchase - Cons Flexibility
Purchase or use “Open-source” ?
![Page 44: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/44.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
‘Open-source’ - Pros
Flexibility Free
‘Open-source’ - Cons
Support Documentation Stable
UI Components - Purchase or use “Open-source” ?
![Page 45: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/45.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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
![Page 46: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/46.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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
![Page 47: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/47.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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
![Page 48: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/48.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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)
![Page 49: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/49.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Custom Web Component Challenges
![Page 50: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/50.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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.
![Page 51: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/51.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
UI Components - Web Components
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.
![Page 52: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/52.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Web Componenthttp://jsfiddle.net/choroshin/h3mez/
http://html5-demos.appspot.com/static/webcomponents/index.html#6
![Page 53: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/53.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
UI Components - Web Components
![Page 54: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/54.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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.
![Page 55: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/55.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
UI Components - Web Components
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.
![Page 56: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/56.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
UI Components - Web Components
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
![Page 57: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/57.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Polymer
http://jsfiddle.net/choroshin/KdG2S/
![Page 58: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/58.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
UI Components - Web Components Resources
http://techcrunch.com/2013/05/19/google-believes-web-components-are-the-future-of-web-development/
http://html5-demos.appspot.com/static/webcomponents/index.html#1
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/
![Page 59: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/59.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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
![Page 60: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/60.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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
![Page 61: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/61.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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).
![Page 62: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/62.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
www.js-il.com
18.6.13
![Page 63: Ui components](https://reader034.fdocuments.us/reader034/viewer/2022052505/555838b4d8b42ac6078b4a0d/html5/thumbnails/63.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Thankswww.choroshin.com
Alex Choroshin Web/SharePoint
Developer E4D Solutions LTD www.e4d.co.il www.choroshin.com