 All right. Thank you. My name is Josh Tingela. I'm on the Apache Flex PMC, although I do work on a number of other projects that are related to FlexJS. And one of those projects is actually what I'm going to talk about today. I recently started building an extension for Visual Studio Code to add support for ActionScript and MXML, which are the main languages used to develop FlexJS applications. So let me start out with a little bit of history to help you understand why I built the extension, and then we'll jump in and actually start creating a project and going through the steps of development there. So before Flex came to Apache, it started out as an Adobe product. It had a pretty active ecosystem. A lot of developers, different development environments, such as Adobe's Flash Builder, which you saw in the last talk, IntelliJ, IDEA, FDT, Flash developed. There were many of them. FlexJS is the next generation of the flex SDK that runs applications directly in the web browser with JavaScript instead of relying on a browser plugin like FlashPlayer. The FlexJS SDK can be used with the existing IDEs. However, they require some extra configuration to get them to work in the best state. And there are still some quirks, especially related to debugging, that make it not exactly the ideal situation. And so I felt that in order to help FlexJS grow and become more interesting to developers, I wanted to make sure that there was a better environment where FlexJS would be a first class citizen. And that is where Visual Studio Code comes in. Visual Studio Code is an open source project from Microsoft. It's free to download. It has a very vibrant ecosystem with a lot of developers checking it out and finding that it works really well for their workflows. There are frequent updates every month. New features are coming out. And it's really picking up a lot of steam. One of the best things about Visual Studio Code is that it supports extensions. Not just extensions for the languages that are built in when you first downloaded it, but you can actually add support for new languages. And so I decided to start working on a language extension to add support for ActionScript and MXML. And I released this extension under the name Next Gen ActionScript. Visual Studio Code sits somewhere between a basic text editor and a full-fledged ID. It's in this, like, happy middle ground that, at least for me, makes for a better workflow. You can open up any random text file and start editing. You'll get text highlighting and things like that. Or you can actually create a workspace and start building a more full-fledged project that's able to run the compiler and do debugging and things like that. And so when you're working in a language like ActionScript or MXML, you'll be able to take advantage of these code intelligence features, like being able to complete member variables and functions on an instance of a class. Or if you're calling a function, it'll give you the list of parameters that are available on that function. As you type, errors and warnings will update in real time as you add or delete a new character. It has knowledge of what the different symbols in your files are, so it'll know that a variable is of a certain type or what class a method is defined on and things like that. You'll actually be able to go to where anything is defined by, you know, using the mouse and clicking while holding the controller command key. It knows all the symbols in your document, in your workspace, so you're able to search those and navigate around your project pretty easily. And you can even rename things and things like that. Visual Studio Code also provides a debugging UI that you can use in any language where there is a debugger extension available, so you'll be able to do things like print to a debug console, add breakpoints so that it will pause when you get to a certain line of code or it'll stop at an exception. You can step through your code line by line. You can see the function call stack and actually see what variables are in scope at the various points of execution. You can dig down into the properties of any object that's in scope as deeply as you need. And so most of this talk today I'm going to actually show you live how to do each step of the development process. Let's start with installation. I have a few more slides before I get into that. So what you'll need for FlexJS development obviously includes Visual Studio Code. You can get that from code.visualstudio.com. This is a cross-platform editor, so it's available for Windows, Mac OS, and Linux. And FlexJS, the SDK, works on all three of those platforms as well. Once you have Visual Studio Code, when you run it you'll be able to go to the extensions view and install extensions from the Visual Studio Marketplace. So if you go there and you search for action script you'll be able to find the next-gen action script extension. You'll see this green install button there right next to the extension. You just click that and after a moment it'll ask you to restart and it will be good to go. And then finally you will also need Apache FlexJS. There are two different ways to install it. You can use the Flex SDK installer which will have a more guided process where you go through a wizard and choose where you want to save it on your hard drive and what dependencies you need and things like that. And then you can also, if you have NodeJS install, you can install FlexJS using the Node package manager. He's in the command there on the left. And then the final setup part is telling the next-gen action script extension in Visual Studio Code where you find FlexJS. And there's three different ways to do that. There are a couple of different environment variables where the extension will look to see if FlexJS is defined there and it will use it automatically if it's found. Otherwise there is a setting in Visual Studio Code that you can pass the path to your SDK and I'll show you how to do that. So let's go into creating a new project and we're actually going to do that right now in Visual Studio Code. First, here's the extensions view where you're able to search in the marketplace. You'll see next-gen action script extension pops up. I already have it installed here, so we don't need to install that right now. All right. Now to create a new project for FlexJS, first we need to create the workspace in a folder. So we open the folder. I'm just going to create a new empty folder on my desktop. I'll call it my first FlexJS project and open that up. And this will be our workspace where we add files and source code and things like that. Next I want to tell Visual Studio Code where to find the FlexJS SDK. So if we go into the preferences, we'll choose the setting option here. And there are two places where you can add settings for your development environment. There are the user settings which will apply to any workspace that you open. So if you just wanted to set up FlexJS once and have it worked in every workspace you could set them here. And then there's also the workspace settings which will apply only to the new folder that we created just a moment ago. I'm going to set this up in the workspace settings. And so you'll see as I type the available settings will actually show up in the completion list. You might remember from the slide earlier that we're looking for nextgenas.sdk.editor. And then we'll set that to a path to the SDK. I have that downloaded on my desktop so I'll just set that up here and save that. And now our workspace is ready to use FlexJS. If I go back here to the file explorer you'll see that the .vscode directory was created and there's a file in there called settings.json. And that's where our workspace settings are saved. Now to tell the workspace, yes, question. Correct. Workspace settings override the user settings. Okay. Now I'm going to create a file named asconfig.json. And this is sort of the main project configuration file for your workspace. It includes all of the compiler settings and some additional options as well. This is a .json file. I'm going to set up one compiler option to start and then I'm going to specify the entry point for our application. So I'm going to set the targets compiler option. By default FlexJS will produce a JavaScript setting JavaScript files for our application and it will create a Swift file that will run in Adobe Air or Flash Player. For our purposes we only need the JavaScript so I'm going to set that to .js flex. Similar to the settings file you'll see that completion is available within this file. Visual Studio Code is aware of what the format is and so if you're trying to remember the name of anything you just can hit control space and that will bring up a list of all the different options. And then I'm going to add a files field and I'm going to specify which class is going to be the entry point of our application. I haven't created this file yet but I will in just a moment. So I'm going to create a source directory and then I'm going to create a file named myfirstflexjsproject.mxml. And that will be the first class that runs when we launch our application. So let me create that source directory and the mxml file and save you some time from watching me type out a basic application and make a bunch of typos. I made a quick little snippet here. So this is probably one of the simpler FlexJS applications that you'll see. We use the express component set. It contains one view which contains a button with some text. Now I want to start adding a little bit of code to this to show you some of the code intelligence features that you can use while you're writing your code. So the first thing I'm going to do is create an event listener for this button when it's clicked. You'll see as I type, the completion will pop up offering types for this event parameter on the function. And when we actually complete one of those, the import for this class is automatically added because it's a different package. I'm just going to write some basic code here. I'm not trying to develop a full fledged application. It's mostly just to show you some of the features you can use in Visual Studio Code. So I'm going to do a little bit of math, and then I'm going to show the result in an alert dialog that pops up above the application. You'll see as I make the call to this function, the signature help pops up to tell us about the parameters. Then let me go up in the MXML and add this listener to the button. So I want to listen to the click event, and then inside of here I can actually use completion to call the listener and pass in the event. Between these two quotes is actually secretly a function body, and so Visual Studio Code is aware of that and can treat this small section of MXML as action script. You'll notice when I hover my mouse over the call to the event listener, we can actually see the class where it's defined. We can see it's a method. We can see the parameters there. If we do the same over one of these imports, you can see what package this class is in, what it extends, any interfaces it implements, and things like that. If we hold down the control key on Windows or Linux or the command key on Mac, and then we put our mouse over a symbol and then click on it, it will actually take us to the definition of whatever that symbol is. So when I do that here, you can see that the cursor moves here to where the listener is defined. Then one last thing I want to show you here is that we're able to rename symbols as well, so let's say I don't like the name sum, and I want to change that to result. That's not good. Well, if that did work, it would change both of these lines where the variable is named summed to result. Okay, so now we have a basic application here, and now we want to compile it, and then eventually we will run it. Okay, so visual studio code has sort of a universal file that it understands, regardless of which language you're using, and this file is called tasks.json. It's able to run any executable that you want, for example, a compiler, or maybe you want to run some kind of test runner or something like that, whether you're using action script and nmxml for FlexJS, or if you're writing a JavaScript or C or whatever language you want to use, you can create this file in visual studio code, and it will integrate with some of the features for building a project that are available. Now, you might remember from earlier, we created a file named asconfig.json, and this file included some of the compiler options that we're going to use to build our FlexJS application. Inside tasks.json, we could call the compiler directly and pass in all of the same compiler options, but then we'd have them duplicated in a couple of places, and we'd have to try to keep them in sync, and that's not really an ideal situation. And so I created this other utility called asconfig.c, which reads the asconfig.json file and actually parses all of the compiler arguments and calls the compiler using all of those values. So you can keep all of your options in one place and not have to worry about any kind of duplication. And so you can install that from node package manager, and that's what we're going to be using to build this project. So let me go back into visual studio code. All right, to create our tasks.json file, we're going to open up the command palette, which you can find in the view menu right here, command palette. You can also bring that up with a keyboard shortcut. It's control shift P on windows and linux or command shift P on macOS. P is in palest. So we'll bring that up and then type tasks. And you'll see the second option here, configure task runner for action script and asconfig.json. And that will automatically create this file for us and populate it with some useful arguments to pass to asconfig.json. So the two most important fields right here is the command field. This tells visual studio code which executable you want it to run. In this case, we're going to run asconfig.json. But you could run anything else you wanted. You can actually point to where the compiler executable is or if you wanted to run some other kind of task runner like maven or something like that, you could put that in here. And then we also have arguments to pass to that executable. For asconfig c, we're going to tell it to create a debug build. And then we also tell it where to find the flex.js SDK. You'll notice that this is already populated for us. The next-gen action script extension will look in visual studio code settings and find that path for us and just put it in there as a convenience. But we can change that to any SDK we want and edit this file however we please going forward. So if you press ctrl-shift-b or command-shift-b, that will run the main build task in task.json. So I'll use that shortcut now. And that's why I named that file wrong. So it's not my first flex.js project. It's my first flex.js application. Okay. So now the compiler runs and builds the project correctly. You can see that a bin directory was created here. That's where flex.js normally creates its output for JavaScript applications. Here's some of the generated JavaScript. You can see here our on-button-click listener for our event. Another file worth pointing out here is the index.html file. This is also generated by the compiler and it just bootstraps our application and starts calling our JavaScript code. And that's what we'll actually launch in the debugger in a moment. Okay. Another standard file in Visual Studio Code is a file named launch.json. This is very similar to task.json. It's a file that Visual Studio Code understands no matter what language you're using or some kind of runtime or whatever it is that you've built if you want to run it and debug it, you'll use launch.json. So the next-gen action script extension doesn't have a debugger for running JavaScript code in a browser, but there are separate extensions available for the major web browsers like Google Chrome, Firefox, Edge, Safari, even Safari running on an iOS device that you have plugged into your computer with USB. FlexJS can also produce JavaScript code from ActionScript for Node.js and of course you can still continue to build for the Adobe Flash Runtimes if you want and there's a debugger for that built into the next-gen ActionScript extension. So for this presentation we're going to use the debugger for Chrome, but there are debuggers for other browsers and the configuration is pretty similar. There's just a few minor tweaks here and there. So what we learned from one browser we can, that knowledge can go on to other browsers as well. So we'll install this extension from the extensions view just like we did with the next-gen ActionScript extension. Just search for Chrome debug and it should pop up and you can install it. So as you recall, for FlexJS applications we use ActionScript in MXML, but we produce JavaScript that can be run in the browser. Ideally we would want to be able to debug in our original language where we developed them in. And so web browsers have something called source maps that tell you that if you're running the JavaScript code on line 16 character 4, that actually goes back to line 6 character 2 in this ActionScript file. And it's very similar to how if you were building an application and see your Java it would produce machine code or byte code and the debugger needs some way to know that this byte code here maps back to your original code there. So it makes it so JavaScript is kind of like the byte code for other languages like ActionScript. So FlexJS is able to produce source maps and there is a source map compiler option that you can use. And we will add that to our asconfig.json to tell the compiler to produce those for us. So let's jump in there and do that. We open up the debug view and you'll see here it says no configurations. We want to add one. And then I already have the debugger for Chrome extension installed so that will show up in the list now and I'll choose that. Other browsers will show up there as well. You can see I have the Firefox extension installed too. And then it will generate a launch.json file for us. It has a couple of default configurations here. We don't need this attached one at all for our project and we're actually going to tweak things a little bit on this other one. So the default configuration that it creates tells Chrome to open up a URL. And it assumes that we have some kind of local web server running on our machine and so it tells us to open up local host. As your application gets bigger you're probably going to want to do something like that. There's various security restrictions and stuff that you need to care about. So that's probably what you'll be using a lot of the time. For this quick demo here as part of the presentation I'm just going to open up a file from the local file system. So you can see I replaced the URL field with a file field and then I'm pointing that to the index.html file that the compiler produced. This workspace root token here is standard virtual studio code before it launches the project or will replace this with the actual path to our workspace. There are a couple of other fields I wanted to point out. The source maps field tells Chrome to look for the source maps that the compiler will generate for us. Not all browsers require you to do that. Each extension has its own different configuration options. So for example I know that Firefox will automatically find the source maps and simply use them. So it depends on which browser you're using. And then this last field prelaunch task is a standard field that is available in any launch configuration. This tells Visual Studio Code to run a task before it starts debugging. So in this case we wanted to run AS config C to tell it to build our project before we run it in the browser. So let's go to AS config.json and add our source map compiler option because we'll want that for debugging. Then if I build again we can see here in the bin directory that there's a new file here that ends with the extension.js.map. And this is the source map that the browser uses. You can see it basically says when you're running this JavaScript file the actual source is here in this Mxml file. And then this line here with the mappings is kind of an obscure format that somehow tells it this line in this character map back to this line in that character. And then I just want to launch that now and we'll see this application running in the web browser. So we have our new configuration here in the debug view. If I hit the start debugging button you'll see down there that we have the prelaunch task so it's going to run the compiler first and then here is our application running in Chrome. If I click that button you'll see the alert pop up with the text that we told it to. So now that we have that running in the browser let's go back to our Mxml file and try out some debugging tasks. So I'm going to add a break point in our event listener and so now when I click on that button it's going to stop at this break point and we'll be able to inspect the current state of our application. So I'll go back to the browser. The break points are updated in real time so I didn't need to relaunch or anything. I click the button and it will jump back to Visual Studio Code. You'll see in the browser though that it's paused so it hasn't shown the alert yet because it stopped at the break point. And now we're on this line of code. If I go into the debug view you can see on the left here that all of the variables that are in the local scope are displayed. So for instance this event listener has a parameter for the event. We can see that here and we can drill down and see the various properties of the event as they are in the current application state. You can see our local variables A, B and some are still undefined because we haven't run those lines of code yet. So let me step through those and we can see that update. A is now two, B is five and the sum is seven. And then also on the left here you can see the call stack and we're in our listener here, the on button click method here on our application. If we go up a level this is actually the function scope I was talking about before for listening to the click event in our MXML. When I clicked on that that line is highlighted so we can see that is where the execution is happening. If we wanted to go further up the call stack you can see there are classes in the FlexJS framework that are in there so we would be able to go to those classes and see which line is actually executing then if I can just resume go back to our browser and everything continues as normal. There was one thing I forgot to show a bit earlier so we were able to control click or command click on any symbol in this file if we wanted to do it right here on this alert class this is a class that is part of the FlexJS framework and we can actually go there and see the original ActionScript source code for this component and so you can see all of the original code is there we can see the comments we can see the documentation and so that's a really good way to gain an understanding of the framework and be able to have direct access to all of the documentation and things. Let me try the rename again now that I realized that I was referencing the wrong file name so there we go okay so the rename is now working okay so I have links here to all the various things that are downloaded for this workflow links to documentation and things that is all I have today so are there any questions? Okay, thank you.