let me introduce Matt chaff he is coming to us today from just outside of London he's contributed to projects such as candy s and feathers J s and most recently he wrote the migration tools for kin gs6 the tools include code ones that automate the upgrade process and in his talk Matt's going to explain the basics of code mods and what tools are available to make dealing with them easier so you can build your own thanks Jason I've been working on code mods for the Canada s6 migration tools which allow for automatic upgrade of your legacy candy-ass projects to the latest versions we use jhf for running these JavaScript code modes coke mods are awesome because they simplify repetitive programming tasks and are for complex transformations like library upgrades easier and what is J's code shift decade shifters are told by Facebook for running code mods on JavaScript Jessica shift eases recast which is an AST transformation tool and what is an ást ást stands for abstract syntax tree this means an abstract representation of your code and track being the structural content of your code I look over that any formatting brackets semicolons and a tree like structure as we can see here in this example on the screen SC explorer is an online tool for exploring JavaScript ASDs I use this to write most of the candy as six code mods paste in the code that I'd like to transform I'll use the tree view to navigate the trees to see what I need to target for the transformation I'll trade create the transform in the browser where I'd be able to see the expected output and then following slides I'll walk through the different sections of there is two Explorer so the top left we've got the input section we paste your code in that you want to inspect top right we have the tree view you can navigate the tree and see what sections you have the bottom left we've got the transformation section where you can write your transform function and on the bottom right is where you would see the output of the transformation this example this is reversing all of the letters set in this example I've zoomed in in the top two sections so on the right hand side you've got the tree view and hovering over one of the expression statement we can see it's highlighting the code snippet on the left hand side and they're coding them Wow five years switch so they está Claro we can see this in action so we can see by hovering over different sections of the body it highlights the corresponding code and they cope on the left and by everything that we can see well then name the name of these and hovering over them for this a good example of lives I'm just going to go through an example of one of the transforms for Kenda is six this is I'm poor I'm going to be transforming Kenji has five component into Canada s six somewhere left we've got the Kennedys s five component which you would call the component to extend to create a component you'd give it a tag name and a view property for the template and on the right-hand side we've got the candy s6 we would extend the stash element class and then use a static guesser for the simpler so this is an example of the transform I cut a bit out because it's quite large this is what was used to transform front and KJ's 5 2 kgs 6 so we just run through a few other bits so Jeff sketch if it spaces a set of API is that allow you to navigate the tree to find the transform to transform it so here we've got the find method which well then passing in what we're going to look for so we're looking for a cool expression and then we can set how we expect to find stuff so we're going to set their Coulee and we're going to look for a member expression an object name of component and a property name of extent this fine is going to find that component that extend on the left you then we're going to iterate over the properties of the object we're going to pull out the view and the tag properties as well need days or later and then we get a determine how the component was used whether it was declared as a variable whether it was an explorer or just a component we need this so we can determine how we're going to replace the component I'm going to the Pascal case the Tecna and depending on how it was used or I'll use the tank or we'll use the the variable name and then we've got a replace we're gonna replace the entire component we're going to create a class declaration we're going to give it an identifier which will be the class name we'll create a class body which will just have a single method in it it's going to be a static getter with the name or view and then we'll create a body for that and that will be the value of the view property and then finally we'll set the classic extend name which would be slash element in this case and here is the can't s5 component on the left and and what we extended to and if we just open up the a stick flora we can see that in action up here we've got we want to transform just so they can justify a component we've got a bottom left that will hold transformation down here and and this is it but the output there's some links here so we've got the links to the J's code shift thanks to s2 explorer and then some links to can migrate and migration tools any questions I have a question how long does it typically take to write a code about like that you're saying the tools now I understand tools yeah and I guess it depends on the complexity of what you're transforming that probably take a good four or five hours I'd say it needs to do that one I guess that was one of the first ones I did but I guess depending on the complexity of the transform a few hours okay I'm just curious because it's probably saved us like hundreds of hours of doing that manually so it's a huge huge benefit yeah it can it can save a lot of time especially if you've got lots of things to run on I guess we run out on the docks which was a huge time-saver you