Vuejs Hackpack #17
Vuejs Hackpack #17
Conversation
aak523
left a comment
aak523
left a comment
There was a problem hiding this comment.
Really comprehensive HackPack, great job.
Just a bit more detail needed in some places (mostly towards the end).
frontend-development/vuejs/README.md
Outdated
| Vue.js provides two key improvements over 'vanilla' HTML/JS: | ||
|
|
||
| - **Reactivity**: Vue.js automatically changes the DOM (the actual document displayed to the user) in response to JavaScript state changes, without having to explicitly dispatch updates. | ||
| - **Declarativeness**: Vue.js allows for declarative rendering and building of components — the say-what-you-want style, as opposed to the say-how-to-make-it. |
There was a problem hiding this comment.
Might need a bit more explanation on this. Makes sense to me, but I'm not sure less experienced hackers will know the difference between declarativeness/imperativeness and why you'd prefer one over the other.
frontend-development/vuejs/README.md
Outdated
|
|
||
| #### Lifecycle hooks | ||
|
|
||
| Vue.js also uses **lifecycle hooks** to manage component creation and destruction. These can be hooked into to run constructor code when your component needs to. There's a lot of them (eight in total) but it's worth being aware of their existence. Running code that depends on child components will need to be delegated to one of these, since the parent component is initialised before any child is. |
There was a problem hiding this comment.
Could flesh this out more with some snippets (or link to one below, given you've not started writing Vue code yet). It might not be apparently obvious what the use of 'running constructor code' actually is for a complete Vue beginner.
| While Vue.js was originally designed around incremental adoption, it's very common to build complete applications in it, which is what we'll be doing here. A number of tools exist to streamline this process — not least the various npm scripts. After you've [installed NodeJS and NPM](/getting-started/README.md#javascript--typescript), running `npm create vue@latest` will create a blank Vue.js app we can use as a template to build upon. | ||
|
|
||
| You'll want to [enable TypeScript](TYPESCRIPT HACKPACK HERE), the *Router* (we'll go into this later!), and optionally *ESLint* and *Prettier*. The name doesn't matter yet as we'll just be looking at the example here before starting from scratch properly, so keep the example code, since we want to observe the resultant directory structure: | ||
|
|
There was a problem hiding this comment.
Do you want to link to the actual example project repository here to encourage people to check out the code directly? You could also link to the files/directories you've listed below.
frontend-development/vuejs/README.md
Outdated
|
|
||
| While Vue.js was originally designed around incremental adoption, it's very common to build complete applications in it, which is what we'll be doing here. A number of tools exist to streamline this process — not least the various npm scripts. After you've [installed NodeJS and NPM](/getting-started/README.md#javascript--typescript), running `npm create vue@latest` will create a blank Vue.js app we can use as a template to build upon. | ||
|
|
||
| You'll want to [enable TypeScript](TYPESCRIPT HACKPACK HERE), the *Router* (we'll go into this later!), and optionally *ESLint* and *Prettier*. The name doesn't matter yet as we'll just be looking at the example here before starting from scratch properly, so keep the example code, since we want to observe the resultant directory structure: |
There was a problem hiding this comment.
Where exactly are you prompted for the name / how do you ignore it?
frontend-development/vuejs/README.md
Outdated
| import Counter from './components/Counter.vue'; | ||
| ``` | ||
|
|
||
| We should also tell Vue that we're using the Counter component in our App component. Via the Options API, we export it as part of the exported object (note the script is not marked setup!): |
There was a problem hiding this comment.
If it's not too obvious already, I might also specify that we're still in App.vue. When I saw 'via the Options API', part of me thought that meant I should navigate to a different file.
frontend-development/vuejs/README.md
Outdated
|
|
||
| The object returned from `data()` is merged with the component, so we can now access `this.count`. Importantly, updating this from the code-side will dynamically update any DOM elements that use the data. | ||
|
|
||
| Vue's reactive state uses reactive proxies under-the-hood. The only important thing to keep in mind is non-reactive things do not become reactive when copied. In the following case: |
There was a problem hiding this comment.
What are reactive proxies?
Also might be good to clarify what the difference between reactive and non-reactive things is in practice / for the user.
frontend-development/vuejs/README.md
Outdated
|
|
||
| `newObject` does not become reactive, and while updating `newObject` will update `someData`, it won't trigger components that depend upon `someData` to re-compute their state. Always use `this` to update reactive state. | ||
|
|
||
| To have a DOM element that does this, we can use template syntax - Vue.js uses a Handlebars style. Writing double-braces in the HTML results in the contained TypeScript code being executed, and the result spliced into the DOM where the braces were. |
There was a problem hiding this comment.
Hackers might not necessarily be familiar with template syntax, the example below is good but you might benefit from a one-sentence explainer before you introduce it.
frontend-development/vuejs/README.md
Outdated
|
|
||
| #### Lifecycle hooks and raw HTML | ||
|
|
||
| This section is more of an explainer |
frontend-development/vuejs/README.md
Outdated
| > [!WARNING] | ||
| > `v-on` will only catch custom events in a custom component, not a regular HTML element. | ||
|
|
||
| We can emit events using `this.$emit(event_name, event_data)`. The `event_data` parameter is optional. In the `<template>` body, you can use just `$emit(...)` since `this` is implied there. |
There was a problem hiding this comment.
What does it mean to emit an event?
frontend-development/vuejs/README.md
Outdated
| </template> | ||
| ``` | ||
|
|
||
| Again, there's not much new here, just Router components. Using `<RouterView to...>` instead of `<a href...>` enables the router to switch components fluidly, enabling the SPA feel and preventing page loads. |
Note that this hackpack links to other uncreated hackpacks and should be reviewed once hosting is sorted.