In this presentation we'll take a look at building a full stack web application using Polymer and Web Components. After a quick introduction to Polymer, we’ll see how we can handle things like authentication, pagination of large data sets, and adapting our UI to different viewports. We’ll also review what’s needed for moving our app to production and optimizing our User Experience with quick load times and transition animations.

1. Booting up with Polymer

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 – nothing more
•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)
•Now also extensible through Web Components

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

17. <text-repeater text="Hello"></text-repeater>

19. <link rel="import" href="bower_components/paper-input/paper-input.html">
<dom-module id="text-repeater">
<template>
<paper-input value="{{text}}"></paper-input>
<b>You wrote: </b>
<span>[[text]]</span>
</template>
<script>
Polymer({
is: 'text-repeater',
properties: {
text: String
}
});
</script>
</dom-module>
text-repeater.html

20. All code in one file?!

21. <template>
<paper-input value="{{text}}"></paper-input>
<b>You wrote: </b>
<span>[[text]]</span>
</template>
<script>
Polymer({
is: 'web-component',
properties: {
text: String
}
});
</script>
Business logic
API API
API
text-repeater
paper-input span
<text-repeater text="Hello"></text-repeater>

23. properties: {
token: {
type: String,
notify: true,
value: ''
},
selected: {
type: Number,
notify: true,
computed: '_selectPage(token)'
}
},
listeners: {
'iron-form-response': '_handleLoginSuccess',
'iron-form-error': '_handleLoginError'
},
observers: ['_fetchStuff(token, other)']

24. Let's get started.

25. Backend

26. 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.

27. •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
•Provide 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

28. start.spring.io

29. Token authentication
•JSON Web Token
•Compact
•Self-contained
•header.payload.signature

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

32. Polymer app

33. 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

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

36. What about performance?

38. 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

39. 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));
});

40. mvn clean package -Pproduction

41. Optimizing some more
•Load imports asynchronously
•Style "app skeleton"
•Use native shadow DOM where available

44. 80% smaller and faster startup

45. Ready for production?

46. Getting started with

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

50. ?!

51. thanks!
@marcushellberg (twitter)
@marcus (polymer slack)