Building a Complex High Performance JavaScript Project

How do you build a complex JavaScript project? And make it High Performance? In this video Niall Crosby gives away the secrets to creating a high performance JavaScript Data Grid that supports multiple JavaScript Frameworks. Presented at AG Grid Conf in 2018. Design decisions and insights into how the architecture of AG Grid was created. The challenges of building a component like ag-Grid, the internal framework ag-Grid now uses, and how to best squeeze ag-Grid for performance. - What makes writing your own data table and grid hard? - How to write your own IoC engine - Avoid external framework dependencies - How to make rendering fast and harness GPU - Auto Generating Examples for Documentation in Multiple JavaScript Frameworks - Use of a Mono Repo with Lerna - Role of a Developer and Development Approach 00:00 Intro 00:59 Writing a Grid is Hard 01:49 Talk overview 02:37 AG Grid Written in Typescript 03:54 Managing Dependencies without a Dependency Manager 08:50 Writing your own Component Library 12:10 Component Library retrospective 12:56 How to be Framework Agnostic 14:44 Overview of the Custom Stack 15:28 Q: What makes AG Grid Fast? A: Dom Virtualisation 16:54 Q: How Row Animations Work? A: style.transform to use GPU 20:00 Q: How to perform fast DOM Manipulation? A: innerHTML 21:18 A: Animation Frames 25:19 For Speed only update what has changed. How? 26:08 Aggregation Tree Walking 28:04 Batch Updates to a Grid 30:00 Demo of High Performance with 10000 records 31:08 AG Grid Build Process 31:12 AG Grid Automated Example Generation 32:24 Example Runner 34:24 Git Project Management via Mono Repo and Lerna 38:42 What does the Developer Do? 40:00 Team Location - Co-location 41:22 Outro AG Grid is available as a free community edition and commercially as an Enterprise product (full support and more features). AG Grid works with React, Angular, Vue, and JavaScript. For more information about AG Grid please visit: https://ag-grid.com