IoT with Vaadin Elements

50 %
50 %
Information about IoT with Vaadin Elements

Published on January 11, 2016

Author: treml

Source: slideshare.net

1. Vaadin Elements IoT with Jürgen Treml, Key Account Manager juergen@vaadin.com, @juergentreml

2. Server-side Java Rich Set of UI Components

3. Server-side Java Rich Set of UI Components IDE Support Mature language Extensive tooling Third-party libraries

4. Server-side Java Rich Set of UI Components IDE Support Mature language Extensive tooling Third-party libraries Component based UI Enterprise-grade quality & performance Rich selection

5. All problems solved for Java developers!

6. Client-side only?

7. Client-side only? High-latency network Offline capability Millions of concurrent users Team knowledge

8. Not long ago: You’re screwed

9. Not long ago: You’re screwed Conflicting selectors Lack of tooling Language features

10. Not long ago: You’re screwed div > div > div Conflicting selectors Lack of tooling Language features

11. Not long ago: You’re screwed div > div > div Conflicting selectors Lack of tooling Language features

12. Not long ago: You’re screwed div > div > div Conflicting selectors Lack of tooling Language features

13. Not long ago: You’re screwed div > div > div Conflicting selectors Lack of tooling Language features

14. Not long ago: You’re screwed 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’re screwed 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’ll be just fine

17. Lack of tooling Language features Selector conflicts Lack of semantics Things have changed: You’ll be just fine

18. Lack of tooling Language features Selector conflicts Lack of semantics :-):-):-):-) Things have changed: You’ll be just fine

19. Things have changed: You’ll be just fine

20. Things have changed: You’ll be just fine Gulp, Bower, IDE Support ECMAScript 6

21. Things have changed: You’ll be just fine Gulp, Bower, IDE Support ECMAScript 6 Web Components

22. Web Components Component-oriented UI for the Web

23. Benefits
 Composition Separation Reusability

24. How? Custom Elements Shadow DOM Templates HTML Imports

25. How? Custom Elements <my-component> </my-component>

26. How? Custom Elements <my-component> </my-component>

27. How? Shadow DOM <audio></audio>

28. How? Shadow DOM <audio></audio>

29. How? Shadow DOM <audio></audio>

30. How? Shadow DOM <audio></audio>

31. How? Shadow DOM <audio></audio>

32. How? Templates <template id="tmp"> <style> ... </style> <div> <h1>Web Components</h1> <img src="logo.svg"> </div> </template>

33. How? Templates var tmp = document.querySelector(‘#tmp'); var clone = document.importNode(tmp.content, true); var host = document.querySelector(‘#host'); host.appendChild(clone);

34. How? Imports my-component.html <link rel="stylesheet" href="css/style.css"> <script src="js/script.js">

35. How? Imports index.html <link rel="import" href="my-component.html"> my-component.html <link rel="stylesheet" href="css/style.css"> <script src="js/script.js">

36. Why?

37. Why?

38. Why?

39. Why?

40. Why?

41. Browser Support When?

42. “Things have changed”

43. “Things have changed”are changing

44. Custom Element HTML Template Shadow DOM HTML Import CHROME OPERA FIREFOX SAFARI IE Native Browser Support

45. Browser Support with Polyfills

46. Polyfill Framework Set of ComponentsPolymer

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++; } });

49. What does Vaadin have to do with Web Components?

50. We add one more element…

51. … in fact many Elements We add one more element… Vaadin

52. Server-side Java Rich Set of UI Components IDE Support Mature language Extensive tooling Third-party libraries Component based UI Enterprise-grade quality & performance Rich selection

53. Server-side Java Rich Set of UI Components 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 UI Components IDE Support Mature language Extensive tooling Third-party libraries Component based UI Enterprise-grade quality & performance Rich selection

55. Let me show you…

56. github.com/jtreml/home-command

57. vaadin.com/elements juergen@vaadin.com @juergentreml

58. vaadin.com/elements juergen@vaadin.com @juergentreml ?

Add a comment

Related pages

IoT with Vaadin and Bluemix - Blog - vaadin.com

IoT with Vaadin and Bluemix . ... There are a small Vaadin IoT dashboard sample, ... Elements. Getting Started. Videos. Demos. Docs.
Read more

Minimized Vaadin servers for IoT solutions - Blog - vaadin.com

Minimized Vaadin servers for IoT solutions . ... By Marcus Hellberg, On 1/26/16 4:30 AM production web components polymer bosonic x-tag vaadin elements.
Read more

Vaadin Christmas Meetup in Düsseldorf - codecentric Blog ...

Unter dem Titel „Vaadin Christmas Meetup in Düsseldorf“ fand das erste gemeinsame Meetup von Vaadin und codecentric statt. In den Düsseldorfer ...
Read more

The Web Platform Podcast : 71: Vaadin Elements

The Web Platform Podcast is a developer discussion that dives deep into ... IoT functional -programming pair ... Vaadin Elements are helping to push new ...
Read more

Getting Started with Vaadin - DZone - Refcardz

Getting Started with Vaadin Modern ... the HTML element of the layout will contain an ... The Binary Transfer Protocol for Enterprise Applications and IoT.
Read more

Vaadin Berlin Office: Open-Doors & House-Warming - Vaadin ...

Meet the Vaadin team and ask us questions! We'll have the local Vaa. Welcome to our Berlin office! ... • 18:00 Vaadin Elements and IoT (Jürgen Treml)
Read more

Vaadin Christmas Meetup in Düsseldorf - Codecentric ...

Dezember treffen sich Vaadin-Fans in Düsseldorf, ... IoT mit Vaadin Elements. 20:00 Break. 20:15 Weitere Präsentationen, spontane Quick-Talks und Diskussion.
Read more

Mastering Portal UI - DZone - Refcardz

Mastering Portal UI Development With Vaadin ... separating the graphical elements from the functionality. All Vaadin ... and IoT. Hosted by . Practical ...
Read more

Vaadin Berlin Office: Open Doors & House Warming | heise ...

Vaadin Berlin Office: Open Doors & House Warming Termin 10.12.2015, von 16:30 bis 00:00 Uhr ... • 18:00 Vaadin Elements and IoT (Jürgen Treml)
Read more