Local Weather App - code structure

[DDorf]

Hello,

I’ve been wondering lately how to structure and organise asynchronous code.
I’ve finished the basic structure for the local weather app project so far and would like to know how would you do it or recommend some good source tackling this issue.

I feel like when the whole app relies on an asynchronous call, like the Geolocation permission in this case, it all starts to branch out one direction and I ended up nesting functions endlessly.

Thanks for any suggestions

The idea is to structure the code like this:

This project is using Vite.js and no JS frameworks
GitHub Repo

# main.js
import "./style.css";
import updateWeather from "./updateWeather";

// ask the user for a permission to access his geolocation information
navigator.geolocation.getCurrentPosition(
  handleSuccessPermission,
  handleRejectPermission
);

function handleSuccessPermission(position) {
  updateWeather(position.coords.latitude, position.coords.longitude);
}

function handleRejectPermission() {
  // Dundee, Scotland
  updateWeather(56.46913, -2.97489);
}

# updateWeather.js
import getWeatherDetails from "./apis/weatherDetails.js";

/**
 * Updates the weather information with the most recent data
 * based on the given parameters
 *
 * @param {Number} lat A latitude
 * @param {Number} lon A longitude
 *
 */
export default async (lat, lon) => {
  const cityEl = document.getElementById("city");
  const tempEl = document.getElementById("temp");
  const iconEl = document.getElementById("icon");

  const weatherDetails = await getWeatherDetails(lat, lon);
  const weather = weatherDetails.weather[0];

  const country = weatherDetails.sys.country;
  const cityName = weatherDetails.name;
  const temp = weatherDetails.main.temp;
  const iconUrl = weather.icon;

  cityEl.innerHTML = `${cityName}, ${country}`;
  tempEl.innerHTML = `${temp} °C`;
  iconEl.innerHTML = `
        <img src=${iconUrl} alt="${weather.description}" width=120 height=120 />
      `;
};

# apis/weatherDetails.js
import axios from "axios";

/**
 * Makes a call to the freeCodeCamp Weather API
 *
 * @param {Number} lat A latitude
 * @param {Number} lon A longitude
 *
 * @returns {Object} The weather details object
 */
export default async (lat, lon) => {
  try {
    const response = await axios.get(
      `https://weather-proxy.freecodecamp.rocks/api/current?lat=${lat}&lon=${lon}`
    );
    return response.data;
  } catch (error) {
    console.log(error);
    return null;
  }
};

[martinlubowa]

@DDorf

I’ve been wondering lately how to structure and organise asynchronous code.

Structuring and organizing asynchronously helps in building efficient and maintainable applications. Here are some excellent concepts to keep in mind while structuring your project:

1. Use Promises or Async/Await - JavaScript provides two main mechanisms for handling asynchronous code - Promises and Async/Await. Promises allow you to handle asynchronous code in a more structured way by providing a chainable interface for handling success and failure cases. Async/Await, on the other hand, allows you to write asynchronous code in a synchronous style.
2. Use Modularization - Breaking your code into smaller, more manageable modules can help you structure and organize your asynchronous code. Each module can focus on a specific task or set of tasks and can be independently tested and maintained.
3. Avoid Callback Hell - Callback Hell occurs when you have nested callbacks, which can make the code difficult to read and maintain. To avoid this, try to use Promises or Async/Await instead.
4. Use Error Handling - When working with asynchronous code, handling errors is essential appropriately. You can do this by using try/catch blocks or by handling errors in Promises.
5. Use Proper Naming Conventions - Naming your functions and variables appropriately can help you and others understand the purpose of your code more efficiently. Use descriptive names that reflect the functionality of your code.
6. Use Commenting - Comments can help you and others understand the purpose and functionality of your code. Ensure to include comments explaining what your code is doing and why.
7. Use Linting - Linting tools can help you enforce coding standards and best practices. They can also help you identify potential issues in your code.

It looks like you have applied almost all the above concepts in your code- which is fantastic. Hope the above explanation helps. Nice coding!