Building a Complex High Performance JavaScript Project

sometimes I used to wonder why had she grid becomes successful when there was so much competition out there like we weren't in the first grid in the market but they all seem to not be able to get past the basic grid stage but we did we did manage to go past the basic grid stage I think there's a few reasons for that I think first is my background and the team's background we're not traditional UI developers we spent years and years and years working in banks about you know 15 20 years in Java C++ etc and we brought that enterprise engineering experience and brought it to different end UI and then I think the second reason is they're kind of the Foundation's that we built AG grid on and the different design decisions that we made and that's what this talks about it's going through a G grid along the way what are the key things that we did to make a G grid able to hold the complexity of all these features and working together and not for their legacy other grids do so like when you start building a grid most grids will start off doing a few features like it have filtering sorting and selection but every time you add a new feature to the grid you need to make sure it works with all the other features in the grid so sorting through filtering selection tiny circuit storage sorting and filtering and then as you add more features if the complexity is exponential so by the time you implements editing pendragon grouping and pivoting if to make sure all those features work with all the other features that you have and that's normally how applications work normally did an application you build a screen and it doesn't have the penalty it's an every other single screen that you have but a grid does they're not Siddarth AG grids features and it's a big big big big big list it's huge and then all the features were also support you know that frameworks so we needed a really kind of solid foundation in order to build all this on so I'm gonna talk about three things here the first thing we're gonna talk about is a framework we're not using any on the framework like angular react so how did we do our dependency injection error components we're going to look at that then the next part we're gonna look at is the performance so AG great performs really well as far as I'm aware there's no degrade that performs faster than we do so I'm going to see some of the techniques do we employ it to get to great to work really really fast and then the third thing look at is there a build process which to be honest he'll processes are really boring so how am I going to make a talk about something that's really boring well actually it's a bit of some really cool things in Ag grid because AG grid is very complex with all the different modules and all the different frameworks to be support and we're doing some cool things there and I'd like to represent that to you as well so I'm starting at the start the framework um we use typescript and we were fans of it I'm not going to explain to you what the benefits of typescript because you've probably already heard of it and you can go online and google typescript versus non typescript but everything in ag grids written in typescript we like it because it documents the interfaces were a multi developer team that makes it easier to understand and we believe it removes bugs if we're just using javascript you'd have more bugs in our in our software again if you know more about typescript just Google and also then they the question but functional object-oriented again I'm not trying to convince you that our opinion is correct I'm just telling you what our opinion is inside AG grid and inside AG grid we use object orientation to manage to complex their complexity at the higher levels as they in identifying the different modules need to talk to each other but then when you go inside the classes we then use a mix of standard programming and functional programming for the patterns or the algorithms that are inside the individual functions so we like to think that we've got breezing the best parts of object orientation and we're using the best part of functional programming um actually with this presentation just so you know I jump from connect topic to topic so there's not much congruence between one slide on the next so I'll probably pause for about five seconds between the different slides and they jump to a different topic we don't have any dependencies in any frameworks which means we're not using any of the imc containers that are provided by angular react and if you don't have an ioc container you have a problem of how do you get references to your little things you depend on inside a certain class so what happens screen here is an example service called grid service and we can pretend that this service has three dependencies service one service two in service for three and if you're not using an ioc container where do you get the references to those dependencies from well you could just do new which would be bad for two reasons first is that's a private instance you're not using the same instance and everybody else is using and the second reason why it's bad is it makes testing this class really difficult how can you inject a proxy for service not a proxy a big burden am tamaak if it's been instantiated inside so it's difficult to create a complex system if you don't have some kind of ioc container the first version of a g grid looked a bit like this where the ioc was managed by the application itself what a madad is each service had an init method and it depended on another part of my application to pass in a reference to the service so then somewhere in the app we had this main line sounds like c++ days and we didn't stancy at all of the services and then it's create the service sorry we create the services and then pass references to the services to each other so I'll show you what that looked like this is real code from AG grid Version three and this is the well this is my my main line set of components and we create all of these services using new and if you're an evangelist of testing you might think new is bad using the new constructor we just kind of and then Dan here once all the services are created item passed references to them services to each other it's like messy messy code and that only works really Singleton's if you have a service than the distant singleton that's created someplace else you don't need to have some way to get the references in a place where it may it's not even part of this code here so you don't have a way of another service wiring itself up as it's being instantiated at later State this is the best code you can get if you're not going to use an IOC container so after version 3 of Ag grid we decided we needed to create our own that's what the code would trade you grid looks like today that's her IOC container anybody want to tell me what we were influenced by spring yeah yeah we're Java programmers which is not true because Apple written job and and about four years but I'd like to think of myself as a Java programmer and yeah it's influenced by spring so for those you don't know spring we have beans rodent services same thing just a different name at bean is an object that you want to get instantiated by your by your IFC container their bean has a name which is then used for coded services to reference it and then we have this thing called auto wired and here for service women's service Student Service 3 the dependence sorry the IOC container will inject references to these tree services and we have we don't have to do anything else so the init method if we have if we want one doesn't need to take any parameters and we have this post construct again taken from spring once I stolen influenced influenced by spring and that's our mailpoet's construct and pre destroy for adding and removing and destroying create logic so now go to what the code looks like today an AG grid no it's a bit like this it is like a regular service called real renderer it's got all these different services at the pen zone while reference by name and the grid service just assumes that all those references are provided that allows easier code and it allows better testing as well so in a world would I deny OC container we have to create a room yeah freeze brain energy in alleged unit testing I let's say freeze brain energy I really appreciated the after the two or three weeks of refactoring what we had and then going into an IOC container world was actually easier to write code the trophy news services got to wire it up and then move on implementing the logic that was important so it was kind of prenup they're kind of size of the problem that week that allowed us to focus on bigger problems because less of her brain has been focused on wiring up two different dependencies so obviously containers kind of half of it jitter half-hour components so if we're not going to use a library how are we going to write our components if you're not gonna use a library then you're going to be indirect or manipulation and that kind of creates a well it's messy code a lot of boilerplate code and no consistency and boilerplate code is already got the same code kind of appearing all over the place and when I was preparing this presentation at of boilerplate boilerplate boilerplate if you say your name and other times you kind of wonder is that the real word for this what does boilerplate got to do a code does anybody know where the name boilerplate came from but I wanted to know so I google that and let you know basically he goes back to the printing press and read used to have plates for printing books and newspapers etc and they had these pieces of text that got used repeated across different books stuff like copyright notices and what do we do is they create a plate for the copyright notice they'll get used again and again across different books and it called those plates boiler plates and somewhere along the way some tech you thought that was good word to use for software and that's what we called software that you see being reused in a similar fashion so anyway back to the tacky talk components that's um that's what a component you're adding in you're at the bottom adding the listeners directly which is possibly in memory when you can then remove the listener we have to manipulate the dom elements directly also consistency is lost that's how I might do it but then somebody else might do a different way which would be just as valid and it creates very messy code difficult to maintain a little bit difficult to reason about as well so we've created what we call a G stuck components it's well it's template driven we use data binding use order wiring I'm using event registration which easier to explain if we see an example what you see in front of you here is a component inside a G grid it says live code this is what it looks like today so can I use the mouse to point here yeah okay so here's a template it's a string template kind of influenced from angular we have components that are registered by tag names so here AG primary coils header is a component that's map to that tag name so we allow mapping components tag names just like did a frameworks like reactor engineering view here we got data binding for the Proms which is an attribute that you see down here influenced by angular here we've got pockets around the method name which is an event registration on this event name here influenced by angular we have this ref equals here and we give a reference name which we can then use graphs lecture down below and this gives us a reference to that item influenced by react when we look an item up we don't get if it's a component we don't get an a reference to the Dom element we actually get a reference to the underlined controller class for that component that's not influenced by anything that's our own design and in the top of all of that we've got our auto wiring for services influenced by spring and interpose construct influenced by spring so we've developed our own component library taking all the best bits that we like from all that from frameworks we'd used and that's what the grid is based on so here's our component library any good well if you compare it to angular so here is some angular code for a simple hello world component and here is a G stock code that does the exact same thing they look similar it's just that you have the different pieces and different parts so we're angular for example here uses an annotation for passing the template in we use inheritance and we passed the template in today constructor you could argue which way is better or worse but what I would argue is it's actually the same amount of code we've reduced to complexity and we've got a consistency so it's a different way of doing it but it should allow the manageability over code just as well I so angry wouldn't let a manageability of the other code it works for us we've also in our framework we support I beg you right now in our framework we support all the other frameworks were framework agnostic the AG and AG grid as you probably know stands for agnostic and in Ag grid you can customize the grid you can create your own filters you can create your own cell renderers and you can do that in any of the frameworks that you like how we do that is well we have an interface and this is the base interface for all the different components so every component if you use in pure JavaScript and AG grid and you want to write your own filter or your own cell renderer it they all have this get GUI method which returns back HTML elements and then we have destroying in s which are optional usually you'll implement get GUI and in it if you don't use react or angular you don't need to worry about that because we've written adaptors so for angular for example if you install an angular component our adapter here on the right called angular comp wrapper that will map and it will forget Bui it'll create an instance of the component and return back the day over to span to AG grid that AG grid Dan plugs into the grid so as far as the grid is concerned it's just talking to all these native wrappers and then each wrapper is responsible for interfacing with the underlying framework that the component is written there if you're interested on the react side we use portals used to be elements but that's now I'm deprecated to portals and on the angular side we use the component factory resolver and a few container effort if you wanna see details om AG grids all open source so he can check all of this out online or once asked any questions about this Shawn from the previous talk he's the frameworks guy wrote this code so he can answer any questions about those so I'm AG stack to us and that it allows us to manage the complexity of the big system but using any of the frameworks because we provided her own ioc container provided her own component library and it actually works with all your frameworks and not sure was well it just really fits our need and allows us to build a complex application like AG grid which brings us on the next section which is the engine so I'm just gonna pause for a second and take a drink that's what you get if you google engine you go to images it's like the synced image I think so the engine so AG grid really fast and you know why here's the first one people you probably mostly already probably know what row and column virtualization is but just in case anybody does something to explain it as you put rows into the grid the grid doesn't render all the rows for the data that you give it so if you give it a thousand rows in this example here it will only create the Dom for like event ten of those rows and I just scroll up and down to create will rip those arose out of the Dom and it's there are other rows and that's called row virtualization if we didn't do that there's like entry level stuff for a data grid if you didn't do it your browser would crash after but it hasn't rose because Dom elements are really really really heavy we virtualize on the rows and then the columns so if you have 100 columns will only render they're five or six if you can see on the screen at any given time that means that there is a no real constraint in the amount of data that you can give a G grid the only constraint is how much data you can fit inside the heap of your browser so if you load loads of data in what you'll see is oops something went wrong in Chrome because you've run out of heap space to get over that limit we can our lazy loading the data from the server side using a server-side role model and that's what Rob's gonna talk about later in his talk right that's wrong : virtualization row animations this is like me personally I don't really care about the animations because I'm a geek and a techie but users really care about animations they like smooth looking interfaces things that work really well especially on tabs which are low powered if you don't have your animations working smoothly it's quite obvious and all of our row is animate when you sort or filter or when you open or close a group drones have a smooth transition and we've got a cool way of doing that that I'm going to show you all of the rows in Ag grid oops change okay all of the rows in Ag grid are explicitly placed in this example here I'm using style dot top so giving a CSS top position to each row I can then add a transition to the top so when I change the top it will screw a little animate to the new position and here I can see in this example um here all the rows are flipping the top and go to the bottom it inverses the order let me make that a bit smaller I'm going to do this again but instead of using rode on top I'm gonna use style to transform okay can you see a difference there this is road top crystalline and this install transform which one's smoother that's right second one this is a new XPS machine so everything's kind of fast on it but the second one is much much much much faster can anybody tell me while why is transform faster than just citing the top you work for us [Laughter] you said the producer GPU that's right yes transform is a 2d drawing API that's implemented by the GPU tester graphics hardware so when you do something in CSS to use the transform without using a hardware in your machine whereas if you do top that uses the CPU and the transitions are done in CPU using animation frames so we get the animation of the roads to work really fast by using transform and then translate y which is move up and down rather than using the top position then we need to be careful because there's only so many things you can use translate Y with so many Dom elements because your hardware will have a number of stacks that it can support and we start using translate everywhere you'll run out of stocks so you need to choose which ones you want to put this translate onto which would be the ones that you're going to use for moving things around so what we didn't do is apply a translate to each cell because that would be too many we would have run out of layers so we just do it to the real position instead and then with this if you use AG grid on a say a tablet that's low powered the transitions actually work really really really smoothly just like a computer game okay moving on to the next one inner HTML means fast rendering what's that mean well AG grid is lots of Dom manipulation we build up all the cells from scratch we kind of have to because the grid doesn't know what you're call them definitions or what your rotate is going to be like so we have to inspect all of the data actually with the definitions and come up with the cells and we did that each cell at a time will be a bit slow so we need a way to kind of batch these operations are making faster and one technique that we use is setting the innerhtml onto a row element with all the data in it what's that mean okay that makes plane so just so you've got the columns it's not just say you do you've got loads of columns and what we'll do is we iterate over the columns and we'll build up to HTML as you go along and we won't twitch the Dom until you have the entire row complicate the entire row computed into an HTML string and then we'll use inner HTML to set the content so that entire row in one go that operation is much quicker than hitting the Dom multiple times especially in IE okay so we use this I'm going to show you where we use it after introduce when it to your concepts animation frames we split the rendering up into animation frames because if we didn't it would be a bit slower so I've got this laptop it's a XPS really really fast it's difficult to show things running slow but what may be great about a piece of software so it actually slowed the whole browsing experience down good thing is I've got one that's called Internet Explorer and that's it here okay let's see if you can notice the difference here I've got um two grids open the first one has animation frames I think on I understand has them off okay so but animation frames off as I move up and down notice the the mouse cursor and the scroller the scroller is lagging behind it's not being as responsive okay the second thing you should notice is there's a white screen being shown while all the rows are being rendered so the grid is waiting so everything is processed in one javascript turn and then it's gone bang and everything is there so what I'm gonna do what I want to achieve is this experience a smooth scroll bar so it doesn't lag and I wanted screen to be drawn as soon as as the pieces are ready so the user doesn't think it's still so we see it get some feedback from the screen and on this tab here and ie that's what I've done so if I scroll up and down you'll notice that a scroll bar is keeping underneath the mouse button mouse icon under rows are being drawn in stages they see that the zebra kind of affected the backgrounds it arose and they're being drawn first and that's important suppose the user scrolling up and down even say with a I'm touching the screen here with a hand gesture well my computer's too fast to demonstrate but the first thing we do is we get the backgrounds of the rows drawn into the Dom as quickly as possible so the user has feedback about that about the day of moving in line with the scrollbar we do that using the inner HTML so we work out the skeletons of older rows crate that one piece of HTML and if you scroll up a twenty rows it'll just do one Dom hit and it inserts too but the skeletons for all those 20 rows just in one down call it will then create all of the cells are all of us are all the individual rows but they will be put on to animation frames so we have this let me go back to just here as the rolls have been created they all put a the creation of Darrell onto a task ANOVA thread someplace else which then goes to this task queue every animation frame and pulls off and tries to execute as many tasks as it can within 60 milliseconds and the first thing it the first task and there these are prioritized to the ones that you're most important the first thing it'll do is insert the skeletons for the rows so if there's no cell renders being used it'll be able to build HTML in it as a string for the entire row and then assert that and wouldn't go into the dome it then goes back and puts in where the cell renderers are and it'll put those in individually in hindsight I should have used a different um it sounds like it's going to say something else there but I'm not that's the end of that slide so yes so we use animation frames and inner HTML to break up the rendering together to give feedback as as quickly as possible I showed you ie here but when we put these changes in for ie and people in the office were like I'm agog not if he made it really fast for Chrome and apparently I had I didn't see a problem in chrome but as a user all these changes do impact chrome as well so you get a much more smoother experience even though you might not even notice to be being slow in the first place right new topic change detection so all these modern frameworks like react and angular change detection is a big deal and we do change detection as well roads it's quite simple it's to do with the cell level and for each cell well the cell just keeps a copy of the value down it's rendering and that's what we see here so when we call refresh cell the cell component to each cell will be told to refresh and we'll find out what the new value is the Lang compare that to the old value if it's the same just console to refresh your just returns so this means under grid if you change one piece of data in one of your rows and then call on our API refresh cells there will try new fresher on the cells but all of them except that one cell that you changed won't actually refresh the Dom won't be touched and that gives a performance and aggregation tree walking sometimes a smile I came up with these names because nobody else has come up with a name for it and I get to call this aggregation tree walking and what's really weird Dennis when people write blogs using these concepts that I named and I was like I should have come up with a better name what is the aggregation she wrote in here use of the aggregations and AG graduates money okay well when you group you can add aggregations so here I'm grouping by country and then grouping by I'm a boolean value yes or no and as you edit values the grade will keep the aggregations up-to-date of the parents so when you edit one cell the grid has to work out what their parents what the parent groups are for that cell all the way to the top that's the tree walking it's finding their two parent rows so here as I added something for a France and yes it then asked to aggregate the two values above so that's just see this in a tree these are all their nodes the data is at the bottom that's all these values down here so if I added one piece of data I don't need to regrow again they're all the parents all the way to the top now that's kind of a well simple and boring it gets interesting when you're doing lots of updates so we have these things called am transactions in Ag grid where you can give to grid 50 rows that have been updated and those rolls and be spread across the dataset what the grid will do is it will do although the updates at the leaf level first and it will then do tree part walking across all those updates and work out the least amount of parents that needs to work that needs to recalculate the aggregations for and that's the performance enhancement so I just need to reallocate all the groups every time an update comes in which kind of leads on to the next topic which is batch updates so if you're doing a if you're taking a live stream of Delta updates to a grid and updating lots and lots and lots of cells and those are coming in on a WebSocket which is the normal way that you do it and the problem with WebSockets and events is every time an event comes in that creates a new JVM turn if you touch the Dom in that turn then the Dom needs to be refreshed if you're say bringing in 100 messages a second then that's 100 Dom hits and refreshes a second which will not work it'll just break down so we need a way to run batch the updates as to go into AG grid and that's what we do with the batch update API command now you have react for example does something similar when it's between or it doesn't batch it delays updates to the Dom so as you update a virtual Dom and react it won't update a real dominant in real time it let it build up for a bit and then it'll refresh in batches afterwards so if we were using react we would have been it we would have benefited from their delayed update of the main Dom but we wouldn't have been able to benefit for update in our aggregations so every time a value comes in we need to update the aggregations for the parents but with the patch updates it'll delay those as well so will that a stream of date of messages come in and then it'll update all the children and one go and then update all of the aggregations and the parents in one go so we need these batch updates for two reasons one is to minimize the updates to the Dom and it is to minimize how many times we reallocate at a group level okay so um that brings me on to the next example I like this example I call this the money shot that's told I shouldn't say that that's got old about your plates coming in it's updating all the aggregations at the top level as well smooth scrolling 3d really smooth so just ten thousand records in the Dende grid here I'm getting one two thousand updates per second applying these updates to the grid and the performance is still really really good as we open or close groups it's using the GPU for moving the rows up and down and then just bit as my favorite people I sort there we go I like that because there's just so many techniques that we've programmed all working together to produce a really really smooth experience with Ag create with quite a large metadata inside the dome okay so Derrida types of techniques that we used to get the grid to work really really really fast then it's time to talk about the build process I'm AG grade is a big project we support lots and lots and lots of frameworks that means your documentation has got lots and lots and lots of examples about a month ago I counted it was 125 examples in Ag grid and we have all of them available and angular and reactant were in the middle of we know more than to view J s there as well and the next release all of them should be in future yes so that's about 500 examples all together that means now when we alter a feature or create a new feature we have all these different examples and all the different frameworks that we have to write I didn't like that I'd say boring so we had this new guy join us called pecho and I said to petrol I don't want to write anybody's framework examples anymore what I want you to do is write a piece of code that look at my JavaScript example and generate all these framing examples from that like an example generator he didn't like me but um he created what we call the example runner he pulled it together so let me show you the example runner so this is the documentation and I'm sure you're mostly familiar with it this is an example in the documentation and it's available in all these different flavors and you'll notice that the example doesn't have sorting I'm just clicking here and there's no sorting on the account so as a developer I'm going to change this example this does an Ag grid developer now not as a consumer this is the source code for the Java Script I'm going to change the grid options and going to add in enable and ABI 14 true I'm going to enable row animations what's the key for that animate rows hope so okay I'll say it save you'll see you down here it's generating two examples then we'll go back and I'll press refresh and this should sort nanometre okay it is enabled or Oh animations okay if I didn't go to the code I can see here the two properties that I set which is no surprise that's the code I edited but if I go unto the frameworks and if I pick angular I can see the decoder has taken those items here they are I'm it rose in the naval sorting on a set them in the angular way and then the same for react which is done and a render method here I've got a table store can animate rows and then for view here I've got um enable sorting and automate rows I think this is pretty cool because I've never used view but yet the code am writing as I need open it pending open a view example this saves us a huge amount of time and allows us to manage to complexity of having all of these examples in all of the different frameworks it sort of somebody clapping okay um another problem we have is we have a lot of projects so we've got a G grid community which is a free version and we've got a G great enterprise which is the enterprise version on top of all that we have all under different frameworks which are kind of wrappers around the AG grid so we've got react I'm getting a few or many actors more not just shown here a polymer etc etc on top of all about and we need to have projects doesn't work with all these frameworks so we use as a testbed to make sure we can pull them all down and a little work that's a lot of projects and this is difficult for us to manage because as we release we need to make sure that we know which versions are which projects work with each other now we used a major minor pot versions and releases so I know that as long as they're patch versions are different beg your pardon as long as the major and minor is much then they should work so version nineteen point one point two g-good community will work with version 19 pine 2.1 of enterprise someone actually broke an AG grid nineteen point two point seven of hatred anger it's kind of a bit of a storm also releasing enough to release all of these projects individually and we find it difficult so we'd expected for our consumers their users would find it difficult as well to know which projects actually work with each other so our solution to this was to move to mono repos using mono repo is the spec and learn is the implementation what this allows us to do is put everything into one get project then all of the our previously projects become packages inside that one get project then it's essentially managed build it gets built as one project and everything gets versioned it gets down to the same version number and then we release all of the individual packages as modules on NPM who knows about learning hermano repos who's used this could have maybe five or six people okay if you're in a situation that we were in where you've got lots of different projects that got dependencies and their version number is getting difficult to maintain and you want to release them all together then I'd recommend look at the mono repos and learner and we researched all of this and do grids open source so we can look at what we've done use a reference implementation so the code would end up looking like this so this is AG grid if you go to github there is only one project now called AG grid inside the project we have packages and these are all of the different kind of welder their packages now inside eh a great project there is a community there is the enterprise here's your website Docs and then all of the different frameworks do we support or in here as well makes our life a hell of a lot easier for managing releases and it makes their consumers lives held a lot easier because you can be certain which version of which Brooks with what meaning older versions just keep the version number the same law work with each other so if we need to do a patch just say there's a problem with the react rubber and we have to increase the patch number once we've done the fix but then just release everything again so you'll get a new version number stamped across all of the different packages almost so the question was what regards github do we just pull the different modules to create the scheme okay no this isn't it's not to do it get so as far as gets concerned it's just one project so when we checked this project act which I get the top level which is well it's called latest where this becomes kind of different is how it's built and the fact it inside the packages you've other projects again inside there so if I've to go into one of these you'll see in node modules in here and you'll see a main and package that Jason and they all have their own private dependencies so from a building point of view it's as if these are all stored in different github locations but now they're not all stored in the same github location so don't do the question cool okay and so yeah we found it's very useful the next thing do we do where I believe were different is the developer role where we are a very developer centric company I guess because me being the founder was a developer and I wanted to kind of I was focused around what I was able to do our developers don't just write code our developer is responsible for end-to-end testing one of my pet hates is when the developer comes to me and says I've done my tests pass and I ask how you actually tested end-to-end and they say no but my test passes them like that's not good enough so yeah to me it's working means it's being tested went and to end our developers are also responsible for writing the documentation our users are developers so it makes sense for the developer to write the docs we don't consider a feature complete until that feature has been described in the docs and is in at least one of the examples inside the documentation that's part of the unit of work is to make sure we talk as an example and also where developers do marketing so myself and Robin Sean are speaking today rural developers in a G grid will go to the different conferences will help I would support we basically do everything we can in the company not just develop code I'd say we develop about 40 or 50 percent at a time and time we do know all the different things inside the company to make sure it's running and then same location so agent grids open source and normally when people think open source they think about people contributing code from all over the globe pulling the best brains no matter where the presents based I don't believe that's the right way to do it I think the team should be co-located because of the type of code a G grid is it's it's more complex if you're writing an application and the application of mining screens then you could tell your your dev team look we're using angular I need this screen use angular as the cookbook and generate the screen but we don't have the cookbook in Ag grid every piece of the code is just a brand new design it's doing things differently to do all the other pieces so we need to get around a whiteboard we describe it using UML we discuss it we do pair programming properly two people on the same desk we do our code reviews again in person and that works really really well this is what we say on our github where usually this is where people are told if you want to work with us to say check any mustard unit test blah blah blah we tell people if you only come work for us you have to be in London and we're gonna hire you we're not really interested in having the the dev team spread and I believe this is necessary in order to keep the quality of Ag grid as it is right now she won't be part of our team though I guess come speak to us and that's it so that's how I believe we managed to create a complex product like AG grid [Applause]

Channel: ag-Grid

Views: 4,216

Keywords: high performance javascript, using GPU from CSS, JavaScript Architecture, Complex JavaScript Design, MonoRepo Lerna, AngularJS Data Grid, React JS Data Grid, JavaScript Data Grid, CSS style.transform speed, VueJS Data Grid, JavaScript Data Table

Id: rT0vQejPcrs

Length: 41min 37sec (2497 seconds)

Published: Mon Dec 10 2018