Modern web with Web Components and Java by Leif Åstrand

hi let's talk about HTML I want to put an image on my web page so I do IMG SRC or something well astro no PNG for instance save it go through browser and I have an astronaut amazing yeah yeah yeah yeah but the thing is what if I instead I mean this is a bitmap what if I want to show that the 3d model that this is rendered from what would I do then maybe I would do model viewer and then it's a gob farmstead maybe we need to close that tag and it doesn't work of course it doesn't work because the browser doesn't know anything about the model viewer we need to tell it what a model viewer is so we do not load a script script type is a module because this is modern JavaScript and it is a model viewer dot J's and now we have an astronaut again and this time well it doesn't look very fancy except that we look here that yes this is a model viewer and for instance if I now go here and add another attribute camera controls then the astronauts comes alive and now I can actually look at it from all different angles this is what we have here is a web component and that's what we're going to talk about a little bit today my name is life I work at a company named volume you might have seen our booth over there also what I do is I am architecting my way around product development in practice that means that the stuff I show you today were things that I imagined and started visioning about five years ago three years ago one year ago maybe the stuff I work on today is something that maybe next year I will be here actually telling you about it maybe in five years time we don't really know because it's software development what we're going to talk about okay we actually started a bit already with the web components we're going to talk a bit more about them then we're going to talk about what the Varden is and then we're going to combine those two so pardon and web components how does that work out so talking about those web components I showed you one example it's probably not that practical unless you really like who want to work with 3d models I can show you a much more practical example with actually on github actually let's refresh this because I think this was slowed early yesterday if I go here this is kind of the prove that web components actually do exit or like are used in real life so for instance all these like two years ago six days ago and so on those are actually also web components so for instance here time ago if I just change now it says last year here for this row if I change this one just pop in this year instead then it says yesterday and it's again kind of magic it looks like HTML the browser sees it as HTML how does this work it's really two really simple things that you just combine and then you get web components the first one is called custom elements it's a browser spec was implemented in all major browsers except edge last year and now assume an edge will get chromium be based on chromium it who also had have custom components so to see what we have here I'm going to create in my body I'm gonna add my LM and like so if you expand it this we see that yes we have a my element if I go to the chairs console I do dot constructor for the select element it says that okay this is an HTML element which means that it's just just a regular element nothing special with it it's kind of a sodium but then we can define instead of HTML element we define our own class my element extends HTML element and then well that's interesting I need to refresh because I forgot to do that after practice round so my element there again and now we do my element and now it didn't explode so what we have here is a JavaScript class we define a constructor just to log that the constructor was run connect the callback just to log that that was run disconnect that callback the same attribute change callback and then we define a static property called absurd attributes saying that the cool attribute should be observed now to actually make this used we need to do custom elements that define my home actually had it type there already my element then I say like to the browser that whenever you see an HTML element with the tag my - element then you should use this class that I just defined so when I run that we see that immediately we get log that the constructor was run we get run the log that the connector callback was run and if I now look at dollar 0 dot constructor need to select the right element now I see that yes now the Constructors are basically the class of this JavaScript element instance is now my element instead of whatever it was previously can also show here now if I as you saw we listen to the cool attribute so if I say no cool and the coolness level is extreme without typos then we now see that yes we again got a callback call with this and finally last feature it's really all there is to custom elements is that then now also if I completely remove my whole document then we also got a disconnected call back call there all these four really simple things taken together gives you lots of control you can do lots of custom stuff in the browser just by getting events when an element is created no matter how its created by the browser get events when it's attached and detached and get events when the when attributes change that's all you need to construct almost anything then the next thing shadow Dom that's the second kind of pillar of web components the point which shadow Dom's is that you can encapsulate the content of your web component so you can hide things so that CSS from outside doesn't by accident cause problems inside your component and also you can have your own internal CSS that won't in any way leak out to the outside and also the same conduit children in the dom and so on so to use this i would cheat a little bit now I need to select the body and say that body's inner HTML looks like this so what we have here is we have a span and then we have another span that is inside a div so really basic stuff and now I gonna play with this div what I'm gonna do first is I'm gonna do a touch shadow and we need to define mode open because the spec Reuters couldn't agree on what would be the default so we always need to define it when I do that I have a syntax error now when I did it spam to disappeared if you go to the elements we see that yes this div is here the span is here but we also have this shadow root and when an element has a shadow root attached then that is kind of going ahead of the regular children of that element what we can do then let's give this shadow root some content also so dollar zero shadow root inner HTML we just put a span there and now we see that yes now that span is shown and because it's now here inside the shadow root to use all these I mean so far we haven't done anything useful but to see the really useful stuff I'm gonna define some styles in head so these are global styles mmm style let's close it also so what I'm gonna do is that spans should have color blue and then also for the body I'm gonna say color red now when I apply this we see that this span the Wonder is directly in the body for that one this CSS selector matched so it's blue but then for the other one the one that's inside the shadow root the CSS selector did not match so all span should be blue but what did happen is that it inherited the color property from the body so properties are inherited through shadow roots but selectors are not matched then what we can also do is to add our own styles inside the shadow root so if I change the HTML here US soil and let's do a really simple thing let's just say again spans our font-weight:bold do I need to close this though so now again we get the opposite this span inside the shadow root is bolded but the CSS doesn't match the outside so that the span in the body is not bolded the last thing I'm going to show you about shadow root is that you can also add a new HTML element namely slot and what that means is that this span that is kind of the non shadow content of this div that now gets shown in the place of this SWAT element inside the shadow root but as you see also it's blue and it doesn't it isn't bold so again it's select CSS selectors are matched based on the global stars and not the internal ones and that's basically all there is to shadow row there are a couple of more shadow root features but that's the basics and taking these two together shadow root for encapsulation and custom element for lifecycle things you can do almost anything the trick is though you don't want to do things in this way because what I show now is really low level stuff instead you want to use for instance there are bunch of different libraries but my favorite is a little element it's done by the Google guys who actually also have been really driving force behind these custom element eye shadow roots specs what we see here is JavaScript but it's modern JavaScript as I like to call it we have something that looks like annotations they are called decorators they are not yet standardized but on a good track for that so we actually have our simple reading in this case extending knit element and then we just decorate it saying that this should this class should be exported as a custom element with with this tag name we define regular JavaScript property on it and then also a decorator for that property saying that they should be treated by hid element as a kind of magic property so let element will take care of automatically doing so that when you change the add tribute value to HTML then the proper JavaScript property value will also change and vice versa and then finally with lit element you define a render function which determine takes care of calling whenever necessary and they then give out the whatever stuff should actually be used and here you can also then run any any script inside like instead of this dot name you can do have any GIS expression there but mostly you just want to have this just get this property value so that's how you do web components then the question is how do you use them that's really easy you just use them as any HTML element if you can use a div then you can use a custom element but it gets a little bit deeper because really what you have in your application is like you have nested things inside each other so here we have like some dialog for editing something that's the kind of hold editor and then it's made up from like the form part it's made up from lots of small fields one of those fields there is is highlighted and then that inside inside inside hold that box we get to the actual native input element that the user can type type text into anything with web components is that it's up to you how you use them maybe you just want to use your own whatever JavaScript framework or some other framework for doing the kind of high-level things defining your form defining your your views and so on but then these individual small like text field components and so on those you can use as custom elements or web components but you can also actually do so that basically each of these red boxes each of them are your own defined custom element and to that you get quite good structure to your application also there is this page called custom elements everywhere comm which helps you know how you can use because with some some J's frameworks there are some gotchas which using web components you need to do some things in a slightly weird way because it interferes with how the kind of frameworks Illume components work but on that page you can find all the information on how to do things otherwise also that was all I wanted to tell about web components on their own so now let's continue with talking about Vardhan that's the company over for so a little bit of bragging or shameless plugs here sorry about that but in what you really do it that we focus on productivity many others focus on performance but we kind of I mean Google needs performance they have billions of users any time you probably don't have billions of users in your application so probably more important that you are productive than that you have absolute the best possible performance one of the reasons for that also is that we believe that in order to get great user experience UX you won't do that if you are struggling with with the basics so by giving you the developer great DX developer experience then you will be able to do what the users really want the last really fundamental thing for Vardhan is that we are a web thing but we're also a Java thing so we we kind of mix those two together and that's at least from my point of view that's a really exciting thing from from my work like how you can make those two kind of similar but still very different words actually work together when you use Vardhan you always use our web components we have our own library of about 50 different components for most of the basic needs you have like buttons and checkboxes and dialogues and data grids and all those kinds of things that you need when you big build almost any kind of application especially if it's a business applications or lots of forms lots of data and and that kind of stuff I'm gonna show a little bit about those components I'm gonna use as an example our date picker so here we have a really beautiful date picker it's really mobile-optimized so you can just re with your mouse scroll or just with your finger and a touchscreen scroll through the dates here too to pick some value and then the really cool thing with all these button elements is that they have a unified theme which users are not quite new browser feature which is CSS variables or CSS custom properties depending on how you how to look at things so what you can do with those is make it so that all these different voting components react to the same top-level properties if the browser just would let me type something there there we go so I can for instance define a LUMO border-radius necessarily 10px and now you see that all these different parts of the UI get quite heavily rounded corners if I really bump it up to 20 it gets kind of obvious already but then I can actually put it to zero and then then all the corners like for instance on this these input fields they are are really sharp angles similarly we also can I mean this bunch of different ones but another quite impactful one is LUMO primary color let's set it red and then for instance this order button gets red and this highlight gets red and so on now this blew up luckily I was done with it and if you're not happy with what its own components you can go to divide indirect through with lots of third-party components also you can find like recent example of combo box that also lets you do multiple selections so user can get a drop down and peak like that valiant that well and that value all these things that I show you are completely open-source completely free to use a patch to utilize and so no strings attacks basically we have a open source community like all in or 150,000 developers ish happily using different versions of garden to 300 contributors and github and basically all that what you would expect from a modern open source project but someone also needs to pay our salaries so we do have Pro subscriptions Prime subscription enter craft subscriptions that's about some advanced components like charting libraries support services like direct chatting with about an expert and guaranteed to get results and enterprises then more about really enterprise-e features like ten years of support for for any version of Orion and so on and then also we have a army of consultants who are really happy to help you get get things done but that's not all I wanted to talk about next up a really brief history of Arden and especially like how we have ended up using web components because that's quite interesting story everything began like 20 years ago that was by the year that the year went Tomcat was first released the year when ie 5 was a new cool thing it was the first browser with this XML HTTP thing which turned out to be Ajax with turn out to be just whatever you do the same year Vardhan founders hadn't founded voting yet but they built a health care portal and they built it in Perl and they said there has to be a better way so the next year they founded voting that's also for instance the year when Jason was invent or defined the year that the first version of spring was released so we're still really in ancient times a couple of years later first volume version using some really weird ideas XSLT so to take XML have another outer XML document that defines how to transform that XML and that gives you a web application right you have those were the days first I had a couple of years again the year after Java six the year after jquery was first released so we're getting modern but not right there then what and also switch to like hey maybe we should use these modern like javascript things instead except that no it wasn't really fun to write javascript back in those days because browsers were a real mess so instead we adapted GWT for me known as google web toolkit it lets us or anyone write java that is compiled in the java script and it also has lots of abstractions that make the browser's behave and that was a really successful model at the same time the web platform evolved seven years ago that there was the first draft for the specifications that end up as custom elements and shadow Dom that I just showed you and then just three years ago the final specifications were done and the browser started implementing those for real last year we got out what in 10 which then threw out all of that weight stuff and instead focusing only on using web components for all the kind of rendering thing so that's really using just what's built into the browser's which is really a future-proof thing and then this year finally we got also support for NPM because that's where all the cool guys publish their web components so now latest and greatest we have also makes that really easy that was in short with what in the company's about and now let's instead have a look at what about voting and web components because well as especially so there is quite much tie-in there but we're still getting to the my opinion coolest part which is you can do all that just from Java running on your server so what you really have with Arden is that you can write code like this like new vertical layout component and that contains the text field component and a button component this is what JavaFX code could look like just different names of the components or swing back in the days and so on and what you see on the screen then is obviously a text field and a button but behind the scenes in the browser these are actually the volume web components so it's a void in vertically auto body in text field a bottom button and so on this is a good start but to actually build an application you of course also need to make it come alive so you can add a click listener or whatever click listeners these are run as java on the server which means that you have direct access to all your back-end stuff if you and and you can have like your business logic there it doesn't have to be exposed as JavaScript that someone else can run and so on next thing that you need is to have different views so that everything isn't just one thing but instead split things up into different URLs showing different things so you define your any component class just pop an annotation on it and it will be made available in the browser in this case rendered inside a main layout class which probably contains your like main navigation and so on these views can have your L parameters so in this case the slash one two three any integer goes and then the framework will take care of running the set parameter method so that you get the value that the user I or that the user navigated to probably they didn't type in that URL next thing you of course need is to have get some data into those views for instance inter data grid really simple just create a grid component instance give it a simplest case just a list of items defined some columns just with callbacks like method references in this case and there you have a grid lazy loading things to the browser so even if you have like thousands of items on the server the browser only needs to download the first ten twenty depending on how big the screen in and then as the user Scrolls it down looks more and more if you have really much data you can also quite easily lazy load also from the database so instead of loading them all into into memory it just load the ones that you actually want and then callbacks to to get more as needed this really easily integrates with spring or CDI so you can inject your spring data rate repositories or whatever service as you use and and through that really easily get your data in there one final thing that is quite unique with with Vardon is the security aspects because of the way the framework controls the communication between the browser and the server and kind of has has control over all of those things it can also help you with avoiding lots of security mistakes so for instance in voiding if you just set a name field to be read-only of course if you'll be rendered as read re as read-only but also if the browser sends a message saying that hey now we change the value of this text field then the framework to see that nope this field is read-only I refuse to accept that so you don't need to add your own explicit logic for testing those kinds of things it just kind of follows automatic from the state of the component same also goes with any kind of validation of data you just define it as a server-side callback and that just gets handled automatically for you there is a small round-trip delay but in most cases that isn't a problem and this also then takes care of like showing the error message in the right place and this even works if you instead of Kalb actually just use bean validation so you just put an annotation on your class and then wladim will take care of showing the error message at the right place in the in the UI also not just a big blob that the submit button but actually in the right place how does all this work let's have a look at a really simple hello world application text field a button adding those to some kind of layout I don't show that one and then just a simple click listener that shows notification so what happens here is that when you load that page it's a servlet that wodden registers for you it sends about just really basic HTML document it doesn't contain almost anything since out the JavaScript that is kind of the client-side engine of aden browser is instructed to download all the web components that you're going to use and then it contains a JSON payload that actually renders things it instructs like what what components to do so where so what will I actually end up with is something like this then you type something into the text field click the button then void in communication layer caches that an event and sense something along these lines like saying that now the value in the text field is markers and the thing that has happened is that the button was clicked this goes out as a regular Ajax request the voiding servlet takes handles that one finds the right session finds the right instance that was created when you navigated there finds the button and caused all its click listeners this case this callback is called shows a notification and what that leads to is the response going out containing again a simple JSON payload saying that what has changed since last time is that now you should show a notification with this kind of content and that's the way it goes enough about theory I will run this up by actually building an application using this you can go to github and have a look at your or have a look at the code yourself also but I'm gonna code it for you why do you have break punch there well so right now let's zoom in a little bit like this right now we have just a starting point yet another hello world what we want to do is model we had those 3d models with the model viewer and want to use that web component integrate that with Vardon to actually browse through all the models I have turned on on my machine so to be doing going of that we start by creating a new element that small element and let's call it no one else call it the tag name that we should use for this element is model viewer and then we need to configure it so we need to set an attribute the name is s or C and then we need to give it the actual contents of all the file so what we do is a new stream resource actually let's let's create a file that actually is the file we want to show her first in the first step so it's in users my home directory models and us from out chickabee that's almost gob so now we can use this file to actually get the content this is a lambda that just needs a stream for an input stream from that file now from the astronaut and then because this is Java no because this is Java we need to catch some exceptions what isn't this compiled it wants the name thank you get name and now it complains about the thing I expected so you need to catch this this is a bit ugly but that's Java for you throw new unchecked IO exception that's always the solution and then fine stop redeploying then finally we need to get the element that is backing this vertical layout that is the whole application here so we get the element dome element that that represents and we append as a child this model viewer and now we're almost done the last thing we need to do is to also actually get the model viewer from NPM so we add an annotation MPM package and the value is the name it has an NPM which is Google slash model viewer and then we need to define a version and zero seven one is one of the latest s-- and now I had EXO on these and then actually also let's also instruct void in that it should actually load the JavaScript from this NPM package so at model Google slash model viewer like this now we're actually good to go and now this redeploys it for instance runs web packet actually produced in here here and now everything is up and running and we should hopefully have a model viewer yes but what we got here it's not good we have lots of magic strings like why should I need to know that this is the tag name and that the attribute name is SRC and so on so what you really want to do is to extract this into a reusable component class instead so a model viewer class extends just a regular void in component just to be semantically correct these annotations belong here now the hunt will matter in practice we define a tag annotation which is what is the value of the element that this should be backed by and then we can do set s or C that gets a file and that's basically the same thing that we had here already except that this is the name of the variable and this is again the element that is backing this component and finally now we can instead a new model of your component we can set the S or C of it to this astronaut now instead use a much smoother API just add a component as a child of another component so model viewer this would show exactly like the same on the screen what the code is much more very structured now what you can also do is for instance enable the attribute that I showed you previously the one about camera controls to actually be able to move things around you can for instance do that in the java constructor so get element set attribute error controls and it's a bool and attribute so we just select the true one thing we see here also is that okay now the astronaut is quite small so let's make him bigger to make him feel Oh feel the whole screen we first need to make this layout fill the whole screen so this dot set size full and then the same also for the model viewer component if I can type it set size full except that this doesn't define a set size full method but what we can do is just implement has size it's really handy mixing interface so it actually defines if I if I go there defines default method set size for which just sets the width to do 100% and height to 100% and that one just gets the element and sets the styles of it basically so now if I go to the browser now we have a big astronaut is dead next thing we want to do is to actually be able to browse all the different 3d models instead of just using so in this one all the time for that we can do data grid and actually have at least all the files from the file system so a new grid not get properties no grid it's a grid of files in this case you might actually want to encapsulate that but this is a demo so it's fine and grid set items we want to get all the items from this place as the US and also as to not get parent file list files with a filter if I'll get name and sweet GLB and now I press save against on our tree needs to redeploy group we need to add a colon or two and this is really easy we just say that it's file get name and set a header name and then let's add another column let's show the size of the file also add column so then we get a file and we do file dot length plus by its lights and a header size and then to get this on the screen now we want to show both the 3d model and the list of files so we could for instance do a split layout you split layout and then left-hand side should be the grid and right hand side is the model viewer let's make this also size full and let's make the grid size full also any graphical designer will really love me for this design and then we instead of adding the model viewer we had to split layout so now we always have a full featured model browser we're just missing one thing we need to react these clicks also to actually change what's shown so for doing that we can take the grid add a click list no not a click but an item click listener and then we get some kind of event and what you want to do is model viewer set s or C and from the event we get get no not add a selection listener of course because then we can get the first selected item this also is used for multi select so we need to be explicit or else because it's an optional or else now and then we make to actually make this also support now so if for is null then we remove the SRC attribute and then we just returned eagerly so this we have so we can select models to shoot to look at and then actually play with them also in the model viewer and we have this split layout so we can make this wide or small if you want to suit our screen size and so on things I have shown you probably not best practices but for instance shows that yes this is Java running on the server all the time even though it's fully interactive in the browser we can get things from the file system straight from a database if you want to all those kinds of things and that's really the core of how you use web components from Java with avoiding yeah so what we have learnt today web components browser standards custom element and shadow route lets you do lots of cool things you can do use them on their own you can use them with your free favorite JavaScript framework or you can use them with Vardon avoiding lets you be really productive it lets you use java and as we saw you can build anything with it a bunch of links if you're interested how to get started if your if you want to try this out on your own you can find us on github you can chat with us on twitter or on our own forum and with that we have some time for questions but before you ask I know some of you will ask will this scale to 1 billion users or 10 billion users probably not but it's fine because most applications that most people are building they have 100 users because it's just small company and it's their inventory system or something maybe it's 1,000 users maybe it's 10,000 the biggest void in application I'm aware of its big bank back of his application with like about 100,000 employees using it daily so you know it doesn't scale the same way as micro not or quercus or something but it's still very very useful any other questions so the question was is it possible to create for instance Android applications from the same Java code yes and no now adays Android is really capable there's this thing called progressive web apps so when you visit a website chrome on Android can ask like do you want to install this on the home screen and then through that you also get like offline functionality you get access to a bunch of more advanced browser api's also that regular web applications cannot use so that's that's the recommended way if you want to build mobile applications with this any other questions up there in the middle does it scale you so you can run multiple instances yes or no it scales yes but we're really relying on the HTTP session and we put quite much like depending on what you actually show on the screen maybe between 100 kilobytes and a megabyte produce or in the session that means that you cannot really do a session replication in a good way but if you sticky sessions then then that's that's the way to go basically any other questions yep Vardhan and accessibility of screen readers yes the building components we we have at least tried to do like Testament screen readers ad area attributes where needed and so on probably we haven't caught all the edge cases but we will fix those as we discover them so we we don't have any like certifications or that but in general like support is there yes yeah it has if it has been taken into account when designing the components yes anything else I don't see any more hands scream if you still have something all right we support Java version 8 and above now I think we're done thank you [Applause] [Music]

Channel: Devoxx

Views: 2,350

Rating: 4.8571429 out of 5

Keywords: DevoxxBE, DevoxxBE19

Id: 0sr9-CqbyS0

Length: 46min 31sec (2791 seconds)

Published: Wed Nov 06 2019