[This is my learning log. Some of the contents here may be incorrect.]
Abstract
- Svelte is a **compiler **not a framework.
- It compiles the code for production at build time into a single, vanilla, JS bundle.
- No extra scripts or libraries are shipped to production.
- Often results in a faster running website.
Prerequisite
- knowledge of HTML&CSS, JS
- Node.js v8+ must be installed.
Guide Reference
https://learn.svelte.dev/tutorial/welcome-to-svelte
https://www.youtube.com/watch?v=UGBJHYpHPvA
Note 1
- just installed svelte template.
- npm run dev
As a previous react user, this feels like more closer to Vanilla JS + styled components. Somehow it offers component feature. Script tag may only be used once per file. HTML base compiler like django's template? This seems intuitive.
Note 2
Component✅ (next post topic)
state management✅
Looks like simpler than react.js. Called Svelte Context API and Svelte stores.
May use context here to let it available anywhere within an app.
`
import { setContext } from 'svelte'
const thisObject = {}
setContext('thisKey', thisObject)
`
To allow thisKey available in a different component within the app, import it by using the getContext function.
<script>
import { getContext } from 'svelte'
const thisObject = getContext('thisKey')
</script>
And here may be the spot. Svelte handles state management via stores(an objects that hold a value and can let developer know when the value changes). There are 2 kinds of stores : '(1)writable' and '(2)readable' stores.
`
import writable from 'svelte/store'
export const city writable('millennium school club')
`
URLs of state management in svelte
https://blog.logrocket.com/application-state-management-svelte/
https://www.koderhq.com/tutorial/svelte/store-state-management/
https://auth0.com/blog/state-management-in-svelte-applications/
Top comments (0)