Bootiful Development with Spring Boot and Vue - Devnexus 2019
•
1 like•690 views
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: http://bit.ly/boot-and-vue * GitHub repo: https://github.com/oktadeveloper/spring-boot-vue-example * YouTube demo: https://youtu.be/aBXmi-J4LQs
Recommended
More Related Content
What's hot
What's hot (11)
Similar to Bootiful Development with Spring Boot and Vue - Devnexus 2019
Similar to Bootiful Development with Spring Boot and Vue - Devnexus 2019 (20)
More from Matt Raible
More from Matt Raible (20)
Recently uploaded
Recently uploaded (20)
Bootiful Development with Spring Boot and Vue - Devnexus 2019
- 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
- 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 TSES7ES6ES5
- 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
- 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
- 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
- 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>
- 32. Vue CLI
- 33. Vue CLI
- 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
- 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!
- 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