Rippling Frontend Engineer System Design Questions

Rippling uses a virtual DOM to efficiently update the UI without affecting the performance. Implement a differ that can detect changes, add new elements, or remove old ones.
Problem Statement: Design a class VDOMDiffer that compares two virtual DOM trees and returns the changes necessary to update the real DOM. It should have the following method:
- diff(oldTree: VNode, newTree: VNode): Array<Change> - Compare the old and new trees and return an array of changes, where each change is an object containing the type and the data needed to apply the change.
Example 1:
Input: const oldTree = { tag: 'div', children: [] }; const newTree = { tag: 'div', children: [{ tag: 'span', children: [] }] };
Output: diff(oldTree, newTree);
Explanation: Returns an array indicating that a 'span' should be added.
Example 2:
Input: const oldTree = { tag: 'h1', children: [] }; const newTree = { tag: 'h1', children: [{ tag: 'strong', children: [] }] };
Output: diff(oldTree, newTree);
Explanation: Indicates that 'strong' should be added.
Constraints:
- The trees are given in the form of nested objects where each node has a tag and children array.

Rippling's frontend framework needs a way to manage different views by changing the URL and rendering content without full page reloads. This must provide smooth navigation for a better user experience.
Problem Statement: Design a class Router that allows registering routes and navigating between them. It should have the following methods:
- register(route: string, view: Function): void - Register a new route with its corresponding view.
- navigate(route: string): void - Navigate to a new route and render the corresponding view.
- getCurrentRoute(): string - Return the current route.
Example 1:
Input: const router = new Router(); router.register('/home', () => console.log('Home view'));
Output: router.navigate('/home');
Explanation: Logs 'Home view'.
Example 2:
Input: router.register('/about', () => console.log('About view')); router.navigate('/about');
Output: Logs 'About view'.
Constraints:
- You can assume that routes are always distinct and valid.