Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Booting up with polymer

574 views

Published on

Slides for presentation at SeaJUG on 3/15/16

Published in: Software
  • Be the first to comment

  • Be the first to like this

Booting up with polymer

  1. 1. Booting up with Polymer @marcushellberg / vaadin
  2. 2. Why Web Components?
  3. 3. 4 standards – Custom elements – HTML Imports – Templates – Shadow DOM
  4. 4. Do browsers support this?
  5. 5. Source: webcomponents.org
  6. 6. webcomponents.js now also available as lite!
  7. 7. What is Polymer then? – Helper library for building Web Components – Comes with a collection of ready made Web Components
  8. 8. Building apps with Polymer
  9. 9. do we need a framework?
  10. 10. ... the DOM is the framework – Component model (= HTML elements) – Data flow (= attributes, properties and events) – Declarative format (= HTML) – Extensible through Web Components
  11. 11. Building apps out of components – Composition – Encapsulation – Mediator pattern Business logic API API API component child 1 child 2
  12. 12. full stack app
  13. 13. backend
  14. 14. 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.
  15. 15. – 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
  16. 16. start.spring.io
  17. 17. Token authentication – JSON Web Token – Compact – Self-contained – header.payload.signature
  18. 18. 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
  19. 19. Polymer app
  20. 20. 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
  21. 21. server <summary-panel> <login-page> <expenses-editor> <expense-application> <expenses-page> <expenses-list>
  22. 22. performance?
  23. 23. 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
  24. 24. 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));
 });
  25. 25. mvn clean package -Pproduction
  26. 26. ..more! Load imports asynchronously Style "app skeleton" Use native shadow DOM where available
  27. 27. 80% smaller and faster start
  28. 28. production?
  29. 29. Getting started with
  30. 30. github.com/vaadin-marcus/polymer-spring-boot
  31. 31. ?!
  32. 32. thanks! marcus@vaadin.com @marcushellberg

×