Downloaded 11 times
Uploaded byJürgen Treml
IoT with Vaadin Elements
The document discusses Vaadin's server-side Java UI components and their benefits, emphasizing extensive tooling, performance, and support for modern web development with components like web components and custom elements. It highlights improvements in technology, tackling issues such as conflicting selectors and tooling, which previously hindered developers. Ultimately, it illustrates how Vaadin integrates with these advancements to enhance the development experience.
More Related Content
IoT with Vaadin Elements
- 1. Vaadin Elements IoT with JürgenTreml, Key Account Manager juergen@vaadin.com, @juergentreml
- 2. Server-side Java Rich Set of UIComponents
- 3. Server-side Java Rich Set of UIComponents IDE Support Mature language Extensive tooling Third-party libraries
- 4. Server-side Java Rich Set of UIComponents IDE Support Mature language Extensive tooling Third-party libraries Component based UI Enterprise-grade quality & performance Rich selection
- 5. All problems solved forJava developers!
- 6.
- 7. Client-side only? High-latency network Offline capability Millionsof concurrent users Team knowledge
- 8. Not long ago: You’rescrewed
- 9. Not long ago: You’rescrewed Conflicting selectors Lack of tooling Language features
- 10. Not long ago: You’rescrewed div > div > div Conflicting selectors Lack of tooling Language features
- 11. Not long ago: You’rescrewed div > div > div Conflicting selectors Lack of tooling Language features
- 12. Not long ago: You’rescrewed div > div > div Conflicting selectors Lack of tooling Language features
- 13. Not long ago: You’rescrewed div > div > div Conflicting selectors Lack of tooling Language features
- 14. Not long ago: You’rescrewed div > div > div Conflicting selectors Lack of tooling Language features Libraries to the rescue? Selectors Templates Language features Importing & Loading Style Extensions
- 15. Not long ago: You’rescrewed div > div > div Conflicting selectors Lack of tooling Language features Libraries to the rescue? Selectors Templates Language features Importing & Loading Style Extensions
- 16. Things have changed: You’llbe just fine
- 17. Lack of tooling Languagefeatures Selector conflicts Lack of semantics Things have changed: You’ll be just fine
- 18. Lack of tooling Languagefeatures Selector conflicts Lack of semantics :-):-):-):-) Things have changed: You’ll be just fine
- 19. Things have changed: You’llbe just fine
- 20. Things have changed: You’llbe just fine Gulp, Bower, IDE Support ECMAScript 6
- 21. Things have changed: You’llbe just fine Gulp, Bower, IDE Support ECMAScript 6 Web Components
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. How? Templates <template id="tmp"> <style> ... </style> <div> <h1>Web Components</h1> <imgsrc="logo.svg"> </div> </template>
- 33. How? Templates var tmp = document.querySelector(‘#tmp'); varclone = document.importNode(tmp.content, true); var host = document.querySelector(‘#host'); host.appendChild(clone);
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43. “Things have changed”arechanging
- 44. Custom Element HTML Template ShadowDOM HTML Import CHROME OPERA FIREFOX SAFARI IE Native Browser Support
- 45. Browser Support withPolyfills
- 46.
- 47. <dom-module id="my-counter"> <template> <style> /*...*/</style> <div id="label"><content></content></div> Value: <span id="counterVal">{{counter}}</span><br> <button on-tap="{{increment}}">Increment</button> </template> <script> … </script> </dom-module>
- 48. Polymer({ is: 'my-counter', properties: { counter:{ type: Integer, value: 0, // Default value } counterChanged: function() { this.$.counterVal.classList.add('highlight'); }, increment: function() { this.counter++; } });
- 50. What does Vaadin haveto do with Web Components?
- 51. We add onemore element…
- 52. … in factmany Elements We add one more element… Vaadin
- 53. Server-side Java Rich Set of UIComponents IDE Support Mature language Extensive tooling Third-party libraries Component based UI Enterprise-grade quality & performance Rich selection
- 54. Server-side Java Rich Set of UIComponents IDE Support Mature language Extensive tooling Third-party libraries Component based UI Enterprise-grade quality & performance Rich selection
- 55. Server-side Java Rich Set of UIComponents IDE Support Mature language Extensive tooling Third-party libraries Component based UI Enterprise-grade quality & performance Rich selection
- 56. Let me showyou…
- 57.
- 58.
- 59.