Upload
matt-raible
View
67
Download
1
Embed Size (px)
Citation preview
Matt Raible | @mraibleBootiful Development w/ Spring Boot and Angular
September 20, 2017 Connect.Tech
https://www.flickr.com/photos/rockmixer/2806330093
Blogger on raibledesigns.com
Web Developer and Java Champion
Father, Skier, Mountain Biker, Whitewater Rafter
Open Source Connoisseur
Who is Matt Raible?
Bus LoverOkta Developer Advocate
@spring_io #springio17
Okta Supports Authentication Standards
What about You?
Bootiful Development
http://bit.ly/boot-and-ng
OAuth 2.0 Overview
Today’s AgendaWhy Spring Boot?
Demo: Developing with Spring Boot
Introduction to ES6 and TypeScript
Why Angular?
Demo: Developing with Angular
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
@spring_io #springio17
Secure Microservices with Spring Boot
https://developer.okta.com/blog/2017/08/08/secure-spring-microservices
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 TSES7 ES6 ES5
http://caniuse.com/#search=es5
http://caniuse.com/#search=es6
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
“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 2017
angular.io
facebook.github.io/react
vuejs.org
@spring_io #springio17
Jobs on IndeedSeptember 2017
0
1,750
3,500
5,250
7,000
Angular Aurelia Backbone Ember Knockout React Vue
@spring_io #springio17
Stack Overflow Tags
September 2017
0
20,000
40,000
60,000
80,000
Angular Aurelia Backbone Knockout Ember React Vue
@spring_io #springio17
GitHub StarsSeptember 2017
0
20,000
40,000
60,000
80,000
Angular Aurelia Backbone Knockout Ember React Vue
@spring_io #springio17
GitHub Star Growth
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>
Hello World with Angularimport { 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 { }
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);
Angular CLI
Angular CLI
Get Started with Angular
Angular QuickStart
https://angular.io/docs/ts/latest/quickstart.html
Angular Seed
https://github.com/mgechev/angular-seed
Angular Seed Advanced
https://github.com/NathanWalker/angular-seed-advanced
Demo: Build an Angular Clientexport 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) ) } }
@spring_io #springio17
Progressive Web Apps
@spring_io #springio17
JHipster jhipster.github.io
The JHipster Mini-Book
4.0 Release on Sep 22, 2017
jhipster-book.com
21-points.com
@jhipster_book
Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book
Action!
Try Spring Boot
Try Angular
Explore PWAs
Enjoy the bootiful experience!
🔐 it down with Okta!
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-ng
developer.okta.com/blog
Questions?Keep in touch!
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/oktadeveloper