Kickstart your Widget Development

If you’re looking for best practices and new ways to develop widgets in Mendix, view this webcast for expert advice and a real-world view of the new tools available for widget development.

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

Kickstart your Widget Development

Kickstart your Widget Development

Transcript