Building web apps in Java with Vaadin 8 (full)

hi there my name is Marcus Helberg and in this video I'm going to show you how you can build web apps in Java using Devon framework so if you are familiar with Baudin it's an Apache 2 license open source framework that has around 150,000 active developers worldwide around 40% of 1,400 companies are using baudin internally and behind spring MVC we are the number 2 a Java based web framework out there in this video I'm going to show you a few things first we're going to take a look at what it really takes to build a complex modern web application and what we mean by modern web application after that we're going to have a very quick run-through of the basics of baudin just so you can kind of follow along and then we're going to spend the bulk of the video doing hands-on development to build a actual full step web application using Devon framework so let's jump in first what do I mean by modern web applications when I'm talking about modern web applications I'm talking about apps that should first of all be fast they should be good-looking they should be able to handle big amounts of data and they should be able to support basically any kind of device or browser and not require the user to have any kind of plugins installed on their on their device so using the traditional way of building web applications there are several things that we need in order to do this first of all obviously we need something on the server that can pass this data to the client and back so we'll need some sort of breast controller on the client then we'll need some sort of template that kind of lays out everything in the browser we'll need some CSS to make it look nice and then depending on how complex the application Estill Co kind of tie all these pieces together and all this can get really complex very quickly so that's what we have on has taken it to ourselves to fight for simplicity when it comes to a web development the way we do that is by simplifying the model use for building web applications involved in everything is a component so if we want a text field and a button we instantiate a new text field and a new button every component gets laid out by layout so in the previous example these two components were inside of a horizontal layout if we change that to a vertical layout their order would change they would be stacked on top of each other instead of next to each other if we want to add any kind of user interaction to our application which you probably want to do that's very easy to do to do in Bodden the way we do that is by listening for user interaction so any kind of component in the bottom framework that user can interact with will trigger different types of events whenever those interactions happen in this case we're going to add a click listener to the button component and whenever user clicks the button we're going to add a new label to the layout with the value in the text field so if you run this you can see that I can type in hello I click the hello value gets shown and if I change the value and keep clicking the value gets updated a lot of times so when we're working with bigger applications we're not interested in dealing with data from fields just individually rather we want to tie that data bind that data to a object so in this case we have a person object just a plain Java object this could be an entity for instance so in order for us to tie this to our form that we have here we'll use a binder class of type person will then tell the binder to bind the instance fields with this particular layout what that's going to do is it's going to look at the names of our text fields and it's going to look at the fields in the person object and match those by name we can definitely configure this but this is a very simple way that you can do data binding with kind of a convention over configuration finally our button here can listen for the click event and try to write the beam if there are no validation errors and then finally show show the value in a notification so let's try this clip in a first name and a last name and press save and we can see that we have the notification they're showing person dot to string so that's actually coming from the person object itself a lot of times also in applications we need to deal with lists of a lot of data invited is something that we can do very easily so in this case we're going to build a data grid the grid gets instantiated by just creating a new instance of the grid object we're then going to define some columns on it by passing in a function reference to first name last name and email and setting captions to those columns to whatever we want it to be finally we call our service which we have Auto wired in here and get people that will just return a list of Java objects and based on that vitamin we'll be able to generate the columns that we just defined and the user can scroll through and sort all of this data a lot of times though we have much more data than we can kind of reasonably pull out of the database at once most likely the users not even going to look at all of that data and even if they do they're not going to need a hundred thousand rows at the same time so if we want to do that we can kind of keep the column definitions the same but instead of querying the database and setting the items to collection what we can do is set a data provider this takes in two lambdas one that gets in parameters for sort order offset and limit and those we can pass on to our service to kind of page the data fetching the other lambda here just returns the total count of objects in our in our database so with that data provider in place we can now give the end-user the same exact experience but from in terms of our application running we're no longer touching the entire database we're only fetching data in small pages as they are needed any page fetches will get triggered automatically as the user is scrolling along now another thing that tends to take up a lot of time when we're building web applications is making things look nice to help developers tackle that in baden we're shipping with a steam engine called valo and malo allows you to define some parameters that it uses to then build a theme that's cohesive and coherent through kind of the entire library of components that we have so in this first example we have a background color that has a lightness value of 100% if we change nothing but the lightness value to 33% you can see that the theme engine not only changed the background color to a dark gray but it also understood that we can't have a black text on a dark grey background that wouldn't be legible so it's actually going to calculate same values for all the parameters that you don't set so it's going to set the text value to a kind of light gray to give it enough contrast to be read by defining so further parameters things like border radius and bevels and shadows we can really customize the UI to look anywhere from the previous kind of web app interface to this windows like interface and anything in between so the theme engine will really allow you to customize your UI look and feel probably 95% of the way there the kind of remaining 5% of configuration or customization that you want to do in terms of your companies will go feel you can then build on top of this theme with just plain CSS or sess okay so that's pretty much the theory so to sum sum that up everything in button is a component these components get laid out I lay out you add interactions to your components by listening for events and finally you do all of this in Java so let's put this knowledge to you and try to build a full stack web application in around 30 minutes with Loddon in this video I'm going to stick to a very classical example project with to-do app and we're going to base this to-do app on a spring initializer spring initializer if you're unfamiliar with it is just a way for us to really quickly bootstrap a spring project that will include a built-in web server and a lot of configure dependencies for a bunch of technologies that we that we specify so let's jump into spring and initializer here we can keep everything as it is we're just going to declare the dependencies that we want what you will want web once Vaadin what JPA for the entity management and finally we're going to use an in-memory h2 database then finally press the generate project button here and that's going to download the zip file i've imported the pom file into my into my IntelliJ here and you can see that we have a very bare-bones maven project here so in our Java folder we only have the spring booth application stub nothing else and we have a pom file with dependencies that we defined so we have JPA and we have web and so on to the dependencies here I'm going to add dev tools which is a string boot development tool library that enables auto reloading of changes to our code so we can move a little bit faster in our in our code here so I'll turn on mavens auto import we can close this and actually get started building the application so what we don't have in this application yet is anything bottom specific we've imported the dependencies but we don't have any bottom codes so we can't run this quite yet in order to do that we need to do a couple of things we're going to first create a new class we're going to call this - DUI - the UI will extend UI from the bond package enable an application the UI class is the entry point into your application and it basically maps one to one with the browser window in order for this to get picked up by the spring boot server and get shown we're going to annotate this with a spring UI annotation button has a spring add-on that's included here that will auto configure a servlet that gets deployed based on on this UI ok so that's enough configuration let's get started with the actual coding now I'm going to break this into a lot of small steps just to kind of keep things easy to follow along you don't definitely don't need to kind of split this into so SLO methods when you're building your own applications but if we kind of take a look at the to do application that we had and mentally put that into smaller pieces well we kind of end up doing is first set up a layout then we're going to add a header then we're going to add a form that's the formula we add new tasks to our to-do list and we're going to add a to-do list that's the actual list of to dos that we have and finally we're going to add a delete button for deleting the completed items we can then use the ID to go and implement this message and get started so for the layout here we're going to use the most simple layout that we have a vertical layout so let's implement a new vertical layout we're going to save that into a field called let's call it route that's the route layout and then we're going to set the content of our UI so set the content of the browser window to this route layout so the browser window can only contain one component in our case that's going to be a vertical layout that we can then use to display several components all right so for the header we need to display the text to do so let's go ahead and add that to our route layout add component create a new label and give it the text to do simple enough now for the form it's not quite as simple so if you remember in the form we have a text field and a button next to it so if you recall from the slice a while back in order to have components displayed side by side we need to have them in a horizontal layout so what we need to do here is we need to put the text field in the button in a horizontal layout and then add that to the route layout so that we get the layout that we're looking for so let's do that so we're going to create a new horizontal layout we're going to call that form layout then we're going to create new text field we're going to call that task we're going to create a new button with the caption ad and we're going to put that into a variable so what we then need to do is just go ahead and add those to the form layout add component task ahead and then finally add form layout to our routes layout okay for the to-do list I'm going to do something a little bit different so instead of just instantiate a component here I'm going to use take advantage of the fact that we're running in a spring container and actually I'll wire in a new class so we're going to call this to do layout and obviously this is not something that exists yet so we need to create it first the to do layout itself will just extend vertical layout so if you remember the aspect that we had all the teachers are just listed on top of each other this is a common pattern when developing bond applications is that you extend any other base classes in in the bond library itself and then you give them some more specific functionality that's relevant to your application in order for this to get picked up by spring and eligible for auto wiring we need to annotate this with a spring component annotation if you're coming from a spring background and wondering why this is annotated spring component not just component that's just so that it wouldn't cause like Twitter button UI component class so it does the same thing just to avoid a naming conflict all right so let's leave that as it is right now and go back to our UI class so we have our to-do layout the only thing we need to do is just add it to our root layout well you know like that and final thing we need to do is add a button for deleting completed like that alright so if everything works now we should be able to go ahead and run this application let's go to our browser here close that out go to localhost 8080 and wait for this to start okay so you can see that we have kind of all the all the pieces that we're looking for we have the pending here we have the form here we have the delete button obviously we don't have any tests right now so that doesn't work so let's start off by 6 into layout problems make everything look nice and then continue on from there to actually build a functionality let's go back into our code here and the first thing we need to do is here in our route layout we want to have everything centered if you remember that the aspect that we're going against so we're just going to call a default component alignment to middle center like that all right so that's the first thing for the label we'll want to add a style name so that we can make it look bigger so we can call header dot add style name the velocity mention that I mentioned earlier comes built in with a bunch of ready-made style names for common use cases like this so we can just give it the style name of label h1 and that's going to make it nice and big for us for the form layout I want that to be 80% white so that so that's not from the it's not the entire width of our UI here and likewise for the to do layout we're going to make that the same width so to do layout dot set with 80% like that go ahead and build that since we have those dev tools enabled that's going to start a rebuild here and that should get deployed all right so we're making progress it doesn't look exactly the way that we wanted it to there's something really fishy going on with the form here so so if we go into the dev tools here and expand this a little bit to make it easier to read and take a look at the sexual what gets generated we can see that we have the horizontal layout here and then we have two of these divs called V slot you can see that those are two equally spaced but the end result that we're getting is not really what we want what we want to do is kind of tell the layout that this text field should get all of the space that this button doesn't need so in terms of CSS that would be very similar to flexbox in Vaadin what we use is expand ratios so instead of just adding the component to the layout like this we can actually use another API called add components and extend for tasks and then just add the other component the add components and expand will instruct the layout to give this task text field all the extra space that's available in the layouts of our case anything that the button doesn't need explicitly will be given to the to the text field we can also go ahead and fix that button so if you remember it's supposed to be kind of blue so it will add a style name and again we can use some of the built-in ones and set this to the primary button theme so the primary button seeing just kind of highlights that visually makes it more apparent to the user that this is something that they can click on also we didn't have an actual text ad there in our spec rather we had an icon so we can set an icon here to an icon in to bottom icons library and of course remove the caption here let's go ahead and build this and go back to our browser and that looks much better so now we have all the kind of pieces that we need in order to actually start building in the functionality so the first thing we need to do to actually make this working application is to create a new class called to do and to save us some typing I've already made a template for to do so to do is just a JPA entity with a string for the text and a boolean for the done nothing nothing fancy about that the other thing that we're going to do is we're going to create a to-do budget ori and that's going to be an interface extending JPA repository of type to do with a key of long and if you're unfamiliar with spring boot this is everything that we need to do provide an order for spring good to provide us with a fully functional repository that we with basic cleanup operations that we can then use to to query our database also to make it a little bit easier to work with this demo app I'm going to create a new file here called data sequel in the resources directory that just populates the database with some with some test data so let's save that let's build our application and see what we have alright so obviously nothing changed yet because we haven't taken any kind of advantage of using those new new - dues or repositories that we just created so let's go back into the to do layout that we left unimplemented earlier here we're going to first of all Auto wire in the repository - repository repo and we're also at adding a post strucked method where we can set up this class so because we're in a spring container we can't reliably use the the constructor of our class to do the setup because the to do repository wouldn't have been injected by then so we're going to make an init method and annotate that with a post construct annotation and we can actually do the initialization in here so when we init this what we want to do is kind of go to the database pull up all the to use and show them so we're going to create a new method set to dues and we're going to call it with repo dot find all use the ID again to implement this method and what we want to do here is first of all remove all components so I want to be able to call this method over and over again and if I already called it before and want to make sure that I remove any previous to do this before I add any new ones once we've done that we can call to do stuff for all or for each sorry to do and for each to do then what we want to do is just call add component with you to do layout call this to do to-do item layout and passion to do itself then what we need to do is go and create this class and we're not going to implement component here rather we're going to extend horizontal layout so here if you remember what we want is a check box with the to do text next to it so again we're going to extend the horizontal layout to build a layout that we want and we're going to do here then is create those components we need a checkbox we're going to call that done sorry I'm gonna put that into a field called done and we're going to create a new text text field we're going to put the field call text and these names now are exactly the same ones that we're using in our JP entity so that we can use that data binding trick that I showed you earlier before we do that let's just add these two components to our layout and then go ahead and build this and make sure that we are still on track okay so what we can see here is that we did get three of those layouts which means that it was able to go to the database pull up three of those two do's and create this what we still haven't done is obviously populated these with the right data from the to do and also they look a little bit weird so let's take a carrot let's take care of those things right now so first of all the text field we want to add a style name from the Velo theme again there's a text field borderless style in there so that way we can hide the border but still let the user change the text also what I want to do is the same thing that we did for the form earlier so instead of adding those done in text directly I'm going to instruct the mr. Turk the layouts how it should allocate the space between these so the done component should just get whatever space it needs and then the text field can expand and take any any excess space that's available to it so we're going to call it add components that extend with text finally just to make things look a little bit nicer we can set the default alignment to sorry I'm in the left okay they're vertically centered okay so that should take care of the look and feel part the other part then is of course to actually bind the data so for that we're going to create one of those binder classes our new binder and it's going to be of type to do dot class going to import the one from Khambhat in and save that to a variable called binder and then call binder dot bind into the fields with this and what this is going to do is look at the fields in this layout and match those to the fields in the to do object only we're going to call binder got set beam with the to do that was passed in like that let's save that build it and see where we are all right yeah so we can see we have the check boxes here populated depending on on the status and we have the text here and it's editable so that's all nice of course we don't have a way of adding new to dues yet so let's go ahead and implement that to do that we're going to go back to our UI class here and to the form part what we need to do again is to add a click listener for hooking up that functionality so we're going to call add add click listener and on a click event what we want to do is first of all we're going to need to create a new to do that uses the text from the text field so test get value and what we want to do with this to do well obviously we need to add that to the list of to do so we're going to just call 3d layout and we're just going to call add on that create a method here and what do we want to do when we're adding it to do well first of all we need to call repo to save what to do and then we need to update the UI and what this update do well basically it sets the two deuce to all the to do is that are available and that's what we did up here so we can just go ahead and refactor this into a method call update like that now in order to make this a little bit nicer what we can do is once we've actually added that to do we can call a task clear so we're going to clear the field so you can immediately start typing something new in there then we can also call trust focus which will put the focus back into that field so it's easier to just continue working obviously would be nice if it was focused from the beginning so we can go ahead and do that the final little UX tweak that I want to do is I want to add a click shortcut for the add button so this way we can hook up the Enter key to actually click the button so that if you're a very busy person with a lot of to duce you don't have to actually move your mouse to add to do so we can just do Q code to enter like that save that go back to our browser okay hello world and that works we can change something can refresh we can see that we have all our changes we have the new task here as well so what really remains here is to implement this delete completed so the way we're going to do that is we're going to this to do repository we're going to add a new method it's going to be delete by done taken up Lilliana done and this needs to run in a transaction so we're going to add a transactional annotation on this with that in place the implementation gets super simple so we're going to go into a button and add a click listener to it so you can see that we can add the click listener also in line when we're creating the button and what we want to do here is just call to do layout delete completed then go and implement this and call repo dot we write done sure so they get all the ones that have the done value true and then call update save that build go back into our browser refresh press delete completed all right so that's it for the code if you want to go in and look at the code maybe fork the code and continue on it on your own you can find my code on github under Vaadin marcos and spring good to do it also if you find any any mistakes or anything go ahead and just file issues there and all I'll try to fix them all right so at this point if you're unfamiliar with fawn and just look watch me code that you're probably wondering what the heck just happened like you're writing Java there's HTML happening in the browser and what kind of magic is going on here so in order to illustrate that let's look at a very simple example we have a text field we have a button added to layout and for the button here we add a click listener that just gets the value from the name text field and shows that in a notification so what happens when a user comes into a Vaadin application is that they're going to download an initial HTML bootstrap page that just downloads that CFS the theme that you included it's going to download a javascript kind of rendering engine if you will so we're not cross compiling your Java code into JavaScript that's getting run on the browser itself rather we're sending over a Java Script that just knows how to construct the Dom for each of the components in our library all of this if you include the entire so components is around 300k you can optimize this further if needed to speed up the first log with that in place we get the components visible and we can start working with this so I can go ahead and change my name in here press the button and what happens under the hood here is that a very small jason message gets sent over HX now this is obviously just pseudocode but what kind of happens is that first of all it figures out what changed since last time obviously the value of the text field changed so we need to send that over and there was a quick given on the button and it just kind of takes that information puts in a JSON object that sends it over then on the server the framework takes that information and it translates that's actually running this this listener in the JVM so our click listener here will get run at this is some code that's running on the server we can get the value from our text field just that was passed over from the browser and we can show notification I think that notification again will create this little JSON message saying that here are the updates to the UI since last time there's a new notification component and it should have the caption of highmarket so again we're not generating a whole HTML template that we're sending over we're not moving to a new page we're just sending a small disk of the UI what has changed since the last time that we called so we're keeping the communication super lightweight super efficient and that way we can keep the UI fast and responsive and also allow you to not have to deal with with the communication there's another really nice side benefit to us actually centralizing all the communication in the application and that is that while we're using Ajax currently as the default mechanism through which we're communicating you can very easily switch that over it's using a WebSocket matter of fact that's just a single annotation on your UI class so adding and at push annotation on your class that's going to tell a lot in that if possible set up a WebSocket connection with this client when it comes in if it doesn't support WebSockets it's going to go to a whole list of different fallback protocols in order to find something that's going to deliver the same kind of user experience to the to the end user and that's really handy if you have an application where you're with more back-end driven you have things happening on the server that you're monitoring or you have data coming in trading data or financial data or what kind of data you have maybe monitoring a factory or something the only thing to keep in mind when you're updating your von code from a separate thread is that you need to take care of blocking the bottom session fortunately there's a easy way of doing that and that's by calling the access method on the UI class so you can pass in the runnable to the exes method and that runnable is going to get run with the proper locking and synchronization taken care of obviously one of the part things that I mentioned earlier that are important when building modern web apps is the ability to work on different devices so Vaadin has a very strong support for building responsive layouts that can kind of respond to varying viewport sizes and really give good UX for any kind of device we actually have two different ways that you can accomplish that or three if you also count in CSS media queries the first one is also CSS based with the syntax that we have here you can give a width range for a specific part of your application and then define styles based on that so it's very much the same ideas for media queries just that you're able to target specific components also not just device width or height for that matter there's also a possibility for you to add a browser window resize listener tier to your page that way you can programmatically change out the actual components that you're showing to the to the client so this is something that might be really useful if you have huge changes in the UI depending on what kind of device you're working with so say if you're showing a data table for desktop users but only want to show a little summary chart for mobile users using this approach would allow you to only send over the UI code needed for that specific device at that time that way you're not sending over both implementations and only hiding or showing them based on based on the device used button comes with built in support all major browsers including ie11 we have an extensive suite of tests that get run every night against all the changes making sure that all the components continue to work in all the different browsers and operating system combos that we're supporting so that's one less thing that you need to worry about in your application development the architecture that we have where you're writing your code in Java on the server and we're essentially using the browser as a rendering engine allows us to give you a very strong security kind of foundation for your application so for instance say you have a delete button that should only be visible to admin users but not to anyone else in voting if you're if you have a conditional statement that hides that component for non admin users if somebody had they been able to record the user interaction when it had been used that it actually tried to trigger the same request for themselves button would immediately understand that if the button is not the button is not being shown right now it can accept any kind of interaction they would just deny that also there are a whole bunch of other security related good practices that are built into the framework itself that kind of take care of a lot of the things that you should be thinking of when building live apps but not necessarily always remember to do the other big benefit of using Vaadin is that you get to really take all the benefits of running on the JVM and in the Java ecosystem in general so you're able to use your favorite IDE debugging tools testing libraries locking libraries profilers you name it anything that you can run with Java will run very well with modern in general so you have the added benefit of this whole big ecosystem that's been built over the years that you can take advantage in your baden application another benefit that Diwan architecture gives us is that we've been able to also deliver a super stable API for the product so one is currently on version 8 and has been around for 16 years but in fact predates Ajax for instance by several years but due to our API having the strong level of abstraction between your code being on a fairly high level where you're dealing with things like buttons and grids and horizontal and vertical layouts we've been able to change how we implement those in the browser over time as technology progresses so we've been able to keep the browser implementation up to speed with the latest and greatest technologies while still maintaining the same API for the end user more or less that means that you can easily expect to be able to maintain about an application for several years without having to rewrite it the same way that you would most likely have to with many of the client-side technologies out there now obviously our components that even though it's super extensive can't kind of contain a solution for every single problem out there so we've built in a lot of extensibility into the framework the easiest way of accomplishing this is by going to our add-on directory this is a directory where community members from the Vaadin community have created their own add-ons UI components or helper libraries and made them available with an open-source license to anyone else so there's a good chance that you would find what you're looking for in the 700 or so add-ons available on this directory we also have some commercial add-ons that we offer and on top of the open source framework we for instance have a very fully featured charting library that you can use to visualize data in your application we have a spreadsheet library where you can actually edit an open Excel spreadsheets in your web application we also recently introduced a new drag-and-drop UI designer that can help speed up the development of your UI by giving you kind of a WYSIWYG look into the UI as its getting built so you can drag in components and you can change their attributes and captions and styles and you can see how those reflect the end results as you're going along what's really nice with the designer 2 is it's not only for laying out components but it will also show you how the changes you make to your CSS will reflect to the end result so you can easily tweak around see if those parameters and the Wallow theme parameters and get live feedback on how those are going to affect your end result so if you got interested in getting started with Vaadin head on over to our website and look at any other tutorials or other help videos that we have out there we have in addition to the spring boot starter there are tons of archetypes for maven or for popular IDs that you can use to get a project set up quickly boughten will run on pretty much any any servlet container out there and if you're using spring or Java EE you can take full advantage of those through the spring and jelly plugins that we have finally are just going to leave you with the thought that we're always there to help you so if you have any any questions with bond development or if you need training or actual professional services around building an app with line please reach out we've helped hundreds of companies in the past succeed with their bottom projects and we'd be very happy to help you too thank you and if you have any questions post them in the comments below or tweet me at Marcus Hill bridge thank you

Channel: vaadinofficial

Views: 103,324

Rating: 4.888545 out of 5

Keywords: Vaadin, web, spring boot, jpa

Id: qUBt8k4pQgQ

Length: 48min 10sec (2890 seconds)

Published: Mon Mar 13 2017