Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web components with java by Haijian Wang

876 views

Published on

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

Published in: Technology
  • Be the first to comment

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

×