Bootiful Development with Spring Boot and Angular

Kelley:  I'd like to welcome Matt Raible, who's our web developer, Java Champion and Developer Advocate at Okta. Thank you.

Matt Raible:  Thank you.

My name is Matt Raible and I'm a Java Hipster. I grew up in the backwoods of Montana, no electricity, no running water for 16 years, and I did have to walk two miles to the bus stop every day and it was uphill both ways. I have a strange obsession with Volkswagen buses and Vanagons. If you have a similar obsession, I'd love to talk to you afterwards about that problem. I do work for Okta and I work on the API products team, so we have a number of authentications standards that we support: SAML, OpenID Connect, and Oauth 2. We offer a complete identity solution out of the box, you guys know this, so it makes it very easy to get started and integrate authentication into your applications. 

One of the things I like to do is learn about my audience when I speak. How many people in here are developers. That's about 80 percent of the room. How many people are doing Java development? That's about half of the room. Anyone doing .NET? It's about the other half. Anyone doing Node? A couple of you. Anyone doing Python? Anyone doing Angular? We have about half the room. AngularJS? Angular 4 now? Anyone using Angular 4? A few of you.

This talk all started from a blog post that I wrote back in May or April. I wanted to show how to create a Spring Boot API on the back end and then have a front end that talks to it. One of the things that I'm often seeing with Java developers is that they actually package up everything in the same WAR, or JAR project, and then they deploy it that way. Most front end developers were people that were doing no development or other types of development, typically have their front end in a separate application. What I want to do is show people how to actually have that separate app and then have a separate API. The reason for that is because if you're developing a client, one of the nice things to do is take that client and point it at a staging environment, or point it at a production environment, and you can't really do that when you're packaging everything up in the same project. 

Today, I'll show you how to create these apps separately, communicate between them. Have you heard ... Is anyone using Spring Boot? Spring Boot is a project from the Spring and Pivotal Teams. One of their tag lines is 'They make a JAR instead of WAR, so make JAR, not WAR.'

Today's agenda, we'll talk about why you might use Spring Boot, and then I'll do a demo of developing Whispering Boot. Then, we'll talk about ES6 and JavaScript and TypeScript. Then, we'll talk about why you might want to use Angular, and then I'll demo developing with Angular. Then, I'll talk about progressive web apps, and J Hipster at the end.

Spring Boot has basically, in my mind, become the on-off switch for enterprise Java. You'll notice they have a nice on-off logo there. Spring basically came on the scenes in 2004 and kind of offered a better solution to Java EE than what was out there. I wrote one of the first books on Spring called "Spring Live" back in 2004, so I really got to learn a lot about the framework and use it from the beginning. 

It wasn't until 2013 or '14 when they actually created Spring Boot and it basically gave the whole framework a renaissance. It automatically configures Spring whenever possible. Before, with Spring, you would use a lot of XML and what happened was XML Hell they called it. It really resulted in tons of XML. It automatically configures Spring whenever possible. It has production ready features, such as metrics, health checks, and externalized configurations. 

The first time I actually used it on a project was at Met America. It was in 2013. Before I worked at Okta, I actually was an independent consultant. I'd have a new client every six months, traveled around, worked remotely. I was at Met America and they were using Okta. We actually had to configure things so they weren't in the JAR or in the WAR. How things worked before then was you would have a properties file and you might do some filtering on that and change the values, but basically your JAR, your WAR wasn't reproducible in all environments. You had to rebuild it for development, for production. 

Spring Boot was one of the first to make it very easy to take those properties and set them as like system properties and override them whatever is in the WAR and use it that way. That's why we used it. They were using Spring and I was like, "Well, we could use Spring Boot," and they were like, "Fine, let's try it." That's when I got started with it. There's no code generation and no requirement for XML. That's very different from Spring Roo, which came out around 2010 and it was basically a code generation framework. 

Spring Boot doesn't do any of that magic, it just basically configures things for you. If you have a starter in there, say Neo4j, it'll automatically configure Neo4j for you, you just have to have it in your class path. It offers and API that's very easy for you to configure things for your starter. For instance, we have an Okta Spring Boot starter that we just released a couple weeks ago. That integrates with Spring Security right now. We plan on adding a patchy Sheero support, but we'll actually use the same starter. They'll be conditional annotations that we can use to say, "Hey, if a patchy Sheero happens to be in the class path, then go ahead and activate that support instead of the Spring Security support."

It also embeds Tomcat, Jedi, or Undertow directly, which was very new from what a lot of the traditional Java applications have been doing. Previous to that, there was Dropwizard. Dropwizard was doing that, but it basically makes it so you can deploy your app anywhere, and you can just run the JAR and it actually starts up their server using Tomcat, Jedi, or Undertow.

To get started with Spring Boot, it's very easy. You just go to start.spring.io and you can even access it with Curl. It's basically an API, or you can hit it in a web browser, and it'll allow you to select the dependencies you wanna use. If you wanna use Spring MVC, if you wanna use JPA, if you wanna use Spring Data, if you wanna use REST repositories, or H2, or MySQL, you just select that one and you actually build your application from there.

You can basically write a Spring Boot API in very few lines of code. You'll see I eliminated the getters and setters because that's kind of verbose in Java and it never fits on a slide. Here, you can see, it's about 10 lines of code. This is a rest API that'll give me a list of blogs back, it'll allow me to post to those blogs, and put to them, and delete them. It gives all that functionality just with that repository REST resource there at the bottom.

You can also create a microservices architecture with Spring Boot and Spring Cloud. You're still developing Spring Boot apps, you'll just have like Eureka server that you'll use for discovery, and then you have these microservices behind it that talk to that Eureka server, register themselves, and then you can communicate that way and have fail over on your microservices. I wrote a post on the Okta developer blog, you'll see the link at the bottom there. You can click on that and read about that. 

One of the things that we will be doing is not only making the slides available as part of Oktane, but at the end, I'll show you where I publish mine on Speaker Deck, so they should be up later tonight or early tomorrow morning. If you use Speaker Deck to actually view the slides, you won't be able to click on the links because they capture all the mouse clicks, but you can download the PDF and then you can click on all these links, so you'll be able to learn more from there. 

You can also secure microservices architecture that Spring sets up with some tools that we've released, not only Okta and the Spring Boot starter, but we also have a project called Juicer. This is not related to Okta specifically, it's more related to Spring Security. What it's able to do is you can have a Zuul server on the front end that does your routing and does the proxying, and it will forward a JWT, a J-W-T, to your microservices. You can secure your microservices on the back and it'll trick that JWT and turn it into an actual Spring Security user object. You can lock down your back ends that way, instead of just trusting that they're behind the DMZ, so they'll be fine.

Let's get started and build a Spring Boot API real quick. What's gonna happen here is every once in a while, I'm gonna forget to mirror my displays and you guys are gonna be like, "He's talking and I don't see any code. What's he talking about?" Someone shout out if that happens. If you have any questions while I'm writing code or while I'm talking, feel free to raise your hand, and I'll be happy to answer it, and we can also do that at the end. 

We need to mirror, first of all. There is something that happens with this where my mouse quits working, and then I have to tweak some stuff, and then it works again, so bear with me for a minute. It doesn't like 1080i, it likes 1080p. We'll just minimize this stuff. There goes the mouse again. Come on, baby. Hopefully, that doesn't happen too many times.

If you go to start.spring.io, you'll see basically it gives you ... It's called Spring Initializer, but a lot of people call it start.spring.io. We could do something like com.okta.developer, and we could call it 'server'. We're gonna need Spring MVC. We're gonna need JPA, H2, and we'll go with the REST repositories and actuators. Nice for having endpoints that you can use for monitoring. I think that's good. This creates a service.zip that we can then open up, and our favorite ID, which is IntelliJ. 

How many people use the clips? How many people use IntelliJ? We can have a fight after, we've got like half and half. I used to use Eclipse a fair amount. It was the first ID that I used that actually worked well and didn't consume too much memory back in like 2001. I used to actually use HomeSite, an HTML editor, and I used to copy and paste all the imports. That was a real pain, so nice to have good IDs nowadays.

It comes with this server application, just the main application to begin with. One of the things we're gonna need to start is just an entity. Wrong one. What I'm gonna develop is I like beer, so I'm gonna develop a beer service that's gonna give me a list of beers, and then it's gonna allow me to filter that list of beers to just good beers. This is the same example that's on the blog. I'll give you another link at the end and you can work through all this on your own if you'd like. It's just got an ID and a name. It could be a blog, it could be a note, for instance. Then, we'll also need a repository.

You'll notice that I'm actually creating these classes and these interfaces in the same file for demo purposes only. Normally with Java, you'll put them in separate files, but that creates a little more tediousness because I've gotta create those files.

That's all we need. With the JP and repository, it offers, find, update, delete crud, basically create, read, update, delete, so you don't actually have to write those methods, and that's all you need to get going with that. But we don't have any data in here, so let's create a command runner, command line runner. You'll see here, we're using dependency injection from Spring4.34, which means that basically, you can use constructor injection without an auto wired annotation. As long as you're using construction injection, it'll wire it up for you.

I took these top beers from beeradvocate.com, but that's not as much fun as getting audience input. I need some beer names.

Speaker 3:  Alchemist.

Matt Raible:  Alchemist? A-L- ... Like that?

Speaker 3:  Sure.

Speaker 4:  Red Trolley.

Matt Raible:  What was it?

Speaker 4:  Red Trolley.

Matt Raible: Red Trolley. Like that? Okay.

Speaker 5:  Jack's Abby.

Matt Raible:  Jack's ... Like that? Y? My daughter's named Abbie with I-E, so that's why I did that. Anyone else? And my son's named Jack, that's funny. Come on, I need a couple more.

Speaker 6:  Bishop's Finger.

Matt Raible:  What was that?

Speaker 6:  Bishop's Finger.

Matt Raible:  Bishop's Finger?

Speaker 6: Yeah, it's a beer.

Matt Raible:  One of the things we're gonna do is we're gonna look up these beers by names from GIPHY. I'm not responsible for this one if it comes up as a funny, animated GIF. Bishop's Finger, and then one more.

Speaker 7:  Purple Haze.

Matt Raible:  Purple Haze. If you guys actually looked on GIPHY and give me a raunchy image, it's your fault, not mine.

We have data in here now and what you can do is IntelliJ offers this little run icon, so you can click that, and it'll actually show us what those beers are when it loads up. See, we have this repository find all for each and we print them out. There they are; Alchemist, Red Trolley, all those are in there.

Now, we'll go ahead and create a controller to have our good beer service. There it is, and then we'll get rid of this. These are called live templates. This is a feature of IntelliJ that allows you to prerecord a bunch of codes, and then you can have variables in there, so that's why I don't normally write Java code this fast, but it does make it convenient for demos.

We have this good beers that goes and finds all those beers, streams them, filters them, whether it's great or not. You'll notice, they took out Budweiser, Coors Light, and PBR. If you think those are good beers, then I'm sorry, I disagree with you. Now, we'll restart that.

Now, we should be able to interact with our API. I use a tool, instead of Curl, I use HTTPie. It's basically HTTP is the name of the command, and what that allows you to do is actually it does like application J is on by default, so you don't have to pass in those headers like you do with Curl. We can go HTTP, we'll go host 8080 peers. That's what the repository exposes. This will give us back a list of all the beers, and you can see it uses Hotty OS, which basically has links instead of IDs in there, so you can navigate to them, just like you do on the web with links. But if we went to good beers, we're just gonna get the list without PBR and Budweiser and Coors Light in there.

Now, back to the presentation. When you get started with something like Angular, a lot of people think it's JavaScript and what's happen is, it's now TypeScript with Angular 4. Angular 5 will probably be out next month, so that's why you're supposed to just call it Angular. There was big debate when AngularJS happened and they decided to rewrite everything. Terrible idea, by the way, because what happened was they were at the peak of their popularity and they were like, "We're really frustrated with how things work, so we're gonna rewrite everything and no backwards compatibility." The whole community was like, "Really?" 

It's happened before with like Stress to Stress 2, it's happened Tapestry to Tapestry 5, and stuff like that. It was a mistake that people had made before, and they later added support for upgrading. It was just kind of a PR snafu on the project's part, but basically, ES5 ... Let me gets some notes because then I can tell you a little more from my speaker notes. ES5 was released back in 1999. That was when IE6 came out. When IE6 came out, it was awesome for web developers. The problem was no one innovated, IE didn't innovate. Firefox and Chrome came out, but it took them quite a while, so there was this early 2000s where it was kind of frustrating to be a web developer because there wasn't any innovation going on in the browser. 

ES6 wasn't released until 2009. ES6 has classes and modules, also known as ECMAScript 2015. Then, we have ES7, which is technically ECMAScript 2016. It was finalized in June of last year. The only features it has is an exponential operator, star star, and it has support for looking into an array and seeing if it includes a certain object or a certain string. They also have what's called a decorator. It looks like an annotation in Java, but they decided to leave that out, so that's not in ES7.

What's happened is, we've used a lot of tools to make it so we can use these modern JavaScript features in older browsers in older languages. If you look at caniuse.com, at ECMAScript5, you'll see it's supported in all browsers. It came out in 2009, it should be supported in all browsers. But if you look at ES6 and classes, you'll notice it's not supported in IE, and that's because they're not developing IE anymore, they're doing Microsoft Edge and it's not supported in Opera Mini. I don't know anyone that's using Opera Mini, so not a big deal, but we've developed tools that allow us to basically take an ES6 class and make it work with ES5. TypeScript actually gives optional static typing, so this is something that's been very appealing for developers that like static typing. 

You'll notice here, this looks like a normal JavaScript functions, but it's got this colon string there where it says, "Hey this is a string type." Even though it's talking to the document body, you would need to use this in an HTML page, but this is a TypeScript compiler, you can compile that actual file. The cool thing about the TypeScript compiler is you can actually run it on .js files as well, and it'll tell you if variables are unreferenced or if you're spelling something wrong. A linter will give you that information as well. JavaScript already has types, it has number, string, [inaudible 00:18:32]. TypeScript adds additional types, like Toople, Eneum, NE, and Void. There's also interfaces and generics, so that's kind of a nice feature of TypeScript. 

What it really gives you is IntelliSense peaking and refactoring and reference look up in your ID. If you're using a nice, awesome ID like IntelliJ, then you'll get all those features. If you're using something like Eclipse, sorry. They don't have very good support for web languages. It might be getting better, I know there's like web clips out there that you could use and it's got like an Angular IDE built in. So if you are going to do TypeScript development or Angular development with Eclipse, I encourage you to look for those. It's not just about functions like you have a JavaScript, you can also do classes, just like ES6 classes. This isn't actually a TypeScript class. This is an ES6 class. The only thing that makes it into TypeScript is it has those types on it, it has those strings. If this was TypeScript, you wouldn't even have to set the local name variable to what you pass into that constructor. It actually does that for you so you can reference it with this .name. 

You'll notice that funnyname?:, that's called an Elvis operator because it kinda looks like Elvis, but it making that parameter optional. Instead of having multiple constructor with multiple arguments, use the Elvis operator to say, "Hey, this is optional. You don't have to pass this in." Then, it's got string interpolation, just like ES6 at the bottom there, where it does the two string method.

Before you can write any TypeScript or ES6, you need a tool to make your code work in older browsers that only support ES5. Node is that tool. It's basically a JavaScript run time pulled out of Chrome and made to run on the command line. A lot of people, when they think of no JS, they think of the server. You're running as an API, but Node is much more than that. It's got an NPM, which is a Node package manager, and then it's got the ability to run all these tools. If you're doing client side development today, typically, you are using Node to build your client, and then it ends up being ES5. 

In the end, you put it up on your server, but as a developer, you'll use build tools, which you never used to really have to do in JavaScript. Maybe use Gulp to minimize things or do some tasks like that, but you never really had to compile your code. Now you do, which is cool because now you can take coffee breaks more. It's funny because my TypeScript projects actually take longer to compile than my Java projects. There's some optimization to be had there.

I also recommend MVM at the bottom there. If you have to switch between Node versions, it's very easy to do with that tool. It'll allow you to use Node 6 on one project, Node 8 on another and works nicely.

In my opinion, the leading JavaScript frameworks are Angular, React, and Vue.js. This is just kind of a gut feel thing, but it's also based on traffic patterns that we saw at Storm Path and at Okta, as well as Scotch IO, where we publish a number of articles. But, it's also a guy, Eric Elliot, published this blog post in December ninth of last year. He basically said the top JavaScript frameworks and topics to learn in 2017 are React, Redox, which is a way of doing data management in React, Angular, and RxJS. RxJS is basically reactive extensions for JavaScript and allows you to basically subscribe to events, publish events, and use a reactive sort of architecture.

The cool thing about being a front end developer is you can actually open up Chrome developer tools, and you can go to medium.com and you can make articles actually stretch to fit the slides, instead of being very narrow and easy to read. I encourage you, as a web developer, as a front end developer, to use Chrome developer tools. If there's anything on the internet in a webpage, you can steal it. My wife hates that because she's a smug bug to publish all her photography and she protects it, and then I show people at conferences how to get those images.

I did a survey on indeed.com using the framework name Space JavaScript, and saw what people are hiring for. This is just last week I created this. You can see that most people are hiring for Angular, not many for Aralia. Aralia was very popular about a year ago because one of the main guys that worked on Angular left Google and went and started Aralia on his own. That's a very nice framework, but it really hasn't had a lot of pick up. You'll see that Backbone and Ember and Knockout are kind of on the low end there. There's not many people hiring for Vue, but there's a lot with React. One of the interesting things is I do this graph every couple of months and speak at various conferences, so I know what happened in May and I was able to compare the May numbers with what happened in August. I noticed that Vue doubled in the number of people hiring for jobs. All of the rest of them were down, except for Aralia and React saw like minor increases. That's very interesting. Vue is really becoming more and more popular.

Stack over full of tags, there was a 35 percent increase in the number of people asking about Angular, so that's like 25,000 questions since May, but React had a 32 percent increase, and Vue had a 43 percent increase. You can see, a lot of people are asking questions about Angular, but React and Vue are also growing rapidly.

GitHub stars, this is very interesting because most people that have a GitHub account, that allows them to give stars, are actually developers. People that aren't developers typically don't have a GitHub account. You can see here, React and Vue has the most attention from developers. You can see the growth here of the various frameworks. I realize it's kinda hard to read that small print at the top, but the ones you really need to car about is Angular, React, and Vue.js. You can see that Angular's not growing as fast as the others, but still, it's a great framework. I like it. It's like picking between a Lamborghini, a Bugatti, and a Ferrari. You're still gonna have a good time.

To do Hello World with Angular, it looks simple enough. You just have to basically import the component and then that looks like an annotation, they call it a decorator. You select the HTML tag that you'll use and then you have a template or a template URL that points to an HTML file, and then that My App at the bottom will typically be in a separate file. That's not so bad, but the problem is you actually have to have a module that imports or declares that app component and boot straps that app component, and then you have to have another file that actually boot straps that module. 

Because of all that, they've created this tool called Angular CLI. It's very easy to get started with Angular CLI because it creates a bunch of files for you, so you don't have to create all of files and create all that boiler plate stuff. You'll create a new project with Angular CLI, just doing NGNU, My Cool App, then it finishes up. The reason it takes a long time to run is because it does NPM install. Has anyone used Maven or Gradle? One of the complaints about Maven or Gradle is they download the internet. NPM install downloads the internet and invites all its friends to the party. It's like millions of lines of code that end up in your project. They've started to do a better job of cashing that information and cashing those dependencies. NPM5 has support for that, as well as Yarn, which is an alternative to NPM. It is getting better.

There's a number of ways to get started with Angular. You can clone the quick start. This is a tutorial from Angular, the team itself, they recommend very early on to just clone this project and start from there. I think it actually might use Angular CLI right now, but when I first started doing Angular development, which was like a year and a half ago, Angular 2 development, their quick start was like 10 pages long, and you would have to create like six files. It was very tedious and not really 'Hello world'. It's gotten a lot better. 

There's also Angular Seed, and what you'll do with a lot of Seed projects is you just clone the project on GitHub and then you run it. Its got some basic features in there, for instance, Angular Seed provides i18n, internationalization, full docker support if you wanted that for development and production. Also, Angular mobile tool kit, and then there's also an Angular Seed advanced, which does even more. It's got again, internationalization, but it's also got like angulartics for doing stats and analytics. It's got native script support, so if you wanted to create an actual mobile app, and electron. 

Electron is a cool way of actually taking your app and bundling as an app that you can install on your desktop. If anyone's heard of GitHub desktop or Adam, those are both Electron apps. Slack is an Electron app and it takes about 50 lines of code to turn any Angular app into an Electron app. Then, you don't have to worry about various browsers. You're just Chrome and it's gonna eat all the memory up on your user CPU, but oh well. At least you don't have to worry about Firefox or Safari. That's one of the problems with Slack. Slack uses a whole lot of memory, if you've noticed in the background.

Now, I'll do a demo of building an Angular client for that beer service that we had. Again, I gotta remember to mirror. We'll create ... There goes the mouse. I gotta get it back. Come on, baby. 1080p, okay. You'll do 'clear', NGNU, we'll just call it 'client'. You'll notice here one of the handy features that I've only recently learned about is this .editor config file. What this file does is it tells certain extensions, .ts or .json, might have different ways of spacing. Two spaces versus four, you might want to use tabs versus spaces, and most IDs in Adam and other tools like that, Eclipse, will recognize that and actually form at your project accordingly. 

It's great because you can just code away and then reformat. The README just tells what version it was created with. These are those app components and that module that I showed you, where it basically just says, "Welcome to Angular." These are some environment things, so if you wanted to have a Devon prod mode, the good old index.html for a single page app, there's that main one that boot straps the module, and then there are some test configurations. It's already got testing support with Karma built in. It's already got E2E support end to end testing with protractor, and you'll notice here it created it in 39 seconds. 

I actually cheated here, I brought my own wifi because I know that wifi at conferences can be bad. When I did this yesterday, it took five minutes. When you actually do this on your own, be patient, wait a little while. That NPM install can take a while, but if you wanna get your own wifi, this AT&T MiFi device I have will do it in 39 seconds, and that's faster than my home internet, so it's pretty slick.

Now, once you're in here, you can see the end client and you can run NG serve. That's a command from Angular CLI. It'll bring it up on 4200, so you can go local host 4200. It says welcome, gives you some links to actually learn some stuff. We'll open this up in IntelliJ. We're gonna start by creating a beer service. One of the features that they have within Angular CLI is the ability to generate stuff. You do NG, you can type out generator if you want, but you just do G, you can do S for service. We'll just call it our beer service. It creates these files. I like to actually do it in a shared directory, so source, app, shared, beer. Then, move source, app, beer. I can go in here, and we can add in HTTP because we're gonna need to talk to our server using HTTP. Then, we'll have a get all method. This will return in Observable of type any.

There's some shortcuts you can use. Live templates, I showed you that I'm using some live templates to generate that Java code. There's also Angular 2 live templates that you can use and download in IntelliJ that gives you shortcuts like HTTP Get. If you type that, then it spits out all that code for you, then we can say, "Hey, we're talking to 8080," good beers. You'll notice your IntelliJ will say, "I don't understand where that map comes from," but it also doesn't know how to import it, so I created my own little shortcut for that. It's also giving red lines under this. Boy, that's a great air message, right? The type argument for type parameter T cannot be inferred from the usage. You just need to go up here and put in response. You learn that from doing this a few times.

That's our service that we can use to talk to our API. Then, we'll create a component to render and show that data, so generate, C for component, and we'll call it 'beer list'. This is a little smarter than the beer service. The beer service needs to be added as a provider here, or we'll get an error. I'm gonna do that, but you'll notice it actually automatically adds that beer list component in there, so it does a little bit of work for you. In this beer list component, we can say, "Hey, we're gonna have just a beer list here, and then we'll have this div." Again, there's NG4 shortcut, so you can do beer of beers, and then we'll just show the name for now. 

We need to wire up our component to that beer service, so private beer service. In here, when it emits, we'll go ahead and call this 'beer service get all', and we'll subscribe to the results of that. We'll go ahead and say this beers, which we're reading in that template, equals data. If there's any error, we'll just show things didn't work. We'll need a local variable for our beers, and we can type it if we want, so we can do a ray of type any. It doesn't like that guy. There we go. See what it says? Sometimes, it tells you lies on this. It's like, "Hey, you got a red line there," but I'm really not gonna do anything. We'll just take that out. I know that'll work. We're not doing any data error handling, right? Why would you? It's gonna work. 

Now, we can start it up, but the last thing we need to do is in our app component, we'll get rid of all this it has in there. We need to have that tag from the beer list. They prefix it with app, so app beer list, which you can also see in the component itself. It's right there, that's how it maps to that HTML selector. Now, we can do NG Serve, or it might be still running back here. Nope, but if you do make changes like it, it'll actually reload your browser and everything using browser sync, so that's a great tool to use to actually watch your files and if anything changes, it'll recompile them for you.

Now, we can go here and go ... Welcome to, we're so close. It's supposed to say 'Welcome to app.' You look in your console because that's what you do as a good web developer. You'll notice it says 'no provider for HTTP'. What this means is basically in our app module, we haven't imported the HTTP module, even though we're using the dependency. You gotta put a comma there, then it should restart it for me. Now we're getting at lease 'app' and were getting 'beer list', but we're not getting most of the beers. You'll see here in the console, it says 'No access control. Allow origin header.' That's because on our server, we have to allow cross origination resource request. We have to say, "Hey, port 4200 can talk to this port, and we can do things that way." So, back to our Java server. We can do that with Spring MVCs, origins, cross origin annotation, and we can say, "Hey, go ahead and allow local host 4200." Recompile that. 

There is a tool called DevTools that ships the Sprint Boot that you can use, and if you recompile the class, so if you're using Eclipse or an IntelliJ, you turn it on to say whenever I save it, recompile it, it'll actually reload your app on the fly. It won't do things like if you have new static methods, it's not that smart, but you can use Jrebel or you can just restart it. I have noticed that if you have a brand new Lenox laptop, it's actually three times faster than a Mac. If you're doing Java development, I recommend that. Now, it should be able to come back here and actually get our list of beers.

Now, for the fun part, we wanna create that GIPHY service. We'll go ahead and create a new file called GIPHYservice.ts. There it is. It talks to the GIPHY API. There's an API key that they say is okay for demos, which this is, and then we can use it in our beer list component. We can say private GIPHY service, and then down here, we can say for each beer, loop through those and go and talk to GIPHY, and get me the actual image that matches that name. Just give me the first image. That's what that service does. Then, the module. Of course, we have to import or specify it as a provider. Then, you gotta modify the template. It's not gonna work if you don't display the actual image. Going to our component here, beer.giphy URL. You ready? Moment of truth. Here we are. There's the Alchemist, there's the Red Trolley, Jack's Abby, Bishop's Finger. No dirty ones, thank goodness.

That's how to build an Angular client. One of the things you might look into is whether to do an Angular or React or anything, is progressive web apps. Progressive web apps are basically a way for your apps to work offline using a technology called service workers. What service workers do is they're able to intercept the HTTP request and actually cash that data. Basically, your last requests that were made to build your app or build your UI with that data, they could reserve that up to your UI. There's also a requirement that they should originate from a secure origin use in HTTPS. There is not excuse not to use HTTPS these days, it's just as fast as HTTP. You can get certificates from Let's Encrypt for free.

You also need a web app manifest. What the web app manifest does is it gives your browser the information to install that app. If you're on a phone, particularly Android, it'll prompt you and ask you if you want to install the app on your homepage. It looks like a normal app, even though it's a website, you click on it. If you happen to be offline, it'll actually still work, and then when it gets online, you can make it work that way. The service worker itself and that actual logic is up to you to write. You can have it be cash first or you can have it be network first. There's support in Angular CLI where you can actually install a service worker. There's an NPM project that you can install. It works really nicely, it works really well.

There's also JHipster, short for Java Hipster. Java Hipster, or JHipster, is a project that creates an application for you. It creates a Spring boot back end, it creates an Angular front end, makes all that stuff work together, work together pretty well. It also has like user management in there. It's got authentication, it's got sign in. You can choose between session authentication, Java authentication. Basically, I created a Storm Path plug in for last year, and they rewrote everything for Angular 4. I'm working on an Okta plug in right now. I hope to have that done sometime this fall. What that'll allow you to do is create a JHipster app and then run a command to install the Okta plug in, set up your authorization service, set up your open ID, client ID, and then it'll all just work.

You can also develop microservices with JHipster. Just like we talked about Spring and have that Zuul front end, and then having those microservices in the back end, JHipster supports that. You can generate all that. Even if you didn't use it for a project, it's a great learning tool. You can see how to configure things. I wrote a book on it, I liked it so much. I was doing a lot of Spring Boot development, I was doing a lot of Angular development, they kind of packaged everything together. I was like, "Hey, I want to get more gigs," so I wrote a book. This is on infoq.com, you can download it for free. I released it December 5. February 1, they released the new version, which is Angular 4, so it was up to date for about a month and a half there. I'm working on the new version. I'm about two thirds of the way done. I think that'll be done sometime in September, maybe October. You can download it again. 

I wrote an app called 21 Points on there. It allows me to track my help, just like Spring Boot. It monitors your application, I wanted to monitor my help, so that worked pretty well. I did it all with the Asciidoctor, so if you wanted to write your own infoQ mini book, they're usually around 100 pages. You can check out my project and use it. InfoQ thought it would be the most expensive book ever written because they thought they would have to take all the code and make it work in a PDF. With Asciidoctor, you can generate MOBI, PDF, and all these other outputs that work really nicely.

I encourage you to try Spring Boot, try Angular, explore progressive web apps, and enjoy the Bootiful experience. Like I said, I wrote a blog post about all this, so if you want to do the steps we did today, you could go and copy and paste all that and read it. If you want to lock it down with Okta, I wrote a new tutorial on Scotch Dio just a couple weeks ago that shows you how to use Kotlin in your Spring Boot app, and then in your Angular app, it actually uses the sign in widget that we have from Okta.

I also did a session with Josh Long, where he develops the whole back end with Spring Boot microservices and I do the front end with Angular, and then we turn it into a PWA. The same beers kind of app, but much more robust and handles fail over and all that. If you wanna watch that online, it's available. Check out the Okta developer blog. I'm usually there a couple times a week writing new tutorials and new ways to do things. If you guys want us to write about any particular technologies, let us know and we can try to put together a how-to together for you. 

If you have any questions, now is the time to ask. If you want to keep in touch, hit me up on my blog, hit me up on Twitter. There's also the OktaDev Twitter handle that you can talk to us at. I'll put this up on Speaker Deck. A lot of the code for a lot of the tutorials, Spring Boot, Angular, and React are on the Okta developer account. Any questions? In Norway, if you do this for long enough, people will raise their hand. There we go. She's gonna give you the mic, so it's on the recording.

Speaker 8:  What do you think about Dropwizard versus Spring Boot.

Matt Raible:  I think Dropwizard's still a great project, they just had their 1.0 release I think six months ago, maybe a year ago. It's similar to Aralia, where even though it's a good technology, Spring Boot has had so much momentum and so many people using it that there's a bigger ecosystem around it and there's a lot of Spring Boot starters. I still think Dropwizard is great and they kinda pioneered the whole 'put your container in your JAR or your WAR,' so I don't have anything bad to say about it. I just typically use Spring Boot.

Anyone else? 35 seconds. Alright, well thank you.