 Hi, I'm Ishai. This is me. I'm a software developer and a FlexCommitter since 2016. Currently working with Harbs is probably going to join us quite soon on migrating an app from Legacy Flex to FlexJS or Classic Flex to FlexJS. I can see a few faces that I don't know, so I'd like to know how many people here do not know anything about Apache Flex or about Flex in general. Okay, great. So let's talk a little bit about Classic Flex. Flex, this actually has been, I was expecting people to mostly know about it, so I'll give a short introduction. It's originally an Adobe or Macromedia project. It was closely tied to Flash, but it had all sorts of nice features like MXML, which allows you to do declarative programming. ActionCyp3 is a language which was developed for Flash, which is ECMA, meaning the same family as JavaScript. That means it is a scripting language, but it's got all sorts of neat features such as strong types, packages, and it's inspired by Java in a pretty strong way. Classic Flex SDK featured pretty good IDs, which Adobe supported, and had lots of features. Some of the problems were that it had a pretty big download size and it could get slow. It could be pretty difficult to optimize. Flex.js tries to build on the good things in Classic Flex, meaning it's still got MXML. We'll see pretty soon what that means exactly. It's still got ActionCyp3 as the main programming language. It's still got pretty good IDs, which are being developed. Josh is going to have a talk on VS Code around 10, and he's doing a great job in actually allowing us to use Flex.js and more tools. Basically, the big news is that it's no longer Flash-dependent. It hasn't got that many features because we were only an open-source community, we're not Adobe, who has invested tens of years of man-work times, whatever. It is easier to optimize. We've tried to address a lot of the issues that we saw in Classic Flex and avoid them. Let me try and give you just a feel for how an application looks like. Most of this session will be sort of a hands-on, so we'll be switching to my IDE most of the time. This is my IDE. It's Flash Builder, which is based off Eclipse. As I said, there are a lot of choices. Some choices for using different IDs. This is the one that I've got used to. Let us see what a Flex.js application actually looks like. I've created a demo. That's interesting. It's not really showing. Do you know how to fix that? Maybe we need to minimize it. Okay. What you see here is the most simplest application written in MXML. I hope this makes sense. MXML, as you can see, is an XML-based language. It has an initial view. It's got a simple CSS value. We can ignore that for now. It's not really important, but it's got an initial view and it's got a main view. Let's drill down into the main view and see what a view actually looks like. Actually, you know what? Let's run it and see what it looks like. Let's just run it. Okay. This is what our application looks like. It's pretty useless, but let's see if we can understand from the MXML what we're actually seeing. Let's look at the code. You can see a label. You can see right here as well. Is this clear? Can you all see what I'm marking? You can see an age container, which is a horizontally laid out container with two buttons. There they are. Another label downstairs. I think it's pretty descriptive of the code. It's pretty easy to understand. Let's look at some of the cool features about MXML. As you can see, I've got a state, a current state. The current state is verbose. What does that mean, actually? In MXML, you can actually choose the attributes for your XML and elements according to states. Right now, we're seeing the verbose state. But if you go to the terse state, can you see the dot separator here? That means I'm now using the terse state, which we'll just show stuff instead of a more verbose message. Let's see how that works. Button 1 changes state. Let's click button 1. You see that we're now in terse mode. I think that's also a nice feature where you can create pretty big changes with descriptive language, which is not too complicated. This is what MXML basically looks like. It works. For those of you who know Classic Flex, it works very well. What else was I going to talk about? We've got ActionScript 3, which is a pretty good scripting language. No CSS here for layout. We're just using HContainer. We don't need to worry about block or whatever. We're just using something that sort of makes sense. I never got the hang of CSS layout in a satisfactory way. This is so much easier for me. There's many more options like tile layout. You name it. You can just build a layout, plug it in, and use it. Now, another cool feature in MXML is data binding. Let me show you how that works. We've got a label right here. Right now it's just saying label. Not very interesting. Let's say that we wanted to make it show whatever is written on this label. I would create an ID, call it down label, and have the text. Let's see what happens. You can see that now we have the same text for both the bottom and the upper label. That was also pretty easy to achieve using binding. This is the binding sort of mark on the markup long edge. Now, let's see how this gets a little bit more interesting. We want to add a behavior to label and use data binding. What I'm going to do now is add behavior to the label. This is one of the nice things about FlexJS. It lets you plug in all sorts of behaviors with beads. We'll talk about a little bit more later. I'm going to add a bead, which is called click tracker. Give it an ID. Now the text will show. Suddenly this is interacting with the mouse. How did I do this? This is sort of a magical thing. Let me just see that I'm sort of in the flow of the presentation because I don't want to miss too much. What have we seen so far? We saw how to build an app. We saw data binding. We saw states. We haven't seen a custom component yet, so let's do that as well. One of the nice things that I didn't mention about MXML is unlike HTML where you have a fixed set of tags that you can use, you can actually create tags. Let's see that by using a different component. This is pretty verbose. I've got a label and I've got beads inside it. I've got data binding going on. I don't want to repeat this markup thing for end times. I'd like to sort of encapsulate all this in one tag. That's what I did with the component that I wrote. I'm going to add the component, run it, and you see my component is acting pretty much the same. It's got a different phone size, it's got a different message, but it's got the same functionality. How did I do this? My comp is under components. I simply have a package called the components. I declare another MXML class. There you go. You've got the functionality, different message a little bit, whatever. This is how you create tags. It's a powerful concept and it makes your code much more readable. That's my demo. Now, we've been using the IDE to build a build this, but it looks nice. This is using Flash. You can see here the context menu. It's got Adobe Flash Player. Now, we all probably know Flash is not a very popular thing these days. It has a lot of advantages as far as I'm concerned. It's pixel perfect across browsers. Some other points that I put. The build is very quick. It's got incremental building. Developers have pretty good tools for it. For distributed development, it's got some handy features such as a runtime verifier. That means that if you've got a third-party library, for instance, which is supposed to implement a certain interface, you can load the library at runtime and it will fail because the interface is incorrect, for instance. That's pretty difficult to achieve in JavaScript, if at all possible. Flash is pretty neat. It also translates to Adobe Air, which is still widely used in mobile and several desktop applications. One of the users is sitting right here. We know what's going on with Flash. Let's see if we can just use the source that we used for Flash and build it for JS. I'm going to go ahead and do that. I'm going to open up Chrome. It's already set up. We've got the same application, as far as I can tell. It's a little bit different because it's selectable here. It's not a perfect one-to-one visual translation. The nice thing is I'm now free of the context menu for Flash. Clients are not complaining how come this is a Flash application. I can also use Google DevTools. I've got inspection. I've got sources. I've got breakpoints, whatever. This is a legitimate HTML application that I just built using MXML. That's the whole idea behind FlexJS, hence JS. Any questions so far? Does anybody not know about the development tools of Chrome, how they're used, et cetera? We're all from an HTML background, right? How did that actually happen? In Flash, it's like the old Flex applications. You just let Flash build or compile. FlexJS is a set of libraries that I can recognize. In JavaScript, I was using Ant. Chris is going to talk later about how to probably have a better workflow using Maven. The application code is transpiled from AS3 to JavaScript using Felcon.jx. This is where the magic happens. I'm not going to go into that, but we have a special compiler for translating Action Script into JavaScript. As you recall, both Action Script and JavaScript are ECMAScripts, so there's a lot of similarities. They translate pretty well. It's just a lot of work to actually do it, but that's what we're doing. In the framework code, we already did that. We have a set of sources set up for us from the framework itself. That's how it actually happens. Now, let's talk a little bit about adding more behavior. We've already added click tracker. These are called beads. This is a new concept in Flex. Well, that was introduced by FlexJS. Let's go ahead and talk about what it actually means. What are these beads? Most of you guys are probably English speakers. For me, it was a new word. I didn't even know a word before I looked at FlexJS. How would you describe a bead? A bead is a small object on a strand, which is sort of a wire or a coil, or I don't know why. Anyway, think about UI components as strands. What is actually UI components is a set of behaviors. How do you load this strand with behaviors? You can add a bead. A bead is just some behavior you think is important in your UI component, such as data binding, such as tooltip, such as having a layout. The nice thing about beads is you don't have to bake them into the component. You can add them. You can remove them. Why is that important? Remember the first slide I said, well, Flex was really difficult to optimize and they had a big download size. This is sort of a boost to optimization. You can actually just decide, look, we don't really need a tooltip on everything. We don't really want to listen to mouse events on a mobile application. We don't really want to do all sorts of things that we don't want to do in our application. Just let us control what sort of code goes into the application. Let's see how that actually happens. As you recall, I added a click tracker to label. After copiling it, I can search for click tracker and there it is. I can see the source. This is a transpiled code from action scripts. This is click tracker and action scripts. Ignore the errors. I don't know where they're coming from. Are the warnings actually? It's pretty compact. This is what it's actually doing in JavaScript, which is a little bit more verbose. But it's there. We just downloaded a file. Of course, this can be minified with Flex.js, but some ask you, some text is going to be there. Now let's just see. Suppose we don't want this silly tracker thing. We don't want to know how many times we've clicked. Let's just remove the beat from the demo. I'll just comment it out and rebuild. Oops. You're right about that. If I refresh, my application is now a little bit more boring. There's no click tracker. The good thing is that if I look for click tracker, oops, that wasn't supposed to happen. Let's, I think this is a Google problem. That was my comp? Okay. Anyway, we're going to clear the browser just in case. No, that's click tracker. I need to, oh, you're correct. You're correct. Josh was helping me with this beat, so thank you, Josh. Let's get out of my comp. Yeah, Mike, we can just comment it out. It's easier to blend Google. That was my fault. Let's see if this works. Aha. Where's click tracker gone? Okay. Does everybody get it? Does anyone not get it? Okay. So this is the beat mechanism and why, okay. I just said it's cool because there's not a lot of download size. That's one thing. But that's not the only thing. We believe that it also encourages better programming. We don't particularly like all these complex hierarchy trees saying this object is a car, but it also has a wheel, but it also, whatever. So what class is it? I don't know. There's a classic anti-patterns that can be done using too much inheritance. And composition is generally considered to be a better idea. So this is a form of composition. We're just adding things to an existing class. We're not baking everything in. We can override behavior. Let's see actually how this is done. So let's have a closer look at our view again. What are we seeing actually? If you recall, we have an initial view. And this initial view has all sorts of components, a label, blah, blah, blah, each container. How come it's laid out vertically? The reason is that I added a CSS file and I specified the layout for the main view right here. And as you can see, I put vertical layout for this view. Now I've got a bunch of layouts I can choose from. I don't have to use vertical layout. Let's use horizontal instead. See what it looks like? It's built. You can see that the layout is now horizontal. I did not touch the code or anything. I just overrided the behavior, overrode, I don't know what you're saying. So that's another cool thing about beads. You can use an existing component and choose to add, remove, override a behavior quite easily. Another way I could have done this, sorry, we're in the main view. Instead of what I just did, I could have described it here. So now I want to re-override if you can see. I want to override the overridden behavior. So I'm going to put it back to vertical. But I can do it here. Run it. And it's back where it was. So I'm going to do it here. So if you imagine some sort of a third party component, you're not exactly sure you like it. You can add your own beads and modify it pretty easily. Or you can just choose out of a set of beads that it provides you and decide here what you're going to use. So that's another nice thing about beads. We talked about download size. Okay, so what if I don't really like the way this looks? Obviously this isn't the most beautiful application you ever see. I want to use a completely different component set that has whatever, that has a nice styling. So a lot of behaviors can be added with beads. You just have to do it in advance and you've got your own component set. So for instance, we have just added to my component beads. We could have added some more like the border label that I just commented out. Et cetera. I mean, a good programmer will be able to come up with a much nicer theme that I did. All you'll have to do is to choose how to implement it in your app, how to incorporate it in your application. So right now, if you have a look, wait, let's see the effects of what I just added. Ah, yeah, that's right. Some good help from the audience. See, now it's got a silly border. So back to component sets. What are these component sets exactly? Let's have a look. So component sets, as I said, allow you to choose your own UI set. So what would you choose and why? I mean, you might not really care about optimizations about download size and things like that. You just want to develop something really fast. You don't want to add beads continually and remove them. That's not part of your plan. A lot of other people think we need the bare bones version. That's what I'm using right now. That's what we're using actually in the application that I'm actually migrating right now to FlexJS. Or you might even choose to wrap an existing JavaScript library and use that as your theme, as a set of functionalities, and whatever. So we've already done that on several libraries, including MDL. Peter is sitting here. He's got a large part of that. Create.js. There's probably more coming. How do I actually use that in my application? So let's say that I wanted to, instead of, let's go back to the main view, instead of using JS, you can see that I'm using prefix JS for most of my components. That's because the namespace says JS is the basic component set. Now, I'd like to actually use the express component set, which is supposed to be faster for development. So, for instance, if I wanted to add a button, you can see it gives me a choice. You can use JS button, which, I don't know how easy it is for you guys to see, but this has a, it's difficult to see like this. I'm sorry. Let's do the container. So a container has a JS container, and it also has NS container. You choose what you're going to use. Suppose I wanted to use the NS container. I've been using the JS container so far. What just happened is that another namespace was added. Oh, that's the JS. Sorry. That's the create.js. So, yeah, there was express as well. That's what I was planning to use. Container, express. So, different namespaces, NS container versus JS container, determine which component from which component set I'm going to be using. It's pretty easy to pick and choose according to your needs. That's the idea. So you can mix. And so, who would want to actually use create.js with action scripts you might ask? Well, I think what we are aiming at is to convince people that this is a much easier experience. If you can use JavaScript libraries using this sort of declarative languages, whatever, the tool set that we're providing, then pre-pill will just find it more productive. So, if you want to contribute or whatever, you can just take your favorite JavaScript library, wrap it around and flex JS, and hopefully people will find it productive. That's about component sets. So, I'd like to also show you we are a pretty active team. We're always looking for more people. And I'd like to show you, I hope this doesn't seem too daunting. It's pretty easy to actually be a contributor. And let's just say you ran into an itch. I mean, you're using flex.js. You're not completely satisfied. There's some need that you haven't been provided with the solution for. You want to create a bead that works for you. For instance, you want borders around your labels for some reason. Not that it doesn't exist in flex.js, but it could not. So, suppose you wanted to create a border label that everybody can actually enjoy. Well, right now this is the border label. It's part of the basic component set. I've just added a bead to the basic component set. And I'm going to show you how easy it is to actually work with flex.js and change the framework. So, let's go back to our, sorry, to our application and this border label. All right. So, now boring should have a label as well. Should. Leads border label. Interesting. That was what I was looking for. Let's see if it works in the flash version. Might have done something. Well, it's showing, but it's showing in the component that I can write it. For some reason, it's not showing in the other component. Let's see if I can understand this. I think I understand why. Actually, I don't. Okay, but let's, let's, let's focus. I guess I'll have to work that out. Let's focus on the component that I just created here. So, as you can see, we've got a border label added as a bead. This is part of the framework. All right. It's got the JS prefix, meaning it's coming out of flex.js basic. Now, I want to change this a little bit. So, the nice thing is I've set up my environment so I can actually change things here and see them working as part of my application. So, right now, this is, this got whatever, a by 99. It's got a line style with a thickness of five. Let's change it to one. It looks a bit too much. This five thing rebuilt. There's a problem. Let me do this. I'm sorry. This is flash builder issues. Josh is going to show us how this might not be necessary pretty soon. Okay. So, border length, border thickness has changed. I think, you know, boring the glitch that I had for some reason restarting, et cetera, it's pretty easy to do. You can set your breakpoints here. You can see what you're doing. And that's it. Now, the only thing you need to do is build it for JavaScript. This should not be here. I haven't talked about conditional compilation. So, how do, I'd like to just say a quick thing about what I'm doing here. This sort of directive, whatever you call it, says to the compiler, only compile this when you're compiling for flash. These depend on the flash player, so they're not going to work on HTML. So, when you're actually writing a framework component, you're going to have to do this because you're low level. You're going to have to decide how you're implementing your border bead. Are you just changing the style? Are you actually drawing a rectangle using graphics? You can do both in ActionScript. You just have to tell the compiler what to look for. So, this is what I was probably doing wrong. I was importing graphics, which is a flash object, into the main application. Now, this should work in JavaScript. Once I did that, we're going to build the application again. Okay. So, we've got the border around the HTML component. I'll ask a silly question. Why do you think nothing changed on the HTML side? I changed the thickness of the line. I don't see it on the HTML side. Chris? I changed it here. The JavaScript part is here. It's just a three-pixel solid red, so nothing happened, actually. That's it. I don't have that much time left, or do I? Five more minutes. Perfect. Anyway, we really think this is a pretty easy process. We've got a lot of work to do. So, if you can do this, if you can add a bead, make a pull request, run the test, of course, first, then we'd be more than happy. I can answer any questions now if anybody's interested. Is that good, eh? Yeah, yeah. That's a good idea. Right. So, if you recall, we were talking about component sets. So, this is my main view is using the basic component set, but I could also add a MDL component, say, a slider. Yeah, it's because the layout will be a little bit involved, I think. I'm just going to avoid that for now. So, let's put a slider with a width of 100 pixels or whatever. Ah, you're right. No, it's not going to work here. But let's show you an example. This is an example application that Peter here and Carlos, who is not here, worked on for a long time. So, this is the MDL implementation done in FlexJS. Styling is pretty nice, not like mine. You know, you can create nice things using FlexJS. So, this isn't just some sort of a mad scientist project. I think this is almost ready for production quality applications. Sorry. We're using it. Our production quality application is coming up. And this is probably going to get better. So, that's it for now, unless anybody has any more questions. Thank you.