Booting up with polymer
•
0 likes•744 views
This document discusses using Polymer to build web component-based applications. It begins by explaining what web components are and how browsers support them through standards like custom elements, HTML imports and templates. It then introduces Polymer as a library that helps build web components and provides ready-made reusable components. The document outlines how to build full-stack apps with Polymer, including using Spring Boot on the backend to provide features like authentication. It also covers tools like Vulcanize, Crisper and build optimizations to improve performance of Polymer apps.
Report
Share
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Booting up with polymer
Similar to Booting up with polymer (20)
More from Marcus Hellberg
More from Marcus Hellberg (10)
Recently uploaded
Recently uploaded (20)
Booting up with polymer
- 1. Booting up with Polymer @marcushellberg / vaadin
- 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 – 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) – Extensible through Web Components
- 16. Building apps out of components – Composition – Encapsulation – Mediator pattern Business logic API API API component child 1 child 2
- 18. full stack app
- 19. backend
- 20. 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.
- 21. – 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
- 22. start.spring.io
- 23. Token authentication – JSON Web Token – Compact – Self-contained – header.payload.signature
- 24. 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
- 26. Polymer app
- 27. 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
- 30. performance?
- 32. 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
- 33. 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)); });
- 35. ..more! Load imports asynchronously Style "app skeleton" Use native shadow DOM where available
- 38. 80% smaller and faster start
- 39. production?
- 44. ?!