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.
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
Â
Building a Secure App with Google Polymer and Java / Spring
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.