Bootiful Development with Spring Boot and Vue - RWX 2018

72a2082c6a4dd79ad68befb3db911616?s=47 Matt Raible
December 03, 2018

Bootiful Development with Spring Boot and Vue - RWX 2018

You’re in love with Spring Boot, but you miss your old pal AngularJS? Don’t fear, Vue.js is here! Vue is very similar to AngularJS, but much more powerful, yet slim and light for PWAs.

In this session, you’ll see how to build a Spring Boot API and secure it with Spring Security. You’ll also learn how to build a Vue.js PWA, all the while enjoying a bootiful hot-code-reload experience. Lots of live coding in this one!



Matt Raible

December 03, 2018


  1. Matt Raible | @mraible Bootiful Development with Spring Boot and

    Vue December 3, 2018 #RWX2018
  2. Blogger on and Web Developer and Java Champion

    Father, Skier, Mountain Biker, Whitewater Rafter Open Source Connoisseur Who is Matt Raible? Bus Lover Okta Developer Advocate
  3. None
  4. None
  5. None

  7. @spring_io #springio17 Authentication/Authorization Standards

  8. What About You?

  9. Bootiful Development

  10. OAuth 2.0 Overview Today’s Agenda Why Spring Boot? Demo: Developing

    with Spring Boot Introduction to ES6 and TypeScript Why Vue? Demo: Developing with Vue Introduction to PWAs and JHipster
  11. Spring Boot Automatically configures Spring whenever possible Provides production-ready features

    such as metrics, health checks and externalized configuration Absolutely no code generation and no requirement for XML configuration Embeds Tomcat, Jetty or Undertow directly

  13. None
  14. @SpringBootApplication public class DemoApplication { public static void main(String[] args)

    {, args); } } @Entity class Blog { @Id @GeneratedValue private Long id; private String name; // getters, setters, toString(), etc } @RepositoryRestResource interface BlogRepository extends JpaRepository<Blog, Long> { }
  15. @spring_io #springio17 Microservices with Spring Boot

  16. Demo: Build a Spring Boot API

  17. ES6, ES7 and TypeScript ES5: ES6: ES7:

    TS: TS ES7 ES6 ES5
  18. TypeScript $ npm install -g typescript function greeter(person: string) {

    return "Hello, " + person;
 var user = "Jane User";
 document.body.innerHTML = greeter(user); $ tsc greeter.ts
  19. @spring_io #springio17 bus.ts

  20. “Node.js is a JavaScript runtime built on Chrome's V8 JavaScript

    engine. Node.js uses an event-driven, non- blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.”
  21. @spring_io #springio17 Leading JavaScript Frameworks in 2018

  22. None
  23. None
  24. “Angular and React dominate: Nothing else even comes close.”

  25. None
  26. Crunch the Numbers

  27. @spring_io #springio17 Hot Frameworks

  28. @spring_io #springio17 Jobs on Indeed (US) December 2018 0 2,750

    5,500 8,250 11,000 React Angular Vue
  29. @spring_io #springio17 Stack Overflow Tags December 2018 0 40,000 80,000

    120,000 160,000 React Angular Vue
  30. @spring_io #springio17 GitHub Stars December 2018 0 32,500 65,000 97,500

    130,000 React Angular Vue
  31. @spring_io #springio17 GitHub Star Growth

  32. Hello World with Vue.js <div id="app"> <p>{{ message }}</p>

    </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); </script>
  33. Vue.js Code <script src=""></script> <div id="app"> <button v-on:click="clickedButton()">Click here!</button> </div>

    <script> new Vue({ el: '#app', methods: { clickedButton: function(event) { console.log(event); alert("You clicked the button!"); } } }); </script>
  34. Vue Examples

  35. @spring_io #springio17 Vue CLI

  36. Vue CLI

  37. Vue CLI

  38. Vue CLI

  39. @spring_io #springio17 Vue Framework Cost

  40. @spring_io #springio17 Vue in Wired

  41. @spring_io #springio17 Progressive Web Apps

  42. “We’ve failed on mobile” — Alex Russell

  43. Mobile Hates You! How to fight back: Implement PRPL Get

    a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing Lighthouse DevTools Network & CPU Throttling
  44. The PRPL Pattern Push critical resources for the initial URL

    route Render initial route Pre-cache remaining routes Lazy-load and create remaining routes on demand
  45. Learn More about PWAs

  46. Demo: Build a Vue Client

  47. Lazy Auth with Vue.js

  48. Spring Boot + Vue =

  49. @spring_io #springio17 JHipster JHipster is a development platform to

    generate, develop and deploy Spring Boot + Angular/React Web applications and Spring microservices.
  50. @spring_io #springio17 JHipster + Vue

  51. @spring_io #springio17 Microservices with JHipster

  52. None
  53. The JHipster Mini-Book 5.0 Release on November 14, 2018 @jhipster_book Write your own InfoQ mini-book!
  54. Try Spring Boot Try Vue Try OIDC Explore PWAs Enjoy

    the bootifulness! Action!
  55. Try Kotlin

  56. @SpringBootApplication class NotesApplication fun main(args: Array<String>) {, *args) }

    @Entity data class Note(@Id @GeneratedValue var id: Long? = null, var text: String? = null, @JsonIgnore var user: String? = null) @RepositoryRestResource interface NotesRepository : JpaRepository<Note, Long>
  57. DIY: Bootiful Development

  58. Security Books

  59. @oktadev

  60. Questions? Keep in touch! @mraible Presentations Code