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
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
HTML 5 )Changes The Rules of The Game(
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
HTML 5 )Changes The Rules of The Game(
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Today we will Show you demos that will make you say wow!
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Web examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Mobile examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Mobile examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Mobile examples
Click on the image for example
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
- Mobile examples
Click on the image for example
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)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
UI Components
Things to consider when choosing a Web UI Component
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” ?
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” ?
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
Community Ecosystem
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
UI Components
Cross browser compatibility RTL support (Hebrew) HTML5 CSS3 Responsive design
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.
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.
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
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
UI Components - Web Components
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.
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.
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
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Polymer
http://jsfiddle.net/choroshin/KdG2S/
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/
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
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
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.
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
www.js-il.com
18.6.13
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