Automatically maintaining thousands of code demos across multiple framework variations

1. Stephen Cooper
@SCooperDev
Auto Generating Code Demos
Why maintain thousands of examples when you can generate
them?

2. Our Mission

3. Code Demos

4. Agnostic Grid
Vue.js 2 / 3
8 * 2 * 500 = 8,000 demos!
Angular
Typescript
Javascript
React React Hooks

5. In an ideal world…

6. Generate from Typescript
Angular
React
React Tsx
Vue 2 / 3
Javascript
Typescript
Types
Strip
Types

7. Categorise the Code
Static Con
fi
g
Callback
Function

8. Abstract Syntax Tree (AST)

9. Creating an AST

10. Traverse AST and Pattern Match

11. Matcher using Typescript
• Typescript compiler contains matcher functions

12. Build Example Code Model
• Traverse the example code AST
• Matchers extract code into our code model
• Result is an in memory model of the example code

13. Framework Converters
Angular
Vue.js

14. Framework Templates

15. Framework Templates

16. Row Height Worked Example

17. React Function Conversion

18. React Example Broken!

19. Missing swimming height from dependency array
React Stale Closures

20. React Stale Closures
• useCallback needs dependencies listed in array
• We need to identify the function dependencies
• Can we use the AST to automate this?
YES!

21. AST Demo

22. React Stale Closures Logic

23. React Callback Generator
Add dependencies to callback array as required

24. React Corrected Dependencies
Dependency added to callback array

25. React Row Height Example

26. Validation
• Run generated code through Typescript with strict mode enabled
• - load every example variation
• - snapshot major visual features
• Git Di
ff
the generated output in a standalone repo

27. The Result
• Update all examples for a framework variation via a single converter
• e.g support for Typescript in React, 500+ examples in a day
• Add a new framework, just create a new converter
• Happy devs with more time to work on grid features!
• Happy users with code examples in their framework!

28. Take aways
• Use Abstract Syntax Trees to reason / generate code
• astexplorer.net to visualise / interact with AST
• Understand / Contribute to Code Linters
Don’t manually maintain code you can generate!

29. Let me know what you build!
Stephen Cooper
@SCooperDev