Matt Raible | @mraible Bootiful Development with Spring Boot and Vue December 3, 2018 https://www.flickr.com/photos/52224388@N02/21010384352 #RWX2018
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
developer.okta.com
@spring_io #springio17 Authentication/Authorization Standards
What About You?
Bootiful Development http://bit.ly/boot-and-vue
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
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
SPRING INITIALIZR @ start.spring.io
@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> { }
@spring_io #springio17 Microservices with Spring Boot https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot
Demo: Build a Spring Boot API
ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features TS: www.typescriptlang.org TSES7ES6ES5
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
@spring_io #springio17 bus.ts
“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
@spring_io #springio17 Leading JavaScript Frameworks in 2018 angular.io facebook.github.io/react vuejs.org
“Angular and React dominate: Nothing else even comes close.”
Crunch the Numbers
@spring_io #springio17 Hot Frameworks hotframeworks.com
@spring_io #springio17 Jobs on Indeed (US) December 2018 0 2,750 5,500 8,250 11,000 React Angular Vue
@spring_io #springio17 Stack Overflow Tags December 2018 0 40,000 80,000 120,000 160,000 React Angular Vue
@spring_io #springio17 GitHub Stars December 2018 0 32,500 65,000 97,500 130,000 React Angular Vue
@spring_io #springio17 GitHub Star Growth http://www.timqian.com/star-history
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>
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>
Vue Examples https://vuejs.org/v2/examples
@spring_io #springio17 Vue CLI
Vue CLI
Vue CLI
Vue CLI
@spring_io #springio17 Vue Framework Cost https://blog.uncommon.is/the-baseline-costs-of-javascript-frameworks-f768e2865d4a
@spring_io #springio17 Vue in Wired
@spring_io #springio17 Progressive Web Apps
“We’ve failed on mobile” — Alex Russell https://youtu.be/K1SFnrf4jZo
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
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
Learn More about PWAs https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
Demo: Build a Vue Client
Lazy Auth with Vue.js https://developer.okta.com/blog/2017/09/14/lazy-developers-guide-to-auth-with-vuehttps://developer.okta.com/blog/2017/09/14/lazy-developers-guide-to-auth-with-vue
Spring Boot + Vue = 💚 https://developer.okta.com/blog/2018/11/20/build-crud-spring-and-vue
@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. 
@spring_io #springio17 JHipster + Vue github.com/jhipster/jhipster-vuejs
@spring_io #springio17 Microservices with JHipster
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
Try Spring Boot Try Vue Try OIDC Explore PWAs Enjoy the bootifulness! Action!
Try Kotlin https://developer.okta.com/blog/2017/09/19/build-a-secure-notes-application-with-kotlin-typescript-and-okta
@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>
DIY: Bootiful Development http://bit.ly/boot-and-vue
Security Books https://developer.okta.com/books/api-securityhttps://www.oauth.com
developer.okta.com/blog @oktadev
Questions? Keep in touch! raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/oktadeveloper
developer.okta.com

Bootiful Development with Spring Boot and Vue - RWX 2018