Full Stack Reactive with React and Spring WebFlux

welcome to full-stack reactive with react and spring web flicks my name is Matt Abell i had this fun drawing done of me and in ireland a few weeks ago but more importantly i am a hick from the sticks i grew up in the backwoods of montana with no electricity no running water had to walk two miles to the bus stop every day and yes it felt like it was uphill both ways this is a cabin that I was born in my sister was born in one corner I was born in the other my dad was the doctor with a hunting knife like why do you need a hunting knife well luckily he was there with it because I came out with my umbilical cord wrapped around my neck and he had the essential tool you'll notice in this picture there's a border collie sitting very still it's a rare thing his name is Sagan I was very excited when spring IO came out and they named that project Sagan I think they named it after my dog but maybe not I live in Denver Colorado with my lovely wife Trish and awesome kids Abby and Jack I also have a middle child this is Jefe 1966 21 window bus I bought him off eBay in 2004 and every I thought he was gonna be done in six months for 12 years so he went through seven different shops if you follow my blog since 2004 you probably see me write about him I'm very happy to say that he's done he's a very expensive obsession if you have a similar problem with Volkswagens I'd love to talk to you afterwards I work for a company called octa we do users as a software service acronym for that is you ass not very good you could change it to authentication as a software service not much better how many people here are octave customers got a few of you how many people are developers almost everyone so octa has a great policy ever since I joined about a year and a half ago we've started treating developers the same as customers so if you'd like to go out to lunch me buy you a beer that's all expensable pretty nice so now that you know a bit about me I'd like to know a bit more about you first of all who is not using spring boot the one guy in front how many are using spring Webb flux got a couple of you how many on spring boot - okay most of the room not a bad upgrade right it's pretty easy preferred service sign languages how many people prefer Kotlin it's about five there's one guy that's really high back there all right what about groovy it's about same amount I'm Scala anyone doing Scala - all right not for that many front-end frameworks anyone using angular okay that's about half the room react okay that's the other half or maybe it was the same anyone doing vue.js okay is about ten or fifteen what about typescript JavaScript okay it's about even so this presentation was inspired by a blog post I wrote this week because you have to do that kind of stuff when you're using javascript frameworks you have to write the presentation the night before you have to write the blog post two days before so it's all up to date might not be next week so I'm going to talk a bit about reactive programming today and then I'll introduce you to spring web flex I'll show you a demo with spring with flux building an API and allowing you to do real-time data or streaming data and then I'll show how techniques that you can use in a react app to actually consume the real-time data and then I'll secure it all and so I did practicing of the demo that I have and if I if I create all the code from scratch without talking in my room by myself 45 minutes so I have a have I kind of want to do it but I'm not going to just throw away the slides not even do slides and just do the whole thing but it's a lot of code so what I'm going to do is is the spring web flex part of it I worked with Josh long on that I'm just going to show you that code rather than creating it from scratch and then for the react part will actually create all that from scratch so reactive programming is approach to writing software that embraces asynchronous i/o it's a small idea with big changes it basically means that you can Olivia alleviate you know restrictions or inefficient resource utilization by reclaiming the resources that would normally be blocking and not allowing you to proceed as they wait for i/o activity so here's an example of a knot or a blocking system where we have a file reader and this basically sources the file using a regular file Java dot IO file it pulls results out of the source one line at a time and then it accepts a consumer down here to actually accept those payloads and get what's called when there's new data and then if you look at the asynchronous version that first of all it's much longer alright there's much more to do it's a bit more complicated so this time we're using a Java and IO file path when we create the channel we specify that we want a executor service right and that will invoke our completion Handler so you see on the top of the class there it implements the completion Handler and so since we're implementing that we have to override the completed method and if you look at that we're reading the result and then we're basically doing a similar thing we're accepting you know the bytes out of the byte buffer and then it's passed back to a consumer so it's way more complicated but at the same time it's more efficient so how do you map your java brain to asynchronous i/o and push back mechanisms and flow control and distributed systems and reactive programming the ability for the client to signal how much work it can manage is called back pressure alright to signal to the upstream client so you have back pressure hey I can't handle this load you know wait a minute and there's a good deal projects that allow you to handle this in the Java ecosystem there's verdicts there's akka streams there's our X Java that support reactive programming and the spring team has project reactor that allows you to do all this and so there's a common enough ground between all of these various frameworks that they came up with a de facto standard called the reactive streams initiative and so it basically defines four types there's a publisher which is a producer of values as they arrive and then there's a subscriber that basically consumes and you know receives notification of new values through its own next method and there's a subscription which you can connect to a publisher and then there's lastly a processor which basically implements or extends subscriber and publisher and so Spring Framework was actually released or 5.0 was released last year at this time so it's been you know a year it builds on reactor and their active stream specification and it contains this new component model called spring web flux and so one of the first things I say when I talk about spring web flux is if you're building crud apps you probably shouldn't use it and people are like why why shouldn't I use it and the truth is it might not be as performant so I'm guessing that the few of you that raised your hands that are doing spring wet flux have like really high processes that you need you know niño you need non-blocking i/o to make that better I got a good comment on reddit from one of the articles that Josh and I published last week the guy basically said that performance differences are negligible unless you're doing a lot of API calls at a scale of at least 500 requests per second so if you're not doing that much processing spring MVC is probably gonna work just fine for you but if you want more processing power I'm going to utilize your resources more take a look at spring load plots so we all know and love spring boot I like that it can be written on a slide almost as far as you know a POJO that can be persisted to a database if it wasn't for Java and all the getters and setters it would fit on a slide right but I had to comment those out of course I could use Lombok but I didn't in this example so you can see you just have a demo application you have an entity class and then you have a JPA repository that can not only persist that entity but it can also have rest endpoints that's what the repository rest resource does this is a great way to implement something that is not recommended on thoughtworks radar it's called the anemic domain model it's when you have an entity that maps directly to a database and then you expose it on the web it's great for demos though so I'd like to show you now as to how to build a spring web flex API using spring initializer so I will from time to time forget that I'm not mirrored and so if I'm talking and you actually don't see anything on the screen like shout out let me know how you're doing it wrong and then I'll remember to mirror my displays okay so that's a little small hopefully the fonts I'll bump them up and it'll it'll work here so you know what I think I'm gonna attempt to do the full everything from scratch why not alright it seems like fun so I have this script right because it's tough to remember all this but stuff especially when you get into the the react stuff so I'm gonna start by creating a brand new application and I'll just move this directory in case it fails oh you gotta have a backup so go into apps and then I have a alias called wet luck start and so if we were to look at that you can see it hit start dot spring die oh it's a starter zip endpoint and basically specifies data MongoDB reactive web flux dev tools and Lombok so if we run that it downloads a demo dot zip we can unzip that into a reactive web directory then remove demo dot zip go into your active web and open it up in IntelliJ how many people prefer Eclipse really only five how many people prefer IntelliJ everyone else what about NetBeans no he's not here how many people have to support ie11 a couple of you you know at the Belfast jug in Ireland there was a guy that had to support ie 11 and what else did he use he was the netbeans guy that's right ok so there's not much in here to begin so I look back at my steps the first thing I'm going to do is create a profile entity and so this is just you know a regular entity with with Lombok annotations a bigger font yep so we got font we got demo see if it's that big enough more okay it's pretty simple class so far right and then we have a profile repository you can see it just extends reactive MongoDB repository profile gotta be able to still spell and then lastly a data initializer so a sample data initializer and so what this guy does as you can see first of all it's only enabled on the profile profile or the demo profile so this is a way with you know it's spring boot and spring web flex that you can basically have something that's only activated when you're running that particular profile and so what happens here is we go through and we talked to our repository first of all we delete all the records right we're talking to MongoDB so this isn't h2 like things don't get deleted when we clear out our target directory so we have to delete all the data and then we're just entering in some sample profiles right a at email comm BCD and then we're going in and printing those out so at this point we should be able to start it there's something up here so no JDK specifies try it anyway oh you got to go in and like modify the Preferences or module preferences hold on well are you just using maven right so how many people type maven spring boot all day long alright bunch of you well maybe this will help so you can go into here you can say default goal spring boot run then you only have to type maven all right handy tip no oh it doesn't like the spaces how many people use spaces how many people use tabs well it's about half okay well people make more money if they use spaces you know there was a Stack Overflow survey that they actually published that I don't know why the default goals not working but usually does so if we start it up you'll notice it actually didn't put anything in the database first of all something's already running on 8080 so there's a great tool out there called F kill that you can actually specify like ports to kill and then it'll actually run it so that's F killed - CLI it's an NPM dependency that you can install so this started up if we were to hit you know there's no endpoints or anything so we can go ahead and create one first of all I'm going to create a profile service so I can have multiple controllers that talk to the same thing so profile service you can see this is talking to that profile repository it's got a flux for all a mono for singles and updates and deletes basically the difference between a flux and a mono as fluxes for you know lists or multiple pieces of information and then Amano's for a singular one and there's also this Duan success down here that I'm just going to comment out for now and then we can create a controller so this will be a profile rest controller and this guy looks very similar to what you're used to right it has a rest controller annotation it has a get mapping for the ID as a post mapping for create and there's not a lot that's very much different from what you're normally used to with spring MVC but this is actually using spring web flux you'll notice it's returning a publisher rather than you know an object that's wrapped around like a response entity and so if we are to restart first of all to run the the demo profile what you can do is you can export spring profiles active as an environment variable and now it'll it'll have that demo data in there and then so you can see it printed out there and then if we go here and we use HTTP 8080 profiles you see they're actually printed out there right but we're not really embracing the power of spring wets Lux yet so let's go ahead and create the non classic version which is to do actual handlers and endpoint configuration so I'm going to start by creating some events because what I want to do with this is I actually want to have the profiles and then when you add new profiles I want to publish that as an event and then I'm going to use WebSockets and I'm going to use server sent events to actually push those out to the browser right those are the two techniques that basically the browser can use to talk to streaming data so we'll start by basically creating a profile created event so you can see it's pretty simple it just extends application event which has always been a part of spring and then we need a publisher for that profile created event publisher this guy's a little more complicated but not much basically has an executor and on the application event it offers it up and the queue will actually take that and call next on it so once you have that done then you can create a web flex or web socket configuration and so the reason that I have this first of all I need to go into here and undo this now right because I can actually on success of creating an event I can publish that since I have that event now and then I can go in here and create WebSocket configuration so this guy is definitely more code than we've seen for most of the classes but you'll notice here first of all it's got a butyl thread executor it's got a handler mapping this is part of spring wet flux this is how you map stuff and I'll create a profile handler and a profile endpoints configuration to do not the classic spring MVC but the web flex model and then we go ahead and have a handler adapter this event publisher and this is how you basically consume the event publisher create a flux with it and then you can go and basically we get that event which is you know the ID and the name of a profile and we just return it as a JSON object you know through WebSockets so I'm going to create a profile handler so this is the web flex way of doing things right more so than spring MVC you'll notice it's just a component right it's not a controller but it basically has that get buy ID all delete by ID and it's returning Manos with a server response and then it basically writes it out specifies a content type specifies how to get it and how to read it and then we need an endpoint configuration for that so profile and point configuration you can see this takes in that handler and it's got this case insensitive request predicate so the reason I'm using that is so I can actually have profile like all uppercase right I'll lower case mix case and it'll still find the actual object so create a new class put that in there and you can see lower case you are I serve a request wrapper just a wraps a request and makes it so a confine you know that with any sort of case okay so everything should be compiling now and let's see what the next steps are so the next steps are to actually make sure that that all works still and then make sure we can hit it right and we can actually publish to it so you could do put a DAT profiles or actually post for a create and you could say like name equals Matt rabl a doctor comm and actually creates it right then you can grab that one and you could say I want to actually fix that typo and I want to do a put Oh a name right doing it wrong email so now puts it in there right you can modify it so we have a full REST API that we could even delete things if we wanted to but the cooler thing is to see how the web sockets work so and here we can create a webpage that subscribes to the web sockets so we'll call it static WS dot HTML so simple page you can see it's just using the web socket API which you don't actually need to import anything or use any fancy frameworks for just creates a new web socket to talk to that end point and then when it gets a message it actually goes ahead and says hey I got something so to simulate messages I'm going to create a script call it create that Sh I just called it create and so what it does is talks to that endpoint with curl and it goes ahead and adds a new random record right so if we were to go to our terminal here and first of all make it executable and then run it it creates you know data and so to see it we'd have to go to localhost 8080 WS and there it is right if we do another one pops up right so that's all working like that's coming through the other thing that I like to show is a server sent event so a Java class server sent event controller so this is a little different from WebSockets but it's still a cool technology so this guy you can see it subscribes to that same flux the profile created event so it takes that in in the constructor and then it calls that flux create again on the publisher and then we have a new endpoint called s SC profiles takes text event stream value that's the most important part of this without that the whole SSE serve site events doesn't really work and so then we map it and we write it out so now if we start things and the cool thing here is we can actually go HTTP 8080 profiles or SSE profiles dash s set the right one well let's see okay so that one's coming back stop it started again never know try this pretty sure that's what I did let's look at the code right alex is saying it's the rest controller hmm oh well it's pretty cool you can basically stream and when you're listening for that actually publishes your information right there so I'll switch to my backup one since I know that one works I don't know why this one isn't working but if I go to CD the apps dot back your active web and run this one and we should be able to stream that information hmm well that one worked earlier or you know it might be the the fact that it's trying to do application JSON yeah we'll get to the react part so react right the way to build react apps one of the easiest ways you got a comment you see what right but the second part is just the actual HTTP right I mean if you did this all right should still work I don't know worked earlier you gotta have one failure in your demo people don't believe it's real right it is SSE right right right well that one it won't matter because we have to have to do javascript to call it so if we were to do that like I don't know why it's just not registering well that one doesn't work I'll try a different one right I have the full like monty version here spring web flex and if this one doesn't work you'll notice I'm using a snapshot bill to spring boot I'll just blame it on that it worked yesterday well this one's got security and everything in it huh right now it's unauthorized so yeah moving along so one of the things I like to talk about whenever I talk about JavaScript and JavaScript frameworks is the various flavors of JavaScript that exists because people might not be aware how we came to have all these different ones and want es6 in the s7 and all that is so es for was basically released in 1999 with ie6 how many people were web developers in 99 alright there's a handful of you so when ie6 came out it was awesome right it was way better than anything else and then of course it stagnated and nothing came out until IE 7 which I don't know if that was much better but it took him like 10 years right es 5 wasn't released until 2009 so you'll notice that the Renaissance of like Java really started in like 2006 with jQuery and it's funny to look back and see like flex 1.0 and spring 1.0 happened like in the same month of March 2014 we're not 14 2004 and and then you know flex has already dead and spring is thriving and then we have es6 es6 actually looks a lot like Java you have classes you have modules and es7 is actually not that big a deal all it really adds is an exponential operator and the ability to look into an array and see if it includes a particular object and so there was a notion of what's called a decorator that we in Java lion call an annotation there was that for es 7 but they removed it and so that's one of the big reasons that angular if you're an angular user uses typescript because with typescript they have a bunch of syntactic sugar that allows them to have annotations or decorators on there and do you know what you'd like to do or make the code a bit cleaner so this is what typescript looks like this is an example you can see it's very similar to Java as far as prefixing a private variable with an underscore you don't have to do that that's not a convention you can of course adjust your TS lint settings to use that if you want if you're doing a constructor injection like you see here the only reason I even have this here is to show that you can do optional constructor arguments with that Elvis operator right the question mark : if you actually didn't or if you use something like this you actually don't even need the private name if you have an argument that comes into the constructor it automatically sets it as a dis variable so you can modify it or get to it that way there's also getters and setters which look a bit different from what we have in Java and Java you have get name and set name here it's actually a space between them and how it works is if you do object dot name equals that calls the setter if you do object name and you're just reading it that calls the getter and then you can see there's string interpolation and the to string method there so you can inline variables so before you can write any code in typescript you actually have to use NPM and node so many people at least I did back in the day thought that node was more for a server-side rendering and it wasn't actually something that I might use but if you're an NPM you know user you use it every day so it's very useful for building and optimizing clients and you know using frameworks like react and angular so with react it's very easy to write a hello world app I remember when I migrated from angularjs to angular 2 that whole it was about a nine-month span was very painful because they were doing release candidates and they were breaking stuff between release candidates like that's not very nice if you're gonna call it a release candidate like don't break anything right so it was very painful but at the same time you basically they had a getting started with angular guide that if you printed it out it was ten pages right and so it went from you could use angularjs and ten lines of code do you needed ten different files to actually start with I actually think that that's a good thing because what happened is the CLI is really took off angular CLI you might have used it generates those ten files for you and your react has a similar thing with create react app but the nice thing about going back to just react plain is that you can actually have an app with only a few lines of code it's not like angular doesn't require all those lines of code the one thing you might notice here is that hey there's HTML in my JavaScript when react first came out in 2014 this is very controversial they call it JSX or if you're doing typescript it's tsx but it's basically a way to have not only HTML but your components references as HTML things in your document and so if you're a Java developer and you've done servlets and you've put HTML on your servlets you're like oh not that again but really it's not so bad so definitely a lot of controversy in the beginning but now a lot of people have embraced it and it works really well so the main difference and how react works versus what you might be familiar with something like jQuery is jQuery uses like imperative code so you can see here this is basically demonstrating a feature that's on Facebook that I didn't even know about so if you get over 99 notifications your little notification icon lights on fire right so this is the logic to do it in jQuery basically says hey if it's over 99 and it doesn't have fire then add it and you know you have to do all this F else so basically it's very verbose it's a lot about managing your state and transition and it gets really hard with lots of states to actually implement that logic and it describes how you change the UI versus what react uses is declarative code so this defines the UI you want you can see it's much simpler and very easily readable one of the things you might not know is when you first hit this logic it's going to return a div with class name Bell but when that logic changes and when that data changes when that count changes it actually would do a diff and instead of returning all of this it'll just slide in that span into the top one so it's very efficient that's why it's very fast that's why it's similar to get and get you know does a diff when it sends data to the server it doesn't actually send all the files so this declarative style is much less lines of code and then you also have props and you have States so props is defines what's a component and then state define at what a component nose in react like I said create react that makes it very easy to develop react taps MPX create react tap my app that's all you need and then if you want to use typescript there's just a way of passing in a scripts version and then you say react scripts TS and so this will really give you a good overview of how to develop react apps and that's not really the point of the talk right it's how to do streaming data in react so I invite you to watch this video it's only a year oldest by Erik Vicente who used to work for Facebook does a very good job of like building an app and letting you build it along with him there's a github repo and everything and just to let you know for those of you are taking pictures of the slides I will publish on afterwards and I'll give you a link to that at the end I probably take me an hour or so after the talk to actually get them up there but you will be able to download them and see all this stuff so some solutions with react these are the basically the the five I think there was one other one that I explored so the simple way that you can do is just you keep polling an endpoint right every second and say hey is there more data is there more data on that profiles endpoint but you'll notice when I do that it actually is kind of a jarring user experience a little bit better way is to use rxjs with observables so you can subscribe and basically do that same interval stuff but it's not as bad of a jarring experience WebSockets work pretty well I did find some issues using socket IO so socket IO to connect to spring web flex I wasn't able to get that to work oh well and then service end events an event source equally well works well with just plain old WebSockets and then our socket I actually tried that and and I'll tell you about that in a minute so I'm gonna build a react client now but I do like to know if anyone has any questions so far yes so the question was are all these based on observables no only the second one rxjs you got a question sir how do I deal with edge not supporting SSE so I'm a developer advocate I don't use edge I'm aware of the beauties of being a developer advocate used to use the latest and greatest stuff right yeah the fact that edge doesn't support SSE are they adding it I don't know I haven't really followed it it's similar I would say to Safari and progressive web apps right they didn't have support for the longest time but once the community put pressure on them they actually have it in the nightly builds three years and they're not interested well one of the problems that I'll show you both WebSockets and eventsource is that there's really no standard for how to pass authorization information so I'm gonna secure this app after I build it and then to actually talk to those endpoints with an authorization header with like an access token in it it just doesn't work and so there are polyfills out there there's libraries you can use those don't work either or at least they didn't work with spring web flex they might work with you know the example that they have so let's like I didn't hear the hood of react here my god they're like Mir again okay clear clear sorry to type with like a slanted keyboard right so let's see where we are okay and apps so I have a shortcut another alias called crack tap and so what it's going to do is it's going to use MPX create react app takes whatever name I pass in and then does typescript so I can do CRA and then react up more questions alright Tommy it's a good time we do an NPM install like people that complain about may even download the internet like NPM downloads Internet and all its friends right if I did account lines of code on this project after I actually create it it's like millions will actually start that it's fun to look at so CD react app clock will just let that sit there for a while so actually I don't want to open up that one I want to open up both of them so we can go back and forth between them so I have apps I have react app and I have the react web the react web should still be running HTTP 8080 profiles oh it's that one so f kill 8080 there we are look there's even some Lisp in there six lines of code but 1.8 million lines of code right that's because JavaScript doesn't have any way of like bundling it in a binary form and sending it down right so the node modules directory is all the source it's just kind of how it works but yeah there's a lot of stuff in there only 1.2 million lines of JavaScript so if we go into reactive web start that up again first of all we'll do spring profiles active equals demo and mvn and then this react app it basically has a app dot tsx which is entry point and so if we go in here and we do our own yarn start just show you what it looks like you can see it's very simple but it doesn't like that we have a console in there I didn't do that uh-huh never seen that one before keep going Matt alright so the first thing I'm going to want to do is actually have a method that talks to my API right so we'll use react fetch and you can see so component did mount is a way that you can do that will talk to the profiles endpoint there and so in this when this actually loads it goes ahead and takes that grabs the data and sets it in a local variable called profiles so one of the things I'm going to do is just like in Java I'm going to have titrate since we have typescript so I'm going to create an interface for profile and it's going to have an ID which is a number and it's going to have an email which is a string and then we're gonna have props right these are inputs that go into your component so app props or interface app props it's just going to be empty and then interface will call this app state and this is going to have the is loading all right which is boolean and then profiles which is an array type profile all right looks pretty familiar to Java developers and then we can have our constructor here and we'll set those profiles to nothing and is loading to false and then you have to add these app props and app state and then if we can't fix this thing over here it's right it's a bad demo so I'm going to try one thing I'm going to take this and I'ma rm- our node modules and then we'll try it again with NPM so how many people use yarn we have about 20 who uses NPM instead all right we have about 30 so I switch back and forth between them I work on the J hipster project and we've had yarn as our default for about the last year and a half it's caused more problems and it's fixed so we're actually switching back to NPM default when it first came out it was great because you know what NPM didn't have it didn't have caching built-in right and so doing demos like this on stage was first of all no fun right because you would have to you know reinstall everything every time and then it added caching and so it got better and then NPM basically copied it and now they're coding to competing and hopefully this will solve the problem nope and demo gods aren't nice today okay where do we go from here we go into that the one that I have done maybe let's see doctor and try this one install it any more questions like this is the hardest part right like if you ever do a workshop it's setting up someone's machine and this is like the weird stuff that you're like how in the heck did that happen could mean my version a node it looks like you know what happens and this is why I lock down all my dependencies when I do any tutorials with NPM because what happened here is probably someone I actually released a new version of a library between 8 o'clock this morning and 11 o'clock and even though I have everything locked down like it still picked up you know a minor bump and and so if that one failed and this is like the get up version that failed - then yeah so I'll talk you through the code can't actually show you how it works sorry about that so this right here will basically you know hit that profiles endpoint and grab that data and set it locally but we're not getting the streaming data right so there's a few different techniques that I talked about one of them you can use well first of all I want to show you know this is cool but then to you know show it you got to do this react I have this shortcut here you can do profiles lists and then we grab profiles so that's how you do you know a list and iterate through it and then to get that data you can pull it out of the state so since we're setting it in the state here we can pull it out profiles and is loading and if it's loading then return true I'm actually this needs to go above here right above the return so right here and then this changes to profile and so you can see if a if there's nothing there it's loading still then it goes ahead and shows that loading screen and then down here is the profile list and then it loops through that so I'm gonna take this and this is one of the cool parts of react that I really liked when I first started working with it is you can make this into its own component called like profile list ESX and then we'll just replace like app with profile list so we replace well we don't need that we don't need the logo we can say replace the props the state the name alright that one and then we can actually get rid of this stuff get rid of this guy here reformat and then get rid of the bottom one and so now we have a profile list right it's kind of itself encapsulated there's not a whole lot more information here and and then we can go back to our app and actually undo everything and then we can just change this to profile list right and so now we haven't really polluted our app and if we wanted to do other things wherever outing and stuff like that in here we could certainly do that so we have the profile list now and the different techniques unfortunately I can't show them I mean this is what you usually do right now it's a vs code thing I mean I wish someone published right now what it was it's a maybe we could do this this might work package.json and look for well this is the done one right we want apps this one right here will try locking down the versions never know might work cuz without the demo it's kind of not fun and then lock these ones down okay try again alright nice our node I yarn again doesn't like that a package lock now it's like hey you started using NPM why any other questions okay yarn start go baby go last time then I give up nope No yeah I don't know because it's a dependency I mean we could try changing like TS lint rules like these are fun to show off but I'll just do them here and then maybe but I don't think it's going to matter because they aren't part of my project right can't read Eclair block scoped hmm yeah I'll figure it out there's a there's a tutorial out there online you can you can follow but just to show you the different techniques so the first one is to go to that profiles endpoint this actually won't work by default though because we're running react on port 3000 we're running spring web flux on 8080 so one of the things you can do is in this package JSON you can actually add a proxy and so if you're doing WebSockets you have to actually specify a WebSockets is true and then for anything else you can just pass it to localhost 8080 so this allows you to get around cross-origin resource requests and having you know the server actually spit back headers that allows you to talk to it if you're talking directly to 8080 will need to configure in web flex a you know cores configuration so it allows you to talk to it from localhost 3000 but just to look at this list and the different techniques so the first one is an interval so you can see here how this works is I just have a private interval variable of type ne and what we're going to do is we have this fetch data method that sets the state goes and talks to that goes through 3000 and then we just set a timer right so every 1 second it goes and actually grabs that what happens on the UI is there's a flicker it's grabbing new records and you'll see them when I added them but there's actually a flicker that happens so that's not a great experience when you do rxjs it's a little better this is very similar so to make this work you got to do yarn rxjs and then i'll resolve those imports but you can see it starts with an interval you can specify however many seconds you want in there and then it starts with zero so this allows you to not actually fetch the data first and then you know wait for event so you can see all those at the top here are from rxjs it's operators and it basically goes through and grabs it and then it subscribes to that observable and then sets the state when any new data comes in so this is a much smoother experience it's still very chatty right and they're still grabbing all the records but on the UI itself there's no flicker like there is with the raw JavaScript interval one and so then the other way to do it is with WebSockets so we'll take this guy out and you can do WebSocket so what happens here as you can see it still fetches you know the initial data but then it creates a web socket for the profiles and when a new profile comes in it just grabs that single one and puts it on the list so this is really the architecture you kind of want right fetch your data initially but then when new data comes in like dynamically update the list so this is always listing and it's open and that all works pretty well event source and server-side streaming is similar all right event source you'll see that this one opens up a new event source the cool thing about web sockets and event sources there's no additional libraries needed right those are just JavaScript API is that you can use and this has an on open that goes in gets the console and then when the message comes through implementing on message it goes and pushes those and adds to the profile list so when I first started doing this I actually lost two hours because I was proxying for the server-side events as well and the proxy and create react app doesn't support server-side events so once I try at 8080 it actually worked but I would encourage you to actually have this on open because that was getting called but the message wasn't coming through cuz it just didn't understand how to do the streaming stuff so the problem is once you lock all this stuff down I'm going to show you that because it's kind of cool I can do it on the react app I can't do it or on the spring-locks app you can create basically first of all you had to have spring security dependent see so this is two one oh and then and four I think just came out this week right yep - one om4 and then spring security there's all these dependencies so I just added all those so this is 2 Duo IDC and open ID connect with with spring wet flux you need the starter security you need config a lot to client and then resource server and then a lot to jose and then once you have that set up you can basically create an application Gamal and you can specify the OID C issuer so I already created an app on octa that has you know this information or created this client ID and client secret for me and then this is how you specify the issuer and basically if you have that not in there when you start it it'll redirect you it'll cause you to go to octa to actually log in and see everything so it's protecting you and the beauty is it's using all spring security stuff but since I'm using a snapshot I actually have to specify the repos down here so right for the snapshots and for milestones and that should pull that in and so now this is secure but it's only doing one type of security it's doing redirect security right so if we're talking to it from a client you don't want to hit the endpoint and redirect right because it's a client right it's not gonna see that when you're doing an AJAX request so let me just show you this 8080 profiles alright it makes me log in now and now I can see them the problem is it's not a resource server at this point it's just a redirect right so to do a resource server with OAuth you basically have to configure some things with spring MVC first or spring security first of all you have to specify a resource server and where the issuer URI is for the jot so it can it can validate those and then I also had to create a spring configuration file so it's spring configuration Java and this isn't being picked up because I haven't added as a maven project and then set up a JDK one eight so you can see how this works is basically I don't always not resolving everything well try that again package comm example demo okay that's better hey but it's basically having CSRF do a cookie based CSRF token and that's because on the react side of things we're going to want to read the cookie right and if it's HTTP only we won't be able to read it from our JavaScript client so we'll read it as one and we'll send it back in a header so that way we have CSRF protection and then you actually can't secure web sockets from what I found there is socket IO does have support for sending authorization header I couldn't get it to work with spring web flex so that's why that one's open right there then I have a lot to log in here that's the one that redirects and then there's a server here and basically what that causes it to do is it just looks for an authorization header right it grabs access token out of the authorization header make sure it's valid and then actually hydrates it from calling the user info endpoint for oid C and creates a user details object for you this is the course configuration that says hey if you're on localhost 3000 and you're talking with me on a get then I'll let you through so I can't demo that cuz reacts not working but that's how it works so I also want to mention J hipster J hipster is a project that I work on I really like it a lot because I was a consultant for 20 years and I was often doing spring boot and angular consulting and J hipster basically combined spring boot and angular now we have react support in the 5 version and makes it very easily to generate an application so when clients would hire me I'd often tell them like you can hire me and pay my nice rate or you can just use J hipster and I don't know why but they still hired me so I'm happy about that and then I would just generate the Apple J hipster and copy and paste the code no but you could like I am still to this day you know and I'm a full-time employee doctah but still like I still generate apps with J hipster and look at the code that it generates because it shows how to do a lot of this stuff so I mentioned that also because I wrote a book on it and I'm proud of it the version 5 is actually coming out in the next couple weeks it's all done it's updated just hasn't been published yet it's free it's on info queue and I had a fun time writing it because I went on the sugar detox as I was writing it and has anyone done a sugar detox alright few of you I really didn't know much about it right we ordered this this book it's called 21-day sugar detox it comes in the mail on Sunday alright and my wife's friend who's a fitness like guru had talked us into it she had a big group of people doing it and so that Monday we start and I find out that there's no beer oh man it's gonna be a long three weeks right and so after the first week my blood pressure like medication ran out and so after college I went to the doctor I was probably 20 to 23 and and my doctor said you have really high blood pressure if you don't do something about it you probably gonna have a heart attack before you're 35 so when I was 38 I finally went to the doctor and said I probably need some heart you know high blood pressure medication he gave it to me you know five years later I'm doing the sugar detox it runs out so I called the doctor I'm already in a bad mood and I'm like hey you know I need a new prescription he's like you got to come in and I have to see you again I'm like I'm not coming in so I waited till the end of the three weeks and my blood pressure was fine for like one of the first times in my life so I wrote an app to go with the J hipster book called 21 points so 21 points is a way for me to track my health just like J or just like spring boot can track its help with like actuator and the end points and everything and so how 21 points works is you can get 21 points in a week you can get three points a day you get a point if you exercise you get a point if you eat well for me that's you know no sugar and you get a point if you don't drink which is really no fun so I made it so you can have like a glass of wine and then you're fine so it's up there it's online you can register and create an account and you can also create your own info cumin ebook so I wrote it as a mini book for info queue because I just wanted to write like a hundred pages right I didn't want to write like two or three hundred pages I wasn't into it that much and I did with asciidoctor and so how info queue worked when I started writing the book was it was all Word docs right you'd write in word you'd edit in Word they create a PDF they create a mobi they create an ePub and all the different formats and so I said I wanted to do and ask you doc and they basically said well it's probably gonna be our most expensive book but we like you we'll do it anyway they thought I would give them a PDF and then they would have to do it manually and they'd have to redo stuff well with asciidoctor we were actually able to generate all the artifacts and so now I'm in charge of actually generating everything and within a half-hour of me sending it to them it can be live on the site that doesn't have to go through all that processing so it turned out to be the cheapest book that they've ever published and if you want to write your own there's a template repository there or you can clone it or if you even just want to self publish a book you could use that same template and then generate PDF and mobi and epub and all that so I invite you to try spring web flex try react maybe try it tomorrow because obviously it's broken right now oh I DC I didn't mention pwace but I think PWA is a very important progressive Web Apps progressive web apps basically allow you to have native light capabilities in your web app and it doesn't matter you know if you're using jQuery using you know angular or react it's basically just the ability to have a single page app that gets cached on a phone and so it can even work in a browser but just like you have a mobile app that will prompt you at the top to install it progressive web apps off are the same thing and with service workers you can actually have a background thread that caches the data and so you can have an offline capability within your web app so I'd encourage you to check it out there's only three requirements one is that it's over HTTPS the second is that you have service workers enabled which is just a JavaScript file usually and then the third one is you have a web app manifest that provides information about your app so when someone downloads it they know the name they know the icons and stuff like that so enjoy the experience they are fun tools to work with but as you can see when you're on the bleeding edge like bad stuff can happen so you can obviously do this same tutorial yourself Josh and I wrote a three-part series over the last week so it starts with an intro of reactive programming and spring and then he builds a full spring web flux API just like I did the difference is he's much smarter than me and he wrote tests so he has tests for all the Java code and proves like all the web sockets work via that without having to do anything manually and then obviously this as opposed to where we bring it all together with the react client I also wrote another post in case you're interested in just you know spring boots spring MVC on doing crud with react so it shows you kind of some of the patterns there that you might use learn all the things that's all the different series we did we also published a lot of posts on developer Docs I've got a concise blog follow us on Twitter all the source for this is on github and if you have any questions and you didn't ask them today you can certainly hit me up online on Twitter all my direct messages are open the presentation I'll publish on speaker deck after this like I said the code is up on github please rate this session if you have the phone app and you were able to log in I wasn't then you can actually rate sessions and then due to you know time constraints and someone else coming in here what I'm going to do is I'm going to pack up I'm happy to take questions like outside and and then we can you know gather there in the meantime a they ought to be with you you

Channel: SpringDeveloper

Views: 40,875

Rating: 4.7394638 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), cloud foundry, spring boot, spring cloud, react.js, javascript, javascript frameworks, reactive programming, reactive streams, webflux, webflux.fn, flux, mono, spring framework

Id: fiR7MWoTYjs

Length: 64min 1sec (3841 seconds)

Published: Wed Oct 03 2018