2020.06 Launch Part 1

Today we’re going to cover part one of the release, which is usually focus kind of just on going through the release notes talking about what’s updated what you need to know about this release Typically we do demos in the servoitex series Unfortunately, this this one is more informational Excuse me do a small demo in the middle For me then on Thursday we’ll get to doing some more demos of some other stuff So on the agenda for today and really what’s new 2020.06 our Q2 release is out in as a release candidate in beta form RC2 is already available and We’ll probably be issuing the final build in about a week or so depending on how many more Issues are filed etc in the core of servoite we’ve done I counted more than 70 fixes or enhancements So this this particular release we really focused a lot on quality both in the core but also in extensions were usually adding new features or new components etc This one as I’ll go through it we also focused a lot on kind of quality and a bit of house cleaning in how the extensions are distributed and Making changes to go forward. So we’ll go over those as well We’re still building some binaries on the extension packages this week But we’ll be having the rest of those wrapped up with release notes and everything pretty soon the main sort of Core or I shouldn’t say core extensions that’s a paradox, but the most common extensions are already built and what we’ll cover those today as well Then on Thursday We’ll do some demos. There’s been a lot of enhancements in some of the grid components So I think that makes for some nice demos and it’s a really common use case So it’s applicable to everyone so Thursday we can look forward to more demos And the core updates we made a lot of optimizations in the IDE and I’ll go through those first of all script buildings so that is the kind of processing the IDE needs to do in Order to give you things like code complete or build markers and that sort of thing on your on your own code has really been optimized We improved our dependency graph which really means that we don’t have to check so deeply in In your in you know parsing your code We now actually created a dependency graph so we know that file a depends on file B depends on file C and if you change You know file C then then we know which ones need to be Updated so that means that we can rebuild faster We also removed some circular references. It’s also improve build types So that’s just building code files We can do that much faster now We also reduce the memory footprint So we did take a look at how our builds are done and realized that we’re duplicating references or objects And that leads to a greater memory footprint so we fix that to bring down the memory footprint Something that you ought to know about this. I mean apart from just the Optimization is there is a preference or there was a preference at one point here. We added for You could untick non shallow parsing. What that means is is if you have a pretty big You know dependency graph. We only go a few levels deep parsing An individual file and so that was unchecked by the you know that was unchecked by default So that we would only go a few levels deep you could you could enable Deparsing through a preference and then your builds would take longer, but you would definitely get code complete anywhere from you know from one Spot to another or build markers in some references from one spot to another because we now have This improved dependency graph. We are removing that preference. So we’re all these always on non shallow part or always on shallow parsing. I should say So it’s really recommended that you you use JS doc tags. I mean, it’s always been recommended But now even more so that you use your JS doc tags particularly for parameters and return types in methods so that the parsing engine can Can really understand what depends on what in your code? So so it’s kind of up to you to to Take advantage of those JS doc tags if you’re not already Along IDE performances. We also improved overall project building. So I was just talking about script building Specifically But now we’re also tracking changes against dependencies for other objects in your project Which means we can do more incremental builds and fewer complete builds So you may know may have seen before You change an object. I don’t know a value list a relation of form or something you save it and then it’s building and You may have to do a deep build Or a full build Before it’s done now that does run in background, but it does it does take up Some processing So now what we can do is just do more incremental builds and tracking really only what’s changed what’s dependent and what needs to be rebuilt The sort of caveat of this is that in order to do this we need to do a full dependency graph What we got to do on startups. We do a full build on startup every time now so you’ll have to Be patient with the full build on startup. This means we get better performance throughout Once you’re running the IDE Another thing that we’re doing to optimize performance in the IDE database schema are loaded in background So this is when you create a connection pool to To a database What then happens the subsequent action that happens is we load the schema of that database so we know about it and we can build Things around it and that typically happens You know on startup and so or if you’re editing a server connection something anytime that connection pool is is re-initialized And then you kind of sit there and wait Typically this is this is fast However, if you you ever work with Servoy developer against a remote database or a David database where the connection to it is compromised Then retrieving that schema information can really slow you down So now what we do is we do it in background and then update it So it doesn’t really slow you down you can go on with your other work. Well, it’s well, it’s doing that part of the build More enhancements in the IDE And this is one that I’ll be able to show We’ve changed a bit or enhanced a bit the the form editor Palette so this is the region of the form editor that shows what components you could put on a form And we in we no longer show the Package where the component comes from instead. We’ve created categories that a component can expose and We show those categories so those are a lot more semantic things like input control or buttons and text or whatever Rather than the package that it comes from because originally The components are put in web packages Really based on kind of their shared dependencies and they have names like bootstrap or Servoy extra and That’s really not very intuitive like what package means what and so now we kind of just hide the package and show What kind of components there are and multiple packages can show multiple categories So you’ll see that it’s pretty It’s a lot more intuitive Also we in the filter box on the palette It always hit on the component name or the package name now It also hits on Search keywords which can come from the components spec file So you could be searching for something like an image and you type an icon or You know a calendar and you type in diary and it still hits so and we’ll be we’ll be kind of Playing with what keywords are meaningful But just to make it a little bit nicer to find that component wants you have a lot of components in your In your project Another thing that’s that’s new In this is not really in the IDE but in in sort of the project structures We added a solution version property so this goes in the solution settings And we did this for a couple reasons. Mainly is that when we’re importing Solution modules from our own distributions For things like search utils Pop-up filter all of those nice modules that are Shifted extensions and available through the servoipackage manager When you’re importing those those actually have dependencies and you can imagine that One module depends on a certain version of another module And so now we’re actually codifying the version into the solution property So that we can really check that It’s going to include automatically the right module or if it notices you have a dependency that is Perhaps a version too low it can prompt you and say a you want to get the Required version of this dependency for the thing you’re trying to import so I can actually I can actually go through that and show it And how that works What this means is that you you have the option to put a Version and you can use semantic versioning. It’s just a text field on the solution settings. It doesn’t really do anything for you Accept that when you go to export it’s then required and then if you’re Sorry when you do a buy-in-or-export not a war file export for deployment, but really for Interchange format when you do that export is required and then also if you are exporting modules As well you can specify the dependency of those modules Some some updates to the sort of core distribution The this is a big change the Servoy default Legacy component package is now deprecated We’ve been wanting to deprecate this for a while And the reason is is that this component set Is Is largely to be compatible with the legacy clients of Servoy so our legacy web client and our Smart our smart client our legacy desktop client We actually had cook full compatibility of components so that when the ng client was new Projects could easily migrate to the ng client because the forms that you design the component you put on a form were largely compatible in the ng client so we supported all those properties that you know like border background color things that are now Control to the CSS are all in those components those components are really bloated and To be able to be backward compatible And it also meant that all our enhancements are going to go and have been going in into new components So we haven’t really been enhancing those for a long long time and they’ve been stable for a long long time One downside is that they show up all the time and then people who are building our new to Servoy are building new Projects they just kind of keep using them and it’s really I think a Problem that if if you keep using them because they won’t be enhanced So maybe you want to get a nice new feature on one of those components And it’s not going to happen you have to switch to another kind of component For that reason we want to make it sort of very obvious and difficult to use them for new stuff So they won’t be available on new forms and forms already having them Will show but if a form doesn’t already have them you won’t see that component package in the palette It’s just not available now There’s a global preference to to re-enable it so that you can see it everywhere So if you have a project that’s really dependent on those don’t worry You can just go in check the preference and and you keep on cooking Also, we’re not removing support for them It’s just that we want to get them kind of out of the way so people stop using them for new stuff There won’t be any enhancements, but there haven’t been any enhancements So that’s that’s not really different. So if you’re really tied to those components don’t panic Just change the preference and you’ll be fine I would encourage you to try to move toward the newer components As soon as you can though because you’re really going to be missing out on enhancements to come down Result of that is we did have to move certain components to other packages because while we deprecated those not all Not every component had like a corollary in other packages so for example A cordy and pain was in a Servoya default so we we moved that already or kind of rebuilt it in another package and I’ll go through those It also means that in the form editor some of the wizards Like a new form or sorry new tap panel new split pain wizard Those are no longer relevant because They were sort of hard-coded to go to that those default components and and really components are Extensible plug-in play so it doesn’t make sense to have Fixed wizards tied to components that you can swap it in out so those go away as well So it’s really kind of a big change but not a big deal But it’s good that you know about this because you’re going to definitely notice it when you try this out So I want to pause right here and there’s more to cover But I wanted to go into the IDE and show a couple of the things that I’m talking about So you get a feel for what it’s going to look like Okay Um, Rhetker can you see the the ServoyID I just want to check that it’s yeah, okay Alright, so this is I made a solution called demo I made one form called test and I did nothing else by the way when I made the solution when I was prompted to Install some common component libraries. I uncheck them so that I really want to start blank So this is a a new solution with no packages or extensions in it whatsoever now typically what you would see here um, are The ServoyID fault because they’re there are automatically embedded in your project and you can see that One thing that I do still have are form component and this form component under the category form containers So these are these are still kind of part of the core that will always be available You don’t have to add them because they’re really not components extensible components so much as as a container for placing other Other form components inside of form and so those stay in kind of the core and kind of the default and are always available So if I were to just come in here to say no, I want to revert I want to go back to the way it’s always been you can go to window and preferences and Under the Servoymenu. There’s a item there called default packages Which which has been there because these these are prompted when you make new stuff But you can check this back and do apply and close and you’ll see that the form editor refreshed now good old ServoyDefault is there and I’m able to use it now suppose that I’m in a Drag a button on this form and save it so now my Form has a hard reference to the Servoya default package now suppose I were to come in here and and Put this back to the way it is so this is the default way. It’s gonna be now where those are hidden and I apply and close in this case for this form only The Servoya default package will show in the palette because otherwise I wouldn’t be able to work with this form so much Or you know continue to add components similar to what’s on this form. So what this means is if you’re if you’re moving from Earlier version of Servoyinto 2020 that was six Don’t worry. You’re and you’re using these components. They’ll show up on your form and this will show up on your palette for those forms For new forms. You might not see it So if I were to go ahead and delete this and Save it now I have to kind of refresh the form editor, but suppose I close and reopen this It’s gonna go away again So it’s always gonna check to see if they exist on the form and unless you have that preference ticked It’s not gonna show them The next thing that I want to show is what the other Component packages look like in the palette once you’ve added them. So if I click on this add components button You’ll see it will bring up the surfway package manager and We have some some new component packages released here and these are really the three most common ones bootstrap Servoyextra and Servoyangi grids and so If I I’ll just go ahead and add bootstrap components because this is really your kind of replacement for ServoyDefault components if you have been using those If I go back to my form you can see the palette is now updated and I Used to see one category here that said bootstrap components and it would list all the components there and I always thought it was confusing for especially for new Servoydevelopers because they see Servoydefault bootstrap components Servoyextra components, right? And and they don’t mean anything They’re just the names of packages and sometimes the components are very similar especially between bootstrap components and Servoydefault So now the the recommendation is use the bootstrap components for a lot of the really basic Type of components and don’t use the Servoydefault unless you You know, don’t want to go through the refactor yet So you can see that the components are Now each component and for those of you who build your own components. This is also important each component can expose in its spec file the category name and You can see that we had this form and form components here under form containers, but the Tab panels and the accordion pane All show up under form containers now So it just goes down line with buttons text input controls The other thing I would point out is we have a category here called mobile There were some components in the bootstrap The bootstrap component package. I think it was called data list and It was really meant for like a native looking List box, you know for mobile devices And not really meant for desktop Type browser type applications So that’s been renamed and refactor to bits. So now we actually show For really mobile only or mobile specific components they show up in the mobile category It’s still all coming from the same package here, but you as a developer shouldn’t have to worry about it If you’re new to servo, I don’t worry about it because this is the way we would want you to see it anyway But if you’re If you’re already experienced then you’re going to have to adjust to Do this if I were to go and add more components and And do the say the Servoyextra components You’ll see that the category is pretty much stay the same however we have now even a few more Of in each category you can see the the table component shows up under grids and Now under media some of those file uploads and YouTube and betters. We have a category media So the number of categories should remain about this this big fairly small So that we can really categorize everything nicely If a component doesn’t expose in its spec file a category name Then it will show up under its package name just the way it always used to So if you’re don’t worry you don’t have to do this if you make your own components They’ll just show up however you have them packaged I Mean add the ng grids By the way these these are brand new binary releases For these three component packages and they’re all available today And you can see now that power grid and data grid show up under grids So I think if the lot more intuitive if I’m looking for grids they show up there Again if I type in grid I can still throw on that components as I said can also expose search keywords so Suppose I have a lot of components in my project. I’m looking for say a diary component Diary the word doesn’t match calendar or inline or input control But these particular components exposed that is one possible match on On a search word so we’re gonna add more search terms But we added that in there so that as a spec so that it’s easier to find components and we can kind of figure out People can make requests about what what is a nice synonym for a component name So we’ll be improving that I’m gonna leave this in Sort of state that it’s in and come I’ll come back to it to demo a few more things We’ll go through some more of the overview here Maybe I should pause right here Rutger, do we have any urgent questions that we should answer about what I just showed? Well, we have some so maybe that’s the right moment to answer them Okay, because one is about the So much about the components Uh-huh One question is What’s components will be used for the at fields wizard by default? Okay, yeah, I was wondering that as well. So the question is is is about the there is a wizard here that that will stay there This place field wizard So without any change you could see the bootstrap components Are selected so we’ve made a slight change there. I think those at one point were Were all the Servoya default which it really shouldn’t be because if we want people to use these components rather the legacy ones and They should be the default so So those are now selected by default now this has always been That you can choose it and override it and create different configuration So if you put back the Servoya default you may certainly choose the Servoya default here for your configuration as well But it will default to the bootstrap for those Okay, that’s a good question. I’m glad I’m glad I forgot to mention that And then there’s one other question If it is possible to raise a warning on forms in and G clients Which are using the old Servoydefault components Yeah, you know, we we that’s an interesting question because we discussed that internally Initially when we were writing some of the user stories for improving how components are organized in the IDE and And we decided that we wouldn’t raise a warning for Because a lot of people will be just have like a gazillion warnings and we didn’t want to create a panic situation And you know that You may want to ignore some of those but six others and it would be hard then to see the the forest for the trees So there isn’t a warning that says you’re using a legacy component on a form however If you want to find Legacy components I think you could do a workspace search on the package name because they do show up in the FRM file But maybe that’s a good a good feedback for a good take away is is You know what’s the best practice for doing the migration and identifying If you’re using some of these because they they are there they won’t break And we don’t even warn on it today, so we’ll have to look into that Okay Got another question about the build process, but maybe we could do it at the end Okay, all right, yeah, yeah, because they’re all all come back to the IDE because we have a few more things to cover and go over I want to talk about a couple of the real common component packages that were released We did a major version bump on the bootstrap components And the reason is is that well, we had to add components to this And add some some features to this to really support the reorganization and the deprecation of the legacy components, so That we added an image component which is is really a lot like the Servoy default legacy media component Except for the image components a little bit enhanced the media one had to be data bound to a data provider the Image one is flexible can have a data provider. It could just have an image from from your project So it’s easier more flexible a quartian pain and combo box removed in the bootstrap or created in bootstrap Because that was a gap that wasn’t Available the actual combo box was the mobile one So we did a lot of cleanup here It was kind of mobile only so if you put the bootstrap combo box on your On your form It would look funny on the desktop browser because it was really meant for mobile So that one is the native select and then we have a regular combo box As well, so now it makes a lot more sense We also added a native list which is the corollary to the legacy list box list boxes aren’t so common in browser applications Anymore and so but it does look more like that native type list box You might see on a mobile application So so those five components were added. So definitely bootstrap got a major version bump And as you’ll see there’s also some properties that were added to label and data label To support stuff that happened in another package So and that is this the Servoy extra components which is another really common library Did get a major version bump as well because we we moved some components there Split pain which is like a tap panel with two two forms in the divider HTML area and spinner all move There or were created there because they are gone in the The legacy components so we still needed there was a gap to fill So those are new and they work pretty much the same Depricated components. This is important There’s in Servoy extra there was on render label which is a kind of label that can It basically you put a style class Like a calculation that returns the style class and it can dynamically Change how it renders based on some data value. This is really helpful in grids or list forms To show that you know it might switch from a status green to a status red or something depending on the status field That was always a separate component, but it’s really just a total duplication of label And then the same for font awesome label which was it had a little bit of default sizing But you still had to go and set the font awesome classes so We got rid of those because they were really redundant And a bit confusing that you had all these different kinds of ways to place a label So now we added two properties to both label and data label in the bootstrap package So we deprecated these from Servoy extra and we add a style class expression to labels in bootstrap So you can set that now any label can dynamically change style And then any label can also have a font awesome or a cliff icon in this style class One thing that I was going to show in the IDE that I had mentioned was the version property on a solution So you’ll notice if I click on my demo solution there’s a version property here I set it to one, but it’s just in the solution properties When I go to import a solution from the package manager And you can do that you know here download install with package manager and go to modules and get things like SPUI search or SPUI utils It will check the version of the module you have And if it’s a dependency of the one you’re trying to import it, it will it can warn you to change it So I’m going to go through a exercise here and add not the latest SPUI utils but something older And It’s still running and what I’ll do is after adding the older version of SPUI utils I’ll add the latest version of SPUI search which depends on SPUI utils and you’ll see that it’s going to scan it and prompt it If I add SPUI search with no dependencies already in my workspace It will also just add it even though it’s not they’re not shipped together So we’re really able now to manage this is more on how we distribute Extensions to you we’re really able to manage dependencies better and have your project check for dependency You know verified dependencies Better so now you can see I have SPUI utils Module in in my build path and if I do the same thing Run the package manager and go for the latest version of search And now it’s going to prompt me and say hey you got 1.3 You want to go to one one four one and I can click yes and then it’ll also update the dependency What’s changed as well is the the version number That you see here Is also if this really is maybe a more of an advanced case But but we had to support it end to end so it’s also required when you do a file export Not for deployments but for binary interchange export so if I export a dot servoify file You can see that it’s Picking this up from that version property But if I didn’t put it in it’s not it’s never required it doesn’t really do much Until you go to export and then it’s going to tell me that I need to do it It’s not going to let me finish the export without it so I could put in we recommend to do like semantic versioning I could put in my version number and now It says hey you got these These here you can choose to export this is always been the case you can always bundle your your modules in your export But even if you don’t whether or not you do or do not you can specify You know what’s the version that it depends on And and then that way if I go and then import this It will definitely check That I have the right version so this is mainly for us to because we use servoite to build dependencies and distribute them to you guys So this is mainly for us to control that so that your projects don’t get their dependencies all messed up However, for if you’re doing this kind of thing within your own teams Then you may also want to take note of this And specify The versions here and in fact it’s required So that you can do dependency type checking. I mean dependency checking The other thing that I wanted to point out I mentioned the deprecated components here and some of the properties You’ll see that some of those components they these components showed up The other thing I wanted to point out are a couple of properties on Food strap label and data label. So here you have now a button from text. It’s really simplified There’s just a few Components you need to know and if I place label here I now have a style expression class which I can put to a data provider Calculation say returning you know warning or success for example, and this is well documented You know their webinars and documentation The other thing I can do is I can do an image style class and do like a font awesome Something like that and then I’ll get the I’ll get the font awesome Icon there So so we added that to label and data label and all data label is is The same if this was already in the bootstrap, but that just has a data provider A data provider Property so it does direct data binding so there’s the only difference between those two but apart from that everything is consolidated there So I just want to point that out so I think that’s all that I wanted to demo I have just a few slides more of some other little odds and ends in This release and then we’ll definitely do some more fun demo stuff on Thursday We did some API additions You may remember we released a couple releases ago two new types of data sources or found sets the view found set Which is a lot like the memory found sets so these are found sets that can be generated off a sequel query And we brought those the API’s of those classes up to be more in sync with the regular found set API and the regular record API So things like If it has edited records or figuring out what the change data is right because these are editable found sets And so the API should support the same type of thing that you see in the regular found set So those are are pretty close to being in sync. We still don’t support working with failed records Yes, and and like record dot exception or View found set get failed records. So we don’t we don’t fully support that yet, but it’s it’s got a lot more methods in it now So you can check that out We also added an API for you to manage memories if you’re working with in-memory data sources typically what will happen is that You’ll create a data source that makes a temp table and then that stays in memory because it’s meant to be like a dedicated Data source through the lifetime of your client session And so we’ll stay in memory Whether or not you’re using it because it’s act as supposed to act like a data source However, that can that can cause a bit of memory overuse Depending on how you use it So now we provide the API for you to take that out so you can kind of decommission a memory data source when you’re not using it So allows you to control memory management Finally just some last few things there is a warning now that gets generated When you use the solution model if you use a invalid form name and I I’m guilty this all the time because if you’re making forms That need kind of like a randomized name or guaranteed to be unique Often is the trick to use a uid uid you IDs have a hyphen in them You would never be able to do that in developer Solution model has let you do it, but there are some cases where it can cause issues So now you’ll get a warning if you call solution model new form and you give it a invalid form name It will still work just like it did before but you get a warning If you want the warning to go away do things like replace hyphens with underscore and you’ll be fine I just want to point that out in case you see it And finally we did some stack updates on the IDE including Eclipse the Java that we shipped the open JDk that we shipped is now bumped up to 14 And we bumped up the HSQL driver that’s the driver that supports the Memory data sources we bumped that up as well Due to some some issues that we discovered in earlier version so Not that you need to know all this, but these are nice to know that the stack is is being improved So I’m going to leave up some of these links where you can download where you can watch recordings where you can provide feedback And take any more questions that we have Yeah, we have a couple Someone is asking With a new build process where the app pos J’s dog tech Is it recommended or necessary Okay Yeah, well the JS dog tags are never Required it’s just commented code It doesn’t affect your runtime it does allow the builder to To parse your code and do things like warn you if you passed in a string when your method says it takes a number So It’s always been recommended to use them because you get a stronger build Stronger type checking and such Now the change that we added where we don’t allow you to do full parsing Deparsing anymore. It really does it based on dependencies. We’ll look at those for the dependencies So if you’re not providing them then that you may not get full Type checking or code complete on your own stuff so it’s it’s recommended and it’s always been recommended But now even more so And I guess the documentation will be updated with an example of this as well Yeah, I mean, there’s not really the nothing has changed The JS dog tags haven’t changed the standard hasn’t changed. It’s just Now recommended more so so yeah, there is documentation on on a JS dog tags and And it’s available and it really hasn’t changed And then I’ve got a question about the database schema load Is there a visual indication of when the background database could be known as complements? Yeah, you know, I was wondering the same thing, but I was I was working with a local database Preparing for this webinar and I was wondering the same thing. I think it it’s in the the corner of the IDE Bring that up here You’ll get Down here in the right-hand corner where it shows background processes Just like when you’re when it’s building or launching ng clients or Activating a solution or whatever. It will show background processes running there and I think that’s where it shows up But I’m not a hundred percent sure because I wasn’t able to reproduce it Yeah question Hmm There’s in the extra components somebody’s asking where the side math Yeah, so we added a Category called navigation and it comes down under there and When you add safe bootstrap extra components, there’s nav bar and bootstrap extra It’ll also come in so you have side nav and nav bar will both come in under under navigation Some other things too. I forget. I forget which ones So Yeah, that’s where that lives and it’s I think it’s a lot more intuitive than rather than them showing up in total the different places when they’re pretty similar functionality Okay The version property Okay, the version property be read inside the solution for about info form Yeah, it’s funny. We were we were just discussing this. No, we haven’t added that to an API like application get solution version or something So we’re looking to add that but currently You can’t do that you might be able to get it from solution model. I’m not sure But but we plan to add that to a top-level API and we were just discussing that in fact So that that one’s kind of missed Okay Yeah, but what’s typically done is is people put a you know a constant somewhere in a top-level scope and they increment that and it’s under version Version control So you can still do it that way, but yeah, it would be nicer to get it right from the metadata And then last somebody is asking if It is possible to get the version number of the module in code That’s the same question. I think Probably yeah, yeah, so so not yet Think we might be able to sneak that in before we make the final two Have to talk to R&D. Okay So far, I know a lot of questions Okay, I see I saw a follow-up from Steve about that there’s the dock on the parse tag Yeah, yeah, yeah, yeah, I think our documentation probably has to be updated on that I’m not sure if it’s done yet, so I’ll check that’s a good point. Thanks Steve Okay Okay, we’re through all the questions Yeah, that’s it. All right. I know it’s a bit longer when we do these release webinars And more slides and less demo today. Thank you guys for your attention though I hope this helps you in the update and we’ll be back Thursday with more demo more fun stuff Thanks for joining see you on Thursday. Bye. Bye You

Close