DEV Community

Aida El Kouri
Aida El Kouri

Posted on

Svelte (Superstar ⭐️) - Day 1/100 of Coding

Gone are my baby dev days of hackathons and excitement over what I believed would be the next Facebook/Microsoft breakthrough. Working a 9-5 job as a developer is about as amazing any mostly indoor existence could be, but I miss coding for fun more than anything. I want to end the next 100 days (+/- 5 depending on procrastination) as a better, more involved developer.

Enter....100 Days of Code.

I've had this idea in my head recently of a friend manager. So many of my friends have quit social media (including me), and it'd be nice to have a way of remembering different connections I've made over the years.

Dev Log:

  • Setup new svelte project
  • Completed most of the tutorials
  • Created a feature list
  • Used local storage to save friends locally + with Svelte Stores
  • Created new friend form
  • Created friends list component
  • Created ToggleContainer (higher order) to hide components when not needed

Image description

Stopping place: I am struggling with whether to create 2 separate creation/editing components. Using an id in the store to track who I'm editing makes sense, but I have two options:

  • Pass in the "friend" properties as props to the CreateEdit component
  • Use the "editFriendID" from the store to get the properties and pre-load the form with the right options.

Top comments (3)

zoppatorsk profile image

From my experience it makes sense to pass props of it's only "one component level down" but at the same time, if already have a store with the stuff u need then might as well use that one though as can access it ez without changes even if component structure change later..

But yeah, that's just my toughs and I'm just a Svelte noob..

booleanings profile image
Aida El Kouri

good point - probably more performant to use the store anyway i assume?

good luck in ur journey fellow noob! 🤓

zoppatorsk profile image

I would not worry about performance at all. If u pass props and do not clone the props (i.e, with ... operator or something) it should be passed by reference so basically u only pass the address in memory where the object is located.

In the web app I made for the Redis hackathon it is not unusual that I store like 30MB of data in an array and It's passed as props without problems.

But yeah, if gonna access the same data in several places then stores make much more sense. Another thing that can be a big benefit is that u can access stores outside of Svelte components, i.e in regular JavaScript files, and it's also nice to have the state defined in it's own place.