Bootiful Development with Spring Boot and Angular - RWX 2018
3 likes439 views
The document is a presentation by Matt Raible that discusses development with Spring Boot and Angular, highlighting features like OAuth 2.0, microservices, and Progressive Web Apps (PWAs). It includes code demonstrations for setting up a Spring Boot application, using TypeScript with Angular, and introduces JHipster for integrating Spring Boot with front-end frameworks. The document also compares leading JavaScript frameworks and provides resources for further learning about web development technologies.
![@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> {
}](https://image.slidesharecdn.com/bootifuldevelopmentwithspringbootandangular-rwx2018-181204183044/85/Bootiful-Development-with-Spring-Boot-and-Angular-RWX-2018-13-320.jpg)
![Hello World with Angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }](https://image.slidesharecdn.com/bootifuldevelopmentwithspringbootandangular-rwx2018-181204183044/85/Bootiful-Development-with-Spring-Boot-and-Angular-RWX-2018-32-320.jpg)
Bootiful Development with Spring Boot and Angular - RWX 2018
- 1. Matt Raible | @mraible Bootiful Development w/ Spring Boot and Angular December 4, 2018 https://www.flickr.com/photos/captainkimo/15356999583 #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
- 8. OAuth 2.0 Overview Today’s Agenda Why Spring Boot? Demo: Developing with Spring Boot Introduction to ES6 and TypeScript Why Angular? Demo: Developing with Angular Introduction to PWAs and JHipster
- 9. 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
- 10. @spring_io #springio17 Another Perspective https://twitter.com/phillip_webb/status/641444531867680768 “You can’t make a delicious cake without the correct ingredients!”
- 11. SPRING INITIALIZR @ start.spring.io
- 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. ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features TS: www.typescriptlang.org TSES7ES6ES5
- 17. 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. “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
- 20. @spring_io #springio17 Leading JavaScript Frameworks in 2018 angular.io facebook.github.io/react vuejs.org
- 23. “Angular and React dominate: Nothing else even comes close.”
- 27. @spring_io #springio17 Jobs on Indeed (US) December 2018 0 2,750 5,500 8,250 11,000 React Angular Vue
- 28. @spring_io #springio17 Stack Overflow Tags December 2018 0 40,000 80,000 120,000 160,000 React Angular Vue
- 29. @spring_io #springio17 GitHub Stars December 2018 0 32,500 65,000 97,500 130,000 React Angular Vue
- 30. @spring_io #springio17 GitHub Star Growth http://www.timqian.com/star-history
- 31. Hello World with Angular import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'World'; } <my-app></my-app>
- 32. Hello World with Angular import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
- 33. Hello World with Angular import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule);
- 35. Angular CLI
- 36. Angular CLI
- 37. Angular CLI
- 38. Get Started with Angular Angular QuickStart https://angular.io/guide/quickstart Angular Seed https://github.com/mgechev/angular-seed Angular Seed Advanced https://github.com/NathanWalker/angular-seed-advanced
- 39. Demo: Build an Angular Client export class BeerListComponent implements OnInit { beers: Array<any>; constructor(private beerService: BeerService, private giphyService: GiphyService) { } ngOnInit() { this.beerService.getAll().subscribe( data => { this.beers = data; for (let beer of this.beers) { this.giphyService.get(beer.name).subscribe(url => { beer.giphyUrl = url; }); } }, error => console.log(error) ) } }
- 41. “We’ve failed on mobile” — Alex Russell https://youtu.be/K1SFnrf4jZo
- 42. 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
- 43. 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
- 44. Learn More about PWAs https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
- 45. @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.
- 48. 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
- 49. Action! Try Spring Boot Try Angular Try OIDC Explore PWAs Enjoy the bootifulness!
- 51. @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>
- 54. @spring_io #springio17 Angular 7 + Spring Boot 2.1 Screencast https://youtu.be/HoDzatvGDlI