Slides for presentation at SeaJUG on 3/15/16

1. Booting up with Polymer
@marcushellberg / vaadin

2. Why Web Components?

7. 4 standards
– Custom elements
– HTML Imports
– Templates
– Shadow DOM

9. Do browsers support this?

10. Source: webcomponents.org

11. webcomponents.js
now also available as lite!

12. What is Polymer then?
– Helper library for building Web Components
– Comes with a collection of ready made Web Components

13. Building apps with Polymer

14. do we need a framework?

15. ... the DOM is the framework
– Component model (= HTML elements)
– Data flow (= attributes, properties and events)
– Declarative format (= HTML)
– Extensible through Web Components

16. Building apps out of components
– Composition
– Encapsulation
– Mediator pattern
Business logic
API API
API
component
child 1 child 2

18. full stack app

19. backend

20. Spring Boot
Takes an opinionated view of building production-ready
Spring applications. Spring Boot favors convention over
configuration and is designed to get you up and running
as quickly as possible.

21. – Create stand-alone Spring applications
– Embed Tomcat, Jetty or Undertow directly (no need to deploy WAR files)
– Provide opinionated 'starter' POMs to simplify your Maven configuration
– Automatically configure Spring whenever possible
– Production-ready features such as metrics, health checks and externalized configuration
– Absolutely no code generation and no requirement for XML configuration
projects.spring.io/spring-boot

22. start.spring.io

23. Token authentication
– JSON Web Token
– Compact
– Self-contained
– header.payload.signature

24. JWT authentication
Client Server
1. Login request (username/password)
2. token gets returned to browser
Authenticate, create token
3. Request, token in header
4. Response Validate token

26. Polymer app

27. Some additional tools we'll use
npm – development time JS dependencies
bower – Polymer dependencies
gulp – JS based build tool used to run some optimization tasks
...integrated into Maven build process

28. server
<summary-panel>
<login-page>
<expenses-editor>
<expense-application>
<expenses-page>
<expenses-list>

30. performance?

32. Optimizing
vulcanize – combine all imports into one file
crisper – pull out all JS into separate file for CSP compliance
htmlmin & uglify – minimize assets
turn on server gzip

33. gulp.task('build', function() {
return gulp
.src(SRC_DIR + '/elements.html')
.pipe($.vulcanize({
inlineScripts: true,
inlineCss: true
}))
.pipe($.crisper())
.pipe($.if('*.js', $.uglify({
preserveComments: 'some'
})))
.pipe($.if('*.html', $.htmlmin({
customAttrAssign: [/$=/],
removeComments: true,
collapseWhitespace: true
})))
.pipe(gulp.dest(DEST_DIR));
});

34. mvn clean package -Pproduction

35. ..more!
Load imports asynchronously
Style "app skeleton"
Use native shadow DOM where available

38. 80% smaller and faster start

39. production?

40. Getting started with

43. github.com/vaadin-marcus/polymer-spring-boot

44. ?!

45. thanks!
marcus@vaadin.com
@marcushellberg