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