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