Okay, we're gonna get started there might be a couple of because we've got the Break-on there might be a lot of people that come in, but if not, that's good So hi welcome. My name is Justin McLean this I'm going to talk about a FlexJS case study and You might say hey wait a second. That's not on the schedule We're supposed to be talking about testing FlexJS Well, um currently things are a bit broken with FlexUnit and FlexJS I'm yet to come up with a decent workflow that Works basically And I could talk for probably 20 minutes on that and it probably wouldn't tell you much. You don't already know so I thought a more useful use of both your and my time would be to talk about a real-life case study About a FlexJS application that we actually have deployed live So it's out there and people are using it So, um, do we know of any other I know one other live project that uses FlexJS. Do we know any others? Okay, so that's three that we know of that are out there. That's a good start Okay, there we go, that's full that's two more than I knew of a couple of minutes ago That's that's all great. Um, so just who am I? I'm a freelance developer. I've been programming for about 25 years I'm on the incubator PMC the flex PMC plus a few other PMCs. I'm a patching member. I'm also a mentor for several Incubating projects. I've been developing a flex since version 1.5 Way way way back when it was actually a sort more of a server side thing and like used to compile action script on the server and push it up to the browser which is a long time ago that was actually for News limited in Australia and that was at one point in time the biggest flex application deployed I assume other sites since surpassed and all the rest but you know small claim to fame I've been the release manager for the flex SDK several times and I fix hundreds if not probably a thousand bugs in the flex SDK I haven't done that much work on the flex JS side of things But since starting this project, I've started to fix a few bugs and suggest a few changes and so forth If you've come to any of my other talks here, I've had three other talks I'm also interested in IOT and that space and I run the IOT sit meet up in Sydney So if you're ever in Sydney, Australia come look me up So the case study a bit of background first. So this was an existing project It was a flex legacy application. It had a huge amount of technical debt it was written by one person and Generally, if you're a single Codo who's not on the team, you may fall into some bad habits That's not necessarily a bad thing. It's just just how things are like you don't use version control You put everything in one file, you know, I'm sure everyone's seen Seen stuff like that. Um, there was also a flex mobile application and there was an existing back-end system and database They had tried to port the application to flex JS But this we're talking sort of version 0.7 around there about six months ago And they just found it was too hard mostly because a lot of the UI stuff was missing and also Just trying to get things to compile was was difficult It's trying to get flex.js to compile and try to use flex.js to compile things So they I'll explain a bit about the project in a minute They had a large amount of new functionality. They wanted to add to the existing project And they decided the best thing to do was to rewrite it from scratch. So that's actually a sensible decision It's it means it makes things a lot easier But you have to you know, you still have to keep some of the existing functionality We still have to integrate with the existing database to some extent the client also was adamant that That it had to be written in JS it couldn't be Swift in the browser It couldn't be a mobile application. It couldn't be a desktop application They had a fairly hard requirement for that and you'll explain why that is and In a minute So the application itself is a framework for building communities and it's based around Diversion and diversity and inclusion which is sort of an interesting project We've been working on it for about three months There's only two developers and they're only on it about 50% of the time and So we've had to set up from scratch the front end back end and development infrastructure We're only outputting JavaScript We may possibly use Swift action script air whatever For the mobile application in the future, but currently we're just using the existing mobile application and and going with that There's one front-end server one DB server We're going to have to scale that so we're going to have to start thinking about what we're going to do Eventually this system is going to have millions of users So it it it yeah, we'll have to look into that quite quickly The existing team needed some education about modern development practices. They didn't use version control. They had no idea what CI was They didn't even have a bug issue system so all that sort of thing we had to Convince in a nice way that you know, maybe you want to use this So there's one framework and it actually serves multiple sites and domains and most that there's a large overlap and functionality between all of those sites but It can be different it is currently live and people are using it So at the moment, it's fairly limited in this functionality and it's a gradual roll out We're going to add more and more things Basically every two weeks. We have another delivery where they get a big chunk of functionality So this is sort of what it looks like It's fairly simple in terms of design, but it doesn't look like your average Flex application things move around the screen and animate a little bit. There's quite a lot of navigation in there It tends to you know work quite nicely and well the the person who runs this company has a background in industrial design So he loves design and one of the interesting things that has happened No, no currently the the mobile application is separate we may move to one code base for both of them The the site itself is responsive and again, I'll speak a little bit about that a little later Yeah, if you have any questions as you go along, please stick up your hand and I'll ask them Yeah, so back to the the user of the site one of the interesting things that has happened that since Since we put everything in version control The Person who runs runs the project He's a bit of a designer and he absolutely loves version control because it means he can go in and change things Before he was too scared to change something and that he couldn't change the colors or something Well, couldn't you know rearrange things a little bit and so he's actually starting to write a little bit of code himself He sometimes gets it wrong But that's okay, and he check-ins only revert away and we're quite happy with that And I'll explain a bit about our infrastructure and how we've set that up For the small team that we have at the end of this talk So here's what we've done in those few months so you can see that It's mostly mxml and access script that sort of 50-50 split is pretty typical for Most projects I've worked on flex flex SDK and flex JS There's a bit of CSS in there most of that and JavaScript most of those are some third-party application Libraries we're using we're using a third-party date chooser for example So it's sort of nice that you can take existing JavaScript and you can Without a lot of effort you can make it work. We've sort of hacked it together a little bit I have to say in this way we have not gone the whole Let's make a type def and compile it an action script and JavaScript and you know all the rest We have reasonably limited Timeframes and budgets so there's there's some constraints on what we can do and what we can't do But you can see there there's about 15 maybe 15 to 20,000 lines okay So it's just getting to be a sizable project. It's not huge for this stage But it will certainly grow as time goes on You might notice one cold fusion file there I'm just by coincidence the back end has happens to be written in cold fusion, which when they first got me on the project I was only brought on to work on the front end of it And they said oh by the way, do you know anything about this and it's like? Yeah, I do actually I'm sure I want to admit that So yeah, that's just how it is yep as I said there's one code base many sites So there are several clients that are also using this at the same code base all of them have different requirements So what we've come up with is a way of Making it so it's a domain name driven so each domain name comes into the same site We basically sniff what domain it comes in on and then we do some things based on that on that domain We also have dev domains of of every single live site as well So we can Check that out ourselves The we're using feature toggles as if people familiar with that term feature toggles. Yeah Well, it's not whether a build includes a feature because it what what it means is the database actually contains a list of sites and what features each site has and That's loaded on startup of the application So it means that you can turn features on and off on a per site basis and it also means you can you can deploy something And sort of deploy it silently and then once you're happy with it just turn it on So you don't even have to do a proper deployment to be able to turn a feature on you Just got to take a little box in the database. So that that's sort of a nice way of doing it Not not that it's pretty complex to deploy this application Initially when we started working on this as I said, they had no CI server and no real development process And so all they were doing was just ftp-ing up to a live server which is Maybe not ideal Site that each of the sites have different styling as well and that's also database driven It's it's cached so it's not, you know, there's no performance issues or anything like that And as I said, there's both a dev site and a live site for each of the domain names currently there are six different sites In the next month, it's probably going to expand out to about 12 And some of those will get lightly used and some of those will get as I said up to probably millions of users a month as In the next six months So over those three months, what have we learned? Well, FlexJS general layout simple styling works really well You can use containers and groups to lay things out horizontally and vertically You don't have to muck around with floats and all that mess that CSS gives me a headache Yeah, yeah, it there has been some trouble along the way and I have now after this slide I think I've got about 20 slides of the issues we ran into so So but Responsive design you you can make simple responsive divide design with FlexJS sites So this application does actually work on a mobile phone. It's not perfect, but it's it actually still does what it needs to do We're making HTTP coils service to the servers. They're returning Jason That was all really simple and just worked Again, that was a nice plus. I was thinking I was going to have all sorts of problems with that You can use the same if you're used to MXML and flex you can use good components style architecture But you can't extend all the components, which is a bit of a pain And we've run into this a couple of times. There's FlexJS components that you can't extend It's not designed in the same way and that's one purpose In your talkie or talking about the strands and the beads and that you don't want these people large inheritance trees, yeah So Yeah, so it's again, it's more a different way of thinking but if you're coming from the MXML Flex SDK world, but that's something you need to need to put into consideration Simple binding works. I've had some issues with complex binding stuff But generally you just rewrite your code in a slightly different way and and it and it works Basic animation and effects work really well. They perform really well as well, which surprised me I was I assumed we were going to get all sorts of issues with things just going Up the screen and like that but no customer vent dispatching works really well So you can make MVC style applications without a lot of a lot of issues And states work really well that really surprised me because states are these horrible complex things But that just works so that's that's all good So yeah a question The question was am I using a framework like pure MVC or something like that the answer is no the FlexJS and SDK is a framework on itself And it's very easy to do MVC in that framework if you just create a data model And create views and then bind to that data model in the views dispatch events when things change Have some sort of controller that reacts to those changes. That's MVC right there So another question The question was we call the server with Jason and do we have some way of Getting the strongly type model the answer is no we don't So currently we're just sending back In most cases just untyped objects So but the the calls know what they're doing and so we've got this little Layer which returns strongly type objects, but when it's talking to the server It's just getting a loose loosely typed object that it tries to match up all the fields and so forth So as far as the rest of the application is concerned all that is strongly typed But as far as the the actual layer that makes the call is concerned. It's not that is one of the things I'd like to improve, but we just haven't We haven't had any really good ideas about what was the best way to do that So risks there are some features missing in the flex SDK That if you come from a flex, sorry a flex in flexJS if you come from flex SDK You may expect these things to be there and they're not so you I might either have to do without Well work around them There is certainly a lack of documentation It is improving and there is I'm not saying there is no documentation, but Some of the things are difficult to work out Particularly when it comes to Knowing for example, what beads to use where That's there's it seems to be a large number of beads and it's not very clear about how they're named where exactly they should be used Particularly with the binding beads. I've noticed they they tend to have similarly confusing names And it's like well do I use that one here or not here and a lot of the times is just let's just try it see what it works Yeah, that works. Okay, we'll go with that There are several bugs in the SDK and in flexJS Things have changed over those three months and they will break your build on occasion Because releases are far apart we haven't had a release for like six months or so we have to rely on the nightly build and the snapshots and That means things break They may break your build well, they may break your layout as well. There's there's been a few changes there Basically these risks can be mitigated just keep a close eye on the mailing list and the check-ins we also compile a number of of Applications and keep them so if anything does break we can revert to a known good one Which is probably a good strategy to have So stay to play well, it's flexJS is probably not quite a hundred percent ready for prime time But it's about 95% there I would say We have run into a number of issues and I'm gonna go through those but I'm this is not going to turn into a It has all these bugs type session It's every single issue we ran into had a workaround And that's sort of interesting and it shows some of the flexibility that flexJS has in that There are many ways of doing the same thing And quite often if you can't do something one way because there's a bug you can do it another way not it works So trying to find out which way to do it is sometimes you have to be creative, but but as you'll see but we'll Yeah, you can do it Yeah, another question How difficult has it been for me to debug the bugs in flexJS? Some of the bugs have been relatively easy to to work out particularly the more framework style Bugs bugs in the compiler are really really difficult to work out and we've run into a few of those as well The compiler just tends to give Random exceptions and says ah something's gone wrong. Oh build succeeded It's like no, no, that's not good So yeah But most of them have been relatively easy to work out and some of them It's been difficult to work out the correct way of fixing them As per some discussions on the mailing list that you you may have read Some of these issues have been fixed in recent versions of the SDK I'd sort of note that on most of the slides But there may be one or two things there that have been fixed and I haven't realized it yet Because we're still using the workaround in our code So if you are making a flexJS application at this point in time, you can expect some loss productivity due to these issues But productivity is pretty high. You saw the screenshots before you know that that was two developers three months half time That's reasonably good progress. I would say to get an application from nothing to Out the door live A good way to Check this is write lots of examples have lots of simple examples that illustrate what the bug is And then rerun them occasionally to see whether things have been fixed or not so Anyway, so the Here are the issues in the bugs that we ran into one of the first ones we ran into was can't set background colors That's what you want to be able to do The first record workaround we managed to find was you can use the named HTML colors To set things so you can set things to be red and brown and purple and white and canary yellow and you know all the rest And that seems to work fine There has been some fixes in the framework so you can use a hash RGB and RGB a as well That code was a little broken. It hasn't a hundred percent being sorted out There's still some issues there that I've run into occasionally Particularly when dealing with alphas that just it just doesn't seem right and I but I don't know what the what the issues are there I'm also from a developer background and I'm not a really a designer So it's it's mostly the the designer in our team who comes along and complains and says hey, you know, that's alphas 10% out It's like is it? Hey, it looks good to me But anyway, that's that's that's how it is Containers ignore padding This padding has changed in the last three months and there was a lot of fixes put into it. However, it is still broken in my opinion So if you do something like this And I compiled this last night and and ran it What you should get is a hundred by hundred red square with a 60 by 60 white square in the middle of it You don't Well, sorry You do if you do it like this and you do if you do it got like this is because you're using fake padding and what you've done Is set the X and Y coordinates there so This will display a red square.  So there's something going on there that it's quite It's almost right, but not quite right and it's probably to do with yes Okay, so I was just told that the couple of new beads have been added to the SDK that were horizontal layout with padding in Gap and vertical layout with padding in gap. I've got those those right Yeah, yeah, and so they may be the way to go with that But you know again you just by setting X and Y you can sort of get it get around it in a lot of cases Conditional compilation it doesn't seem to work under all conditions. I do not know why I Put compiled JS around things and it what's the compiler in action script and says not you can't do that Sorry, here's an error So anyway, um, you can sort of work around this in most cases you I found that if you Tend to set it as functions and put compile Swift compile JS around the functions that tends to fix it The other way of doing it is just using bracket notation rather than dot notation And it'll allow you to do anything with that As an aside, you want to get access to a private property on a class Just use bracket notation and you can do that So It's a little naughty, but but you know sometimes if you have to work around something and you have to reach in and do that You know put to do fix this around there, but you you you can do it Another question has yeah, so the question was has the list been Told about this issue. I believe they have but it's probably lost in the huge volumes of email that go there I'll some of these issues do have jurors and People may will may not be looking at them, but they are released documented there Some of them are only on the mailing list, and I know one or two probably not there at all, so Font support on the JS side. There is no font support on JS Which is a little sad, but I found an easy way of doing it and that is to use the Basically an inject inject font bead Hi, welcome You've come to a talk that should have been about testing, but it's not so what I'm doing instead is actually going through a Case study of a real flex JS application that has been deployed live And I'm going through the development process and some of the issues we've run into So we just had a couple of late people walk in Hmm Chris you have a question Yeah, so this this is not an obvious way to fix this, but it works I Would prefer we could do this in another way Having code in comments is sort of feels that Yeah Comment from the audience was that you can actually rather than using the generated template that it gives you you can create your own template and you can Put all the links and everything else that you need that in the header that may or may not work for you depending on the Application in our case it it doesn't work because that font is actually dynamic depending on the site so It actually has to be generated on the server side There's a there's a couple ways we could do that We could do that, but the main issue is that just in the flex JS. There's no support for JS style fonts So this is one way of getting around it There are probably other ways of doing it as well Missing styles there are a lot of basic styles that in my opinion are missing from the probably poorly named simple CSS value implementation or values in Impal and Generally, you can get around these just by explicit explicitly setting them This is not the best thing The reason is that it's not likely to be cross platform, but in our case We're only targeting JS not as so it makes sense for us to to be able to do to do this quickly Yeah, now I would love to see a minimum set of common JS styles implemented not just the as ones because currently we have a set of a subset of what the flex SDK does and That is basically all the as ones and one or two JS ones have been added to it And there's not parity between AS and JS and there's a whole lot of missing JS ones Now we don't have consensus on the list about how to do how to solve this problem It's Yeah, and it's it's a sort of a tricky problem to solve I think eventually what I'm going to do is just go down and create a simple JS Value CSS values and just add all the common ones there and we we cover most of them There's only about a dozen. We're missing I would say If you look at can I use comm they've got a nice document about here Or all the commonly well supported subsets of CSS 2.1 And we we could go ahead and implement all of those So again, it would be more of you It's more useful for people who are just targeting JS rather than JS and AS Yeah, the comment was that Creating a massive class that has every single style in it and that has actually been done But you may not want to use it Yeah, I you could take that and copy it into your project and then just delete all the ones that you don't use That means every single project has to do that and I'm not sure that's it works for one person I'm not sure that's scalable as others in terms of a framework thing Yeah, it is probably the Linus way to do it Alert is broken. I notice you had alert working in your application. I try Yeah, I tried it last night it was broken so it might be a browser Issue there. I did not try on all the browsers Express Yeah, anyway, there's something odd with alert That's okay simpler work alert works. So just use that will create your own component again That was just another another small thing. I did look into why alert was broken and I'm pretty sure it's an easy fix And I think I did suggest that on the list, but I I don't think it's been done yet So we'll have to I'll have to look at that. That's on my list of things to do Other thing labels are not clickable even though they have click handlers So that bit of code there will compile fine, but do nothing No, it's not a reason fixed. I again tested it last night Now now it seems to toggle backwards and forwards a bit at one point It was working and then it wasn't working again And it is by design. I believe there's sort of some Question whether the label should be Lightweight and not have mouse events in it, but if it shouldn't have mouse events, then you shouldn't be able to compile this code so Anyway, the way that we've got round with it is we've just used a button and we've styled the way the border and background color And that works fine. So It's sort of a little hacky, but it works Yeah, I'm I'm pretty sure we're using basically and not express So anyway, I'm background alpha is broken if you say Background color equals something background alpha equals something if you're a JavaScript developer, you would expect that to work It doesn't We've identified what needs to be fixed in the framework, but we haven't implemented that fix yet And there is a workaround for it and that's simply to use the RGB a And you can specify the alpha at the end of the color there and that that that seems to work As I'm saying most of these issues aren't huge issues and there are always workarounds for them And this is more just you know the practical experience of what we went through and how we we solve some of these problems This was fun There's a bug with visibility if you yeah, I see some nods in the audience there You know about this. Yeah, um if something's visible invisible Initially, you get all sorts of layout issues. It's like it doesn't take up any space sort of and then when you make it visible It's all ugly nothing is laid out correctly and There's a few things you can do to sort of make this work You've got to be really careful in the order that you set things visible and invisible if you've got multiple things that you're doing that I found that if you get the or if you do it in a different order things break and The easiest way to get round it's and which is again not ideal was to set everything to visible Wait for the application to start up and assume only it's measured everything by then and then hide everything as quickly as you can Another comment from the audience Okay, so someone else has run into this same bug and the way that Yeah, it could be by design exactly So but it like it's an issue you've run into and the way that you've got round it is that you've made things invisible to start Off with and then dispatch a layout needed event When you'd want to make them visible Yeah, yeah, the layout lifecycle is very different from flex and this is this issue has probably come about for me thinking in the flex SDK way and and you know not not Being understanding the way that layout works in in flex JS and visibility works in there Yeah, now there is there's one of the other really interesting things happens Have you tried setting everything to false and see what happens if you turn everything off? Yeah, that's bad Don't do that Things break really badly Horizontal lists very broken like so broken you wouldn't believe it However, there is a very simple fix it took me a while to work this out But it's just overflow x to auto and overflow y to hidden and that tends to work things out We should try and come up with some way of setting Overflow via some beads. I think I don't think there's a bead which does that yet I know Peter made some changes when he did some of his layout changes that have changed some of this stuff I need to look more into that and see what see what was going on there Yeah, anyway Resizing This is fun anyone here have a play around with resizing and got it working Yeah, okay, good. Well, there is a there is a bead called browser resize handler and it works mostly It doesn't work in all cases and in some cases I found it was easier just to manually calculate sizes on a size change event And that would actually make things correct Percentage widths mostly it seemed to be as where the most issues were But it seemed a bit random It just seemed to once you got to a certain complexity that that it just gave up Our application is reasonably complex in terms of the number of containers and nesting and layout and so forth So it may be that there's another bug there that we haven't discovered yet And that's causing the resizing to to not work properly So Anyway, there's a workaround for it listen to size change and then do something based on that As I said before most components can't be used as MX and all components that is by design if you come from the flex SDK world Then this is going to take a little while to get used to It does make your code a little more verbose But you know, I think performance is not going to suffer because of that Multi-line text with new lines doesn't work I tried all sorts of things to get this work working and Eventually what I just came up with is just I don't use plain text just use HTML and put the Rs in there But just seem the easiest and simplest way to work around it So we'll again, I'll have to come back and have a look at that Scroll events are actually not dispatched by the scroller Oh Yeah, that that wasted a little bit of time so But however as I was saying before because flex.js it doesn't enforce the Public private Details you can actually reach in To the scroller and get at the scroll events This is probably one of the ugliest hacks that we had to do so far I certainly wouldn't recommend this and I'm going to try and find another way of either fixing this will getting a Workaround for it But it's nice to know again that the framework is flexible enough that even when you do run into issues You can relatively easily find find a way to fix it even if it's a little ugly So I have made your issues for just about every single one of these. Yes Yeah, um, if you change the visibility the contents inside a container move around I Think I think this has improved, but I don't think it's been 100% fixed And I noticed the work around used to be to set the X and Y to zero rather than not having them set at all Yeah, this used to actually use absolute positioning and I think recent changes of the SDK have changed that so it may be that this one is fixed I didn't try this yesterday to see whether it'd been fixed or not Almost there Percentage X and Y values. Ah, this is great. You got percentage width and percentage height are supported But you don't have percentage X and Y Um, so you can't mix percentage and you also can't mix percentages and absolute values together Which is often what you want to do you want to say I want a padding of 20 on the left hand side padding a 20 on the right hand side And I want the rest to fill up the entire browser. So I in flex SDK world You would say set it that to 100% if you do that in flex.js you get ugly scroll bars on your browser and It will add up to a 100% of the browser width plus 40 pixels It's it's the way JS works. It's just one of those things So you're gonna have to come up with other ways of working that out Yeah, we need a constrained layout to solve this problem was a comment from the audience and that's correct font-wide This has been fixed in the SDK. It took some discussion to be able to fix this Because the action script side of things do not support numeric font-weights, but the JavaScript side does support numeric font-weights So that's that's a nice thing And this is the last one sometimes no matter what you do you'll still get scroll bars showing up in your browser So just remove them It's not particularly again the the nicest way to do it But that's what you have to do to sort of move on and get you know get your code out and put it into production So I think that's just about all the issues that we ran into over the last three months As I said every single one of them we managed to find a workaround for And we still had you know reasonably high productivity even with the few of the issues that we we did run into Hey So Observations on the last three months of working on this application. Um, there are issues some of them need workarounds But mostly it just works So it is definitely flex.js You can use in production. You can use it to make things now and to deploy You've just got to be aware that there are going to be some issues that you run into and you're going to have to spend a little bit of time Working those out compared to the flex SDK or even coding in JavaScript the code ends up a little more verbose But I it's not hugely so and I think that's okay Errors Caught really early just one typing in the ID depending on the ID using I'm having to use IntelliJ and it actually tells you the errors before it even compiles things So that's that's sort of quite nice or if you're not using IntelliJ or I Think fleshbuilder will detect some of the errors But if you're compiling at compile time, you know, you get errors and it'll it'll tell you know You've you know, you've done something wrong here. And that's again. I think is a huge huge productivity boost Layout is relatively easy. You don't have to mess a lot with CSS to get good layout You can just use the groups and containers and nest them together Styling via CSS is also relatively easy. So you've sort of got the best of both worlds there Particularly if you're only targeting JavaScript You will run into browser differences, we've run into a few not quite as many as I thought we would but You make sure you test on all browsers Button sizes was one of the things I ran into button sizes very hugely on on different platforms and Yeah, you got to be a little careful with that Performance is good. We're excellent even all the animations and So forth work fine Even if you're running on the debug version I found Currently I just tried it with Chris earlier today our We can't even a pile of release version of our application currently There's some circular dependency with some other issue that we've got there So we've actually just deployed the debug version Till we can fix that up As a result the applications tend to be a little bit on the large side, but they're probably smaller than the equivalent Flex SDK application So that's all good. Um the other thing that has happened over the last three months is that things change and We've had a lot of layout changes with containers and groups That's relevant. That's mostly been a positive thing things have greatly improved in that direction Padding and margin stuff has Mostly been fixed, but still there's still some issues there The recent dual branch that got merchant to develop a couple of weeks ago Compile times has significantly increased Which I would be nice if something could be done about that, but I I don't know that there is Something it's just changed the way before you could either compile for AS or you can file for JS Now it's sort of compiling for both and the fact is we don't need the AS part of it But we have to incur the cost of doing that because that's that's what it's doing question down there We are saying we only want the JS and and it's still slower Yeah, so The that all changed also meant that your Maven palms had served to significantly changed Because the the actual compilation name type whatever you want to call it changed from like JS to flex JS That wasn't well documented or wasn't Communicated on the list very well and that that saved us. Sorry that cost us about half a day of development time Which was a little ugly until we worked out what exactly what the issue was So a little bit about the project itself on other things and on the last three months that we've gone on to So it's going to undergo a security audit. So security is sort of important So we needed to make sure that that only logged-in users could actually call the back-end calls And there the DB is not publicly accessible. It's behind a firewall. So that's good We have to worry about things like SQL injection attacks Security part of the functionality is file uploads as well So we have to be very careful about that that, you know, people don't upload malicious files to the to our application and then Do something about that I'm not going to go into a lot of details about this But the one thing I will go into is the sort of the back-end services and the security around that So the back-end we have Supports both JSON and AMF With the same code base Which is sort of quite nice The AMF is used by the existing mobile application and the JSON is used by this new desktop application It works as expected minimal code required After we have sorted out some cause issues Which was reasonably complex We also run into issues with dates, but that is almost always the case when you're transferring Dealing with multiple time zones and transferring dates back and forwards. That's not a problem unique to flex JS So cause everyone here heard of cause and they understand a little bit about the security that is inside browsers Okay, so basically in a browser It will only allow it to request Certain resources from the server that it was served from It can't go connecting third-party servers and make requests to to those under certain circumstances So if you come from the flex SDK world You might remember the way that you got around this was with a cross-domain policy And you would take the cross-domain policy and you would place it up on the server And that's would be all you you'd have to do With cause you've got to make changes to both the client side and the server side Which makes it a little more complex It is reasonably straightforward once you know what's going on on the server side There are two headers that you need to set which is access control allow origin and access control allow credentials The allow credentials is required if you want to pass cookies or basic authentication So if you are trying to secure your back end you basically need to do that On the client side You need to set with credentials to be true for the calls that you need it to be We have I have added a cause bead and method to to do this into the FlexJS Framework Currently, however, there is a bug in how beads are added and removed Which means it's not a hundred percent Perfect or working but it will work for you if it's in there But once that bug is fixed we can remove some code and make it a little cleaner So a little bit about our end development environment as I was saying when I first came onto this project Yeah, it was a single developer They used no version control and just fftp'd everything up to a live server. So Um, so this is what we've currently got set up We're using IntelliJ as an IDE. It's a little complex to set up and it's not perfect You can't effectively debug stuff in IntelliJ, for example, not that I've been able to work out anyway It's really good to see just as talk and the fact that you can debug stuff in In your IDE and particularly with the map files as well. That was that was nice So I may have a look at that I think Um, we command compile via maven via command line and you can run stuff locally. So that's that's that's nice We do run into browser security issues when doing that So you need to disable security and launch browsers via the command line with a few options as well Um When you're debugging I mostly use chrome and you can set bug points in that Debug variable names look at things and it's it's decent enough. Um, you're debugging the generated j s output rather than the action script itself And that means that it's not identical But mostly there's a one-to-one correspondence Um, and you can very easily work out where the bug in the action script is the to where that Jarper is for more complex issues, you know, that may not be the case But it generally is a is a good thing. Um, it's really easy to debug remote calls in in Chrome as well You can filter on them set break points on them when they get called See the all the headers that come backwards and forwards and so forth. So that that's a really nice environment to do that occasionally use A reverse proxy called charles as well to have a look at the traffic We use github for version control Again before I start on this project. They didn't have any of this So we're using that for version control issues Projects and milestones and we're likely to move to a self-hosted instance of git lab at some point Uh, we use maven to build stuff. It's fast. It works Mostly when things aren't broken But chris chris is very very responsive to that and uh Cleans up Messes that other people make occasionally to get it working again Um, it has rechained changed a few times Due to framework changes. Um, you just got to keep on top of that. Uh, but it's not it's not too hard to fix We use Jenkins as well And you can actually do quite a lot with Jenkins. I I've I've forgotten how powerful it actually is Um, we've got it running on linux. So you can actually compile the stk on linux Um, that took a little bit of effort and I had to to put in a couple of patches to to get that to work Uh, but yeah, you can get flex j s writing on linux. You can compile things on linux Which is a really good thing even with versions of the flash player that you may not expect There's a little hack to that but I'll If you want to know about that come speak to me afterwards So we've got uh, basically on checking to github with the whole project compiles and it gets ftp'd up to the development server So the development server always contains the the very very latest code so we can very easily test things Uh, we also run sonar cube If people are not familiar with sonar cube use it. It's a really really nice tool and it's free Um, we also keep the last 20 builds just in case something has been broken in the in the Flex j s so we can revert to any one of those builds at any point in time if we need to that's just a nice little safety feature We also have some jink and jobs that deploy to Production in one single step So, um, that's also another nice feature. So there's no manual lefty peeing around or any other other silliness And it also means that anyone can on the team can do this not only people who only have access to the The the server Um, we're using hipchat. We're a bit of a distributed team. Uh, while there, uh, there's two programmers working on the front end There's one programmer working on the mobile solid and we have a the person who's running the project Who's also the designer? Um, we're in four different states two different countries and four different time zones They're not too far apart, but but you know that does make for some Some, uh confusion And we've got this hipchat with jenkins and github integration So we can see everything that goes on as well Um slack can also do similar things to this And I don't care with you know use hipchat with slap, but this has been a really great way of communicating with the rest of the team and and It's it's really helpful project Um, and we also use uh sona cube and that basically tracks code quality looks for security bugs And I currently we don't have it set so that if we It won't stop things going to development environment Um, it reports on j s and as files, but it doesn't currently parse mxml files So we're thinking about using uh, sort of the code behind technique if you've ever run into that You make an mxl file. You make an as file with the same name and include it So we would we at least get all the as code, um Pars for this sona code is really easy to to run locally as well Um, so that's just about it. So what's next? Well, there's going to be further development where as I said, we're making releases about every two weeks Um, we currently have about six sites Uh, so there's going to be in the next couple of months up to a dozen sites And there's going to be lots of differences between those sites So there's going to be more feature toggles and more styling differences between them Um, we're going to try and fix a few bugs we found with the compiler and SDK and and Uh, we've just uh, been focusing more on getting a first release out Um, what I really like to do is get flex unit working properly and get unit testing and that integrated with the ci Um, so hopefully next Apache con. That's what my talk will be about Um, and we also want to grow the team. So, um, yeah, we're looking for new people if you're interested Come have a word with me So that's it. Uh, do we have any more questions? One for Chris It's not the build of the framework part. It's the build of applications using the framework that have increased Any other questions? Thank you very much