Bootiful Development with Spring Boot and React - Matt Raible

welcome this is a talk on bootiful development with spring boot and react you'll notice that little sunset emoji I don't think that does it justice this come on I change the slide coming I got a better picture I'm trying to show you a better picture go back go forward no it's gonna be tough to do it without slides well anyway so we have ourselves in a unique situation today because my flight leaves 70 minutes after the end of this talk so it's gonna be a tight connection so the reason I'm warning you now is because if you have questions I'm not going to be available at the end so ask them during the presentation because as soon as it's over grabbing my stuff I'm heading for the door so if you want to walk me out or something like that maybe we can have questions then but this is beautiful and beautiful at the same time so today I'm going to show you how to develop a spring boot API how many people already know how to develop a spring boot API and API Oh spring boot okay it's about half the room and then I'll show you how to create a react UI for it but first I'd like to introduce myself my name is matt Rabil i grew up in the backwoods of Montana with no electricity and no running water and I had to walk two miles to the bus stop every day and it seemed like it was uphill both ways for sure we used to actually have to go in my parents bedroom and here's a picture of it on the right there and and warm up the the actual cabin so we could use our Commodore 64 and play Donkey Kong so I've always been around computers it was just a weird way to get introduced to computers I was born in one corner of the cabin and my sister was born in the other one I live in Denver Colorado with my beautiful wife Trish and awesome kids Abbi and Jack and I also have a middle child which is known as a 1966 Volkswagen bus that I spent 10 years restoring and it's finally been done in the last year and so if you have a similar expensive obsession with Volkswagens like I do I'd love to talk to you probably not afterwards because of my flight but send me an email I love to chat I work for a company called octa and basically we do user management cloud 7,000 free active users a month if you want and we just announced today that we're giving away free accounts for small businesses for a year so that's kind of different from our developer account I don't know if you familiar with octo like single sign-on but that's like their main flagship product and then we provide a lot and things like that but the thing that's really cool is they actually have a pub in their San Francisco office so I'm a remote worker I work in Denver whenever I come to the office in San Francisco I work at the pub just kind of fun so we support a number of authentication standards such as a lot to open ID connect in sam'l so now I'd like to learn a little bit more about you I asked about spring boot I got about half the room how many people prefer to do their server-side development and groovy you got two guys in the back how many Kotlin fans one Java everyone else all right anyone developing with angular okay we got about five maybe ten anyone doing react development okay we've got about twenty so that's positive and anyone using view Jay is just one guy sorry anyone doing typescript keep your hand up if you like it well usually they stay up but we had a couple go down okay so this presentation was expired by a blog post I wrote last week and actually published this morning so if you'd rather go to another talk I'm sure there's much better ones than this one please just leave the room and grab that URL and then you can you know click on that and you can do everything that we're going to do today but basically it shows how to do you know the same stuff but traditionally what I've seen with Java developers is they often take their web framework especially when it's JavaScript like angular or react and bundle it into their application and then they upload a jar or upload a war or whatever and that's how they do deployment what I'm going to show you today is how the rest of the world does it and that is basically they deploy the API separately from the client and they live on two separate servers maybe the client lives on a CDN or something like that and then they do cross origin request to the server and and that's traditionally how more people are developing so we'll talk about why spring but-- I'll go through that quickly since a lot of you've already used it I'll do a quick demo with it and then we'll talk about es6 versus typescript we'll also talked about why react is really kind of taking the world by storm and then I'll do a demo with react and then introduction to progressive web apps and J hipster so I do have a number of prizes to give out and this doesn't work I was just in in Belgium in Morocco and I tried this and no one actually asked questions during the presentation so today if you don't ask questions you're gonna have the same thing where I put a bunch of prizes up here and then at the end it's a mob scene so let's not do that I have books that are wap 2.0 simplified it's like a $40 book I got like 5 of those and then I got some rock 2 t-shirts here too so if you have questions raise your hand and and I'll call on you and then you know you'll get an answer and you'll get a free price so spring boot basically I like to say it's the on-off switch of enterprise Java it makes it so easy to do java these days that it's really living up to what Oracle wants to do and that is make Java the first development language for people and they kind of took on Ruby on Rails back in the day and and did a pretty good job of really simplifying things so it automatically configures spring whenever possible it provides production ready features with actuators such as metrics and health checks no code generation no requirement for XML and it was somewhat revolutionary and that it embeds tomcat jetty or undertow now it wasn't the first one to do this drop wizard did it first but it really kind of you know changed a lot of ways that people are doing Java development so getting start with spring boot is very easy start dead spring do spring initializer you can actually download this project and install it at your company yourself if you want to actually tweak the options that you know start that spring that Iowa has and you can have your own instance and so everyone is using it I like to say the sales of spring boot is skyrocketed you can see compared to the rest of Java frameworks nettie spark Java vertex and drop wizard just doesn't quite have the tremendous growth that spring boot has and you can write a spring boot API in just a few lines of code if it wasn't for Java and our getters and setters you know this would be a full api but you know i commented out the getters and setters and to string and hash code and all that so it actually fits on a slide but you can also create a Microsoft architecture with spring boots so this is very exciting in the sense that you can have you know Netflix and no Eureka service and do Auto configuration with that and you can also have service discovery with Eureka and circuit breakers with historic sand intelligent routing with Zul and client-side load balancing with ribbon so it's very easy to develop this type of architecture as well and if you see there's a link on the bottom there that you can actually go to and read about how to build that and so all these slides I will publish at the end on speaker deck and so you will be able to download the PDF and any links that are in here you'll be able to click on in and go from there so now we'll do build a spring bootie API and one of the things I do want to warn you is I forget from time to time that that I didn't unmoor my monitor right so I might be talking and you aren't seeing anything someone shout at me or tell me hey you're doing it wrong because I do make that mistake so I'm just gonna make sure I mirror here okay and then that's we'll see if we could make that a little bit bigger okay so you can obviously go to start that spring guy oh it's one way to do it but spring an ish eliezer is also an API so you don't have to do it that way you can actually type in a command so I have an alias here call it beautiful and you can see I make an HTTP request to start our zip and then I include those dependencies so I can do that real quick and you'll see how the Wi-Fi is how this works you can see a download a demo dot zip there so I have that I can open that and then in this directory I'm going to create we'll call it spring boot react example and we'll go ahead and copy the demo into there and I like to call it server just client-server makes sense to me and then we'll go into spring boot react server and open that and IntelliJ how many people like IntelliJ most of the room what about Eclipse there's a few of you alright we got five the reason that I really like IntelliJ over eclipse and it's been a while since I used Eclipse probably like it was my first love of an ID but it's probably been 10 years and the reason for that is because I moved from doing a lot of server-side Java to doing more UI development and JavaScript and CSS and JavaScript IntelliJ just does a really good job with handling those languages and so I do believe eclipse has similar plugins that work well but it's been a while since I tried them so the indexing though the indexing and IntelliJ kind of makes me mad specially I'm doing demos but so we're going to start just by creating an entity and we'll call it beer because I like beer you'll notice one of the things that start out spring Daioh does is it disagrees with everyone else it likes tabs I like spaces so we have an entity and then we need a repository for it so we have a extends JP a repository import it and now we can have something that populates it so this command line runner takes it in that repository and then we'll print out all the ones in there but we don't have any in there so we have to add some so this is a list of beers that I got from Beer Advocate calm the reason I like to do this sometimes I do a talk with Josh long where we let the audience pick the beers but one of the things I'm going to do is I'm going to take these beer names I'm going to set them off to giffy and I'm again and it made a gift that matches that beer name so sometimes when you get audience participation you get some funny names and you get some risque gif images so I like to have the canned ones and then I know they're gonna work and I won't be embarrassed up here so if we have that we're gonna basically we can run this and it'll go ahead and insert a bunch of beers and print them out so you can do that up here with this handy little play button takes a little bit to compile good time for questions no yeah yep so it's a feature of IntelliJ where you can have live templates you can record them and you can also put parameters in them so I could be doing something where instead of beer we're talking about cars or something like that and I would just type in car instead of beer so it's pretty handy feature so it looks like I probably have something running already so go here and go kill all Java it's one of my favorite commands as well and I'll go back and start it up again okay so you can see printed them out right Kentucky bunch branched out good morning very hazy all those so now what I want to create is a good beer service that filters out like PBR and Coors Light so boot controller will call it beer controller and then you see it gets that in again and we'll go ahead and say so this basically takes all of them streams them filters if they're great or not and then takes out the ones that aren't so we can restart and then we could hit the API using this is HTTP ie so you can do 8080 and we can do good beers and I'll list the ones that we have there you can also go in here pretty cool feature spring data JPA and you can say rest or repository rest resource and then restart and it actually takes that entity name beer and makes a bunch of api's for that so there's slash beers there's you can post to it you can add new ones you can delete them and all works pretty well so you can just do HTTP or it just beers and it shows them all but it also shows them in a way that your client might not like them right it's got all these weird kind of URLs in there instead of IDs and even though this is ha tos and it works well on the client and react you know it works a little better if we just have a list of names so I forgot to ask did you on a book or a t-shirt book I'll put it here and you can grab it at your convenience okay so that's our API that works pretty well go back to the demo let me unmarry R so es6 es7 and typescript some people have confusion about what is what so I wanted to go over these for a minute first es4 was released in 1999 how many people were web developers in 1999 gonna feel yeah I've been doing it since like 94 so I was doing it before Netscape 1 da 2 even came out I've been doing the curly brackets and the angle brackets for a long time so when ie6 came out in 1999 it was pretty sweet because it was much better than what we were dealing with but then there was a stagnation where you know no one really did much in the browser space because Microsoft you know didn't update ie and then es5 wasn't released until 2009 so then when chrome came out and when Firefox came out they kind of pushed the web forward and that's why you know es5 came along and we had a lot of success with jQuery and building websites that way yes 6 is a little bit different has classes and modules it's also known as Xmas crypt 2015 and it looks a lot more like Java than JavaScript before it because before it you had to use like prototypes and stuff like that and now you can have actual classes and es7 is technically Etna Script 2016 that was finalized last June 2016 and the only features it really has our exponential operators which is a star star and array.prototype includes they had a notion of decorators in there which they look like our annotations but they actually don't exist in es6 or ES 7 they actually removed it out so using typescript you can actually have that decorator pattern of that annotation and so we'll see that today so all browsers have good support for es 5 this is can I use comm you can use this site to find out which browser to support what also has you know not just desktop but mobile as well and you can see es6 ie 11 is not going to get it because they're not doing actual maintenance on that anymore so it will never have it and Opera Mini I don't know who really uses that so there's there's plenty of browsers that support es6 well and the class support is almost at 75% and the modules are 5% so there's another feature of es6 called modules which doesn't have that much support but typescript kind of solves that problem and you don't have to worry about you know your browser whether support cs6 cs5 you can actually use typescript and then transpile it to javascript and set what level of support you want there so it basically has optional static typing so any everything you can do in es6 plus static typing so a lot of the code that you'll see today is really es6 with some you know typescript niceties on top of it so javascript already has types like number and string and boolean typescript adds additional ones like a tuple or an enum also has any and void types and it's also got interfaces and generics that you can use with typescript so the big advantage of that is tooling you can use tools like IntelliJ or like vs code or even Eclipse to actually get really good feedback you know this from being Java developers and code completion while you're developing and you can also run typescript miler on an existing JavaScript so you can actually find out when errors exist there yes yep right right but there's actually something that happened recently I think it was with ie 10 or 11 it's coming to the point where it's actually going to be against the law to use ie because of security reasons right I mean they have Microsoft edge right but but yes it happens with angular and react both that it works great when you're doing Chrome and Firefox and they try it on I in you're like right so so it might happen but there is build tools like web pack that you can have polyfills they call them that add that behavior so it'll work in I 11 and there's a ton of I 11 users out there so I don't see a problem with with using typescript in I 11 sure or book book okay I'm not gonna throw it out yet cuz that'll be tough but I'll leave it up here so this is what a class looks like it's more about just on the last slide I showed you you can have a regular function just like a normal JavaScript and you can see that greeter function has a person of type string right so that's that's definitely you know different from normal JavaScript and then the rest of it looks like regular JavaScript and then you can compile it using the TSC command and so here's a class bus with with a name and you can see the getters and setters are different from Java this actually is standard syntax for es6 where you can say bus dot name equals and that calls the setter you do bus dot name just to retrieve the value and read it and that calls together as far as the constructor is concerned that little you know question mark and colon is what they call an Elvis operator it's basically allowing that to be null so instead of having constructors where you have multiple constructors you just have optional parameters in the constructor and actually with typescript you don't even need those first five lines of code or you don't need the private name you do need the constructor but it'll set the constructor for you so that's one of the things you'll see in this in the examples especially with angular not so much with react and then at the bottom there you can see it's got string interpolation in there as long you use the backticks and then you can put variables in line and typescript 2.3 I don't know this might be tough to see but in vs code you can actually just put a comment at the top that's at sign TS - check and it'll tell you on a regular javascript file where you're missing imports and where you haven't you know done your checking of your your variables properly and where maybe they aren't initialized and stuff like that so it has those features built in so even if you aren't using typescript you can you still use its type checking to you know make things better but before you can write any to any code in typescript you actually have to use node and so a lot of people when they think of node they think of it as you know something that you're on server applications with but in the web world in the UI world of development it's much more than that it's used a lot for just building right and for installing you know various components like CSS frameworks and web pack and basically it makes your code work and older browser so nodejs is the best play to download dode and then there's this thing called MDM you'll see it on the bottom there that's a great tool for switching between node versions and works really nicely that way so in my opinion the leading JavaScript frameworks this year are angular react and view jeaious those have emerged as leaders and this is based on traffic patterns that we've seen both at storm path and at octa and on Scotch IO when we've had articles there and just sharing information with them and it's also based on a gut feel I have and so usually my gut feelings are right when I talked about Java web frameworks back in the day I always said spring MVC was pretty good and look it kind of won that battle but this other guy Eric Elliot also said the same thing last December he said you know the top JavaScript frameworks and topics to learn in 2017 are react Redux angular and rxjs and the thing I really like about being a front-end developer is you can actually grab medium posts that are squished and stretch them out so they fit on a slide so you know that's advantage of chrome developer tools and the quote from this that I think is very important is angular and react dominate and nothing else even comes close so angular and react dominate more than any of our Java web frameworks ever dominated tons of people are using them and it's you know providing significant advantages so here even more so it says more people are interested in learning react than angular and react significantly leads angular and user satisfaction so how many people in the audience have used both angular and react and keep your hands up if you prefer react notice that they all stayed up so it's one of those things that it's fun to code in angular and it works pretty well but when you code and react like there's this thing that happens where you almost have an epiphany after like a couple days of working with it where you're like oh this is actually pretty cool how it works so hopefully you'll get some of that today when we're doing some live coding but I also like to show numbers it's always fun to have graphs in your presentation yes you had a question you are you asking if it is steeper for a reactant angular well here's the difference I think for me personally as a Java developer before you know I I got into angular angularjs made a lot of sense because they had you know controllers and services and stuff like that so it was very easy for me to adapt to that and then angular came along and made it a little different but react is just a different way of thinking and I actually have a video in here I'm not going to show the video I'm just going to show you a link to it that basically teaches you react in an hour and so you can learn everything that you need to know about react and I'll attempt to do the same thing but you know this has got some spring boot in there so I don't know if it will but would you like a book or a t-shirt all right I'll leave them up here so there's a site called hop frameworks calm I didn't even know existed two like two weeks ago and it combines the github store score and Stack Overflow score so I I assume it's how many questions are on Stack Overflow and how many our github it's kind of tough to read they're the actual leading one is angularjs or actually you know asp.net is the number one like hot framework according to this and then angularjs is up there and then it's like Ruby on Rails but anyway the the hard thing to see is there's a there's a pink line in the very middle there that's react that's really like transcending the most the quickest but I also like to look at job so this is on indeed calm in the US you can see that react is catching up to how many people are hiring for angular and I think angular has an advantage of they change the name they change the framework but they just shortened the name so angularjs could show up here as well but you'll see view and polymer really not a lot of people hiring for that right now Stack Overflow tags a lot of people have problems with angular that's why they're asking questions maybe I don't know but they have had one of the biggest growth that's happened so there's an article that will point to later this is also a jQuery and angularjs you can see that they certainly peaked on Stack Overflow about 2013-2014 and angular and react have been on the rise github stars this is where I think it gets interesting because you'll notice that react and view have the most github stars and they pretty much dwarfed angular and if you look at an older one like backbone backbone and has stars it really doesn't go up and down much it kind of stays the same those are developers right no one really stars a project on github unless they have a account and only developers really create accounts so I think it says a lot for both of those frameworks say hey react in view we like them we're starring them or watching the project and if you look at star growth between angular view and react you'll see that views actually climbing but react still has a lead for the most stars so to do a hello world with react it's very easy very different from angular so angular for angular 5 the way you create hello world with that is actually like five or six different files right so it's kind of a pain to just create a hello world because you have to bootstrap a number of different things well with react it's much easier you just have a root element you give it an ID and then you react Dom render and so the biggest problem that people have with react when they first start using it is what is HTML doing in my JavaScript and so that was one of the biggest controversies that it had when it first came out but I hope to show you why that's actually works really well and it's very fast so with imperative code this is a way we used to do things with jQuery this is from an example in the video I'll show you later that basically says hey if you have more than 99 notifications on Facebook that little icon that your notification icon turns to fire I didn't know that has anyone had more than 99 notifications right so hidden feature didn't know about it but basically the old way of doing it with jQuery you would have to you know manage your transitions in state you'd have to you know do different things based on the count you remove the badge you add the badge or remove fire you has fire and it's very like verbose and you know kind of tough to do in it it describes how to change the UI and declarative code defines the UI you want so declarative is the way the react does it and basically react if say HTML so it looks much easier so the react way of doing it is you return the divs themselves and so this is a lot easier than manipulating you know state in the page and the beauty of this is it does similar to what git does where a git just has a diff of what you changed and it sends that to the server this is the same thing so if you rendered that class named Belle when the count was zero and then the count was greater than 99 it doesn't even rerender those class named Belle again it just renders that span inside the Bell so it's smart enough to know what changed and only return that part so it also allows the imperative style but more people are doing it this way where you know it's much more concise so create react app makes it super easy to get started with creating a new app you can just npm install it and then you run create react app CD into it npm start if you want to do typescript you actually specify a scripts version parameter when you create your app and they'll use typescript so one of the things that I'm going to do today is use typescript on my demo because I like typescript and also there isn't a lot of react documentation out there for people doing it so I think it's important to show that hey it's possible and it's not too difficult so this is what it looks like when you create a new app and then it actually prints out a whole bunch of information for you and says hey these are the commands you might want to use to do tests to build it or to you know eject what they call your web pack configuration so you have a bunch of new JavaScript to maintain if you want or you can just you know leave it in there like it is the thing that I really like is developers how many people read documentation we got three people four people like not many people read documentation right but if there's a readme you might actually read the documentation so create react app creates this readme file that's got all of the basic knowledge that you need about react in the actual project so that's kind of cool you don't see it unless you check it into github but you can also you know open it up locally and see it so this is the video I was talking about from eric vicente and it's an intro to react it was done earlier this year and the thing i really like about it is he has a github repository that he like demos and you can follow along and copy and paste code just like he does and actually developed the app at the same time so that's a pretty neat thing it's on Vimeo there and he's got to get a project associated with it as well and if you look at the developer blog at octa I also include a link so one of the things that's really hot these days is progressive web apps so progressive web apps allow you to actually install an app in your browser or on your desktop or on a phone it would be on your home screen and so the advantage of that versus you know just having like the Apple icon or whatever that you set to a site is they can actually work offline so the three requirements for a progressive web app has to come from HTTPS it has to load while offline and I had have a web app manifest that actually gives details about what it looks like when you install it has like a name and icon and start page and stuff like that so if you're developing web apps these are two ways to develop them yes push notifications so the question was can you do push notifications on a phone with a PWA and the answer is yes so they do have that capability of doing push notifications it's kind of like your browser though right you have to accept that you'll you'll take notifications from there and then they'll do that so it's basically a way that you know you can write web apps for the phone and and you don't have to actually package it up to court over anything so responsive web design how many people are doing that how many people are doing mobile first okay so we got like half the room on the first one we got like five or six people on the second one the difference is with responsive you make it look good on your big old monitor and then you make it look good on your little monitor and even though you have like five megabytes of HTML and JavaScript you know it works well on the phone right it looks well it might not render well or perform well but it looks good mobile first is where you do the opposite you start testing on the phone maybe use Chrome's device toolbar and actually set it to iPhone 6 and then you scale it up and I like the second one better because what I find is product managers typically will put less in the app if it starts on a phone and then when it blows up you know it can add more features or whatever but it's difficult to do versus the top way of doing it so the reason I say that is because this is a quote from alex for russell at chrome developer summit in October 2016 and he basically says we failed on mobile because three seconds on a 3G connection is what's realistic and there was a double-click report also on by Google that 53% of visits are abandoned if a mobile type site takes more than three seconds to load and that same report said the average mobile site loads in 19 seconds right that's terrible we don't see it here right I don't see it in Denver I don't see it in San Francisco so much I was over in Morocco two weeks ago and you see it right and in Belgium too I have a you know t-mobile flown and and they limit they throttle my connection to 2g once I'm overseas and basically most of the web is unusable just because it's so slow right the apps kind of work but the the web isn't and so we failed on mobile because your laptop your lovely faithful laptop is a filthy liar all right it's telling you the wrong information it's telling you that hey the network is fast you know things load fast when they really don't so the the best way to fight back is to implement the purple pattern get a slow phone get a 200-dollar unlocked Android device use Chrome's developer tools use lighthouse lighthouse as a tool to test the performance and the PWA Ness of your application and then use the dev tools network and CPU throttling so the purple pattern is push critical resources for the initial URL route so that's you know there right away render the initial route pre cached and remaining routes and then lazy load and create remaining routes on demand so I'll show you the first few things we won't really get into the lazy loading but if you want to learn more about PWA I wrote a blog post about that as well so now we'll get into building a react client so close that one so this is where it gets tricky because ah I see someone has to tell me all right because we're doing npm install on stage on conference Wi-Fi and that's always a little risky so we'll see how it goes so i'm in here and create react app and we'll call it client and i got some notes here so that you got to do scripts version equals react script yes so that creates a new react app in that client directory says installing packages might take a couple minutes usually this is under a minute could be a couple will see any questions while this creates yes so flow is from Facebook the question was why I'd use typescript instead of flow and it's very similar in the sense of its adding types to the language and I think if I was more of a pure react developer I might be using flow but I actually did angular for the last five years and so I became very familiar with typescript and comfortable there and also on the J hipster project we've decided to use typescript because we're doing a lot with angular as well so it's just my background I'm sure flow works just fine as well and a lot of people are successful with that it's kind of like moko versus jest right there's different testing frameworks as well what typically happens and what we've kind of seen in the community around react is a Facebook creates it the react communities like works for me and so they've been very successful at you know producing packages and people just using them without that much discrimination yes so the question was he's trying to decide between act react and angular which makes easier to test with the good news is both of them have testing frameworks built-in and with Jasmine I've done a lot of testing with angular works really well with react you can use Jasmine as well but they also have gest which is je est it's from Facebook and it's it's what they used to test just because it does like parallel testing and so it can be faster on their their big component models and stuff like that so they both have first-class support testing so you don't really have to worry about that that much and then as far as driving the browser you can use protractor to do a lot of that and actually have you know integration and e to e tests okay so two minutes eight seconds not too bad you can see it sails tells us to CD into the client and run yarn start so yarn is similar to NPM yarn was created by Facebook as an alternative to NPM the reason they did it is because NPM for the longest time didn't do caching so you know maven downloads the internet like NPM downloads Internet and all its friends like it's huge and if I was to run you know count lines of code on a node modules directory it might be in the millions of lines of code so this is what it looks like when you get started it just says hey edit that file and you'll be good to go so let's close this and we'll open it up in IntelliJ new window will leave our server running there so the first thing we'll do is this is you know the main react component we'll go ahead and add a component did mount this is one of the lifecycle methods you can use opponent did mount and then in there we'll just go ahead and set a state state is how you basically transfer information in the state stays within a component so we'll set the state to just is loading is true and then we'll go ahead and say fetch fetch is an API that's an alternative to xhr and so it's available in most browsers if you use can I use you'll see it's available so we can say here we'll go to that HTTP localhost 8080 good beers then we'll say then response and the hardest part about doing Java in typescript is fat arrow versus thin arrow right in Java you got the thin air on typescript to get the fat arrow so that's kind of tough to remember but then you can take it from there and do data this set state and we'll go ahead and set beers to be data and is loading to false and you have to do semicolons when you're doing typescript and then as far as the constructor that's where you want to put everything so we got a constructor will call it props we pass in props that's the default argument and then any then right here we do super then we set the default state so this state set it to beers is just an empty array and then is loading is obviously false okay so we're starting to get somewhere cleaning things up a bit and then we'll basically want to import that state so you can do you can set a constable of constant variables I will say beers and is loading and it'll set that to this day eight grab it from there and then you can basically say if is loading you'll just return right returned a paragraph that says loading like that and my notes here and then you just basically take that beer right we can get rid of this get starting here and you take beers and you say map and then you can basically pass in the beer as a beer any all right then you need the fat arrow I always forget that any that guy and then basically you have to have a key they require you have a key so key div key equals even if there's no beer ID it still requires that or it fails and then you can just say beer name so that should all work we can do something more like wrap a div around it and then we can give it like a title so is no it's working h2 beer list ok now go back to our browser is it working always stopped it so we got to do yarn start again Oh MVM use no date yarn start is loading sure okay so this is one of the weird errors that get they I like to show people because it's like what the heck so app TSX on twenty five it's saying hey it doesn't understand that and this actually comes from typescript so if you set that it fixes it so it looks like it's loading and then you look at your console and it says hey can't do cross origination request right that's because we didn't do anything in spring boot to allow that so we go back to spring boot and we say okay for this good beers let's go ahead and allow crossorigin and we'll do origins equals it'll do HTTP localhost 3000 but I'm also going to do 5,000 because that's another port that you can run it on when you do a prod build so 5,000 now will restart that now if we go back to our browser refresh now we're getting somewhere right we got those beer lists coming back for a service so we can see them but we want the gif images right to show those as well so that requires a little more work we can go back to our client so one of the problems we have right now is everything's in this main component and and we actually the way to do react development is you have everything in its own component so we can actually take this app and put it in a beer list component and then we'll just change app to beer list place it there skip that and skip that one and then place it there as well and so in here it's pretty much the same thing we had before we don't need all this wrapper stuff we can just return the beer list itself okay and then back in our app we can essentially delete the constructor now we can delete component did mount and we can even take out this stuff and right here we can change this to beer list pretty cool right so lot cleaner and you'll see it imports beer list from beer list up here it says hey you're not using logo in here so go in there and delete it now if we go back to our browser it's still all works right same as before but our codes a little cleaner now so we can also create a gif image component tsx and so this guy you'll see it extends our app component but also one of the things you can do is you can have interfaces right for both the props and for the state to pass in so this initializes a gif URL to nothing and then on component did mount it calls the giffy api this is one of the most important things you can do in this call is limit equals one because if you don't have that limit in there gives api it gives you 25 back and we're only going to grab the first one so that's you know poor performance if we do it otherwise so we use fetch again we pass in the name of the beer and then we grab the response and we basically set the state to the first URL from what's returned and then if there isn't one then you get a dancing cat image which is always fun to show because I like dancing cat see if it works because there might not be any 404 us might not work very well either well come on there we go okay so then basically you do the is loading of the the URL and I just returned an image so to actually use that in the beer list you can go back here and say be our tag and then give the image and you'll see it prompts you because it's smart and using typescript and you can pass in the beer name and then back to Firefox and it actually pulls in those images from giffy all right for each one so the other thing I wanted to show you is is this actually isn't a progressive web app right off the bat so if we go into localhost 3000 there's tools within Chrome that you can actually inspect and look at the app so the manifest tells what information it has in there is you'll see it's got some identity information for actually installing it you can click on here and Add to Home screen and nothing happens because I got to turn on some flags to make that work and then service worker service workers are actually what's used to do the caching of the network requests in the background and you'll see there's nothing registered here so to make that work you can do yarn build and the cool thing is you do yarn build and it optimizes everything for production it puts the service workers in there so you don't have to deal with like this network caching when you're developing locally and you'll see it prints out and says hey you know here's how to actually render it so you can install this yarn serve and then you can do serve - s and build and you can actually serve that directory so now it even copies it to your clipboard for you and you can go back here and say port 5,000 to paste it right in there and everything is still working right and then you can come back here and refresh it or go to 5,000 and you'll see the service workers been registered there and so there's other information right your manifest has that and you can also clear the storage so one of the problems that with doing progressive web apps is for the longest time we've developing web apps that actually work you know and we're trying not to cache things right and so single page applications broke the bat button progressive web apps break the refresh button right and so you have to be careful with that you don't want to cache too aggressively but I do want to show you a bit more about them so there's this tool called lighthouse which I've installed and you can actually run it on your application to see how you're scoring on a PWA scale so it takes a little while to run it actually does CPU throttling and network throttling as part of this so it tries to see hey how will this perform on a 3G connection and how will it perform if you have a slower CPU so it tries to make your laptop so it's not a filthy liar which is nice well it's a chrome plug-in and it's available online and now it's part of chrome developer tools as well so there's an audit tab that will show you the lighthouse report the reason I do it this way is because it blows it up bigger and uses the whole browser if you do the audit in the chrome developer tools and it's in stuck in that little window so it's it's actually built into chrome now yeah yep so lighthouse has a command line utilities as well as chrome plugins and stuff so works pretty well you can see here progressive web app we're getting three failed audits the biggest one is HTTPS right we're not on HTTPS and then it's not configured for our custom splash screen so here it says hey you don't have any icons that are at least 512 pixels so we can go and I downloaded one beforehand so this beer icon here and I can go into public and that's where the manifest is so you'll see this manifest we probably want to change it to be something like beers and name to be good beers and then we can actually take and add another icon this one will just do beer PNG 512 by 512 and we'll get a much better score now right because we have this one but really we want an even better score we want to you know have HTTPS and you know how much of a pain it is to install a local certificate with you know SSL so I think it's easier just to like deploy at a cloud foundry we could also do Heroku I have scripts for both so I'm going to go here and I'm going to say Touch Cloud Foundry dot Sh and I'll open that up and so this script what it does is it basically has a few methods for logging in and for getting the app domain and then it creates - or deletes the apps in case I forgot to delete them before the demo so it's gonna have a react line and a good beer server it deploys a server by going into that directory running clean package and then pushing the jar and you'll notice it uses random routes so it's going to have random URL for for the back end and the front end and so because of that we get the URL for the server and then in the client we go and change that right from localhost 8080 just using said and that beer list and then we are in build it and then one of the features that you can do on Cloud Foundry is have push state enabled so it always goes back to you know your single page the beginning and then it starts that and forces HTTP to true and then it grabs that URL for the client and goes and changes as a server as well right because we had that you know course setting where it said you know only allow localhost 3,000 and 5,000 and that redeploy as a server and cleaned some things up so see if that works and then we should be able to get a much better Lighthouse score because we are on HTTPS right and I don't know this might take a while so I'll kind of push that in the background we have oh it's not gonna work at all well I've done in the past it gets like a hundred percent right it gets a PWA score of 100 it looks like here it's just you know Internet's not too dependable I can try it again but it's tough to do on conference Wi-Fi but I do want to show you some other things so on the server one of the things that we have at octa is a spring boot starter for doing security yes what's that no not yet right so so the question is reacts and Redux and when would you introduce redux the interesting thing there's articles out there that say do not use redux until you have two because basically it's one of those things that is a little bit complicated and and if I was to use Redux in this you guys would be like you know why didn't he just use fetch all right there's so much simpler so I will show you an example with je hipster je hipster as we react support and we use Redux in there and so that might be a place to look at how we're doing it there but in a demo like this I just think it complicates too much so the general idea is you know try to stay away from it until you really need it and then you know go ahead and learn it and you'll probably be happy with it so back to the server I'm just going to show you a quick demo on how to add security we have we have a spring boot starter docta that integrates with spring security so we can do maven octa maven boot so octave spring boot starter 0.20 and then we also have two Spring security OAuth ships with an older version so spring a lot too we just set that to two to 0 then we enable auto import and again spaces oh and there's some properties so in application type properties whether they set it to so you have to specify the issuer and the client ID so uh knocked I went and created an open ID Connect app and gave me a client ID from that stop that restart it and so this locks down the back end and then now with the back end expects well there's one more thing I have to do enable resource server here what that does is it says hey to talk to any of these API as you actually have to have a bearer token right so you have to get a token from the client send that to the server with the request in order to talk to it and do security that way no it's not starting it shouldn't need an internet connection Oh Prague is just trying to download well we can just write code all right I won't demo it but I can show you what it looks like so then in in here you'll basically do yeah it's not gonna work because we got to add stuff so in client you do yarn ad-hoc doctor react and then you'll also need react router Don so you install those two you configure a few things you basically end up with a login button that goes and redirects to octa for login comes back then you have a bearer token that you can use and I think I have the code in here that I can show you how it looks it tooks just a little different so where is it so you can see the component did mount we go ahead and add the authorization header as a as an actual bearer token and then this uses a sink and a weight so you don't have to do the dot then so you can use those with react as well makes them more like a synchronous call and so it adds that and then it goes and populates it so because the Internet's not working so well I can't really show that so if you want to do more authentication with react not only is the the post that I talked about earlier is showing our octa react SDK but there's also a sign-in widget so if you don't want to redirect and you just want to embed like a login widget in your page this is a post that shows you how to do that but I also wanted to talk about J hipster bit so J hipster is a yeoman generator that generates a project that has a spring boot back-end and an angular front-end and for the longest time that's the only way it worked and we had angularjs support and we rose with angularjs and became very popular yeoman is basically a way of generating projects right so even though we're generating Java code and we're generating typescript everything is written in what they call ejs templates and then the parses things and puts different you know parameters in there and and the funny thing is J hipster mascot there has a spring boot tattoo and an angular tattoo so he's gonna have to get reconstructive surgery or he's gonna have to add a react tattoo back here or something like that because we do have react support now but it is experimental so if you accept all the defaults when you create a J hipster project it'll have react in there and I'll show you how to do that but one of the cool things about J hipster is not only does it create like a monolith for you with a spring boot back in and an angular front-end it can create microservices so it can generate a gateway it can it has a J hipster registry which is just spring clouds eureka service but we added a nicer UI on it and then it also can generate micro services in the backend and it can generate crud for all those so if you have an entity that's you know a blog and it has a title and you know content and a date you can generate all the code for that from front to back and the spring boot code is very small because spring boot and spring data automates a lot of that where you don't have to have a lot of code but on the front end you still have to have a lot of code so it's nice that you can just generate that boilerplate and so I'll show let's see here this is a this looks like it failed but I can show you kind of how it works in the sense that when you run yo J hipster you can see I did this ten minutes before this talk started - that's experimental that's how you actually get the react support and so it prompts you it says hey first of all your internet connection isn't great but then it says what type of application would you like to create so it prompts you if you want a gateway or micro service I chose monolithic application in this sense the base name of your application is spring one default Java package name type whatever you want and then I use Jonathon ocation jadibooti authentication it also supports session based authentication just like traditional with cookies and stuff and we also have ooofff so if you want to use key cloak with with je hipster or octo or anyone that has you know an OAuth provider you could use Google or LinkedIn or Twitter you can certainly do that as well and it's just spring security properties so the cool thing is you can switch between Kiko and ACTA just by changing environment variables and overriding which spring boot has it's got support for my sequel moriah DB Postgres it also supports MongoDB and Cassandra if you want to use those instead and use Springs data support for those production database you get to choose between you know what you want for development while you want for production hibernate second level cache and then you can see here what framework do you want to use for the client so that's where react comes in and then this didn't actually succeed so I can't run it bummer but it does provide you know a nice UI and in some default stuff that hooks into spring actuator so the spring boot actuator has information on the end points on metrics and things like that and we provide a nice UI for that I'll try it again though just to see so if you've already created an application what happens is there's this yo RC JSON that has all the answers that you had in there so once you have that you can actually just run it again and if there's a good internet then maybe it'll create it but probably not yeah so the question is are we going to upgrade to spring security five and and like angular five and all that yes there's pull requests that are currently in progress for angular 5 we're pretty close on that for spring but-- what we found is is it still milestone releases right there unlike m7 now and and we'd love to like adopt that and actually be able to go to java 9 but it's still a milestone release and we really don't want to push that on our users we like to only use stable stuff and so we use like a beta version of bootstrap right CSS but that has been like stable for six months right so in the spring boot case we're still kind of waiting for the release but there is the way that you can try it out yeah yes yep so the question was I wrote a tutorial on doing basic development with J hipster and angular will I be doing it for react most likely yes next year when it's more stable we still don't have the energy generator working with react so you can't actually do one of the things that people really like to do with J hipster so probably need to finish that first so I liked it so much I was doing a lot of work with spring boot and angular consulting and as an independent consultant at the time I was like I actually want to market myself better right not only speaking of conferences but writing books is a great way to do that so I went and said hey J hipster looks pretty cool I'm gonna start using that and writing about it so in the process of writing the book I discovered a whole bunch of bugs right and eventually became a contributor to the project so I wrote the J hipster book it's free from info queue if you want to actually buy a printed version you can but you can also download it for free and it works on Kindle it works on epub I wrote it all with asciidoctor and it was a great experience they thought it would be one of the most expensive books that they ever like helped publish and it turned out to be one of the cheapest because asciidoctor allows me to send or produce all the artifacts and just send it to him they don't have to do any work there so I wrote a sample app for it called 21 points and 21 points was an app that I wanted for my health because spring boot monitors your apps health pretty good and when I started writing the I started doing this sugar detox so is my wife's idea and it was actually her friends idea and it was like a three week sugar detox so I find out the first day of the sugar detox that there's no beer and so I'm like man this is gonna be a long three weeks but up until then I've had high blood pressure most of my life and after the first week my prescription ran out for blood pressure medication and I called my doctor and he's like he got to come in and I was like what a pain they asked him already pissed off because you know I've been doing this detox for a week I'll just wait until I'm done and so after three weeks my blood pressure was fine for one of the first times in my life and so what I discovered is sugar for me anyway really has an effect on my blood pressure so I said okay I'm gonna write this app that tracks my health and so I get a point every day you get three points a day twenty one a week you get a point if you eat well for me that's no sugar get a point if you drink well or responsibly so you know maybe a glass of wine or something like that but anything over that like you're gonna lose a point and then exercise right it's very important even just walking the dogs or something like that so I typically try to get like 15 16 points a week and I find if I get below ten I actually get sick so as a parent of kids I used to blame them when I got sick right they brought the cold home from school now I know it's my fault right I can actually look and say hey my health caused that not my kids and I also took that asciidoctor framework that I use for the book and made it into this info cube mini book project if you want to write a mini book for enfoque you they're usually around eighty or hundred pages and it's a great way to you know market yourself and learn something at the same time so I invite you the Tri spring boot if you aren't already try react try octa we actually have a great program where I can buy developers beer developers are like customers for us so if you're a developer we happen to be in the same city I'll take you out for a beer I can buy you lunch it's all expensable so explore pwace try those out and you know enjoy the butiful experience and the other thing that's happening is Kotlin right Kotlin is very popular especially at this conference and in the local Bay Area I wrote a tutorial on how to build an application on the back end with Kotlin and then the front end with angular and typescript so the and I like to show this as this is such a missed opportunity this was a graphic that one of our designers made and look at the letters in it o K T a like if you just switch them around we could have had like octa right in there right and man so close if you want another laugh go and look up what cazzo means on urban dictionary that's luckily no one did that and put any comments in but with Kotlin you can actually do 13 lines of code and create the whole API so when I just showed the Java API earlier and I said hey we had to you know take out all the getters and setters with Kotlin you don't even need the getters and setters and you can put like your annotations in the class signature you can do JSON ignore in there and you know whole API right there so that's pretty neat like I said you can do everything we did today do it yourself hopefully with a better internet connection and and it tells you a little bit more about angular I think in that second paragraph it's pretty neat to see that as an angular developer I thought angular had a huge ecosystem with a ton of you know components that you could use and they do they have you know almost 18,000 packages on NPM j/s react has 42,000 so there's a huge ecosystem around react and angular and UJS and what i would recommend is you know don't just learn one like pick up another one and learn that too just to have you know a little different mindset and I write a lot of tutorials on the octa developer blog so certainly check that out and if you have any questions keep in touch hit me up on my website hit me up on Twitter like I said I'll upload this presentation to speaker deck and the code the sample app for everything is on github so since it could be a mob scene alright with t-shirts and books I'm gonna set those out here there's a few of you that I owe them to so please people don't grab those too but I do have some time for questions right we got like three minutes left so any other questions yeah right so one of the things is would you eject and get the web pack build from create react app angular CLI has the same thing and no because it's like another thousand lines of code that I have to maintain well thanks for coming [Applause] you

Channel: SpringDeveloper

Views: 78,206

Rating: 4.9050846 out of 5

Keywords: Web Development (Interest), spring, pivotal, Web Application (Industry) Web Application Framework (Software Genre), Java (Programming Language), Spring Framework, Software Developer (Project Role), Java (Software), Weblogic, IBM WebSphere Application Server (Software), IBM WebSphere (Software), WildFly (Software), JBoss (Venture Funded Company), cloud foundry, spring boot, reactjs, react.js, javascript

Id: P6rwKHnXUJI

Length: 67min 12sec (4032 seconds)

Published: Thu Dec 14 2017

Reddit Comments

[u/berlinbrown]

Dumb question, a lot of people are using Spring Boot. I see a lot of one Controller applications with Spring Boot. With more complex applications, let's say you have 100 end points, does each end point have a separate Spring Boot instance and then how do you test that locally? Do you fire up 100 instances of spring boot?