Successfully reported this slideshow.
Your SlideShare is downloading. ×

Web components with java by Haijian Wang

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 49 Ad

Web components with java by Haijian Wang

Download to read offline

Web components with java
By Haijian Wang
#GWTcon2017 Firenze, September 28-29th 2017

Web components with java
By Haijian Wang
#GWTcon2017 Firenze, September 28-29th 2017

Advertisement
Advertisement

More Related Content

Similar to Web components with java by Haijian Wang (20)

Advertisement
Advertisement

Web components with java by Haijian Wang

  1. 1. H A I J I A N W A N G W E B C O M P O N E N T S W I T H J A V A @haijian_wang
  2. 2. Java Web
  3. 3. E l e m e n t s C o m m u n i c a t i o n
  4. 4. Vaadin Framework .1 .2 3 4 5 6 7 8 2001 2002 2002 2007 2008 2009 2013 2017
  5. 5. Vaadin Framework .1 .2 3 4 5 6 7 8 1 Vaadin Core Elements
  6. 6. Web Components in Practice 1/2 A new TAG for your browser: ‘<my-ui- component>’ Based on standard specifications (no frameworks!)
  7. 7. Goodbye to browser plugins (WC + HTML5) Isolated from other elements in DOM Easy to share (npm, yarn) Easy to integrate Web Components in Practice 2/2
  8. 8. <vaadin-date-picker> </vaadin-date-picker>
  9. 9. Web Components technically F O U R H T M L 5 S P E C I F I C AT I O N S 1. Custom Elements 2. Templates 3. HTML imports (es6 modules) 4. Shadow DOM
  10. 10. Custom Elements <my-new-element></my-new-element>
  11. 11. Templates <template id=“my-template"> 
 <style> 
 ...
 </style> 
 <div> 
 <h1>Web Components</h1> 
 <img src="/img/logo.svg"> 
 </div> 
 </template>
 
 

  12. 12. HTML Imports <link rel="import" href="my-el.html">

  13. 13. S H A D O W D O M
  14. 14. <video src=“video-src.mp4” controls></video>

  15. 15. <video src=“video-src.mp4” controls></video>

  16. 16. • Encapsulation • Reusability Benefits of using Web Components
  17. 17. Native browser support
  18. 18. G E T S TA R T E D W I T H W E B C O M P O N E N T S
  19. 19. I ns ta ll a co m pon ent
  20. 20. Us e i n H TM L
  21. 21. W E B C O M P O N E N T S W I T H J A V A ( V A A D I N ) ?
  22. 22. Ser ver- s id e Java Comp one nt @Tag("paper-slider")
 public interface PaperSlider extends Element{
 static PaperSlider create() {
 return Elements.create(PaperSlider.class);
 }
 
 void setValue(double value);
 
 @UpdatedBy(“value-change")
 double getValue();
 
 }
  23. 23. Clien t- s i de I mple me ntation ( i n t e n t i o n a l l y l e f t b l a n k )
  24. 24. Using a s er ver- s id e co mp one nt PaperSlider paperSlider = PaperSlider.create(); paperSlider.setValue(50); paperSlider.addEventListener("change", arguments->{ Notification.show( "Value changed to"+paperSlider.getValue()); });
  25. 25. Demo
  26. 26. H O W T O C R E AT E YO U R O W N W E B C O M P O N E N T ?
  27. 27. Polymer J A V A S C R I P T L I B R A R Y F O R W E B C O M P O N E N T S • Vaadin Core Elements are built with Polymer 2.0 • Mentally for Vaadin Developer Polymer is new GWT • Developed by Google • Helps building re-usable Web Components • Utilises new emerging Web Component standards • Polyfills missing features for browsers
  28. 28. Polyfills M A K E S TA N D A R D S W O R K T O D A Y • Implementations making older browsers support new standards • Will eventually be out powered by Browser standards
  29. 29. ES6-Class definition class Shape { constructor (id, x, y) { this.id = id this.move(x, y) } move (x, y) { this.x = x this.y = y } }
  30. 30. ES6-Class Inheritance class Rectangle extends Shape { constructor (id, x, y, width, height) { super(id, x, y) this.width = width this.height = height } } class Circle extends Shape { constructor (id, x, y, radius) { super(id, x, y) this.radius = radius } }
  31. 31. ES6-Static Members class Rectangle extends Shape { static defaultRectangle () { return new Rectangle("default", 0, 0, 100, 100) } } class Circle extends Shape { static defaultCircle () { return new Circle("default", 0, 0, 100) } } var defRectangle = Rectangle.defaultRectangle(); var defCircle = Circle.defaultCircle();
  32. 32. ES6-Arrow Functions odds = evens.map(v => v + 1) pairs = evens.map(v => ({ even: v, odd: v + 1 })) nums = evens.map((v, i) => v + i) nums.forEach(v => { if (v % 5 === 0) fives.push(v) })
  33. 33. ES6-Method Properties obj = { foo (a, b) { … }, bar (x, y) { … } }
  34. 34. Demo: How to create a web component with Polymer and Integrate with Vaadin
  35. 35. Vaadin Framework .1 .2 3 4 5 6 7 8 1 Vaadin Core Elements
  36. 36. Vaadin Framework .1 .2 3 4 5 6 7 8 1 Vaadin Core Elements 2 x Unified platform
  37. 37. https://bakery-flow.demo.vaadin.com/
  38. 38. Summary • My talk has nothing to do with GWT :( • Web components is the future of web • Catch the train before it’s too late • Vaadin provides pure client side web components as Vaadin Elements • Vaadin provides Java integration with Web components
  39. 39. T H A N K YO U ! @haijian_wang https://vaadin.com/blog/-/blogs/framework-roadmap-connecting-the-dots https://vaadin.com/directory#!addon/elements-add-on

×