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.

of

Web components with java by Haijian Wang Slide 1 Web components with java by Haijian Wang Slide 2 Web components with java by Haijian Wang Slide 3 Web components with java by Haijian Wang Slide 4 Web components with java by Haijian Wang Slide 5 Web components with java by Haijian Wang Slide 6 Web components with java by Haijian Wang Slide 7 Web components with java by Haijian Wang Slide 8 Web components with java by Haijian Wang Slide 9 Web components with java by Haijian Wang Slide 10 Web components with java by Haijian Wang Slide 11 Web components with java by Haijian Wang Slide 12 Web components with java by Haijian Wang Slide 13 Web components with java by Haijian Wang Slide 14 Web components with java by Haijian Wang Slide 15 Web components with java by Haijian Wang Slide 16 Web components with java by Haijian Wang Slide 17 Web components with java by Haijian Wang Slide 18 Web components with java by Haijian Wang Slide 19 Web components with java by Haijian Wang Slide 20 Web components with java by Haijian Wang Slide 21 Web components with java by Haijian Wang Slide 22 Web components with java by Haijian Wang Slide 23 Web components with java by Haijian Wang Slide 24 Web components with java by Haijian Wang Slide 25 Web components with java by Haijian Wang Slide 26 Web components with java by Haijian Wang Slide 27 Web components with java by Haijian Wang Slide 28 Web components with java by Haijian Wang Slide 29 Web components with java by Haijian Wang Slide 30 Web components with java by Haijian Wang Slide 31 Web components with java by Haijian Wang Slide 32 Web components with java by Haijian Wang Slide 33 Web components with java by Haijian Wang Slide 34 Web components with java by Haijian Wang Slide 35 Web components with java by Haijian Wang Slide 36 Web components with java by Haijian Wang Slide 37 Web components with java by Haijian Wang Slide 38 Web components with java by Haijian Wang Slide 39 Web components with java by Haijian Wang Slide 40 Web components with java by Haijian Wang Slide 41 Web components with java by Haijian Wang Slide 42 Web components with java by Haijian Wang Slide 43 Web components with java by Haijian Wang Slide 44 Web components with java by Haijian Wang Slide 45 Web components with java by Haijian Wang Slide 46 Web components with java by Haijian Wang Slide 47 Web components with java by Haijian Wang Slide 48 Web components with java by Haijian Wang Slide 49
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

Web components with java by Haijian Wang

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • syuichitsuji

    Feb. 7, 2018

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

Views

Total views

1,520

On Slideshare

0

From embeds

0

Number of embeds

2

Actions

Downloads

19

Shares

0

Comments

0

Likes

1

×