Vaadin DevDay 2017 - Web Components
2 likes726 views
The document discusses Vaadin, a technology that empowers developers to build web apps for business purposes. Vaadin prioritizes developer productivity by simplifying the developer experience and saving developers' time so they can focus on building great user interfaces. The founder and CEO hopes that users are as excited about living and breathing the Vaadin brand, which aims to fight for simplicity for both users and developers.
![> var foo = [0];
> foo == !foo;](https://image.slidesharecdn.com/vaadin-devday-webcomponents-170516090239/85/Vaadin-DevDay-2017-Web-Components-12-320.jpg)
![> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/vaadin-devday-webcomponents-170516090239/85/Vaadin-DevDay-2017-Web-Components-13-320.jpg)
![> [] + [];
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/vaadin-devday-webcomponents-170516090239/85/Vaadin-DevDay-2017-Web-Components-14-320.jpg)
![> [] + [];
>
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/vaadin-devday-webcomponents-170516090239/85/Vaadin-DevDay-2017-Web-Components-15-320.jpg)
![> [] + [];
>
> [] + {};
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/vaadin-devday-webcomponents-170516090239/85/Vaadin-DevDay-2017-Web-Components-16-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/vaadin-devday-webcomponents-170516090239/85/Vaadin-DevDay-2017-Web-Components-17-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/vaadin-devday-webcomponents-170516090239/85/Vaadin-DevDay-2017-Web-Components-18-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/vaadin-devday-webcomponents-170516090239/85/Vaadin-DevDay-2017-Web-Components-19-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/vaadin-devday-webcomponents-170516090239/85/Vaadin-DevDay-2017-Web-Components-20-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/vaadin-devday-webcomponents-170516090239/85/Vaadin-DevDay-2017-Web-Components-21-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/vaadin-devday-webcomponents-170516090239/85/Vaadin-DevDay-2017-Web-Components-22-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/vaadin-devday-webcomponents-170516090239/85/Vaadin-DevDay-2017-Web-Components-23-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/vaadin-devday-webcomponents-170516090239/85/Vaadin-DevDay-2017-Web-Components-24-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> number
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/vaadin-devday-webcomponents-170516090239/85/Vaadin-DevDay-2017-Web-Components-25-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> number
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/vaadin-devday-webcomponents-170516090239/85/Vaadin-DevDay-2017-Web-Components-26-320.jpg)
Vaadin DevDay 2017 - Web Components
- 1. 5 S T O R Y A N D P H I L O S O P H Y Software is eating the world and what most of us see of it is the user interface. The user interface has become the key component of how the users experience the business behind it. Competition is lost or won due to user experience. Simplicity is king and the users get frustrated by anything ugly, slow or not working on the device they happen to use at the time. We at Vaadin fight for simplicity and invite everyone to join this fight. Together we want to build a user interface that puts a smile on the user’s face. Vaadin is the technology that empowers developers to build the best web-apps for business purposes. Our priority over everything else is developer productivity because we believe that by simplifying the developer experience and saving the developer’s time, they are best able to focus on building great user interfaces. Our brand is what we want everyone to think about us. When everyone - both us and the people around us - have a consistent understanding of what Vaadin is and what we stand for, it enables that image to spread and amplify. This book defines what we want that image to be. It defines what the Vaadin brand is. I hope that You are as excited and proud of living and breathing the Vaadin brand as I am. You are the one who is shaping what everyone thinks about Vaadin - using this brand as a tool and a guideline every day. Let’s fight for simplicity for both the users and the developers! Joonas Lehtinen Founder & CEO Vaadin I N T R O D U C T I O N @peter_lehto W E B C O M P O N E N T S
- 3. Session’s content • The roots, where are we coming from?
- 4. Session’s content • The roots, where are we coming from? • What constitutes a Web Component?
- 5. Session’s content • The roots, where are we coming from? • What constitutes a Web Component? • Progressive Web Apps (PWA), Vaadin, Future?
- 6. Session’s content • The roots, where are we coming from? • What constitutes a Web Component? • Progressive Web Apps (PWA), Vaadin, Future? • Using Web Components with Vaadin today.
- 7. Session’s content • The roots, where are we coming from? • What constitutes a Web Component? • Progressive Web Apps (PWA), Vaadin, Future? • Using Web Components with Vaadin today.
- 9. Vaadin Framework .1 .2 3 4 5 6 7
- 10. Vaadin Framework .1 .2 3 4 5 6 7 2001 2002 2002 2007 2007 2009 2013
- 12. > var foo = [0]; > foo == !foo;
- 13. > var foo = [0]; > foo == !foo; > true
- 14. > [] + []; > var foo = [0]; > foo == !foo; > true
- 15. > [] + []; > > var foo = [0]; > foo == !foo; > true
- 16. > [] + []; > > [] + {}; > var foo = [0]; > foo == !foo; > true
- 17. > [] + []; > > [] + {}; > [object Object] > var foo = [0]; > foo == !foo; > true
- 18. > [] + []; > > [] + {}; > [object Object] > {} + []; > var foo = [0]; > foo == !foo; > true
- 19. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > var foo = [0]; > foo == !foo; > true
- 20. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {};> var foo = [0]; > foo == !foo; > true
- 21. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > var foo = [0]; > foo == !foo; > true
- 22. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > var foo = [0]; > foo == !foo; > true
- 23. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > var foo = [0]; > foo == !foo; > true
- 24. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > var foo = [0]; > foo == !foo; > true
- 25. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > number > var foo = [0]; > foo == !foo; > true
- 26. > [] + []; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > number > var foo = [0]; > foo == !foo; > true
- 28. A History of Stability OVER 15+ YEARS OF SHIELDING YOU FROM CONSTANT CHANGE < Millstone 3.0 (2002) IT Mill Toolkit 5 (2009) Vaadin 7.6.0 (2016) >
- 29. Vaadin Framework .1 .2 3 4 5 6 7 2001 2002 2002 2007 2007 2009 2013
- 30. Vaadin Framework .1 .2 3 4 5 6 7 8 2001 2002 2002 2007 2007 2009 2013 2017
- 31. Framework 8 Vaadin Elements • Web Components A new, major standard to create components for the Web “Custom tags for HTML” • Vaadin Elements High-quality UI components for users of client-side frameworks such as Angular, ionic … • A new generation of UI components to be used also with future versions of the Vaadin server-side framework Recent Changes
- 32. Framework 8 Vaadin Elements • Web Components A new, major standard to create components for the Web “Custom tags for HTML” • Vaadin Elements High-quality UI components for users of client-side frameworks such as Angular, ionic … • A new generation of UI components to be used also with future versions of the Vaadin server-side framework Recent Changes • Java 8 • New data binding • Focus on new browsers • HTML imports (Web components) • Improved performance
- 33. Vaadin Framework .1 .2 3 4 5 6 7 8 2001 2002 2002 2005 2007 2009 2013 2017 GWTAJAXHTML
- 34. Backend Server
- 39. GWT
- 40. Java -> JavaScript - Optimizing compiler GWT
- 41. Browser specific compilation - No browser differences GWT
- 42. Pure Java - Web apps without JavaScript GWT
- 45. Vaadin Framework .1 .2 3 4 5 6 7 8 2001 2002 2002 2005 2007 2009 2013 2017 Web ComponentsGWTAJAXHTML
- 46. Framework 8 Vaadin Elements • Web Components A new, major standard to create components for the Web “Custom tags for HTML” • Vaadin Elements High-quality UI components for users of client-side frameworks such as Angular, ionic … • A new generation of UI components to be used also with future versions of the Vaadin server-side framework Web Components .2
- 47. Framework 8 Vaadin Elements • Web Components A new, major standard to create components for the Web “Custom tags for HTML” • Vaadin Elements High-quality UI components for users of client-side frameworks such as Angular, ionic … • A new generation of UI components to be used also with future versions of the Vaadin server-side framework Web Components • Toolchain integration (Bower, npm) • Integration with Vaadin Elements .2
- 48. Vaadin Framework .1 .2 3 4 5 6 7 8 Web ComponentsGWTAJAXHTML
- 49. Vaadin Framework .1 .2 3 4 5 6 7 8 Vaadin Core Elements Web ComponentsGWTAJAXHTML
- 50. Vaadin Core Elements Vaadin Framework 4 5 6 7 8
- 51. Vaadin Core Elements Vaadin Framework 4 5 6 7 8 2 “9”
- 52. Session’s content • The roots, where are we coming from? • What constitutes a Web Component? • Progressive Web Apps (PWA), Vaadin, Future? • Using Web Components with Vaadin today.
- 53. Web Components? Vaadin Elements • Web Components A new, major standard to create components for the Web “Custom tags for HTML” • Vaadin Elements High-quality UI components for users of client-side frameworks such as Angular, ionic … • A new generation of UI components to be used also with future versions of the Vaadin server-side framework
- 54. Web Components? Vaadin Elements • Web Components A new, major standard to create components for the Web “Custom tags for HTML” • Vaadin Elements High-quality UI components for users of client-side frameworks such as Angular, ionic … • A new generation of UI components to be used also with future versions of the Vaadin server-side framework • HTML Templates
- 55. Web Components? Vaadin Elements • Web Components A new, major standard to create components for the Web “Custom tags for HTML” • Vaadin Elements High-quality UI components for users of client-side frameworks such as Angular, ionic … • A new generation of UI components to be used also with future versions of the Vaadin server-side framework • HTML Templates • Custom Elements
- 56. Web Components? Vaadin Elements • Web Components A new, major standard to create components for the Web “Custom tags for HTML” • Vaadin Elements High-quality UI components for users of client-side frameworks such as Angular, ionic … • A new generation of UI components to be used also with future versions of the Vaadin server-side framework • HTML Templates • Custom Elements • Shadow DOM
- 57. Web Components? Vaadin Elements • Web Components A new, major standard to create components for the Web “Custom tags for HTML” • Vaadin Elements High-quality UI components for users of client-side frameworks such as Angular, ionic … • A new generation of UI components to be used also with future versions of the Vaadin server-side framework • HTML Templates • Custom Elements • Shadow DOM • HTML Imports
- 58. Templates <template id=“my-template"> <style> ... </style> <div> <h1>Web Components</h1> <img src="/img/logo.svg"> </div> </template>
- 60. S H A D O W D O M
- 62. HTML Imports <link rel="import" href="my-el.html">
- 63. • Encapsulation • Reusability Benefits of using Web Components
- 64. Web Components in Practice 1/2 • A new TAG for your browser ‘<my- ui-component>’ • Based on standard specifications (no frameworks!)
- 65. Web Components in Practice 2/2 Advantages: 1. Goodbye to browser plugins (WC + HTML5) 2. Isolated from other elements in DOM 3. Easy to share (bower) 4. Easy to integrate
- 68. Polyfills? Vaadin Elements • Web Components A new, major standard to create components for the Web “Custom tags for HTML” • Vaadin Elements High-quality UI components for users of client-side frameworks such as Angular, ionic … • A new generation of UI components to be used also with future versions of the Vaadin server-side framework
- 69. Polyfills? Vaadin Elements • Web Components A new, major standard to create components for the Web “Custom tags for HTML” • Vaadin Elements High-quality UI components for users of client-side frameworks such as Angular, ionic … • A new generation of UI components to be used also with future versions of the Vaadin server-side framework • Make standards work with today’s browsers
- 70. Polyfills? Vaadin Elements • Web Components A new, major standard to create components for the Web “Custom tags for HTML” • Vaadin Elements High-quality UI components for users of client-side frameworks such as Angular, ionic … • A new generation of UI components to be used also with future versions of the Vaadin server-side framework • Make standards work with today’s browsers • Able to detect native support
- 71. Polyfills? Vaadin Elements • Web Components A new, major standard to create components for the Web “Custom tags for HTML” • Vaadin Elements High-quality UI components for users of client-side frameworks such as Angular, ionic … • A new generation of UI components to be used also with future versions of the Vaadin server-side framework • Make standards work with today’s browsers • Able to detect native support • Standards should out power polyfills in future
- 72. Session’s content • The roots, where are we coming from? • What constitutes a Web Component? • Progressive Web Apps (PWA), Vaadin, Future? • Using Web Components with Vaadin today.
- 73. B U I L D I N G A P W A
- 74. Reliable User experiences need to be...
- 75. Reliability means never showing the offline dinosaur
- 76. Reliable Fast User experiences need to be...
- 77. of users abandon sites that take longer than 3 seconds to load53%
- 78. Reliable Fast Engaging User experiences need to be...
- 80. Full screen, theming, orientation, etc. Immersive Notifications Engaging Home Screen
- 81. Full screen, theming, orientation, etc. Immersive Notifications Engaging Auto-adding to Home Screen Home Screen
- 82. Full screen, theming, orientation, etc. Push notifications Immersive Notifications Engaging Auto-adding to Home Screen Home Screen
- 93. D E M O
- 94. Lessons learned
- 95. Lessons learned • TODO: Remember to add items before the talk…
- 96. @peter_lehto T H A N K Y O U !