Download pdf - Building a Secure App with Google Polymer and Java / Spring

1 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/by-nc/3.0/ Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a

Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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


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


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”


Rivals MCP


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…


Polymer/Spring Demo App: Simple

UI

(http)

Resource

(ReST)

Client

(Polymer)


What Is Polymer?


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


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


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


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


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


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”


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


Demo 1

§  Create app •  Project •  Index.html

§  Add UI • Greeting element

•  Add polymer •  Create component •  Add data

•  Layout

•  Styles


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/


Backend Services Creating / Consuming ReSTful data


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


On the front end

§  We’ll use the core-ajax non-UI element to define a service

§  Data binding will automatically update the DOM


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


Adding Security Spring Session and OAuth2


Lets add Security

§  Security is a very complex topic •  For the basics, just want user/password protection

§  Common Options • HTTP

•  Spring Session • OAuth2


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


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


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


This And That


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.


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


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 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/by-nc/3.0/ Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a

Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/by-nc/3.0/

Thanks!


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.


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.