Booting up with polymer
2 likes690 views
In this presentation we'll take a look at building a full stack web application using Polymer and Web Components. After a quick introduction to Polymer, we’ll see how we can handle things like authentication, pagination of large data sets, and adapting our UI to different viewports. We’ll also review what’s needed for moving our app to production and optimizing our User Experience with quick load times and transition animations.
![<link rel="import" href="bower_components/paper-input/paper-input.html">
<dom-module id="text-repeater">
<template>
<paper-input value="{{text}}"></paper-input>
<b>You wrote: </b>
<span>[[text]]</span>
</template>
<script>
Polymer({
is: 'text-repeater',
properties: {
text: String
}
});
</script>
</dom-module>
text-repeater.html](https://image.slidesharecdn.com/bootingupwithpolymer-160307221406/85/Booting-up-with-polymer-19-320.jpg)
![<template>
<paper-input value="{{text}}"></paper-input>
<b>You wrote: </b>
<span>[[text]]</span>
</template>
<script>
Polymer({
is: 'web-component',
properties: {
text: String
}
});
</script>
Business logic
API API
API
text-repeater
paper-input span
<text-repeater text="Hello"></text-repeater>](https://image.slidesharecdn.com/bootingupwithpolymer-160307221406/85/Booting-up-with-polymer-21-320.jpg)
![properties: {
token: {
type: String,
notify: true,
value: ''
},
selected: {
type: Number,
notify: true,
computed: '_selectPage(token)'
}
},
listeners: {
'iron-form-response': '_handleLoginSuccess',
'iron-form-error': '_handleLoginError'
},
observers: ['_fetchStuff(token, other)']](https://image.slidesharecdn.com/bootingupwithpolymer-160307221406/85/Booting-up-with-polymer-23-320.jpg)
![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));
});](https://image.slidesharecdn.com/bootingupwithpolymer-160307221406/85/Booting-up-with-polymer-39-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Booting up with polymer (20)
Ad
More from Marcus Hellberg (11)
Ad
Recently uploaded (20)
Booting up with polymer
- 1. Booting up with Polymer
- 7. 4 standards •Custom elements •HTML Imports •Templates •Shadow DOM
- 9. Do browsers support this?
- 11. webcomponents.js now also available as lite!
- 12. What is Polymer then? •Helper library for building Web Components – nothing more •Comes with a collection of ready made Web Components
- 13. Building apps with Polymer
- 14. Do we need a framework?
- 15. ... the DOM is the framework •Component model (= HTML elements) •Data flow (= attributes, properties and events) •Declarative format (= HTML) •Now also extensible through Web Components
- 16. Building apps out of components •Composition •Encapsulation •Mediator pattern Business logic API API API component child 1 child 2
- 19. <link rel="import" href="bower_components/paper-input/paper-input.html"> <dom-module id="text-repeater"> <template> <paper-input value="{{text}}"></paper-input> <b>You wrote: </b> <span>[[text]]</span> </template> <script> Polymer({ is: 'text-repeater', properties: { text: String } }); </script> </dom-module> text-repeater.html
- 20. All code in one file?!
- 21. <template> <paper-input value="{{text}}"></paper-input> <b>You wrote: </b> <span>[[text]]</span> </template> <script> Polymer({ is: 'web-component', properties: { text: String } }); </script> Business logic API API API text-repeater paper-input span <text-repeater text="Hello"></text-repeater>
- 23. properties: { token: { type: String, notify: true, value: '' }, selected: { type: Number, notify: true, computed: '_selectPage(token)' } }, listeners: { 'iron-form-response': '_handleLoginSuccess', 'iron-form-error': '_handleLoginError' }, observers: ['_fetchStuff(token, other)']
- 25. Backend
- 26. 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.
- 27. •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 •Provide 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
- 28. start.spring.io
- 29. Token authentication •JSON Web Token •Compact •Self-contained •header.payload.signature
- 30. JWT authentication Client Server 1. Login request (username/password) 2. JWT gets returned to browser Authenticate, create JWT 3. Request, token in header 4. Response Validate token
- 32. Polymer app
- 33. 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
- 38. 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
- 39. 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)); });
- 41. Optimizing some more •Load imports asynchronously •Style "app skeleton" •Use native shadow DOM where available
- 44. 80% smaller and faster startup
- 50. ?!