Upgrading to Servoy NG Client

Hi, welcome to today’s webinar and Sean is going to be presenting today about how to easily upgrade to serve a NG client. And this is a question that we’ve been getting a lot in the recent months. So we decided to dedicate a webinar to it all about upgrading from older versions to NG. It seems sometimes like a tough task, but if you take the right steps, it’s not that hard. You today is Sean again back from his travels to Europe. If you do have any questions, feel free to post them in the questions. The channel will be monitoring that. Okay, thanks Sean. Can you see my screen? Okay. Yes, okay. Excellent. Okay, yeah. Today’s webinar comes to us from our best practices series, which is kind of more popular amongst the tech webinars, because that’s when we respond to questions and comments and feedback that we’ve been getting. And something that we kind of hear perennially is how about a webinar about upgrading to NG client. So finally, we’re listening to you and we’re doing one. Also, I would point out that we get a lot of questions about this. And the first question I usually ask is, have you tried or have you even started? And what I find out is that people are afraid to try. So if we do nothing else today, getting over a little bit of that fear, then I think we’ll be a success. Just a quick look at our agenda. Typically, I like to do mostly demos and very few slides. However, this is kind of a topic that requires, I think, some slides and some outlining of what you should do or steps you should take. So we will do a few demos of an example upgrade, but upgrading is not something that you can demo easily. So we’ll talk a bit about strategies for conversion after that. So let’s jump into our demo here. What I have here on my browser screen is an application that was built in the classic web client. This could also be the classic smart client because those two code bases are very similar and you can build an application kind of pixel perfect between the two. But for today’s purposes, I’ll show you in the web client. And what we’d like to do is sort of say, well, what happens if we just try to upgrade this simple screen. And maybe I’ll give you a bit of a tour of what’s in here. We have a bit of business logic so we can search for orders where there’s coffee, maybe orders in Germany. You note that there’s a bit of styling going on here, very rudimentary styling. You also might see that we have used the on render event to highlight in red products which are discontinued. I will get to the reason why I chose that for an example because on render goes away in the ng client. Now, let’s say we just wanted to go ahead and say, well, what happens if we run this application in the ng client? Well, I would like to go to the developer and find out. So I will launch ng client and figure out what we need to do. So you might see the application now in my browser. Functionally, it’s actually pretty much the same. But from a style point of view, you can see that it’s very different. None of the styles that I have created are carrying over the ng client. That is the number one big difference and probably the most amount of pixel pushing that you’ll have to do is upgrading or translating your styling. To do this kind of one-to-one is actually not so hard. The first of all, we have to move where the style is mapped and then the second thing we have to do is change with the selectors. So I’ll show you the difference here. In the classic web client, and smart client, the styles are located in the resources project. You can see I have an example style here which was applied to the first solution that I showed you. Now, in the classic client offerings from Servoy, we don’t use fully CSS. It’s almost like a pre-processed thing that gets converted into styling in the smart client of the web client. Therefore, we don’t actually support the full CSS spec. So if you’ve long desired to do things in CSS that you can’t do, when you upgrade to the ng client, you will be able to do those things. But let’s go slowly. If we wanted to migrate this style to the ng client, the first step that we would want to take is to create a style sheet in our media folder. And I’ve created one here called ngstyle.css. And the next thing we want to do is actually start to rename and refactor our style classes or our style selectors. There’s a pretty simple convention for this. Most of the built-in style selectors from the classic clients, if you prefix them with .sfy they’ll be the same. So you can see form, tab panel, label, field, combo box, etc. And over here, I have now .scyform.scy tab panel, etc. Now, because the prior version or engine of CSS that we provided was a subset of the full CSS spec, everything that you did have will work plus a whole lot of new stuff. So none of your old CSS will break. Another thing that’s worth pointing out is that in the ng client, you can apply multiple selectors to a single element. So where’s before you had to say, here’s the style class that maps to this element. Now we can say we want to map more than one style class. But if you just want to go one to one and go slowly, I recommend just kind of search and replace on those classes and that’ll get you a little bit farther. So the next thing we got to do map that style sheet to the solution property style sheet. This solution property means nothing for the smart client of the web client, but this is how we map it in for the ng client. So I’ll select it there and why don’t we go ahead and launch the ng client one more time and have a look. So now you can see it looks a lot more like the original solution. Here is the web client solution. Here’s the ng client solution. The good thing about your Servoyapplication is that it’s mostly forward compatible. That means all of the code that you write with a few exceptions will run the same. So for example, in our ng client here, I can search for coffee, I can search for Germany and find orders of coffee in Germany. However, one thing here that’s not working is that highlight that showed me that a certain product has been discontinued. Whereas here you see it shows in red. That’s because the on-render event is deprecated for the ng client. It’s still supported and current versions of smart on the web client and it’s not going away, but it doesn’t make sense in the ng client because those things can all be done client size, not server-side. And we do that with CSS. So one thing that you might want to change is to think about using a a style class data provider and I’ll show you what that looks like in an example in just a moment. So obviously that was a very simple example and it’s sort of showing you a very bare bones kind of migration. There will be exceptions to what doesn’t work and I’ll go through those in the slides. But if you want to just sort of jump in and get started and feel what it would be like or see your application running the ng client, just doing that simple style sheet migration will get you part of the way there. Now of course, if the question is why are you upgrading and it’s probably to take advantage of new features from the ng client. So what I always recommend to people is that start with the UX that you want and kind of work backwards from that. Don’t try to just migrate everything and then see what you can do. So what I thought is let me show you the same sort of form and functionality with the different twist that is a UX first approach. So I created a very small example here called example ng solution and I’m going to launch this in the ng client. And so what I’ve done here is I’ve taken a bit more liberty with CSS to enhance the style of it. I also have replaced a few things with components. The grids that you saw on the list view down the side for navigating and the grid of the line items which was a table view form, those are still supported in the ng client as you saw when I sort of compared it one to one. However, they’re not optimized for performance. Moreover, there are newer components that you get with the ng client that may be a bit more fit for purpose in terms of user experience. So here I have changed the sort of the skin of the application but not the code. So for example, my search again for coffee and Germany gives the same result. And you can see now I have been able to recover my nice little highlighting of my disk and continue product. So where the on render event was deprecated, there are things to take its place and I’ll show you what I’ve done there. He’ll also notice that the grids are slightly different here. I’ve elected to use a grid and not a list view. And this is one of the ng data grids which can support things like grouping. So I can say I want to group these by customer and a number of other features which are illustrated in other webinars. So I won’t get into those. I also added a few extra tabs here including some ship info that shows the order on a Google map. So these are the type of integrations that you can do very easily in the ng client that were very difficult in the classic web client or the smart client. So I just wanted to throw that out there that while you’re doing this you may want to rethink and redesign your UX, learn a bit about the ng client and try to take advantage of what you can from the ng client. Let me show you a bit under the hood what was done in this solution. First let’s look at the web components. So and I have this in the classic view but when you’re running an ng ng solution you can also have this form in the HTML5 view where you get more of a preview. So a couple of things. You may remember that I mentioned from CSS that multiple elements can be multiple style classes can be supported. So for our banner here if you look at the style class you can see that I actually applied to BG dark and banner which were two style classes that I just made up this morning in this example. But those can be applied and removed simultaneously. The other thing to point out is that on our grid which was in the order details form. I’m using a component here called the ng data grid and you can see it’s in my palette here that I’ve added to my solution and one of the properties of the column is style class data provider. And this is a common approach anywhere where you want to sort of dynamically stylize something based on some data driven artifacts. So this is actually a calculation which returns a style class. In this case if it’s discontinued it returns the style class that I created product discontinued and in my style sheet I have a class there or selector there that sort of tells it to be read etc. So that’s the reason I’m showing this very specific example is to show you the workaround for on-render which is one of the items that is deprecated. Just some other things to point out here on the main form. Again this is the ng grid so this is one of the components but you can see that there’s a lot of components here that I’ve added and you can add many more by launching the Web Package Manager. So if you’re really new to the ng client you haven’t tried this at all you can you can get components and services which are like browser integrations as well from here and there’s new these are being updated and new ones are coming out all the time so you always get the latest if you come here to the Package Manager. A bit more about that when we get to the slides. So I think that’s about all I want to show for doing a sample upgrade. Again a real project is of course more complicated and there are more challenge areas so let’s walk through a few of those. So sort of an overview of how how you would go about doing a conversion. I think the first step I just showed you which is to convert style mappings. Again you no longer use the style sheet in the resources project but now you take it from the media. You want to migrate unsupported components and I’ll talk a bit about what those might be. You want to migrate unsupported code patterns. Like I said most of your code in business logic is completely forward compatible. There are some patterns and some areas you want to watch out for. We’ll talk about a couple other challenge areas and we’ll talk about kind of how to make a plan and approach this. So first of all in the converting of the styling that I was able to demonstrate for you you can see that in the classic client it’s in the resources project and you sort of bind that at the form and the element level. In the ng client you actually put it in the media folder and you can bind a top level style sheet to the solution. Some other things that I didn’t mention are demonstrated is that you can include as many style sheets as you want and we actually support the import in the style sheet. In fact we push all this to the browser so it’s really the full spec as it would run in the browser. So you can include multiple style sheets that can be nested in your media directory however you like. Remember that in the classic client we’re dealing with a limited subset of CSS. You can only do one class per selector per element and you set that at design time you can’t really change it. One thing I didn’t show you but in in the ng client you can dynamically add and remove a style class. It’s just any element you can do element dot my element at style class warning or something like that or remove style class and you can do that at runtime and your discretion. Also in the ng client we’re fully compatible with CSS3 so I highlight over here on the right some things that you would never work in the classic client like having a border radius of 50% which essentially gives you a circle on doing things like a box shadow doing things like transitions so let’s see you like that nice when you hover over a button and maybe the box shadow gets a bit darker maybe the background color gets a bit lighter and then as you mouse out it sort of fades away slowly maybe one third second there with the transition all of those things you can now do in the ng client. So again this is this is I consider this a challenge area because if you really want to take advantage of the ng client currently you do need to do a bit of sort of learning on the CSS side to get the most out of it. We have another webinar dedicated to this whole topic by the way if you want to go back to our archives we do go and deeper about just CSS in general. Again if you want to do that one-to-one conversion most things go.svy and that’s it. There’s a couple ones that don’t for example the table view of a form now there’s a special selector called UI Grid and there’s some different subclasses for that for you know all I even selected that’s all documented on our wiki and I’ll post a link at the end on a slide if useful links. Some things that we’ll cause problems will be Java Beans so all the default elements you know text boxes type ahead combo boxes those sorts of things are supported by default plus you get a bunch more of those components that I showed you in the web package manager. However the old Java Beans are not supported but there’s a growing list of web components that do replace them so in many cases you’re getting a much better UX from what the replacement is but you will have to refactor that there’s no automatic way for that. Again the I showed a table view and a list view in my classic example there’s also portals which I didn’t show those are supported in the ng client and you saw that when I did that sort of one-to-one comparison. However those are not optimized there will be a bit of performance problem if you get a large table view for example with many columns on it you start to get a performance degradation and we have so much nicer replacement components for that including the table component which is for doing very fast lightweight read only and that one performs extremely well and then we have two robust grid components. One is for data operation so you’re able to read right and the other one is for analytic operations so you can do grouping with summaries etc. So there’s also again these are covered in other webinars as well so if you want to know more about grids you can check our archives. You want to watch out for legacy code patterns. The one that I showed you as an example is that on render event where we have the highlighted product and most cases there’s a replacement for in the example I showed you we just link a style class data provider on that one grid column to a calculation that tells us how it should be styled and that’s pretty easy to do. Some other areas that you’ll want to watch out for is how do you do with code blocking. If you’re coming out of the smart client the good news is things work very similarly if you’re coming out of the classic web client it’s a bit different so things like modal dialogs or forms shown in modal dialogs in the smart client they were blocking and so the behavior is consistent in the ng client so the code that you’ve written will work as as you have it if you come from the smart client however in the classic web client there’s no blocking so if you show a modal dialogue then the next line of code after you show it is executed right away and for that reason most people don’t have another line of code after they show a dialogue but they do things like callbacks where they pass in a function and they call back to it so although those patterns will still work they’re not really optimized anymore and it’s recommended that you kind of go through and identify those and refactor those so looking for things where you show modal dialogs were used to dialogs plug-in which wasn’t supported there was a an open source module for that called the dialogs module so you’ll want to sort of deprecate that from your code base and replace it now with the dialogs plug-in good news is that’s that’s all really easy to do by the way there’s another webinar in our archives just about working with dialogs it feels like we have a lot of webinars in our archives honey on starting to grow we want to migrate any legacy integrations that you may have done some work around especially in the web client to try to get things integrated at the browser level there was a web client utils plug-in which is widely used by web client developers and that was a way to send things down to the browser to evaluate JavaScript in the browser to have callbacks from the browser back to the server basically that’s what the ng client does for you automatically so in short you don’t need it anymore but you’re going to have to find those places where you used it and figure out you know what you’re going to do so maybe you made a Google Maps integration or something like that and there’s a component for it if not then it’s a bit of a project you have to figure out what tools are available for you if you’re coming from the smart client you will lose access to the desktop so if you were doing things like working with the local file system printing to printers directly doing calm access to microsoft word you know barcode scanner so sorts of things a browser simply does not have access to the desktop the good news is we have a project solve this it’s called Servoy ng desktop there’s more info available in another webinar for that and this is an evolving project so if you’re really interested in this then we urge you to work together with us to get the best result one of the big changes is you have to move to word deployment if you’re unfamiliar with word deployment it’s a way of deploying an application that’s not just deploying your solution to the installed Servoy app server but it actually deploys the entire software stack so the Apache Tomcat all of your plugins your environment configurations etc is all bundled into a web archive that’s why it’s called war and that can be deployed on any compliant web server like Tomcat or jboss or any other one so that’s it I would call that a challenge area because that’s an area where you’ve done it one way for many years and now you need to kind of move to a new way of doing the good news is it’s way more robust it’s support you can export a war file directly from the IDE just like you could adopt Servoy file so from that point of view it’s quite easy it does require that you have to administer your web server a bit yourself so I consider that a challenge area where you have to learn a bit good news that there’s lots of documentation and a webinar dedicated directly to this topic so I’ve showed you sort of some simple demo of an upgrade talked a bit about some of the patterns you have to watch out for some of the challenge areas to put it all together one thing I would say is that if you have been thinking about an upgrade the best thing you can do is just start today take your application you know launch it in the ng client see how it looks go through some of the style mappings that that I pointed out there see if you can get it looking the way you want but you may find out that that it’s not as scary as you thought and once you get a taste of it you wonder how you ever while you ever waited so long in the classic client because it’s it’s much better and it’s not really any harder than than doing the web client another thing I would say is treated like you would any project which means you have to start with a business case why are you upgrading you upgrading because your users want a better UX or you’re doing sales demos and you know there’s a particular feature that you can’t have but if you upgrade you can and you can make a prototype and show it and win a new customer so be business driven here in terms of why you’re upgrading and be UX driven you’ll get a much better result if you design your upgrade with the UX first approach you saw that I showed two outcomes from that one order screen I think the second one looked a lot nicer because I took a full Servoy of what’s available and thought about my UX and and and came up with a different outcome you really want to plan for those challengers that we talked about especially things like the desktop integration because that’s really going to affect you know existing functionality the other areas are a bit more of a refactor you have to search for and and kind of change them but it’s all something where you can just make a plan and you can go through step-by-step by step if you look at it in that in that perspective it becomes a lot easier to to start to put into action in terms of specific actions I would say start with the CSS because that’s the number one difference and you’ll see a big impact right away it’s also where your app can start to look and feel a lot better then go through migrate the unsupported or unoptimized components look for those code patterns and start to establish your best practices for award deployment so study up on that watch the other webinar look at the documentation but finally we understand that even though I just told you that this is nothing to be afraid of and it’s not as bad as you think we do understand that you may need help simply because the risk involved the effort involved is high and you want it to go right and that’s why we are offering our upshurance program which is meant to ensure the success of your upgrade and this is a program that we can help design sort of your your project and you can work with service services to kind of guarantee that that your upgrade will be successful that that we sort of look together at what your current application does and what you want out of your new application and what things you’ll have to watch out for what things will be easy what will take a lot of effort so contact my friend yon if you want to start and don’t wait don’t put it off with that I will leave up these useful links and I would note the first three or the first two are particularly useful one is about just how to do CSS in the ngcline the other one is a sample gallery of components if you haven’t really dabbled in the ngcline it may help to know what’s available so you can go to to demo.joroy.com and have a look at those yon do we have any questions yes we do well I counted seven references to the archives shans I think it’s the benefit of doing many of these that at some point in time we will have a webinar where you can sit where we can just list all the webinars and say oh the meta webinar yeah you need to see us go to this you need this go to that you just yeah we’re getting we’re getting closer and closer every day yeah there’s a question official there’s a comment of richard very useful shan and there is a comment from Stephen can you demo a bit of extended CSS like how would you change the colors of grid rows yeah I can go in and show a bit about that there is another webinar about sort of extended CSS I don’t think it touches specifically the grid rows again I recommend that you don’t migrate the table if you use one to one but there is in fact I don’t know if I showed this page this styling the ng client here’s the wiki page and here you can see the grid rows have their own style class UI grid row selected etc so if you put this and then there’s even odd believer up here so even odd and there’s even a builder down here this customizer if you this is a third party website but you can actually go in UI grid is the library that’s used by the the legacy table list components but you can actually go in and sort of play with all of the properties of the ui grid and it will it will generate the CSS that you need to that you can then paste back into your your style sheet but it’s pretty much if you just want to do even odd selected you can do these items and that will map directly to those table views okay excellent it helps there’s a question from Matt can we deploy the ng client war file into the tomcat server that’s bundled with the Servoy applications over no that’s not recommended and that’s why I consider that a bit of a challenge area you have to go and get your own standalone installation of tomcat and it has to be a version that supports web sockets so I think seven or higher seven something or higher supporting web sockets and then and then you can deploy to that so you need to learn a little bit about installing and maintaining tomcat as I said go check out go check out the webinar you can see here tech series home this link and you can see in our archives there’s one all about word deployment that talks about how to sort of set up an administer tomcat okay there’s a question from robert I try to style i’m not sure if it’s a question actually i try to style the ng client dv-t review from server extra components in smart clients I use the selector dv-t review the selector dv-t review component we’ll have if you use the web component the ng client it will have its own its own style sheet that you can override okay then that will that will include that will include a number of selectors not just one so if you if you it’s a bit of a bit of work to get to see all of those if you look directly at the source code for the component on github you can see the style sheet that gets included with that or if you run it from source rather than from binary but yeah it’s a bit of work to go in and sniff that stuff out for some of those components okay all right well we’re running out of time if anybody has more questions then feel free to post them in the forum we are keeping an eye on it so feel free to post any CSS or other migration questions right there if you do need do need more extensive help as Sean pointed out then we we can help you so feel free to contact me to to get more more help and for the next webinar it looks like we’re having a party Sean yeah everyone’s invited yeah so eight four is long anticipated and we should have a release candidate ready within two weeks so we plan to do an eight four launch campaign just like the other major releases that will probably involve more than one webinar so we’ll do one at the plan date which is two weeks from today but we may stick one or two around that webinar as well and we’ll be announcing that so stay tuned and come learn about Servoy eight four if you’re upgrading to ng client this is a great time because you get to go right to the next major version cool and it looks like maybe even number 50 the epic episode will be on eight four yeah we should do something special for number 50 we should maybe do the the meta version about the archives of the archive I don’t know if anyone will appreciate that but you and me I think the will because I was surprised to hear that we did webinar some certain topics that I didn’t even remember you were in trouble so you’d like to you all right well thank you very much everybody for attending and Sean for presenting and we will post this recording very soon

Close