hlrd93 / beyond_challenge

1. What's a closure? Where in the code is there a closure?

A closure is a combination of a function bundled together with references to its lexical environment, allowing the function to access variables from that environment even after the function has finished executing. A closure allows a function to "remember" and access the variables in its lexical scope even when the function is called outside that scope.

For example in the PlanetPage.vue, there is a function called fetchData that is defined in the lexical scope of the script setup block. It captures the url parameter from its outer scope, after the fetchData is defined and called, it can still access the url parameter and any other variables from the lexical scope of the script setup block, that is a closure.

2. Which are the potential side-effects in any function? Could you point out any of these cases in your code? Are they expected? Can they be avoided?

Any function that calls any external asynchronous service, like a simple fetch or console.log, those are potential side-effects

In the fetchData function:

 planets.value = data.results
 nextLink.value = data.next
 previousLink.value = data.previous

Are side-effects because it modifies the external state by updating the value of:

 const planets = ref<PlanetItem[]>([])
 const nextLink = ref<string | null>(null)
 const previousLink = ref<string | null>(null)

Yes, these sife-effects are expected because of the architecture of the framework. This is a common side effect when dealing with uni-directional data flow frameworks like Vue.js, React.js.

Network requests are already controlled by making use of async/await statements. Network requests are unavoidable, it's good practice to minimize and control them. For complex state management, make use of tools like Vuex (for Vue.js) that provide patterns to manage state changes more predictably.

beyond_challenge

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint