Bootiful Development with Spring Boot and Vue - Devnexus 2019

Bootiful Development with Spring Boot and Vue - Devnexus 2019

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!

Additional information:

* Blog post: Bootiful Development with Spring Boot and Vue
* GitHub repo: @oktadeveloper/spring-boot-vue-example
* YouTube demo: https://youtu.be/aBXmi-J4LQs

72a2082c6a4dd79ad68befb3db911616?s=128

Matt Raible

March 08, 2019
Tweet

Transcript

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

    Vue March 8, 2019 Photo by David Kosmos Smith #devnexus
  2. Blogger on raibledesigns.com and developer.okta.com/blog Web Developer and Java Champion

    Father, Skier, Mountain Biker, Whitewater Rafter Open Source Developer + User Who is Matt Raible? Bus Lover Okta Developer Advocate
  3. None
  4. None
  5. None
  6. developer.okta.com

  7. developer.okta.com + + =

  8. developer.okta.com + + =

  9. What About You?

  10. Bootiful Development http://bit.ly/boot-and-vue

  11. 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
  12. 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. @SpringBootApplication public class DemoApplication { public static void main(String[] args)

    { SpringApplication.run(DemoApplication.class, args); } } @Entity class Blog { @Id @GeneratedValue private Long id; private String name; // getters, setters, toString(), etc } @RepositoryRestResource interface BlogRepository extends JpaRepository<Blog, Long> { }
  14. @spring_io #springio17 Microservices with Spring Boot https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot

  15. Demo: Build a Spring Boot API

  16. http https://start.spring.io/starter.zip \ dependencies==h2,lombok,data-jpa,data-rest,web \ packageName==com.okta.developer.demo -d

  17. ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features

    TS: www.typescriptlang.org 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 https://www.typescriptlang.org/docs/tutorial.html
  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.” https://nodejs.org https://github.com/creationix/nvm
  21. Crunch the Numbers

  22. @spring_io #springio17 Hot Frameworks hotframeworks.com

  23. @spring_io #springio17 Hot Frameworks hotframeworks.com

  24. @spring_io #springio17 Jobs on Indeed (US) March 2018 0 2,250

    4,500 6,750 9,000 React Angular Vue
  25. @spring_io #springio17 Stack Overflow Tags March 2018 0 40,000 80,000

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

    130,000 React Angular Vue
  27. @spring_io #springio17 GitHub Star Growth http://www.timqian.com/star-history

  28. Hello World with Vue.js https://jsfiddle.net/chrisvfritz/50wL7mdz/ <div id="app"> <p>{{ message }}</p>

    </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); </script>
  29. Vue.js Code <script src="https://unpkg.com/vue/dist/vue.js"></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>
  30. Vue Examples https://vuejs.org/v2/examples

  31. @spring_io #springio17 Vue CLI

  32. Vue CLI

  33. Vue CLI

  34. @spring_io #springio17 Vue Framework Cost https://blog.uncommon.is/the-baseline-costs-of-javascript-frameworks-f768e2865d4a

  35. @spring_io #springio17 Vue in Wired

  36. @spring_io #springio17 Progressive Web Apps

  37. Demo: Build a Vue Client

  38. Spring Boot + Vue = https://developer.okta.com/blog/2018/11/20/build-crud-spring-and-vue

  39. @spring_io #springio17 JHipster jhipster.tech JHipster is a development platform to

    generate, develop and deploy Spring Boot + Angular/React Web applications and Spring microservices. and Vue! ✨
  40. @spring_io #springio17 JHipster + Vue github.com/jhipster/jhipster-vuejs

  41. @spring_io #springio17 JHipster + Vue github.com/jhipster/jhipster-vuejs

  42. JHipster + Vue + OIDC mkdir app && cd app

    echo "application { config { baseName vueoidc, authenticationType oauth2 } }" >> app.jh jhipster --blueprint vuejs import-jdl app.jh
  43. JHipster + Vue + OIDC

  44. @spring_io #springio17 Microservices with JHipster

  45. The JHipster Mini-Book 5.0 Release on November 14, 2018 jhipster-book.com

    21-points.com @jhipster_book Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book
  46. Try Spring Boot Try Vue Try OIDC Add PWA Support

    Enjoy the bootifulness! Action!
  47. DIY: Bootiful Development http://bit.ly/boot-and-vue

  48. Use the Source, Luke! git clone https://github.com/oktadeveloper/okta-spring-webflux-react- example.git https://github.com/oktadeveloper/spring-boot-vue-example

  49. Security Books https://developer.okta.com/books/api-security https://www.oauth.com

  50. developer.okta.com/blog @oktadev

  51. https://schedule.devnexus.com

  52. Questions? Keep in touch! raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/oktadeveloper

  53. developer.okta.com