Successfully reported this slideshow.

Booting up with polymer

0

Share

Loading in …3
×
1 of 45
1 of 45

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

×