Kickstart your Widget Development

• App Development
• Mendix Platform

• Transcript

  [00:00:00.030] hello and welcome everyone to a new [00:00:02.340] mendax expert developer webinar my name [00:00:05.279] is Jung dufus and I will be your host [00:00:06.870] for today today's webinar will be about [00:00:09.510] kick starting your widget development [00:00:10.889] with node yes grunt and other useful [00:00:14.549] tools JavaScript developer yell - laughs [00:00:18.029] and I will teach you how to use the new [00:00:19.830] widget generator upgrade your existing [00:00:21.960] widgets and how to check your code for [00:00:24.600] deprecations during the webinar you can [00:00:28.560] submit your questions in the question we [00:00:30.359] know after the demos the elta will go [00:00:33.210] through some of the questions the [00:00:35.280] questions and answers will be posted on [00:00:36.989] the webinar page afterwards [00:00:38.989] before we start please take a look at [00:00:41.190] the handouts window and go to webinar to [00:00:43.770] find the presentation slides please [00:00:46.350] enjoy the presentation I'll now give the [00:00:48.480] floor to Yelton I am thank you and thank [00:00:54.030] you everybody for joining the expert [00:00:56.430] webinar kickstart your widget [00:00:58.230] development my name is Lt lacnic I am a [00:01:01.500] JavaScript developer for the community [00:01:03.420] team at mendax at the community team we [00:01:06.750] want to enable you as a JavaScript [00:01:10.020] developer to create your own widgets and [00:01:12.630] we want to enable our community to [00:01:14.640] create content for this webinar we [00:01:18.030] expect you to know how a widget works [00:01:20.600] have technical knowledge about [00:01:22.770] JavaScript and have a basic [00:01:25.560] understanding what nodejs is we will not [00:01:31.170] go in depth on how a widget works in the [00:01:34.290] notes of the slide deck we provided a [00:01:36.240] link for a how-to for great in your [00:01:39.240] first widget the hello world widget in [00:01:41.700] this webinar I am focusing on Julie [00:01:46.009] first we'll talk about how to scaffold a [00:01:48.810] widget in a minute using our latest tool [00:01:51.060] the widget generator next we'll discuss [00:01:55.430] grunt which is included in our latest [00:01:58.890] tools and widgets repositories I'll talk [00:02:03.240] about how we can use the tools namely [00:02:05.790] the widget generator to update existing [00:02:08.039] widgets [00:02:11.090] as a bonus I will show another tool that [00:02:13.700] we built back in November to check your [00:02:16.849] widget and when it comes to deprecations [00:02:19.129] in minik 6 last but not least I'll give [00:02:23.569] a demo demonstrating these tools we'll [00:02:26.900] go into a step by step guide using the [00:02:29.599] widget generator and grunt in a slide [00:02:33.830] deck we added links and further [00:02:35.269] explanations in the notes per slide the [00:02:38.810] notes in the last slide contains a brief [00:02:41.660] step-by-step guide on the things that we [00:02:43.910] are going to demo at the community team [00:02:52.760] we create and maintain a lot of witches [00:02:55.750] in order to do this properly we need [00:02:58.670] development tools so up until now we [00:03:01.610] only had brackets the code editor [00:03:04.060] combined with a custom plugin to create [00:03:07.099] widgets there are a couple of in depth [00:03:10.190] how tools that you can find on our [00:03:12.500] website regarding this editor it has [00:03:16.670] advantages and disadvantages it's visual [00:03:20.569] and it's easy to use but there are a few [00:03:24.889] bugs in the plugin that because of the [00:03:27.230] very little support in brackets are hard [00:03:30.079] to fix simply put the plugin not always [00:03:34.280] works as expected but it's hard to debug [00:03:37.069] and fix it for example the plugin will [00:03:40.549] not work if you are not connected to the [00:03:42.829] Internet this led to the creation of a [00:03:47.030] new tool the yeoman widget generator [00:03:49.870] it's faster it's more reliable it's [00:03:54.380] better maintainable its editor [00:03:57.340] independent and we've made this tool [00:04:00.669] transparent and open-source the files [00:04:03.950] you can find them on github for those of [00:04:11.540] you [00:04:11.930] do not know in what nodejs this simply [00:04:15.739] put it's a framework that uses [00:04:18.290] JavaScript to run basically anything on [00:04:21.079] your computer it has been around for a [00:04:23.810] long time and has a large ecosystem of [00:04:26.509] open-source libraries now you might have [00:04:30.139] already used it without knowing it [00:04:32.330] for example the previously mentioned [00:04:34.750] brackets editor is built on top of node [00:04:39.520] yeoman is a command-line tool that is [00:04:42.259] built on top of no GS as well it's what [00:04:46.130] is called a scaffolding tool using a [00:04:49.130] template and by entering a few [00:04:50.960] parameters it can quickly scaffold a web [00:04:54.229] application a website or in our case a [00:04:58.100] widget the widget generator is basically [00:05:02.150] a template that is used by the yeoman [00:05:04.340] command-line client to create a widget [00:05:10.780] grunt is a task runner that can be found [00:05:14.900] on crunches calm [00:05:17.349] it is also built on top of note yes and [00:05:20.780] it has the ability to run predefined or [00:05:24.860] custom Li defined tasks grunt uses a [00:05:29.599] single file a grünfeld digest to run [00:05:33.289] these tasks it has a few advantages [00:05:36.349] mainly it is independent of any editor [00:05:39.770] you use you can run this from the [00:05:42.409] command-line client and you can run this [00:05:44.510] from the command line but for a lot of [00:05:47.180] editors there are also plugins that can [00:05:51.020] use grunt now our community comes up [00:05:55.190] with new ways to improve development [00:05:57.020] either through the forum through github [00:05:59.990] or meetups and I actually have to thank [00:06:02.780] one of our MVPs unleash MIT for [00:06:05.180] providing the first version of this [00:06:06.860] grunt file using hiss as an example we [00:06:10.669] created our own which is now included in [00:06:13.310] the sources of many of our widgets on [00:06:15.889] github as well as automatically provided [00:06:20.060] by our widget generator [00:06:24.599] we have created a few tasks that you can [00:06:27.789] use out of the box to speed up your [00:06:29.919] widget development in a demo I will [00:06:33.519] demonstrate the use of grunt and running [00:06:35.529] the various tasks like built version [00:06:38.649] start muddler and a default task in a [00:06:43.599] slide deck you will find a short [00:06:45.189] description per task and the most [00:06:47.979] important task the default task will let [00:06:51.399] you develop your widget while running [00:06:54.099] your mimics application without a [00:06:56.529] necessity to redeploy your application [00:06:59.439] every time you make a change to your [00:07:02.110] javascript files in your widget now you [00:07:09.369] might have already built a widget or for [00:07:12.519] a client you are customizing one we have [00:07:17.079] adapted the widget generator to include [00:07:20.289] the necessary files for grunt [00:07:22.300] in your existing widget repository so [00:07:26.349] this will give you the ability to [00:07:28.300] quickly use the power of grunt there are [00:07:33.219] a few steps that you will need to take [00:07:34.919] you open your widget folder in the [00:07:37.240] terminal and that can either be a [00:07:39.369] command line client or a powershell you [00:07:43.449] have to make sure that the source files [00:07:45.099] are in a subdirectory called SRC [00:07:48.689] you run the widget generator in the [00:07:51.189] terminal it will ask you if you're [00:07:53.439] updating an existing widget the widget [00:07:58.419] generator will then create a package to [00:08:00.699] Jason and a grunt file j/s it will [00:08:05.050] install the necessary dependencies for [00:08:06.969] grunt and you can start using it now as [00:08:13.269] a bone [00:08:13.790] in this webinar I'll also talk about [00:08:16.870] deprecations in November last year we [00:08:21.770] had to make sure our mimics supported [00:08:24.200] widgets were up-to-date and compatible [00:08:27.140] with the new mendax six release there [00:08:31.460] were methods and api's were already [00:08:33.290] Markus deprecations in mimics five these [00:08:37.130] would be removed in mimic six if any of [00:08:43.400] the widgets would contain deprecations [00:08:45.290] they would break the remaining six [00:08:47.540] application due to JavaScript errors so [00:08:52.280] we created a deprecation checker that is [00:08:55.280] also built on top of no GS and run as a [00:08:58.550] standalone command-line client with this [00:09:02.840] client you can quickly check your [00:09:05.540] existing widgets in your project you run [00:09:09.860] this client in your widgets folder of [00:09:11.890] your project and it will tell you [00:09:15.410] whether or not any widget has possible [00:09:18.440] deprecations now I said we use this tool [00:09:22.730] to check any of our own supported [00:09:26.990] widgets the tool can also export an [00:09:31.430] excel file for future references so [00:09:39.970] enough theory let's go let's get down to [00:09:43.730] business and let's demo the tools that I [00:09:47.600] discussed [00:10:04.270] okay first of all and to use these tools [00:10:08.360] we need note yes no js' can be [00:10:14.210] downloaded from Noah's Ark and we [00:10:19.220] recommend that you installed the LTS [00:10:21.920] version in this case the 4.2 that six [00:10:25.490] version you can also install the stable [00:10:28.340] version if you want it as long as you [00:10:30.920] make sure that the version is minimally [00:10:35.530] 4.2 now once you've installed node yes [00:10:40.940] it is available on your command line and [00:10:44.020] I will show this by opening a PowerShell [00:10:48.770] I have my PowerShell opened here you can [00:10:53.720] also use if you want the standard [00:10:56.300] command line client in Windows this one [00:11:00.770] you can open by going to start and then [00:11:03.520] in the search bar type CMD press ENTER [00:11:09.020] and this will start your command line [00:11:11.120] client now for this demo I'm going to [00:11:14.090] use a PowerShell I personally prefer the [00:11:17.060] PowerShell okay so I've installed no [00:11:22.370] Jess and I can check if it's there by [00:11:28.880] typing note - V and this will give me a [00:11:33.650] version number now in my case I have [00:11:36.020] version 4.2.1 you also can check whether [00:11:40.970] or not the node package manager is there [00:11:43.870] by typing NPM - V and this will give you [00:11:49.760] the version of the node package manager [00:11:52.930] now these these are necessary to install [00:11:59.300] the yeoman generator so first I'll show [00:12:03.440] you the website of yeoman yeoman is on [00:12:07.220] yeoman dot IO and this will give you an [00:12:10.580] explanation of what yeoman does and how [00:12:13.910] it works and how you can install it now [00:12:15.940] if I go to [00:12:18.520] yeoman dot io / generators here I have a [00:12:23.600] list of all the generators and currently [00:12:25.510] yeoman has about 33 or by 3400 [00:12:30.560] generators and MINIX has built their own [00:12:33.440] generator as well so if I type in min [00:12:35.750] decks here you'll see a link to the [00:12:39.500] MINIX widget generator now if I click on [00:12:42.440] it I go to our get up page now at the [00:12:47.450] moment we have not yet provided a how-to [00:12:51.980] on our website this how-to will be [00:12:55.400] published as soon as this video will be [00:12:58.730] published for now I'm I refer to the [00:13:02.630] readme page on get up here you'll see a [00:13:08.180] short explanation on how it works and [00:13:11.630] how you need to install it and you [00:13:14.360] install this by typing this command in [00:13:18.530] your command line window so if I go to [00:13:21.350] powershell it would be npm install [00:13:24.940] install - g which means globally yo [00:13:30.500] that's the yeoman client generator [00:13:34.610] - Bendix that's the MINIX widget [00:13:39.410] generator and grunt - climb and that's [00:13:43.820] the grunt client now this can take up to [00:13:48.470] a minute or two minutes I've already [00:13:51.470] installed it so I don't want you to be [00:13:54.350] looking at a window where it's trying to [00:13:57.860] install I already have it so let's use [00:14:04.240] the widget generator [00:14:06.890] I want to scaffold a new widget so I [00:14:12.050] create an older where I want to scaffold [00:14:15.020] this widget in this case I have a folder [00:14:18.710] generate a widget which is empty so if I [00:14:21.890] go to my parish shell here I see you [00:14:26.480] listening and I go to [00:14:29.720] this folder and it is empty so let me [00:14:35.279] clear this and now I'm going to run the [00:14:40.139] widget generator I do this by typing yo [00:14:45.799] Bendix pressing enter this will start my [00:14:52.290] generator and this generator is going to [00:14:57.059] ask me for a few parameters first of all [00:15:00.949] it asked me what's the name of my widget [00:15:03.869] now let's say I'm going to call this [00:15:06.209] webinar widget I press ENTER I can enter [00:15:16.919] a description now what you might see if [00:15:19.319] you open the widget generator is that [00:15:22.759] there is already a value here between [00:15:25.790] brackets so if I press ENTER now it will [00:15:29.279] use the default value if you open the [00:15:34.139] widget generator and for example here [00:15:36.209] you have add a copy right now between [00:15:39.149] brackets there is mendax 2016 for you [00:15:45.089] that would be different now that is [00:15:47.850] because I've already used the generator [00:15:50.809] before and so it will save these values [00:15:57.529] so I'll just press enter enter here's [00:16:02.610] the initial version and we always always [00:16:05.249] start the widget with version 1.0.0 and [00:16:09.989] this is actually what is called semantic [00:16:12.809] versioning that means that first number [00:16:16.799] is the major number the second number is [00:16:19.529] the minor number and the third number is [00:16:22.980] a patch number and we recommend that [00:16:26.910] everybody uses semantic versioning you [00:16:30.329] will see this in our app store you will [00:16:33.629] see this on github and we recommend that [00:16:37.110] you stick to this versioning version [00:16:40.919] numbering [00:16:41.960] so press ENTER again again I've already [00:16:45.529] used this so the author is already [00:16:47.540] filled in and I have here my github [00:16:50.450] username that's not completely [00:16:54.860] functional right now but you can already [00:16:57.140] set it so if I press enter now it will [00:17:01.120] scaffold a new widget so if I let me [00:17:07.059] here you will see the folder that I'm [00:17:09.949] working in and right now it's empty so [00:17:12.410] if I press enter now what it will do is [00:17:15.709] create all the files and these files are [00:17:19.309] actually a copy of our app store widget [00:17:23.420] boilerplate that is on github as well so [00:17:26.750] this follows the pattern of the app [00:17:30.860] store widget boilerplate that is also [00:17:34.880] discussed on our website in the [00:17:40.309] documentation what it also does here you [00:17:45.320] see it has copied all the files and now [00:17:48.530] it's installing all the dependencies [00:17:50.420] that are needed for grunt when these [00:17:55.700] dependencies are installed it will [00:17:58.179] automatically run grunt built to build [00:18:01.490] the first version of your widget and the [00:18:04.820] first version of my widget will be in my [00:18:06.980] distal der and it is called the webinar [00:18:09.830] widget I will show you the tasks that [00:18:14.600] you can run in grunt later on now I also [00:18:20.710] mention that you can use the Bendix [00:18:24.100] widget generator to update existing [00:18:27.500] widgets so if I go to I have here a [00:18:32.150] folder and let me go to my folder [00:18:43.020] now as you might see there is no grunt [00:18:47.440] file here and there is no package no [00:18:50.500] Jason here now normally you could um [00:18:56.100] manual copy these files but like I said [00:19:00.159] we've adapted the generator to create [00:19:02.650] them for you so let me run the generator [00:19:06.970] again in this mint and in this folder so [00:19:10.260] third is and I type in yo mendax and I [00:19:15.640] press ENTER now what will happen is the [00:19:21.520] generator will see that the directory is [00:19:24.970] not empty and let me maximize this and [00:19:29.370] it will give you a warning and if there [00:19:33.730] is already if there are already files in [00:19:36.309] your folder but it will also ask you [00:19:41.559] whether or not you are upgrading a [00:19:43.659] custom widget and in this case I am so [00:19:47.890] I'll press yes what it will do now is [00:19:53.190] try to read the package XML in your [00:19:59.020] source folder so if I go to my source [00:20:06.159] folder here is the package XML and here [00:20:12.130] is my demo which is XML and so it will [00:20:15.520] automatically detect this is the name of [00:20:18.909] your widget so here I can press ENTER [00:20:21.490] and since my widget is of version 1.0.0 [00:20:28.120] it will take this version number as well [00:20:31.570] so I press enter and now it will copy a [00:20:36.520] couple of files but the most important [00:20:38.860] one is a package to Jason and grunt file [00:20:42.370] and as you might see now it has included [00:20:48.520] the grunt file and the package Jason [00:20:54.020] it will then install all the [00:20:57.690] dependencies and now you can use grunt [00:21:01.850] in your existing widget repository let [00:21:08.340] me break out of this now it might also [00:21:16.440] happen that you have downloaded a widget [00:21:21.380] and if you've downloaded a widget you [00:21:24.840] have the widget from us so if I go to [00:21:28.820] the mendax a repository and for example [00:21:32.850] I take the chart yes widget if I I can [00:21:39.690] clone this using git or I can download [00:21:42.600] it as a zip file and it will include a [00:21:45.720] grunt file and a package Jason so I [00:21:51.150] should be able to use grunt from this [00:21:54.480] repository so if I type right now it [00:21:58.500] will give me an error and that is [00:22:00.930] because grunt cannot find the local [00:22:04.740] grunt and that's because the [00:22:07.610] dependencies that are used by grunt are [00:22:11.370] not yet installed so I need to install [00:22:14.790] these and I do this by typing npm [00:22:19.290] install and if I press ENTER it will [00:22:23.720] install the dependencies that's because [00:22:26.580] it has a package that jason and so the [00:22:30.090] node package manager will understand [00:22:33.420] which dependencies to install so if i [00:22:37.080] open i will open this in my editor and [00:22:45.890] so in my editor here you will see the [00:22:50.130] packages are jason and in here are the [00:22:54.090] dependencies that are used by grunt to [00:22:56.670] run their tasks [00:23:00.640] so that concludes using the widget [00:23:05.679] generator and so now let's go let's use [00:23:09.970] grunt so for this I'm going to use [00:23:19.170] actually use one of our widgets that [00:23:22.240] we've built the chart yes we would you [00:23:30.750] in here I have a grunt fell I have a [00:23:33.910] package that Jason and my dependencies [00:23:36.309] are already installed because I have a [00:23:38.350] node modules folder so let's go to my [00:23:43.840] partial and I go to charge s now from [00:23:51.370] here I can run my grunt tasks and so [00:23:56.740] first let's build a new NPK file a [00:24:00.790] widget fell so here's my NPK fell and [00:24:06.580] now I'm going to run grunt build now [00:24:16.240] grunt what grunt built will do is take [00:24:19.799] all the files in your source folder here [00:24:23.740] and create a an archive a sip archive [00:24:29.520] with an mpk extension and it will put [00:24:33.929] this NPK file into this folder and as [00:24:37.929] you can see by the time stamp I just [00:24:39.970] created this mpk file so that's how you [00:24:44.500] use the grunt build tool and this this [00:24:49.299] NPK you can distribute in the app store [00:24:52.990] or you can use it in your project now if [00:24:58.780] I'm updating the code in my widget I [00:25:02.700] need to do some versioning so every time [00:25:06.429] I create a new version of my widget I [00:25:09.610] need to update the version number if I [00:25:12.640] go to [00:25:13.809] let me go through my editor in my source [00:25:21.519] folder I have a package dot XML here and [00:25:28.659] here is a version number and currently [00:25:32.919] the version is 3.1.3 now if I want to [00:25:37.779] update my version number I could change [00:25:42.460] this myself but we have created a [00:25:46.119] current task for this so if I run grunt [00:25:50.190] version it will try to read the package [00:25:55.899] XML in the version number in package XML [00:25:59.320] and in this case it's 3.1.3 so if I want [00:26:03.489] to update my version number for example [00:26:06.249] I want version 3.2 I can set this using [00:26:11.799] grunt version so I say grunt version [00:26:20.279] 3.2.40 the patch number here if I say [00:26:23.109] it's version 3.2 it's actually 3.2 dot [00:26:27.639] and so now I press ENTER and if I go [00:26:33.159] back to my editor you will see that in [00:26:36.549] the package dot XML the version number [00:26:39.369] has changed to 3.2 dot oh so that's an a [00:26:43.690] fast way to change the version number of [00:26:47.879] your widget it will also update the [00:26:51.549] version number in your package JSON and [00:26:54.629] we try to keep these two aligned but [00:26:59.589] this version number is not used in the [00:27:02.259] app store or anywhere it's just for [00:27:05.019] convenience that we also change it here [00:27:07.330] in the package that Jason when we [00:27:15.729] develop [00:27:16.220] a widget we always add a test project [00:27:20.870] and usually if you're looking at our [00:27:24.710] widgets at our structure you have in [00:27:27.770] your widget repository you have a folder [00:27:32.179] called test and in test here is my test [00:27:36.590] project now I can run this test project [00:27:42.580] just by clicking on it but we also [00:27:46.370] included a current task for that so I [00:27:51.049] can run this by typing grunt start - [00:27:57.730] muddler now what it will do is search [00:28:06.080] for your mimics version selector and [00:28:10.360] taking the test test project and opening [00:28:15.710] it with the version selector so right [00:28:18.049] now from the command line I've started [00:28:20.240] my test project now let's do some [00:28:29.179] development on the widget so right now [00:28:32.750] what I'm going to do is I'm going to [00:28:34.490] going to run this project locally [00:28:46.570] and in the meantime in a source folder [00:28:50.950] I'm going to update one of my files in [00:28:55.930] this case cord rjs and i will uncomment [00:29:01.570] this line now if I'm if I open my test [00:29:07.840] project locally and I open my chrome [00:29:12.040] inspector by right-clicking and then go [00:29:15.700] to inspect in the tab sources okay I can [00:29:23.830] look at all the sources of the files [00:29:26.890] that are loaded and in this case it has [00:29:31.480] loaded the charges files and in this [00:29:36.010] case I want to look at the court at je s [00:29:38.470] file now if I look at the quarter J's [00:29:41.710] file you'll see that this line is [00:29:53.280] commented but I just uncommon it here [00:29:59.500] let me save it again and reload it's [00:30:08.080] still commented that's because the [00:30:11.770] modeler will take all the widget files [00:30:14.140] and unpack them in the deployment folder [00:30:16.750] so if I go into my project and I go to [00:30:21.340] my test test project folder to [00:30:25.390] deployment then to web into widgets hill [00:30:32.380] here here you will see the files of in [00:30:36.730] this case the charge yes widget and so [00:30:39.700] if I go to core here you'll see that [00:30:44.590] it's commented now if I want to do [00:30:48.880] widget development it's useful to change [00:30:52.630] files in your source folder and see [00:30:56.170] these changes reflected directly [00:30:59.770] your project so that's why we created [00:31:06.400] the default task for grunt and I run the [00:31:12.730] default task I can say grunt default but [00:31:16.690] if I omit a task name I can just say [00:31:19.870] grunt run grunt so I press ENTER and [00:31:23.790] this will run the watch task now what [00:31:28.240] watch will do the watch task will do is [00:31:33.420] watch your source folder so let me go [00:31:36.880] back to my source folder arrived my core [00:31:41.500] dot JS file it will watch for any [00:31:46.890] changes in these files and when one of [00:31:50.950] those changes happens and let me do this [00:31:55.930] by say triple comment in here for [00:31:58.810] example and I'd press save now you'll [00:32:02.260] see that grunt detects a change in this [00:32:05.380] case in cordage is now it will run [00:32:08.680] actually run two tasks it will compress [00:32:12.130] all the files in the source folder and [00:32:15.640] it will basically build a new NPK file [00:32:18.870] so this is similar to the grunt build [00:32:22.450] task but it will do it will also do [00:32:26.650] something else it will copy the changed [00:32:30.820] file to your deployment folder so in [00:32:35.980] this case here I have cordage is opening [00:32:39.340] my source file and just as I saw that [00:32:42.810] the cordage is file in my deployment [00:32:46.360] folder was not changed if I go to my [00:32:49.560] cordage a s file here you'll see that it [00:32:53.350] now has triple comments and so here if I [00:32:59.520] reload the page now [00:33:06.190] already had a sources open so and the [00:33:09.909] quartet JS file open and now we'll see [00:33:12.309] that it's triple committed and basically [00:33:16.769] what this means is that all the changes [00:33:19.750] I make in my source folder are now also [00:33:23.529] reflected in my deployment folder and so [00:33:26.200] when I'm developing this widget and I [00:33:29.620] make changes to the JavaScript files I [00:33:32.860] do not have to read the redeploy my [00:33:37.179] project or synchronize my project [00:33:40.600] directory as you can see in the if you [00:33:43.990] have in the modeler and what it was all [00:33:46.600] all also done when developing in records [00:33:52.259] now I emphasize on changes in your [00:33:56.710] JavaScript because when you're changing [00:34:00.639] files for example in this case the [00:34:05.679] package XML or let's take for example [00:34:10.060] the bar chart here this XML is loaded by [00:34:16.119] the modeler now if I make changes here [00:34:20.079] for example we create a new property so [00:34:23.919] for demo purposes I will just copy this [00:34:28.119] and I'll say the key is size caption [00:34:35.169] size now if I save this my grunt will [00:34:44.859] also see this change it will create a [00:34:48.159] new mpk file but if I go to my modeler [00:34:52.720] and in this case go to the bar chart I [00:34:55.770] will not see this key here yet and [00:34:59.290] that's because it now needs to reload [00:35:02.319] the mpk file so in this case if I make [00:35:06.130] changes to my XML file or or CSS because [00:35:12.010] that also needs a reload from the [00:35:16.510] modeler [00:35:17.900] I now need to synchronize my project [00:35:20.630] directory and if I do that you'll see [00:35:23.150] that it has added a couple of errors and [00:35:26.270] that's because the definition of the [00:35:28.700] widget in this case the bar chart is [00:35:31.730] changed so if I click on the error what [00:35:36.260] I need to do is update this widget so I [00:35:40.340] right-click and I say update all widgets [00:35:43.600] and now if I double click on the bar [00:35:48.440] chart now you'll see that it has added a [00:35:53.990] key so that is something that you need [00:35:58.730] to keep in mind when you're developing [00:36:01.100] your widget that if you make changes to [00:36:03.800] either your CSS file or an XML file then [00:36:08.510] you need to you need to simply [00:36:11.930] synchronize your project directory but [00:36:14.420] while running this grunt task it will [00:36:16.370] always have the latest version of the [00:36:19.310] mpk file in your test project because i [00:36:24.470] said that grunt when you went grunt [00:36:29.000] built runs it will create an MPA file [00:36:32.360] and puts it in the dist folder but it [00:36:36.170] will also make a copy of this in your [00:36:39.020] test project in this case in my test [00:36:41.900] folder and then widgets and so this mpk [00:36:46.190] file is also the latest version of your [00:36:51.380] widget now I [00:36:58.940] promised a bonus and that is the [00:37:03.790] deprecation checker so let me break out [00:37:08.359] of this if you want to stop run in this [00:37:10.579] case the the the the standard grunt [00:37:14.060] watch task you can break out of it by [00:37:17.089] pressing ctrl + C and then press yes and [00:37:21.200] now I'm I have stopped grunt so like I [00:37:27.230] said we created a deprecation checker [00:37:29.660] and this can be found on github as well [00:37:32.890] under manic so koat.com slash mendax and [00:37:38.829] if I type in deprecation it will show me [00:37:44.150] the MX - check - deprecations now this [00:37:50.990] will give you a short description on how [00:37:54.470] to install it and this is similar of [00:37:57.760] installing your widget generator or [00:38:02.930] yeoman in this case we install the [00:38:06.680] deprecation checker by running npm [00:38:09.319] install MX - check - deprecations [00:38:13.280] - g which means globally so you can use [00:38:16.339] it everywhere in your terminal so i've [00:38:21.530] already installed it so if i run MX [00:38:25.310] check deprecations - h which means help [00:38:32.170] it will show me the deprecation checker [00:38:34.790] with a short description of the options [00:38:38.240] that you can give so let me go to a [00:38:41.869] project where i want to check whether or [00:38:44.930] not a widget has deprecations that will [00:38:48.890] break in mendick 6 so i go to the folder [00:38:52.790] i created a test project in the folder [00:38:57.380] deprecations for demo purposes and so in [00:39:01.400] this folder [00:39:09.640] this is a standard project folder and in [00:39:12.880] my widgets folder I have a couple of [00:39:15.789] widgets and now I want to check these [00:39:17.619] widgets using the deprecation checker to [00:39:22.240] see if there are any deprecations so I [00:39:25.079] go to widgets and now here I run a mix [00:39:33.039] check deprecations now what it will do [00:39:39.099] is run through every widget so as you [00:39:43.150] can see here if run runs through [00:39:46.089] bootstrap RTE NPK which is here and it [00:39:53.109] will check for any deprecations and in [00:39:54.670] this case it hasn't found any [00:39:56.349] deprecations the same for the calendar [00:39:58.450] widget the same for the charge as widget [00:40:02.049] and here I have deprecations in my micro [00:40:07.210] flow label dot mpk now what it will tell [00:40:10.390] you is what kind of deprecation do I [00:40:14.740] have in on which javascript file in this [00:40:19.779] case the microphone labelled is in the [00:40:24.069] NPK foam it will tell me what the [00:40:26.529] deprecation is it will tell me on what [00:40:29.589] line it is in what column it is and it [00:40:33.640] will tell me what the the match and this [00:40:37.990] is basically a short snippet of the the [00:40:42.509] deprecation and that's because the [00:40:46.420] application checker will tell you about [00:40:49.089] possible deprecations so if i go to for [00:40:52.089] example here is a deprecation it says [00:40:55.269] the deprecation is MX UI dot HTML dot [00:40:58.359] set content but this is set contents and [00:41:02.319] this is clearly a method in the widget [00:41:05.740] and so this is actually a false positive [00:41:08.410] so the deprecation checker just checks [00:41:12.160] for deprecations but it will tell me not [00:41:14.559] tell you whether or not it is really a [00:41:17.829] deprecation because it might be a false [00:41:20.710] positive [00:41:21.279] now of course this [00:41:23.380] create a list in your terminal your [00:41:26.740] terminal and that might not be very [00:41:28.900] convenient so if I run this again but [00:41:31.869] now by using - II it will do the same [00:41:35.950] thing but it will create a deprecations [00:41:39.009] dot XLS file and this is basically an [00:41:42.039] excel file where all the deprecations [00:41:44.529] are listed and so you can check them for [00:41:49.049] for later references and that concludes [00:41:55.059] my demo yum [00:42:04.109] great thank you very much for that yell [00:42:06.849] - great explanation and awesome demos [00:42:09.490] it's now time for some questions [00:42:11.740] you can ask questions through the [00:42:14.079] questions window in GoToWebinar during [00:42:17.440] the webinar we've already received some [00:42:19.509] great questions so let's go through some [00:42:22.210] of them the first question is by Ahmed [00:42:26.710] and his question is is yeoman better [00:42:30.700] than brackets and what would you [00:42:32.980] recommend I think we've seen some of it [00:42:35.319] during your demos but I'd love to hear [00:42:38.380] your answer in this yeah it's a great [00:42:43.599] question thank you what is better the [00:42:48.819] brackets editor in our opinion is not [00:42:53.589] well supported and the plugin that we [00:42:56.890] created is as I said earlier is [00:43:01.740] difficult to maintain we have the code [00:43:04.809] of this this plug-in on github as well [00:43:07.000] but it's very hard to maintain and so we [00:43:12.730] thought let's create a better tool and [00:43:16.390] in this case it's the yeoman which [00:43:18.069] generator so which one is best [00:43:20.980] I think it's yeoman but brackets is more [00:43:25.839] visual so yeah I think that's that would [00:43:31.420] be my short explanation great IMed does [00:43:36.880] it [00:43:37.210] answer your question can you now make a [00:43:41.200] decision on what you prefer because I [00:43:43.780] think that's what it comes down to it's [00:43:45.550] not specifically that one is better than [00:43:47.500] the other but more of what you prefer to [00:43:51.609] use Michael asks a question hi guys is [00:43:56.079] it possible to get a recorded version of [00:43:57.970] the webinar at some later time and yes [00:44:00.280] every expert webinar is recorded and [00:44:02.349] posted on the developer website [00:44:04.170] developer Dominic's calm and we also [00:44:07.359] post the slides with the notes along [00:44:10.300] with the questions and answers so you [00:44:12.250] can see and read everything afterwards [00:44:16.390] jayven Bari asks a question is there a [00:44:19.540] plan to make this into a GUI instead of [00:44:22.599] a command line not right now [00:44:30.240] there might be possibilities - to create [00:44:33.460] a GUI right now there isn't a plan on on [00:44:39.280] doing that and basically the Yeomen [00:44:42.160] client is always a terminal a client so [00:44:47.589] a command line client and I have to [00:44:50.500] check because for instance for grunt [00:44:53.890] there are a couple of plugins for a lot [00:44:57.760] of editors in my case I use Adam a lot [00:45:01.079] so for Adam there is a grunt plug-in and [00:45:04.230] maybe but that's something I have to [00:45:06.910] check maybe there's a plugin for using [00:45:11.440] yeoman from your generator and then yeah [00:45:15.630] sorry from using yeoman in your editor [00:45:19.299] and so then you don't need to command [00:45:23.470] line client anymore but that's something [00:45:27.099] I have to check so maybe maybe all right [00:45:32.799] thanks [00:45:35.770] Mohammed asks a question is there a [00:45:38.349] webinar to show how to build a widget [00:45:40.089] from scratch well actually we've hosted [00:45:44.920] another webinar exactly one year ago [00:45:47.410] also in February [00:45:49.720] which was hosted by hit art Aidan's [00:45:52.240] about creating custom widgets and it [00:45:56.049] also includes a basic webinar and how to [00:45:57.910] create your first hello world widget and [00:46:01.240] we've also got some how-tos on that in [00:46:05.380] the MINIX documentation so if you go to [00:46:08.170] world man x-com you'll find that in the [00:46:11.710] how-to section Ivana asks suppose you [00:46:16.839] want to develop a new widget on what [00:46:19.329] version of mendax can you best start if [00:46:23.349] you would also want to support the [00:46:25.329] current mendax customer base if you want [00:46:38.529] to develop a widget I would recommend [00:46:42.579] that you start on MINIX 518 and that's [00:46:51.549] because when you for example you would [00:46:54.970] want to use this this this widget in [00:46:58.630] many six if you want to update it to too [00:47:02.859] many clicks it's more convenient to [00:47:04.990] start add MINIX 518 that would be my [00:47:08.799] recommendation all right thank you so [00:47:13.690] not necessarily the latest version not [00:47:16.240] 6.2 but 518 plus half v 5 would be 5 [00:47:23.619] would be now 5 is used to most so yeah I [00:47:27.940] think it's best to start at for example [00:47:31.210] 518 something like that yeah so it's [00:47:35.319] there's more support for it and more [00:47:37.690] people using it yeah all right so the [00:47:40.390] next question is by I'm Matt so he wants [00:47:43.720] to know how you can become an expert [00:47:45.480] widget developer in a short time so do [00:47:48.549] we have any suggestions for how you can [00:47:51.940] you know quickly ramp up widget [00:47:54.519] development is there something specific [00:47:56.200] you can do for mendax or maybe a crash [00:47:58.779] course online somewhere we have [00:48:03.480] couple of how to's on the MINIX [00:48:06.570] developer website which will tell you [00:48:10.380] how to to create a widget but it will [00:48:13.920] also tell you how a widget is structured [00:48:16.590] so what's the the for example the folder [00:48:20.250] structure and things like that and yon [00:48:23.070] also mentioned the other webinar from [00:48:26.130] last year that also goes into creating I [00:48:30.150] think there was a hello world widget and [00:48:34.950] so that would be a quick way to to start [00:48:38.550] and I think the other way to to learn [00:48:46.320] this is by experimenting [00:48:49.140] so just by developing and if you make [00:48:52.440] for example a an error I mean that's [00:48:55.619] something that you learn from so you'll [00:48:59.460] learn also by I would say trial and [00:49:02.520] error so I think that that yeah plus [00:49:05.940] well be how choose and the other webinar [00:49:09.930] I think that would be a quick way to to [00:49:13.530] start your your widget development great [00:49:17.640] thank you very much I'm at does that [00:49:19.380] answer your question [00:49:20.490] I think it comes down to practicing a [00:49:23.220] lot finding a good idea and just trying [00:49:26.430] it out and if you have someone around [00:49:28.859] you maybe colleague or a JavaScript [00:49:32.580] expert who's maybe built widgets before [00:49:36.000] maybe they can assist you and give you [00:49:38.700] some pointers give you some tips and [00:49:40.140] otherwise of course there's a the medics [00:49:42.960] forum where you can always ask you [00:49:44.400] questions and guaranteed answers yeah [00:49:49.109] and I I think there's also something [00:49:50.880] else I mean a we have a lot of our [00:49:54.720] widgets we have them on github so that's [00:49:58.410] also a quick way to try to find out what [00:50:02.070] the structure is take the how-tos and [00:50:04.380] then take one of our existing which it's [00:50:06.869] um get up and try to look at the code [00:50:09.690] and try to understand how to structured [00:50:12.630] and I think that I mean that helped me [00:50:15.000] when I started [00:50:16.900] as a JavaScript developer at MINIX that [00:50:19.750] helped me tremendously just by looking [00:50:22.450] at the code of existing widgets as well [00:50:25.480] and I mean then it goes pretty fast and [00:50:29.260] yeah the forum is a good one as well [00:50:31.120] yes all right thank you very much so [00:50:35.590] a yellow Decker asks a question he says [00:50:39.100] would this work as a yeoman GUI for [00:50:42.250] mendax and he links to an atom package [00:50:45.820] called atom yeoman and perhaps you can [00:50:50.440] open that on your UI so that we can all [00:50:55.870] see what he means [00:50:57.820] so that would be atom dot io / packages [00:51:03.510] / atom - a yeoman and perhaps you know [00:51:09.340] that's that's something we have to look [00:51:11.590] into and perhaps yell that can already [00:51:14.860] tell us now if this is looking good or [00:51:18.990] maybe something for for the future well [00:51:25.180] thank you [00:51:27.120] I didn't see this one but I'll be sure [00:51:32.500] to to look into it I mean if if it works [00:51:35.590] then I'm going to experiment with it and [00:51:39.250] and if it works and then I would really [00:51:42.640] recommend it yes thank you excellent so [00:51:46.690] thank you very much for the suggestion [00:51:49.360] gonzo heart which is asking if you want [00:51:52.090] to adapt an existing widget that has no [00:51:54.850] node yes and Jason with grunt for [00:51:58.960] example one you download it from the App [00:52:01.810] Store how do you start and install grunt [00:52:06.340] so I think that's I think you show that [00:52:10.390] as part of the updating a widget but [00:52:12.520] perhaps we can quickly go through that [00:52:14.740] so through the main steps yeah of course [00:52:19.480] now if you [00:52:23.220] well if you've downloaded a Witcher then [00:52:30.400] you won't have the grunt file and the [00:52:32.770] package are Jason here and so you can [00:52:38.050] install these using the widget generator [00:52:41.350] so like I already showed if I go to now [00:52:56.830] suppose I don't have a grunt file and [00:52:59.650] effects urges and I can just run your [00:53:01.690] Linux from here and it will see that the [00:53:06.190] folder is not empty and it will ask you [00:53:08.710] if you're upgrading which it were [00:53:10.540] pressing yes it will take the name of [00:53:13.360] the widget and the version number of the [00:53:15.340] widget and then it will try to it will [00:53:21.100] will put package star Jason and the the [00:53:25.900] grunt file there so that's that but if [00:53:32.770] you have downloaded widget here's the [00:53:35.830] thing a widget is has a dot m PK [00:53:41.410] extension but basically this is a zip [00:53:44.890] archive so if I rename this to dot zip [00:53:51.420] and I change it now I have a zip folder [00:53:54.400] and if I open this there you go so you [00:53:57.700] can unpack this these files into a a dot [00:54:02.410] SRC folder and then run your widget [00:54:07.270] generator in the your root folder and [00:54:09.250] there you have it then you can start [00:54:11.980] developing or editing an existing widget [00:54:17.350] that you downloaded from the from from [00:54:19.240] the App Store all right [00:54:23.830] perfect thank you very much for the for [00:54:25.210] the answer do we have any more questions [00:54:28.110] if not we will be rounding up and all [00:54:36.100] the questions and answers will be posted [00:54:38.470] on the website afterwards and we'll be [00:54:41.290] sure to post that on Twitter and on the [00:54:44.470] mendax forum so that concludes the [00:54:48.280] webinar for today thank you all very [00:54:50.260] much for attending and don't forget to [00:54:52.450] fill out the survey afterwards see you [00:54:54.970] at the next web