Leebra sveltejs
login register

tips and advice for full stack svelte project

3 years ago by ______ to c/sveltejs

save

share

report

Title.

I'm going to use svelte and sveltekit. Most likely tailwind. Zod for validation.

Any tips and tricks/ideas, pits to watch for before I commit heavily into falling into them.

This project could potentially be in vue/react but in my opinion svelte is more appealing to me (specially because of stores)

silas 3 points 3 years ago

If you’re handling any sensitive data, passwords, or private user data, DO NOT use stores. Stores should only be used on the client-side. Use event.locals to pass data around for the user on the server side instead. If you use a store on the server-side, you risk that data being exposed or used in other current users and browser session.

For form validation, check out SvelteKit form actions. Also, I personally find Yup to be easier to use than Zod

save

path: 0 4166307, hotness: undefined, score: 3, children: 0
8rhn6t6s 1 point 3 years ago

Learn about hooks if you need validation on page navigations

save

path: 0 4122215, hotness: undefined, score: 1, children: 3
______ 1 point 3 years ago

Could you explain an use case. I don't understand what would need to be validated when navigating.

save

path: 0 4122215 4126790, hotness: undefined, score: 1, children: 2
8rhn6t6s 1 point 3 years ago

This is more protecting data.

For example if you have a page that only certain users can view. You can create a hook to validate their credentials every time they visit that page and redirect them out if necessary.

save

path: 0 4122215 4126790 4138453, hotness: undefined, score: 1, children: 1
______ 1 point 3 years ago

Oh so authentication, I was thinking form validation. Interesting.

save

path: 0 4122215 4126790 4138453 4143340, hotness: undefined, score: 1, children: 0
Blamemeta 0 points 3 years ago

Same as any other project, just keep at it. Also styling as a prop is a bitch in svelte.

save

path: 0 4112186, hotness: undefined, score: 0, children: 3
______ 1 point 3 years ago

What do you mean by styling as a prop?

save

path: 0 4112186 4112299, hotness: undefined, score: 1, children: 2
Blamemeta 0 points 3 years ago

You know how in react, you can pass style to nested components with props? The classname/SX prop specifically? A tad harder to do in svelte.

save

path: 0 4112186 4112299 4122407, hotness: undefined, score: 0, children: 1
silas 2 points 3 years ago

I’d try using props for high-level component states (primary, secondary, disabled, loading, online, error, etc.) instead of one-off styles. Then your props will manage a bunch of styles and functionality all at once and you’ll stay a whole lot more organized. You can even have a settings/options prop that changes minor things if you’d like. Then, for one-off or edge-cases related to styling, you can use a css variable

save

path: 0 4112186 4112299 4122407 4166172, hotness: undefined, score: 2, children: 0
sveltejs
sveltejs

@programming.dev

login for more options
761
74
10

Svelte is a JavaScript framework for building user interfaces (UIs) that compiles your code into efficient JavaScript during the build process, resulting in better performance and smaller bundle sizes. Svelte focuses on reactive programming, where UI components update themselves when data changes, eliminating the need for a virtual DOM. Svelte Kit is an extension of Svelte that adds features like routing and server-side rendering, simplifying the creation of full-stack web applications. It provides file-based routing and supports server-side rendering, enabling faster initial page loads and improved search engine optimization. Svelte Kit combines client-side Svelte components with server-side rendering and serverless functions for a seamless development experience.

go to feed...