Reduce Tremendous Code Without Third-Party Solution

The article discusses several techniques for reducing dependency on external JavaScript libraries and frameworks by leveraging native browser APIs, TypeScript features, and custom utility functions. Here's a summary of each technique:

1. Using Fetch API Instead of Axios:

   • The author suggests using the fetch API instead of popular HTTP client libraries like Axios.
   • Example usage in Next.js for making API calls:

     javascript
      
     1import { fetch } from 'cross-fetch';
     2
     3const response = await fetch('/api/user');
     4const user = await response.json();

   • The author also provides a utility function to handle common operations like setting headers and handling errors.

2. Recursive FormData Builders:

   • A custom utility function is provided for converting JavaScript objects into FormData, which can be used in HTTP requests.
   • Example usage:

     javascript
      
     1import { cn } from './lib/utils';
     2
     3const formData = new FormData();
     4buildFormData(formData, user);
     5// Now you can use formData to send a request with fetch or XMLHttpRequest

3. Duplicate Interfaces:

   • The author recommends sharing TypeScript interfaces between the frontend and backend by using shared directories.
   • Example of setting up path mappings

Read the full article at DEV Community

---

Want to create content about this topic? Use Nemati AI tools to generate articles, social posts, and more.