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!

Blog: https://developer.okta.com/blog/2018/12/03/bootiful-spring-boot-java-vue-typescript
GitHub: https://github.com/oktadeveloper/spring-boot-vue-example

Transcript

1. Matt Raible | @mraible Bootiful Development with Spring Boot and Vue December 3, 2018 https://www.flickr.com/photos/52224388@N02/21010384352 #RWX2018
2. Blogger on raibledesigns.com and developer.okta.com/blog Web Developer and Java Champion Father, Skier, Mountain Biker, Whitewater Rafter Open Source Connoisseur Who is Matt Raible? Bus Lover Okta Developer Advocate
6. developer.okta.com
7. @spring_io #springio17 Authentication/Authorization Standards
8. What About You?
9. Bootiful Development http://bit.ly/boot-and-vue
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
12. SPRING INITIALIZR @ start.spring.io
14. @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> { }
15. @spring_io #springio17 Microservices with Spring Boot https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot
16. Demo: Build a Spring Boot API
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. @spring_io #springio17 Leading JavaScript Frameworks in 2018 angular.io facebook.github.io/react vuejs.org
24. “Angular and React dominate: Nothing else even comes close.”
26. Crunch the Numbers
27. @spring_io #springio17 Hot Frameworks hotframeworks.com
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 http://www.timqian.com/star-history
32. 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>
33. 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>
34. Vue Examples https://vuejs.org/v2/examples
35. @spring_io #springio17 Vue CLI
36. Vue CLI
37. Vue CLI
38. Vue CLI
39. @spring_io #springio17 Vue Framework Cost https://blog.uncommon.is/the-baseline-costs-of-javascript-frameworks-f768e2865d4a
40. @spring_io #springio17 Vue in Wired
41. @spring_io #springio17 Progressive Web Apps
42. “We’ve failed on mobile” — Alex Russell https://youtu.be/K1SFnrf4jZo
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 https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
46. Demo: Build a Vue Client
47. Lazy Auth with Vue.js https://developer.okta.com/blog/2017/09/14/lazy-developers-guide-to-auth-with-vue https://developer.okta.com/blog/2017/09/14/lazy-developers-guide-to-auth-with-vue
48. Spring Boot + Vue = https://developer.okta.com/blog/2018/11/20/build-crud-spring-and-vue
49. @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.
50. @spring_io #springio17 JHipster + Vue github.com/jhipster/jhipster-vuejs
51. @spring_io #springio17 Microservices with JHipster
53. 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
54. Try Spring Boot Try Vue Try OIDC Explore PWAs Enjoy the bootifulness! Action!
55. Try Kotlin https://developer.okta.com/blog/2017/09/19/build-a-secure-notes-application-with-kotlin-typescript-and-okta
56. @SpringBootApplication class NotesApplication fun main(args: Array<String>) { SpringApplication.run(NotesApplication::class.java, *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 http://bit.ly/boot-and-vue
58. Security Books https://developer.okta.com/books/api-security https://www.oauth.com
59. developer.okta.com/blog @oktadev
60. Questions? Keep in touch! raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/oktadeveloper
61. developer.okta.com