1.
1 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Writing a Secure App with Google Polymer Frontend
and Java / Spring “Micro-Service” Backend
Scott Deeg, Sr. Field Engineer, Pivotal

2.
2 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
What we’re talking about
§ Agenda, It’s all about Me!, Introduction
§ Google Polymer and WebComponents
§ General backend: UI delivery and “Micro-Services”
§ Security (HTTP, Session … maybe a little OAuth)
§ Demo, demo, demo
§ Q/A

3.
3 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Who Am I?
Plain Old Java Geek (POJG)
§ Java since 1996, Symantec Visual Café 1.0
§ Professional Services Consultant
§ Hacker on Java based BPM product for 10 years
§ Joined VMW 2009, Rolled into Pivotal 2013
§ Livin’ life in the enterprise

4.
4 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Why Am I Talking About This?
§ Started with a tool I was writing
§ I needed a UI
• Initially Angular
• Discussions of Polymer (others) suggested other paths
§ I needed some security
• Running it on Pivotal WebServices (public cloud)
§ Saw Dave’s series
• Decided to take the “Dave Syer Challenge”

5.
5 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Rivals MCP

6.
6 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
What are we building?
§ An application with the components and architecture of todays “modern
app”
§ UI is Single Page Application (SPA) built with Polymer
• JavaScript in the browser making AJAX calls
§ Micro-Services Backend in Java/Spring
• Boot
• Web/Rest
• Security
• Others…

7.
7 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Polymer/Spring Demo App: Simple
UI
(http)
Resource
(ReST)
Client
(Polymer)

8.
8 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
What Is Polymer?

9.
9 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Quote Slide
“The Polymer core provides a thin
layer of API on top of web
components. It expresses Polymer’s
opinion, provides the extra sugaring
that all Polymer elements use, and is
meant to help make developing web
components much easier.
Philosophy: Everything is an Element!
Polymer-Project website

10.
10 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
WebComponents are …
§ A set of w3c standards
• Custom components
• Shadow DOM
• Templates
• Html imports
§ “Polyfill” exists to address browsers that don’t support it the standards
• Google donated webcomponents.js to WebComponents.org
• Chrome already has full support
(Polyfill = library that implements features in a browser that will be supported
natively in the future.)

11.
11 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Custom Elements
§ Mechanism to define your own html element
• <my-cool-element foo=‘bar’></my-cool-element>
§ Goals
• Reduce the amount of code you have to write.
• Express the function of the code.
• Encapsulate internal details.
• Implement APIs per element type.
• Increase productivity by letting you reuse elements.
• Use inheritance to create element tags based on other tags
https://www.polymer-project.org/0.5/platform/custom-elements.html

12.
12 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
WebComponents cont.
§ Shadow DOM
• Enables isolation of an object sub-tree
• Main DOM tree does not see the children of the sub-tree
§ Templates
• Declare fragments of HTML that can be cloned and inserted in the document by
script.
§ HTML import
• Allows a page to include the content of another by reference

13.
13 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Polymer Sugar
§ Frameworks sit on top of standards, and makes them consumable
§ Create elements declaratively
• Templates define an elements shadow DOM
§ 2 way data binding
§ Events
• Capture standard events
• Fire custom events this.fire(‘event-name’, detail)
§ Property Observation
• Property foo will trigger fooChanged() handler if it exists
§ Inheritance

14.
14 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Polymer’s Set of Elements
§ Core
• General set of UI and non-UI elements
• Extends set of standard elements (buttons, lists, etc.)
§ Paper
• Based on Google’s idea of “Material Design”

15.
15 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
A bit on data binding
§ Polymer separates the UI (DOM) from the data (model)
§ The data model is bound to the element
§ The template
• Maintains a single copy of the contents
• Has 2 way bindings with the DOM
• When you update the model the DOM changes
• When you update the DOM the model changes

16.
16 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Demo 1
§ Create app
• Project
• Index.html
§ Add UI
• Greeting element
• Add polymer
• Create component
• Add data
• Layout
• Styles

17.
17 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
WebComponents: Best Practices
1. Use a dash in an elements name. EG: app-pages
2. Follow existing patterns (mimic other elements)
3. Fail silently (like other DOM components)
4. Use attributes to pass data in
5. Use events to pass data out
6. Include dependencies
7. Document your component
8. Don’t put too much in shadow DOM
9. Don’t create more custom elements than you need
10. Harmonize declarative/imperative APIs
11. Don’t assume the context the component will operate in
http://webcomponents.org/articles/web-components-best-practices/

18.
18 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Backend Services
Creating / Consuming ReSTful data

19.
19 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Spring for the Backend
§ We need a backend service to deliver data to our app
§ Spring uses a Controller to create a “ReSTful” endpoint
§ Simply add the controller annotation to our Boot app and define the end
point

20.
20 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
On the front end
§ We’ll use the core-ajax non-UI element to define a service
§ Data binding will automatically update the DOM

21.
21 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Demo 2
§ Add ReSTful resource to the app
§ Create an instance of core-ajax
§ Use the ready life cycle event to load it
§ Add a button to refresh it
§ Add paper
§ Add toast and error handler for ajax call
• Test with button

22.
22 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Adding Security
Spring Session and OAuth2

23.
23 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Lets add Security
§ Security is a very complex topic
• For the basics, just want user/password protection
§ Common Options
• HTTP
• Spring Session
• OAuth2

24.
24 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Demo 3
§ Add HTTP security to the app
§ Template and pages
• More data binding
§ Use the login/out control
§ Use life cycle and component events

25.
25 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Polymer/Spring Demo App: Spring Session
UI
(Zuul Proxy)
Resource
(ReST)Client
(Polymer)
Session
Store
(Redis)
Request protected by Spring Security
Authorized path using Zuul Service Proxy

26.
26 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Demo 4
§ General app structure
§ How is the resource secured
§ How is the UI server secured
§ How is the proxy turned on
§ Extended UI
• Core-scaffold
• Data binding
• JS setup
§ CSRF and Auth token

27.
27 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
This
And That

28.
28 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Net Results
§ Overall very positive experience
§ I like the focus on components
§ Polymer made using WebComponents easy
• Room for additional functionality
• Easy to extend with new components
§ Easy to use with Spring backend
§ Some funkyness
• EG: setting style for primary visual elements in core-scaffold.

29.
29 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
How Real is Polymer?
§ Haven’t we seen this picture before?
• Do we trust the G-Man again? GWT anyone?
§ There are many indicators that Polymer is heading to success
• Production track
• Use by other teams (eg: YouTube (according to Polymer guys))
§ Can still make use of additional frameworks and element sets
§ Guaranteed to evolve into something else quickly
• It is Google after all J

30.
30 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Where to go from here …
§ Polymer website: http://polymer-project.org
§ WebComponents: http://webcomponents.org/
§ All things Spring: http://spring.io
§ Demo code:
• https://github.com/sdeeg-pivotal/spring-polymer-demo
§ Dave Syer’s series:
• https://spring.io/blog/2015/01/12/spring-and-angular-js-a-secure-single-page-application

31.
31 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Thanks!

32.
32 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Abstract
Polymer is the latest web framework out of Google. Designed completely around the
emerging Web Components standards, it has the lofty goal of making it easy to build
apps based on these low level primitives. Along with Polymer comes a new set of
Elements (buttons, dialog boxes and such) based on the ideas of "Material Design".
These technologies together make it easy to build responsive, componentized "Single
Page" web applications that work for browsers on PCs or mobile devices. But what
about the backend, and how do we make these apps secure? In this talk Scott Deeg will
take you through an introduction to Polmyer and its related technologies, and then
through the build out of a full blown cloud based app with a secure, ReSTful backend
based on Spring ReST, Spring Cloud, and Spring Security and using Thymeleaf for
backend rendering jobs. At the end he will show the principles applied in a tool he's
currently building. The talk will be mainly code walk through and demo, and assumes
familiarity with Java/Spring and JavaScript.

33.
33 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Bio
Calling himself just a Plain Old Java Geek (POJG), Scott Deeg began
his journey with Java in 1996 as a member of the Visual Café team at
Symantec. From there he worked primarily as a consultant and
solution architect in the world of enterprise Java applications. Now a
part of Pivotal, he continues to work with large enterprises on their
application platform and data needs. A big fan of open source
software and technology, he tries to occasionally get out of the
corporate world to talk about interesting things happening in the Java/
OSS community, and has delivered technical talks at Pivotal OSS
meetups, Silicone Valley Code Camp, SVForum, and SpringOne.