1.
Booting up with Polymer
@marcushellberg / vaadin

2.
Why Web Components?

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

4.
Do browsers support this?

5.
Source: webcomponents.org

6.
webcomponents.js
now also available as lite!

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

8.
Building apps with Polymer

9.
do we need a framework?

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

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

12.
full stack app

13.
backend

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

15.
– 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

16.
start.spring.io

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

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

19.
Polymer app

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

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

22.
performance?

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

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

25.
mvn clean package -Pproduction

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

27.
80% smaller and faster start

28.
production?

29.
Getting started with

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

31.
?!

32.
thanks!
marcus@vaadin.com
@marcushellberg