Rippling Frontend Engineer Interview Questions

When users type into the search box of the employee directory, we want to provide suggestions after they stop typing for a short period to improve user experience.
Problem statement: Implement a function debounce that takes a function func and a delay in milliseconds wait. It should return a new function that, when invoked repeatedly, will only invoke func after wait milliseconds have passed since the last time the returned function was invoked.
Example 1:
Input: const search = debounce((term) => console.log(term), 300); search('John'); search('John Doe');
Output: // waits until 300 ms after the last call and then prints 'John Doe'
Example 2:
Input: const log = debounce(() => console.log('Hello'), 1000); log(); log(); log();
Output: // waits 1000 ms to log 'Hello' once only
Constraints:
- wait will be a positive integer and 0 < wait <= 1000.

Rippling needs an efficient way to manage dynamic forms where the number of fields can change based on user input. This requires maintaining state across various form components.
Problem statement: Implement a function createFormManager that returns an object with methods to handle the state of form fields. The object should have the following methods:
- setField(name: string, value: any): void - Set the value of a field.
- getField(name: string): any - Get the value of a field.
- getAllFields(): { [key: string]: any } - Get the values of all fields.
Example 1:
Input: const form = createFormManager(); form.setField('email', 'test@mail.com');
Output: form.getField('email');
Explanation: Returns 'test@mail.com'.
Example 2:
Input: form.setField('age', 30);
Output: form.getAllFields();
Explanation: Returns { email: 'test@mail.com', age: 30 }
Constraints:
- 1 <= name.length <= 100
- value can be of any type, but must be a simple value (string, number, etc.).

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.