Booting up with polymer

Marcus Hellberg
Marcus HellbergDeveloper Advocate
Booting up with Polymer
@marcushellberg / vaadin
Why Web Components?
Booting up with polymer
Booting up with polymer
Booting up with polymer
Booting up with polymer
4 standards
– Custom elements
– HTML Imports
– Templates
– Shadow DOM
Booting up with polymer
Do browsers support this?
Source: webcomponents.org
webcomponents.js
now also available as lite!
What is Polymer then?
– Helper library for building Web Components
– Comes with a collection of ready made Web Components
Building apps with Polymer
do we need a framework?
... the DOM is the framework
– Component model (= HTML elements)
– Data flow (= attributes, properties and events)
– Declarative format (= HTML)
– Extensible through Web Components
Building apps out of components
– Composition
– Encapsulation
– Mediator pattern
Business logic
API API
API
component
child 1 child 2
Booting up with polymer
full stack app
backend
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.
– 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
start.spring.io
Token authentication
– JSON Web Token
– Compact
– Self-contained
– header.payload.signature
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
Booting up with polymer
Polymer app
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
server
<summary-panel>
<login-page>
<expenses-editor>
<expense-application>
<expenses-page>
<expenses-list>
Booting up with polymer
performance?
Booting up with polymer
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
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));

});
mvn	clean	package	-Pproduction
..more!
Load imports asynchronously
Style "app skeleton"
Use native shadow DOM where available
Booting up with polymer
Booting up with polymer
80% smaller and faster start
production?
Getting started with
Booting up with polymer
Booting up with polymer
github.com/vaadin-marcus/polymer-spring-boot
?!
thanks!
marcus@vaadin.com
@marcushellberg
1 of 45

Recommended

Building a Secure App with Google Polymer and Java / Spring by
Building a Secure App with Google Polymer and Java / SpringBuilding a Secure App with Google Polymer and Java / Spring
Building a Secure App with Google Polymer and Java / Springsdeeg
14K views33 slides
Booting up with polymer by
Booting up with polymerBooting up with polymer
Booting up with polymerMarcus Hellberg
690 views51 slides
Polymer / WebComponents by
Polymer / WebComponentsPolymer / WebComponents
Polymer / WebComponentsArnaud Kervern
1.2K views52 slides
Web Components for Java Developers by
Web Components for Java DevelopersWeb Components for Java Developers
Web Components for Java DevelopersJoonas Lehtinen
31.7K views93 slides
Polymer - Welcome to the Future @ PyGrunn 08/07/2014 by
Polymer - Welcome to the Future @ PyGrunn 08/07/2014Polymer - Welcome to the Future @ PyGrunn 08/07/2014
Polymer - Welcome to the Future @ PyGrunn 08/07/2014Spyros Ioakeimidis
81.6K views52 slides
Web Components & Polymer 1.0 (Webinale Berlin) by
Web Components & Polymer 1.0 (Webinale Berlin)Web Components & Polymer 1.0 (Webinale Berlin)
Web Components & Polymer 1.0 (Webinale Berlin)Hendrik Ebbers
2.3K views96 slides

More Related Content

What's hot

Introduction to Vaadin by
Introduction to VaadinIntroduction to Vaadin
Introduction to VaadinJeroen Benats
5.5K views39 slides
Web Components the best marriage for a PWA by
Web Components the best marriage for a PWAWeb Components the best marriage for a PWA
Web Components the best marriage for a PWAManuel Carrasco Moñino
1.4K views31 slides
Modern Web Application Development Workflow - EclipseCon Europe 2014 by
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Stéphane Bégaudeau
863 views154 slides
AngularJS 101 - Everything you need to know to get started by
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedStéphane Bégaudeau
55.5K views41 slides
Vaadin Components by
Vaadin ComponentsVaadin Components
Vaadin ComponentsJoonas Lehtinen
2.3K views98 slides
Web Components by
Web ComponentsWeb Components
Web ComponentsNikolaus Graf
2.7K views28 slides

What's hot(20)

Introduction to Vaadin by Jeroen Benats
Introduction to VaadinIntroduction to Vaadin
Introduction to Vaadin
Jeroen Benats5.5K views
Modern Web Application Development Workflow - EclipseCon Europe 2014 by Stéphane Bégaudeau
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
AngularJS 101 - Everything you need to know to get started by Stéphane Bégaudeau
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
Stéphane Bégaudeau55.5K views
Vaadin Components @ Angular U by Joonas Lehtinen
Vaadin Components @ Angular UVaadin Components @ Angular U
Vaadin Components @ Angular U
Joonas Lehtinen2.1K views
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점 by Jeado Ko
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Jeado Ko2.2K views
Polymer presentation in Google HQ by Harshit Pandey
Polymer presentation in Google HQPolymer presentation in Google HQ
Polymer presentation in Google HQ
Harshit Pandey2.6K views
Bridging the Gap: Single-Page Apps and AEM by rbl002
Bridging the Gap: Single-Page Apps and AEMBridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEM
rbl0022.1K views
Overview about AngularJS Framework by Camilo Lopes
Overview about AngularJS Framework Overview about AngularJS Framework
Overview about AngularJS Framework
Camilo Lopes9.2K views
Implementing auto complete using JQuery by Bhushan Mulmule
Implementing auto complete using JQueryImplementing auto complete using JQuery
Implementing auto complete using JQuery
Bhushan Mulmule4.2K views
The web - What it has, what it lacks and where it must go - Istanbul by Robert Nyman
The web - What it has, what it lacks and where it must go - IstanbulThe web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
Robert Nyman29.1K views
Web Applications with AngularJS by Philipp Burgmer
Web Applications with AngularJSWeb Applications with AngularJS
Web Applications with AngularJS
Philipp Burgmer1.2K views
Korea linuxforum2014 html5game-sangseoklim by Sang Seok Lim
Korea linuxforum2014 html5game-sangseoklimKorea linuxforum2014 html5game-sangseoklim
Korea linuxforum2014 html5game-sangseoklim
Sang Seok Lim1.4K views
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS by Philipp Burgmer
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJSKarlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
Philipp Burgmer983 views

Viewers also liked

Progressive web apps with polymer by
Progressive web apps with polymerProgressive web apps with polymer
Progressive web apps with polymerMarcus Hellberg
1.5K views93 slides
Conociendo Angular 2 by
Conociendo Angular 2Conociendo Angular 2
Conociendo Angular 2Sergio Brito
644 views23 slides
Polymer by
PolymerPolymer
PolymerLearningTech
493 views21 slides
PostCss by
PostCssPostCss
PostCssLearningTech
414 views25 slides
Web apps con angular y material design by
Web apps con angular y material designWeb apps con angular y material design
Web apps con angular y material designSergio Castillo Yrizales
1.1K views11 slides
Creating HTML Pages by
Creating HTML PagesCreating HTML Pages
Creating HTML PagesMike Crabb
22.4K views41 slides

Viewers also liked(6)

Similar to Booting up with polymer

Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel... by
Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...
Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...Lucas Jellema
725 views57 slides
Introducción al SharePoint Framework SPFx by
Introducción al SharePoint Framework SPFxIntroducción al SharePoint Framework SPFx
Introducción al SharePoint Framework SPFxSUGES (SharePoint Users Group España)
285 views50 slides
Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018) by
Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)
Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)🎤 Hanno Embregts 🎸
279 views22 slides
Ready! Steady! SpringBoot! by
Ready! Steady! SpringBoot! Ready! Steady! SpringBoot!
Ready! Steady! SpringBoot! GlobalLogic Ukraine
1.3K views17 slides
Maven – The build paraphernalia by
Maven – The build paraphernaliaMaven – The build paraphernalia
Maven – The build paraphernaliaSubin Sugunan
1.6K views12 slides
Cloud-powered Continuous Integration and Deployment architectures - Jinesh Varia by
Cloud-powered Continuous Integration and Deployment architectures - Jinesh VariaCloud-powered Continuous Integration and Deployment architectures - Jinesh Varia
Cloud-powered Continuous Integration and Deployment architectures - Jinesh VariaAmazon Web Services
16.2K views101 slides

Similar to Booting up with polymer(20)

Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel... by Lucas Jellema
Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...
Oracle JavaScript Extension Toolkit Web Components Bring Agility to App Devel...
Lucas Jellema725 views
Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018) by 🎤 Hanno Embregts 🎸
Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)
Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)
Maven – The build paraphernalia by Subin Sugunan
Maven – The build paraphernaliaMaven – The build paraphernalia
Maven – The build paraphernalia
Subin Sugunan1.6K views
Cloud-powered Continuous Integration and Deployment architectures - Jinesh Varia by Amazon Web Services
Cloud-powered Continuous Integration and Deployment architectures - Jinesh VariaCloud-powered Continuous Integration and Deployment architectures - Jinesh Varia
Cloud-powered Continuous Integration and Deployment architectures - Jinesh Varia
Amazon Web Services16.2K views
Meteor - Codemotion Rome 2015 by Codemotion
Meteor - Codemotion Rome 2015Meteor - Codemotion Rome 2015
Meteor - Codemotion Rome 2015
Codemotion955 views
Meteor + Polymer by wolf4ood
Meteor + PolymerMeteor + Polymer
Meteor + Polymer
wolf4ood5.1K views
UI5con 2017 - UI5 Components - More Performance... by Peter Muessig
UI5con 2017 - UI5 Components - More Performance...UI5con 2017 - UI5 Components - More Performance...
UI5con 2017 - UI5 Components - More Performance...
Peter Muessig3.7K views
Spring Boot & Actuators by VMware Tanzu
Spring Boot & ActuatorsSpring Boot & Actuators
Spring Boot & Actuators
VMware Tanzu4.6K views
SharePoint Framework at a glance by Haaron Gonzalez
SharePoint Framework at a glanceSharePoint Framework at a glance
SharePoint Framework at a glance
Haaron Gonzalez379 views
Phonegap android angualr material design by Srinadh Kanugala
Phonegap android angualr material designPhonegap android angualr material design
Phonegap android angualr material design
Srinadh Kanugala764 views
Web Components: back to the future by DA-14
Web Components: back to the futureWeb Components: back to the future
Web Components: back to the future
DA-14710 views
Tutorial 1: Your First Science App - Araport Developer Workshop by Vivek Krishnakumar
Tutorial 1: Your First Science App - Araport Developer WorkshopTutorial 1: Your First Science App - Araport Developer Workshop
Tutorial 1: Your First Science App - Araport Developer Workshop
Vivek Krishnakumar731 views
ApacheCon NA 2010 - High Performance Cloud-enabled SCA Runtimes by Jean-Sebastien Delfino
ApacheCon NA 2010 - High Performance Cloud-enabled SCA RuntimesApacheCon NA 2010 - High Performance Cloud-enabled SCA Runtimes
ApacheCon NA 2010 - High Performance Cloud-enabled SCA Runtimes
Continuous integration / continuous delivery of web applications, Eugen Kuzmi... by Evgeniy Kuzmin
Continuous integration / continuous delivery of web applications, Eugen Kuzmi...Continuous integration / continuous delivery of web applications, Eugen Kuzmi...
Continuous integration / continuous delivery of web applications, Eugen Kuzmi...
Evgeniy Kuzmin361 views

More from Marcus Hellberg

Building performant web apps by
Building performant web appsBuilding performant web apps
Building performant web appsMarcus Hellberg
97 views30 slides
Building web apps with vaadin 10 by
Building web apps with vaadin 10Building web apps with vaadin 10
Building web apps with vaadin 10Marcus Hellberg
295 views60 slides
Going web native - Feb 2018 by
Going web native - Feb 2018Going web native - Feb 2018
Going web native - Feb 2018Marcus Hellberg
133 views94 slides
Going web native by
Going web nativeGoing web native
Going web nativeMarcus Hellberg
161 views96 slides
What's new in Vaadin 8, how do you upgrade, and what's next? by
What's new in Vaadin 8, how do you upgrade, and what's next?What's new in Vaadin 8, how do you upgrade, and what's next?
What's new in Vaadin 8, how do you upgrade, and what's next?Marcus Hellberg
849 views92 slides
Going web native by
Going web nativeGoing web native
Going web nativeMarcus Hellberg
392 views194 slides

More from Marcus Hellberg(10)

Recently uploaded

Bootstrapping vs Venture Capital.pptx by
Bootstrapping vs Venture Capital.pptxBootstrapping vs Venture Capital.pptx
Bootstrapping vs Venture Capital.pptxZeljko Svedic
15 views17 slides
The Path to DevOps by
The Path to DevOpsThe Path to DevOps
The Path to DevOpsJohn Valentino
5 views6 slides
Sprint 226 by
Sprint 226Sprint 226
Sprint 226ManageIQ
11 views18 slides
Understanding HTML terminology by
Understanding HTML terminologyUnderstanding HTML terminology
Understanding HTML terminologyartembondar5
7 views8 slides
predicting-m3-devopsconMunich-2023.pptx by
predicting-m3-devopsconMunich-2023.pptxpredicting-m3-devopsconMunich-2023.pptx
predicting-m3-devopsconMunich-2023.pptxTier1 app
8 views24 slides
AI and Ml presentation .pptx by
AI and Ml presentation .pptxAI and Ml presentation .pptx
AI and Ml presentation .pptxFayazAli87
14 views15 slides

Recently uploaded(20)

Bootstrapping vs Venture Capital.pptx by Zeljko Svedic
Bootstrapping vs Venture Capital.pptxBootstrapping vs Venture Capital.pptx
Bootstrapping vs Venture Capital.pptx
Zeljko Svedic15 views
Sprint 226 by ManageIQ
Sprint 226Sprint 226
Sprint 226
ManageIQ11 views
Understanding HTML terminology by artembondar5
Understanding HTML terminologyUnderstanding HTML terminology
Understanding HTML terminology
artembondar57 views
predicting-m3-devopsconMunich-2023.pptx by Tier1 app
predicting-m3-devopsconMunich-2023.pptxpredicting-m3-devopsconMunich-2023.pptx
predicting-m3-devopsconMunich-2023.pptx
Tier1 app8 views
AI and Ml presentation .pptx by FayazAli87
AI and Ml presentation .pptxAI and Ml presentation .pptx
AI and Ml presentation .pptx
FayazAli8714 views
Generic or specific? Making sensible software design decisions by Bert Jan Schrijver
Generic or specific? Making sensible software design decisionsGeneric or specific? Making sensible software design decisions
Generic or specific? Making sensible software design decisions
Introduction to Git Source Control by John Valentino
Introduction to Git Source ControlIntroduction to Git Source Control
Introduction to Git Source Control
John Valentino7 views
FIMA 2023 Neo4j & FS - Entity Resolution.pptx by Neo4j
FIMA 2023 Neo4j & FS - Entity Resolution.pptxFIMA 2023 Neo4j & FS - Entity Resolution.pptx
FIMA 2023 Neo4j & FS - Entity Resolution.pptx
Neo4j17 views
DRYiCE™ iAutomate: AI-enhanced Intelligent Runbook Automation by HCLSoftware
DRYiCE™ iAutomate: AI-enhanced Intelligent Runbook AutomationDRYiCE™ iAutomate: AI-enhanced Intelligent Runbook Automation
DRYiCE™ iAutomate: AI-enhanced Intelligent Runbook Automation
HCLSoftware6 views
Navigating container technology for enhanced security by Niklas Saari by Metosin Oy
Navigating container technology for enhanced security by Niklas SaariNavigating container technology for enhanced security by Niklas Saari
Navigating container technology for enhanced security by Niklas Saari
Metosin Oy14 views
FOSSLight Community Day 2023-11-30 by Shane Coughlan
FOSSLight Community Day 2023-11-30FOSSLight Community Day 2023-11-30
FOSSLight Community Day 2023-11-30
Shane Coughlan6 views
Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated... by TomHalpin9
Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...
Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...
TomHalpin96 views
Top-5-production-devconMunich-2023-v2.pptx by Tier1 app
Top-5-production-devconMunich-2023-v2.pptxTop-5-production-devconMunich-2023-v2.pptx
Top-5-production-devconMunich-2023-v2.pptx
Tier1 app6 views

Booting up with polymer