Building Complex Apps with plain Web Components | Adam Bien (EN)

[Music] java what's about java so java we have stable apis i would say no magic java code is trivial to read also some someone saying okay this is like long and and and bloated but i like it it's easy to read we have javadoc everything is included so this is why java became popular back then now there are other languages which are similar to java back then what means you know the entire um now we even have http now it's jdk11 so we have http client with uh sse and web socket support uh works out of the box so i can just download java and go and lens once learn once never migrate this is actually this why i like java and java e and microprofile but now web components as well because i don't have to relearn crazy crazy frameworks any other day so no no accidental migrations are required and if we now switch back and forth between web components and java i would say a very similar story except uh there is one mdn mozilla developer network which uh contains all the documentation you need to understand what i do today and um and this basically is um and of course java and web components are working so this is the difference so i like both now today uh what i would like to explain you so-called unidirectional data flow so you ask me or ask me i got lots of questions about uh complex apps i would say if the if the app becomes complex what does this mean in the front end i would say we have several components which have to to interact with the with each other right this what i will say this is this this starts starting to be complex so we have like you know one input field and the other field you know listens to the changes of the input field and the table you know shows something different or calculated changes from the input field this starts which um going to be complex and without a concept it ends up being spaghetti code and there's nothing new we have the problem in swing for years so uh there uh what we did in in in swing back then there was a uh pattern i actually forgot to look it up yeah they are so share screen the uh screen sharing disappeared so this is uh the problem so now i should see the the slice so um i share this i share the the uh the um is it better no we don't see you as much okay what you see then you you can't okay now we can see your slides okay thank you so um but this was uh the other slides were irrelevant so this is my introduction so this was like um marketing you know and uh this was interesting so what i said um is um the um the javadoc and the and the web components difference so this is and now comes the first slide which is relevant and what it what i told you is that uh we have uh the idea of complex applications is like we have the input element and the input element um or input text if you type something in you would like to have you know this data somewhere else and other components listen to the changes and in sweden we had a mediator pattern not moderate mediator pattern and the mediator pattern what it did is um it was a basically a singleton where all the components you know exchange data using the mediator and surprisingly uh you can do exactly the same with web components so what i showed you right now is nothing new rather than you know 20 years old technology transferred java technology to the web okay now this was the motivation right so learning my session is 20 years old tank spot we have the idea is boundary control entity why the strange naming because it's one of the oldest patterns and uh because available everywhere i can i can actually uh draw this this icons also everywhere so it um therefore um there's less discussion with consultants architects and so forth so um the idea is we have the input text here hopefully you can see now my mouse movements and uh this events are uh are submitted or events um what what here happens is this is exactly what we did in swing before you have a text field you type something in and this text field calls a control so the control this is just a void communication so you never expect the data back it's just one direction fire and forget and this control would would for instance communicate with the back end or not but um if it has a new data it will store the data in a global singleton um and very sim similar to the mediator pattern and this uh singleton will then distribute the events to all listeners now in web this is a web component this is there are just es6 functions and this is the redux store which is a single class and for java developers very easy to explain it is a singleton which contains internally a weak hash map with the uh state and uh or even it is weak uh i'm not sure whether let's say hash map so let's say it is a hash map and um on a change and so the changes are never performed directly from the control rather than from functions called reducers which are more or less trivial the reducer gates the state and the action and decides what to do and changes within this state so how how i work with it is the main logic is inside the controls and supporting classes and the mutators they are just you know copying the data back and forth so now what happens is if the um if the uh state of the mediator or redux toolkit is changed and an event is fired or rather than all components which are interested get notified so that that's the idea here and uh because now i can say okay wait wait a second i have hundreds of components it can become slow but we are using lit html you will see in a second and the lit html is very good with dom diffing so also all components are notified not all components are going to be uh updated on the screen so uh i hope you have questions um now funny enough now you see my screen but i don't see your chat so um but i guess you have everything is crystal here so um and the moderator can just just reread the questions or someone from the audience this would be also nice so now um conventions design decisions for larger apps so we we are talking now larger apps and uh i created actually the slides uh uh shortly before the show not to forget things and to give you something a reference i would say don't make me think so there's actually a book if you search for it there's a book design book don't make me think but um i would say it should be obvious um if you look at the structure of the application and you see the names of the folders it should be obvious know what happens behind the scenes so it's not like we have a lots of exceptions we we do always the same thing this is i would say a recipe for more com not for disaster a recipe for more complex applications so structure and business folders exactly what i do in the backend i do in the front as well it means every folder in javascript i expect to have a name related to the business or domain and there is something like index html web component in every folder so if i open a folder uh i'll show you in a second everything so but i would explain it right now if i open a folder i expect in the in the folder a file with the same name as the folder and this this file is something like an index html because it um it imports or it uh it's it composes other web components so i'll show you this in a second and um there is a strict separation between the view and presentation logic so far never a web component was able to send data to server something like this so it was not possible so what it means is um so now how the components gets updated so this is the trick all components are going to be registered in the mediator or redux and um and on any change they get notified and they re-render themselves or not if they're not interested not but they are they can subscribe to changes and get re-rendered what it means is so we have highly decoupled architecture if you will the components don't know each other absolutely not they don't they don't even use custom events i only use custom events in nested components sometimes but never between higher order components and uh the entire thing is asynchronous and and even it is very very similar to uh event driven architecture like kafka kinesis apache pulsar something like this not gms rather than event driven with storage so this is see some similarities here okay so the entire i have the tempest i will show you right now is uh in is checked into my github repository and um and forgot to open that so let's do this it is called bc design hopefully bc design here it is so it's 41 stars it would be nice if i got exactly 42 stars and never more it would be the answer to all frameworks right so uh but unfortunately just 41 stars but um this is whatever i showed you is here and basically there are two folders appsource is just the application template ellipse is fully optional what lips does is its updates or it um converts external dependencies to to standard es6 modules and what i did yesterday just for you 23 hours ago is i updated to lit html to zero without any issues this was this what happened yesterday and as you can see i just use um three dependencies uh this redux toolkit this is the mediator this vadin router fully optional but i get a lot of questions can you actually include external components so i did it body router but this is like you know nice to have and lit html which is somehow crucial regarding performance and regarding security good news lit html is not a framework rather than two javascript functions so we are not you know highly depending on a crazy framework developer okay so um so we have it so tooling visual studio code browser sync what browser sync is is a better web server so we could use focus as well but browser it just synchronizes syncs even multiple browsers which is really nice for testing so you can have open chrome firefox and uh edge it's called edge yeah at the same time and it will update all three browsers or safari and redux dev tools i also using this is you will see the small icons in chrome icon in my chrome browser which is nice okay and so bc design it uses lit html redux it's uh just css it looks nicer this is not necessary the question is what i do with css there are you know the newer css libraries they are just plain css libraries without any javascript so i prefer them and roll up i use to convert external dependencies so actually the example ships with that and uh yesterday i i converted lit html 1 something to 2-0 and by the way um i don't know this year this uh template uh draw some attention so i got uh yesterday the axtv some questions regarding this i get things from project that is working well and even our student approached me he does a survey say my structural survey i've heard about about uh web development without framework and he asked me know about this and then asked me a nice question uh what are actually the reasons to use web frameworks and i have to say i have no idea maybe it's better for your resume or whatever right so um and of course with uh there are reasons if you if you're using react uh react fiber there's extra extremely fast updates so with my approach i couldn't create a game let's say this was more like for boring enterprise apps and with react fiber it is a way faster if you have if you need a lot hundreds of updates inside the screen so thank you means uh i can close the slides and now focus on code which uh this is the jaycon conference you know so this um right so what i did uh web um web bce project and now call it com complex now complex it has to sound cool so uh complex application so let's open that and what it does it clones the github project and hopefully it also opened my um yeah it opened my visual studio code so i would like to open this and this and now let's quick walk through what it is i can say add please a bookmark and the bookmark is jconn one and new bookmark and in the list there is the jacob one and i can delete it again and stuff like that so um so i would like to walk through the code and uh everything starts with index.html so this is the index.html and then maybe we write a little code so let's see how it goes now um this is a plain html so what you see here is the following i just make it a little bit larger so we see here uh two links at and this is the bookmark and this links it usually it is i think responsive right yeah it is a little bit responsive so it changes uh the look and feel with this different story so um this ad and links are two links as you can see if i click on that i can navigate here and for the navigation body and router is responsible so um there are two links and then there are two java references to javascript one is in the js and the other one is app.js module so the any js is actually boring so i only need it for the redux toolkit to say i'm in development mode that's all and this is required otherwise you get strange errors so i had to do this and um so app.js is uh actually necessary and what it does it does two things first a nice hack is i i'm subscribing to the internal state and um sorry i'm subscribing to the state of the redux toolkit this is what happens here and i get this date back and then i save this state and this state is saved into a local storage so the nice thing is i have offline app where you know the entire state is synchronized uh in in uh chrome chrome browsers so if i would uh open the chrome what happened and make it a little bit larger there should be an application what is it where is it here application storage not storage yeah storage and uh here should be the data somewhere what i think it should be local storage so we have local storage and session storage and the data here it should be somewhere but it so you should find it here actually so it's ah yeah you should you will find it here if you have larger screen so um and this is um the entire state of the application is here and this is time for testing because i can copy and paste the entire thing and and copy it back so which is uh really nice on the same note on the same time the entire state is here so this is my redux toolkit plugin and our redux plugin where i can track the state and all the actions okay so now this was the simple trick so in production you can remove it or not it really depends whether you would like to have uh like offline cache or not um so this was the first trick so go back to the app.js and i actually used the trick all the time for testing because um if i let's say have three screens i i do mostly on the third screen with that i don't have to navigate you know all the time to the to the last screen so now the router is set up with two paths you see slash and add and what you can also see here the component which means if i click of i perform the slash action here in the browser the component b list is active otherwise the component b bookmarks so as you can see two imports bookmarks and lists what i said you don't make me think so there the there is a bookmark component here or folder with boundary and what i can expect that every bookmarks folder will get the index html component called bookmarks so and this uh if you open that there is a bookmarks so and the name of the bookmarks is going to be b bookmarks why bs dash because all custom elements and web components have to have you know the dash otherwise you cannot register them and b stands for bce so if this would be a jaycon conference it could be jcon dash bookmarks so usually you know the prefix is usually called after my client so they like it okay nice so what it means is if we go to the bookmarks here what you will see is the name of the bookmark is be bookmarks so this is how it works the navigation so if i would uh create another component so let's let's let's create that so uh i have to go to source and see bce uh this is like a small what it does make their and creates three folders and um and what i would like to create is hello and here it is hello so hello boundary would mean i need a hello js and the hello gs this would be hello extends uh b element and by the way yesterday by the extv someone asked me know what why don't you use typescript and i show you why because the javascript is really nice without this is just a plain there is absolutely no support be hello and uh hello so uh this looks nice and what i also need is a view i'll show you why i need the view and then i will return html which is the uh which is the um lit html function and then of course do something like h3 and jcon one rocks of course so um and then uh with a little bit of luck let's see how luck do we have we need here a uh hello tag so hello and this would be hello and we have here hello so this looks good and we go to the fjs and now i will need here another component called be hello be hello and this should be hello so lots of hellos which is very good at the beginning of a session so you can say hello to everybody so this is um hello and uh hello so now we have enough hellos and uh java one rocks this was i y1 wait a second does mystery go on uh oh no so um this was how you know how to extend the navigation so i created a component from scratch so now you saw the um the app.js how this works um so we have path that you can have sub path you can have pass substitution and yeah whatever a modern uh router has and the router itself is a web component okay so now we have a new web component now let's uh take a look at something else so in the app what you also see i just imported a store here and the question is why what is the store and the store here is a component which initializes the redux store and as you can see i have reducer with one slot bookmarks so because bookmarks has state these bookmarks i usually would expect to have the same slot in the redux store with bookmarks um so and you see that i have it indeed so if we go here there is a state with bookmarks and inside the bookmarks there's a list and bookmark so this is a this is like data hiding so the individual components they decide you know what the structure looks internally so i'm just um loads the preloaded state which is optional i could load the state from the server in some projects we did it so the entire state was stored on the server so that the uh the user at any time could push save just the entire state would be serialized and sent to the server and and the next time the app looked identically to before so it's nice trick so i decide is there a preloaded state or not if there is no preloaded state i uh just pick you know the default state from the reducers and then the store is configured so configure store is a method from redux toolkit and i passed the config so what it means is if a we get another component with state i would just add you know another slot with uh let's say hello it will be hello with hello reducer and you you the component will get a dedicated slot so it is not the slot is more like a table in the database so you don't this is not like completely complete data hiding it's more like um the components can pick and choose what they like so this is just but it would be nice of course if you know the component will just store data in bookmarks and and um which usually happens but what uh is more likely that the bookmark component would read also from hello i think you have no questions right so uh i don't see the chat so are there any questions in the chat wait a sec uh i only see ah here's the chat no question oh the last the last question was are there any slides shown so the answer not no more you you i i closed this slide so there will be no more slides okay fun so we have this now go through the um the bookmarks so this bookmark is loaded and this is the bookmarks component like the uh index html and the c okay i i'm telling you you know frameworks are bad and i'm inheriting from b element so what is the b element and this is uh this is actually a framework but not very long one it is uh 50 lines of code and why it's so long because there's a lot of logging going on why so much logging because the nice thing is if you take a look at the console what i get here is a nicely structured log and this is what happens in the b element i see okay db element was created first then it subscribed to redux changes then this hello uh was the view was updated and then the state was passed to the view was not modified modified and after the state was extracted this is the bookmark state and it was picked by the hello so in the case of the hello so let's go here hello jess what i could do i could actually say i'm only interested let's say here i could say extract state and i get the state i could do some distracturing and say i only interested in bookmarks in the bookmarks marks and then the bookmark bookmark and just return this uh of course this is like java so i need this return bookmark so and if i uh return so um as you can see we have hello trigger if you update it before extraction it looks like this and after extraction it looks like here so it was extracted i can i can directly you know access the label so let's try this now i can say what i would like to do is i would like to have the label and i think was name right uh and say this state and um so what i can do is i can say hello rocks and here label so uh rox jaycon because the last one is jaycon so um and uh i can just go here and say hopefully name it's available name is available and uh yeah jaycon won rocks jacob so it's almost recursion yeah okay so we have this so this is how you would access the data and on every change of the uh of a component this is going to be rendered but lit html would recognize that if this doesn't change this is not relented at all so this is the entire trick so we get like uh don't diffic without having virtual dom okay so we created component from scratch uh which uh does that so another thing is so what happens actually here so if i go here and say hello j con j con so why it is updated and how new bookmarks are created so let's go here this bookmark see add so this component adds you see it is imported at so i can go here add and add it will be be add and add so no surprises here it contains the markup with html so exactly the same as before and uh with a little trick here with a little trick what happens here is uh i have on key up listener which is a standard dom listener and on every key up user input is invoked and the user input receives the name and the value from the component so um i can actually very quickly enhance it so i could actually say i would like to have a description as well so this would be a description let's say [Music] description uh impress what i have to do is name is have to be description and that now go with description and this should be enough so um right so i think so so where is the description here's a description let's let's see uh hello world uh from from j khan so our new bookmark uh list uh it is listed hello world but the interesting part is is it in the state so and we have now uh named hello link world let's see here so bookmarks list and hopefully you will see i think it should be the last one right so hello and description you see the previews there was no descriptions or we uh or it was uh it was because it captures of course um all the interesting so hello world description so maybe it was before so that that's a strange thing but um on user input um it just picks the name the name uh from here and uh and picks and the value and and applies that so that's the basic idea here okay so now as we see there is no business logic except it just says okay the the form has to be validated so validation um in this particular case it cannot be empty but you can put your patterns here it's supported out of the box and um and i say okay if everything is okay then perform new bookmark and on the fly on every change bookmark updated is called as you can see here it comes from control layer and what happens here is we have bookmark updated action where we're just passing dispatching this bookmark updated action so for every keystroke an event is generated with the name and the value of the affected uh component is sent to redux store and all components are re-rendered okay so now and the redux store this is um the uh the reducer you don't see actually the redux store is it's just there and uh what i do here is i create a reducer and there is the uh reducer builder at case and what um at case is like if else i say okay if bookmark updated action then go here if new bookmark uh action here so it's nice because i don't have to deal with the strings so with the constants so i'm just using the actions here and uh why one thing another i forgot to mention it another naming convention so what i uh tend to do is there is an action is called bookmark updated action and bookmark updated action and there is one method called bookmark updated without the action and the method is called by the view and the action is dispatched to the store not always but usually this is what happens um okay and this is the general structure of controls and if we go to the server the communication happens here and of course the entire server communication is encapsulated in a dedicated control exactly what we would also do in java and uh it encapsulates in it encapsulates the uh fetch api so uh so we are actually pretty far so um this is um how it works with uh with the back-end communication and all the calls can be asynchronous because we never wait for the completion so um and at any point of time i could actually say uh you are async and it would just work as it is so no difference okay uh still no questions am i actually online still or i'm just talking to myself this could be also nice uh so are you alive chad someone says just ask a star give me a star or hands up or whatever ah we hear you wow now so we can this is the taser for scalability of a chat okay now let's talk to the server we have 10 minutes maybe we could do this so um to talk with the server i need a server of course and by the way what i wanted to show you these are the workshops which we'll be interested in this is the redux toolkit the lead html the new one this is called lit lit dot dev delete html polymer is old one we are using already a new one and the roll up js a great tool which uh is like very lightweight and what it does is it gathers the dependencies and creates one file so this basically it and um so now another related uh utility is called mockend it's built with corkus and this is like in memory craft store with sse support servers and events so i would like to launch it maybe we achieve we can store something on the server this would be nice so start mokent so it uh it just started the uh quarkus application this is like um it is indeed one of the few cases where a super jar or uber jar or how it's called the fat jar makes sense it's just one jar and it starts everything and i just uh created some curl and what i can do is i can just post to localhost 8080 crud so let's try this so i would like to post to the um to the quarkus and where to put it so what happens here it looks like this so we have here the bookmark updated so it updates the bookmark i don't think it's the right time to send everything to the server but the new is more interesting so instead of dispatching to the server where is the code uploaded the code is in ah it is not uploaded at all you are right git add gcm uh initial initial creation and now is the code uploaded so now now you have it but what i wanted to tell you is we have the new bookmark action and um and i don't like to dispatch the action here rather than i would like to go to the server and in order to go into the server first what i told you everything is async so let's make it async i will have to uh communicate with the fetch and i think is http localhost 8080 slash crotch and then i have to say okay uh and uh method and you see how nice actually this visual studio code is without typescript jazz es6 and what i would like to have is post um post post and then uh the oh i need the payload and the payload is going to be const payload uh wait a sec uh what we said we it is uh bookmarks and the bookmark is the recent one right bookmark and then say this is this state so um then i can say okay now let's say uh not this state there is no this it is a store get state store get state okay um now what i would like to have is having to payload and because i think it won't work the very first time jason uh parse uh sorry stringify the other thing is stringify and my bookmark so what i'm doing here i'm fetching the the last state from the store and i say create a string out of that and this is the body and the one thing which i always forget but not today the very first time headers and uh the headers is an object and uh what i can do is i can say the content uh type i hope this is um application json application slash json and uh i would like to wait for the completion here okay so uh let's see uh why i don't like to translate anything so we have this and um we have the uh the um wakand and what moken is able to do is it is able to listen to servers and events so let's do this sse now it listens okay let's see whether it works so i say add and oh this was not very wise now i have three things to fill up uh back end communication not working so uh new and it works so as you can see i was able to send this to the backend with label back-end link communication id and so forth and this is my payload and now of course we could say i wouldn't be nice if you were able to receive this and update the view right so we have uh two minutes this um this could be hard uh i have to admit but let's see at least receive it so um i let's say here uh git add otherwise the chat is going to be nervous and gcm is back-end communication back-end communication is working so let's do this so what i could do is i could have here export const init let's call it or receive updates receive receive updates and this is a method with no parameters and with a block of code yeah cookie is about pushing by the way so uh git push this was uh you know the chat tries to confuse me this is git push not push right so now we have here um receive updates so what i need is con const event source i think is the name equals new event source event source event source and then we have uh http localhost and 8080 slash sse and then what i have to do is event is one hard thing to know because the event is named i have to listen to the event and on message won't work so i do add event listener and the ad event listener the name of the listener is crap event crowd event so let's do this and then what i what i get is the event and the event has data data it's data so i'm interested in it and actually what's really interests me is the uh payload here right the key payload so let's try this this is the data and uh and just this is the handler this is like java lambda with fat arrow exactly the same so we have this and now what i can do is first of course log it because it will probably work data and then what i can do is to say uh this this is actually what this is the end game right so what i would like to do is to send this and say the following json parse parse the data and what i get back is the payload payload and i send the payload the payload here and of course i will have to modify this thing a bit so the bookmarks that user there's new bookmark uh the difference is i don't need to do this i don't think so hopefully not and then i can just say i only pushing here the payload the pay load payload now okay let's do this so we have here and say uh nice with sse new bookmark uh list nothing of course not and uh just say ah you know what very important thing in javascript is very important if someone writes functions you have actually to invoke them otherwise it won't work so what i have to do is sorry for this i have to go here make it smaller or is it smaller no smaller yeah now smaller now um to in in web component there is connected callback connected callback and the connected callback works like um postconstruct in java so i would have to invoke super and this was i think receive updates watch this everything is imported so without typescript so now we have it now add bookmark and say hello no hello world hopefully hopefully where's the button oh new list and this is the states so now we've got you know the full unidirectional data flow almost implemented from scratch so we are going to server posting to server ignoring the uh return value and we get notified with sse uh completely asynchronously hopefully let's see here does it work list uh and you see label sdf link world hopefully so we got the notification from server and you should also see here description hopefully it works so hopefully it worked and the server is also busy so um now uh of course pushing this was the only thing a git add and gcm so the moderator told me uh now you can ask me questions so um ask me questions so sse server communication is working so to summarize that uh what i wanted to say is that building complex app means the front end components have to be decoupled you need a consistent naming and it should scale it means i could have you know several hundred such folders and i don't care and and if the design is simple it will work and i would reduce the amount of frameworks the less frameworks you have the less trouble you have with npm updates out this and so forth yeah it's pushing good push so the next session jcon session will be called git commit and get push and i will push the entire time and it will be probably happy so um any questions to the audience or moderator is very silent i need out of push right uh a small crocus project which you know automatically pushes or an alias would be nice yeah and alias actually right so it's you're right um so ah very good uh joe asked me how would microphone that pattern influence pc architecture the funny thing is if you go to my youtube channel there is a talk for japan microfront ends so i am one who created something with other framework and there were other guys from aws which present the day stuff and actually the funny thing is we are completely um completely microfrond and capable why because all the imports here can load from an uri so what you can very easily do is you could say i'm not loading locally the web components i'm loading the web component from outside this would work a little bit more problematic is the global redux store um the question is would you like to keep the redux store global i would try to keep that but if you have microfrondens what could happen is that you say okay i would like to have multiple redux store which would also work but it's highly unusual um so what rollup js does uh the only thing where i need rollup js is um the um the um now npm usually stores the libraries with the scoped modules i think with the ad you know edwardian and edward is not a standard so what really up just does it replaces the edge with the path this is why i need uh roll up uh then so would you recommend to get rid of react it's hard hard recommendation because react is really nice and very similar to this i wouldn't start with react but i don't think there's any reason to get rid of react angular different story um uh which ui component library would you recommend for writing large modular enterprise app i mean component visual component library is already in the in the show notes um ing web components sap of ui5 web components vadim elements so there are lots of visual libraries and in larger enterprise apps if i had to work with or i worked with web developers and they really knew well jquery and there are lots of jquery plugins or components which are absolutely can reuse with with that how much time do you need spend debugging missing imports for the component string names imports never because if i miss a import uh never occur to me so it is i will immediately see this i mean not a problem so far not at all so how much time so far maybe one minute i guess but imports are not the issue if there are complex renamings then it is uh could be out but but still good enough i mean component b bookmark no um not not much because of my naming convention right it is always the same so uh um and maybe this um what you can do you see here i'm just loading the component here i don't have you know to import db bookmark so uh someone asked me if you wanted to skate this in the multi-node back-end server with a load balancer in front of them how would you handle the state persistence between different nodes very easy if you are on aws elastic load balancer application load balancer understands uh web sockets and ssd so there is no issue so you get you get uh how to call it uh session affinity for free next question and if you're running your own load balancer like for instance nginx or aha proxy you will have to do it by yourself and by the way i just did the sse because i got asked several times about that so i think you know jcon is a great great time to show it once and uh before i record you know the 100th screencast jaycon is better place to do it you could use websockets or you can just you know load from the server using get method oh what i forgot to mention very important thing what usually happens here why i did it synchronously because what happens here i'm sending here uh let's say the actionist communication starting action action and here is uh communication ended a successful success successful action and uh then the redux store will change state to starting and successful on error and what it means is this can take let's say two hours usually not but let's say so for that time all the components can decide what they would like you know to be deactivated and don't uh require or don't allow user input or or or they could okay this is a very important thing forgot to mention this but we are out of time i think um thank you for watching hopefully it was better than last year last year was more or less hello world now is a hello world with sse and yeah any questions how to handle fetch target is not available uh try on catch uh you can and what you get back is the response with that uh const response and the response has a property called okay um there is an uh response okay or not okay exactly and it is actually very very similar to http client in java cool any other questions i think we are out of time so the moderator is very quiet very unusual how do you implement the acceptor to send the refresh gwt token very very simple this never happens that way what i have my own control which in the http package which which handles all the stuff and the um i think jwt not gw the j with j and the j uh j json web token is just uh put in the header here uh for all communication and you can store the jc web token in the local storage or in the uh redux store the redux store or json web token answer local storage or both in my case so because this is in caps so what i have something like an http client which uh it does you know the post and and get and put and delete it's a small wrapper so i can send all the requests back and forth what i usually also do i measure the time i have one component like you know timer which shows me the slowest communication with the back end and yeah yes sure no problem any other questions ah very good uh joe um this is the best question so i have to answer this um what usually happens the lips are not here um this is just playing here with my staff the libraries here are not inside this uh application rather than they are loaded from our central server so in um what uh what what happens we have a jenkins and i'll actually talk about that at the conference so you can uh listen to this if you like or watch it and um we have a ci cd pipeline where would create this on the fly put a single javascript dependency on a central web server and all developers would just know load this remotely so what what it means is in the app here um i would load the store or whether it's the uh volume router not via this rather than http myserver slash and and so forth and uh everything is version so it works so time slots thank you see you next time at the keynote with most lights thank you i will push it right now so don't worry bye [Music] you

Channel: JAVAPRO

Views: 294

Keywords: JAVAPRO, JavaPro, Javapro, javapro

Id: eWRr6c1O2OE

Length: 51min 24sec (3084 seconds)

Published: Fri Nov 26 2021