You are an inspiration. This is exactly the kind of work I love to do and see as a software engineer. Abstracting and modeling the software and its components so it makes mine and everybody else easier to build stuff. Cheers 🎉
Awesome project. I'll study this to understand the patterns and how you used stores so efficiently, my stores and firebase code look massive in comparison in some older projects. When you announced the upcoming SvelteKit course I started typing a query about an updated Stripe course. Needless to say I deleted that query :).
Can’t wait for the full Svelte course! Do hope it includes Svelte Kit and SSR, as it’s something that still eludes me which I hope to be able to push to Firebase hosting, as per usual.
I've also begun playing around with custom Svelte stores for a reactive data store I'm using and it's a lot of fun. Abstraction is always awesome. Passing down data through components looks very convenient, so I'll have to try it.
these design patters will actually help a ton with authentication! While i dont use firebase, i found myself accidentally discovering this pattern with data already but never thought to actually own it and extend it to user auth.
I'm building a cross platform app with sveltekit that I plan to try and market, and this is very helpful. I wonder how many times I'll rewrite the code before I finish it lol. Thank you!
All I'm seeing is Context and custom Hooks. Coming from React, I taught this was not really possible elswhere. Thanks for the information Jeff ;) Svelte seems so easy yet so scary when apps tend to grow, this video, excluding the Firebase stuff is a really good exemple for global state management and I really want to dig more about Svelt now.
That's basically what it is (context behaves verrrrrry similarly to React), but, in my experience, there are wayyyy fewer gotchas with Svelte Stores than there are with custom hooks in React. For one, it's much easier to work with complex objects and arrays that have asynchronous behavior.
Looks like a pattern we have been doing on native web component land a few years now to compose apps. However, the slot property is kinda cool, would be nice to see something like that instead of always sending data with events.
This is just the direction development with sveltekit needs to go. Thanks for making it, at the very least I learned how to design my sveltekit apps better! Generic design to remove boilerplate is the way to go.
I dont know why im watching this whilst banging my head against the desk because of c++ pointers, knowing full well im going to code up a website in pure html,css,js. But keep up the cool videos.
I'm building with svelteKit right now and it's like taking heavy amounts of heavy drugs, just without all the sideeffects react gives me. Currently experimenting with different UI libraries like DaisyUI and Skeleton.
@@0Smile0 i like DaisyUI for components, but their page themes is kinda bad IMO. Tailwindcss is also really good and it works flawlessly for my usage. Skeleton UI is nice, but it’s a pain to set up. But be on the lookput for when they release it. I’m sure it’s going to be really good.
Hey, great video. I knew this lib existed but never truly realized how helpful it could be. If you have more examples of how to use it in a longer videos (with more real case scenarios) I would totally watch it. Btw, I noticed you didn't put your website in the video description. Is that on purpose? When you mentioned the new course I looked for it in the description but couldn't find any links to it.
I love that you love Svelte. It's waaaay better than React, it'll just take the React chads a while to figure that out. This is coming from someone who used React in professional teams for years.
@@jonathanthomas2449 The svelte developer experience feels much closer to native js and for me it was much simpler and intuitive to learn, especially with their interactive tutorial. If you use svelte you will learn skills that apply universally to web development. If your goal is to work on your own projects I would recommend svelte. If you want to work in a corporate environment it’s worth picking up react, but that doesn’t mean you can’t still start with svelte. I was a react dev for 2 years and I recently switched to svelte for my own projects. It’s a much better developer experience and there’s far less boilerplate
I am a big fan and learned a few neat Svelte tricks here! I have concerns with this approach however. All requests to the database will be issued by the client. Putting this behind a server-side API allows you prevent misuse through rate limiting individuals from spamming your backend. You can even add client side logic to significantly increase the complexity of manually issuing valid API requests which allows you to reduce the likelihood of people writing scraping or automation bots (although you can’t prevent it) Obviously, this is much more effort.
On what regards this is a realtime app? All of the heavy lifting is already done in firebase sdk for updates and sync form and to the platform itself. This is more like using rxjs or redux for maintaining an application state from external interactions to platform
When is the Svelte course going to come out? I know you said in about month from the release of the video, and we're right around that timeframe. Please let me know I am interested!
Fireship you can return unsubscribe directly on the onMount hook And you can call getContext in the same component that calls setContext I think your library can be better using hooks instead of components based
Something that worries me about SvelteKit is my lack of understanding of how it works and where I may slip up when it comes to security (e.g. simple things like having private code running on the front end). If I'm correct that this is a risk, I'd love a video on it!
I've thought for a long time that Vue is the natural step forward for angular and react developers. Angular people would have their mind blown by an extremely easy reactivity model compared to rxjs, (working) hmr, actually useful devtools, etc. React developers would have their mind blown by embracing the mutable nature of objects and automatic mutation tracking instead of doing (costly) reruns of functional code and immutable object creation. But it seems a lot of devs are jumping ship from react over to svelte instead of Vue. Vue 3 and svelte are almost identical in syntax, but svelte bundles end up larger in size, and the written code is further from JS than Vue (the reactivity parts). I've concluded that svelte might win the hearts of devs in 2023 by being young. If I google a vue problem, I'll find solutions for v1, v2, v3, options api, composition api, etc. A lot more confusing for a newcomer than svelte which has few changes between versions. Good documentation wins developers over I guess..
Svelte is more lightweight then Vue and is overall simpler. I've used both svelte/kit and Vue/nuxt3, and I just feel that sveltekit does what I can do in nuxt3, but faster and with less complexity.
Vue does feel like a breath of fresh air coming from react - it tidies up the mess a lot by giving quick shortcuts for a lot of repeatedly used patterns and designated sections to split up code The problem with react was never the functionality - it was always the resulting mess that kept happening if you don't have a really good dev team who knows how to manage code But svelte seems more pure to me due to the no bundling idea - as long as the tree shaking and optimisations keeps happening I don't see why it would eventually have competitively small productions bundles (even if right now they aren't great) And let's just compromise on the part that JS isn't exactly syntax/language standard anyone should aspire to
At the end of the Custom Stores section you return an anonymous function that invokes the unsubscribe function. Can you just return the 'onAuthStateChanged' invocation instead? Just wondering if it doesn't work.
HELP! I just don't get it working. Everywhere there's different documentation about how to set the config. If I try to make it exactly the way your docs suggest I run into a bunch of problems. Can someone please help me??
Maybe could you update the sveltefire Template? It would be soooo helpful! I want to start programming, instead I'm waisting hours with Firebase Config...
The thing I'm mostly missing on in UI driven data frameworks such as this one, is the fact that it's very difficult to test. How do you test your app without hiding behind mocks for the entire transport layer? I mean, you can spawn a local firebase simulator and point to it, but that's quite memory intensive in terms of resources, namely while developing. I'd really love to have a separate in-memory transport layer which will run against the real-ones test suite, and once the two have passed, I could defer to the on-memory one from that point on, for the rest of the tests, but it seems like all of these ui-wrapped-data-libraries suffer from similar afflictions (not limited to svelte of course, react/angular/vue have a similar library for years now).
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/mqdefault.jpg)
All these new frameworks are turning me into a minimalist.
😂
@@ieatthighs he minimalist he no use indicator for plurality if not necessary
@@ieatthighs he edited comment he no minimalist
@@ieatthighs I appreciate the correction. I've been getting a minimal amount of sleep lately...
@@saltymashedpotatoes thanks for the response, usually people aren't as honest as you
have a good day
I love the love Jeff is giving to SvelteKit :)
He's getting laid.
*paid
@@TwoTeaTee Yes he is indeed bought by Big SvelteKit. Very much so. Absolutely without a doubt.
@@swaggitypigfig8413 and clearly dont have any family stucked in a random Taco Bell basement by trench coat people
@@TwoTeaTee I’m sure sveltekit makes enough money to pay fireship
Svelte has become the definitive UI framework for me. I can't imagine using anything else when I have a choice.
I can finally die happy knowing I can make realtime apps in under 30 seconds.
You are an inspiration. This is exactly the kind of work I love to do and see as a software engineer. Abstracting and modeling the software and its components so it makes mine and everybody else easier to build stuff.
Cheers 🎉
Hey man, really love how you make tutorials. I'm not even a web developer but the way you create and explain everything is great!
Awesome project. I'll study this to understand the patterns and how you used stores so efficiently, my stores and firebase code look massive in comparison in some older projects.
When you announced the upcoming SvelteKit course I started typing a query about an updated Stripe course.
Needless to say I deleted that query :).
we need that svelte kit course nowwww
I mean it should have been called FireSvelte but other than that it looks pretty cool
Should have been called Smelte
@@minnow1337 That name has already been taken sadly
SvelteBase
Sfelte
@@suya1671 Then it should be called Smelt, and should use a fish icon
Fireship uploads!! Day gets better
4:55
holy shit this itches such a specific part of my brain
thank you so much for the effort you put into these videos
Can’t wait for the full Svelte course! Do hope it includes Svelte Kit and SSR, as it’s something that still eludes me which I hope to be able to push to Firebase hosting, as per usual.
I've also begun playing around with custom Svelte stores for a reactive data store I'm using and it's a lot of fun. Abstraction is always awesome.
Passing down data through components looks very convenient, so I'll have to try it.
... I don't think I will ever get to this level of understanding.
Its so exciting watching these, also deflating...
Jeff: "Let's build a full stack app with Svelte Fire in about 30 seconds"
Also Jeff: *Uses copypasta*
This comment is still underrated 🤣
these design patters will actually help a ton with authentication!
While i dont use firebase, i found myself accidentally discovering this pattern with data already but never thought to actually own it and extend it to user auth.
I can't wait for your SvelteKit course!
Wow Jef, that was aswesome! Looking forward to the course. Have a great year!
I'm building a cross platform app with sveltekit that I plan to try and market, and this is very helpful. I wonder how many times I'll rewrite the code before I finish it lol. Thank you!
Amazing work. I will be using SvelteFire soon.
Wonderfully elegant. Love it!
Thanks for spreading the Svelte-y goodness!
Have taken your NextJS course. Looking forward to your SvelteKit course. 👍
I'm waiting for the course. It'll be my first course bought from Jeff :)
All I'm seeing is Context and custom Hooks. Coming from React, I taught this was not really possible elswhere. Thanks for the information Jeff ;) Svelte seems so easy yet so scary when apps tend to grow, this video, excluding the Firebase stuff is a really good exemple for global state management and I really want to dig more about Svelt now.
You're seeing context and custom hooks, but less verbose
That's basically what it is (context behaves verrrrrry similarly to React), but, in my experience, there are wayyyy fewer gotchas with Svelte Stores than there are with custom hooks in React. For one, it's much easier to work with complex objects and arrays that have asynchronous behavior.
Looks like a pattern we have been doing on native web component land a few years now to compose apps. However, the slot property is kinda cool, would be nice to see something like that instead of always sending data with events.
What a nice morning, talking trash to react and giving svelte some love
This is just the direction development with sveltekit needs to go. Thanks for making it, at the very least I learned how to design my sveltekit apps better! Generic design to remove boilerplate is the way to go.
Looking forward to that SvelteKit course :D
This stuff is simply amazing! 😀
Looks awesome, might try to reproduce it in my Nuxt app!
And there I was, thinking I finally understood Svelte.
Amazing Job!
Looking forward to the SvelteKit and Stripe courses.
That looks cool, I am still on react, but that example at the end makes me want to switch to svelte for my next project 🚀
Blazing Svelte gang.
Jeff: “Do not use in production”
Me: “challenge accepted”
I dont know why im watching this whilst banging my head against the desk because of c++ pointers, knowing full well im going to code up a website in pure html,css,js. But keep up the cool videos.
you should make a video about htmx and _hyperscript
I'm building with svelteKit right now and it's like taking heavy amounts of heavy drugs, just without all the sideeffects react gives me.
Currently experimenting with different UI libraries like DaisyUI and Skeleton.
what are some good UI libraries you found?
no you not stop cappin
@@windwardhive7363 lmao ok then G 🗿
Give flowbite-svelte a try. Everything you need is in there
@@0Smile0 i like DaisyUI for components, but their page themes is kinda bad IMO. Tailwindcss is also really good and it works flawlessly for my usage.
Skeleton UI is nice, but it’s a pain to set up. But be on the lookput for when they release it. I’m sure it’s going to be really good.
Beautiful.
Hey, great video. I knew this lib existed but never truly realized how helpful it could be. If you have more examples of how to use it in a longer videos (with more real case scenarios) I would totally watch it.
Btw, I noticed you didn't put your website in the video description. Is that on purpose? When you mentioned the new course I looked for it in the description but couldn't find any links to it.
I love that you love Svelte. It's waaaay better than React, it'll just take the React chads a while to figure that out. This is coming from someone who used React in professional teams for years.
Should I already go ahead and skip learning react just to learn this
@@jonathanthomas2449 The svelte developer experience feels much closer to native js and for me it was much simpler and intuitive to learn, especially with their interactive tutorial. If you use svelte you will learn skills that apply universally to web development.
If your goal is to work on your own projects I would recommend svelte. If you want to work in a corporate environment it’s worth picking up react, but that doesn’t mean you can’t still start with svelte.
I was a react dev for 2 years and I recently switched to svelte for my own projects. It’s a much better developer experience and there’s far less boilerplate
@@minnow1337 Thank you! I "know" java but i want to really dive into full stack web dev right now too. Thanks for thr advice
I've been trying to figure out how to use sveltefire since I randomly found it like a week ago. Thank you.
great content! :)
SvelteKit rocks, happy to see you using it!!
course on Svelte and Sveltekit please
finally, thank you jeff :)
Playing with SolidJS at the moment, but keep wondering if I’m missing out on all the fun happening at the Svelte party
I am a big fan and learned a few neat Svelte tricks here! I have concerns with this approach however. All requests to the database will be issued by the client. Putting this behind a server-side API allows you prevent misuse through rate limiting individuals from spamming your backend. You can even add client side logic to significantly increase the complexity of manually issuing valid API requests which allows you to reduce the likelihood of people writing scraping or automation bots (although you can’t prevent it) Obviously, this is much more effort.
Hi, could you please create a more detailed tutorial to use your library? Or add it as a bonus in your Svelte course 🙌🏻
I was working on a project with Sveltekit + Firebase, good timing that you created this so I can -copy- get inspired.
Please consider adding a little more TDD chapters for Sveltekit course
Does this effectively turn your sveltekit app into a SPA given that the Firebase SDK and component has to load before most content is rendered?
i love the acronyms xD
On what regards this is a realtime app? All of the heavy lifting is already done in firebase sdk for updates and sync form and to the platform itself. This is more like using rxjs or redux for maintaining an application state from external interactions to platform
Do a Supabase Auth + SvelteKit tutorial and I'll be your fan.
Idea for video(if wasn`t already made) ... why should i use svelte/react/vue/angular/etc. Why with Typescript?
Now we need a pocketbase version!
When is the Svelte course going to come out? I know you said in about month from the release of the video, and we're right around that timeframe. Please let me know I am interested!
Rich Harris should salute Fireship.
Fireship you can return unsubscribe directly on the onMount hook
And you can call getContext in the same component that calls setContext
I think your library can be better using hooks instead of components based
Hey Jeff, please make a playlist as how you script your videos please.
For me, the drawback is the few UI libraries
I didn't understand shit but looks cool 🤣
Really happy to support you through Fireship Pro since it enables you to work on and test all these different approaches.
When are you going to have a whole course for Svelte??... ah you answered it at the end :)
Something that worries me about SvelteKit is my lack of understanding of how it works and where I may slip up when it comes to security (e.g. simple things like having private code running on the front end).
If I'm correct that this is a risk, I'd love a video on it!
Can we use FirebaseApp component from +layout.svelte? Do we still need to add it at page level if we already have it in its parent layout?
This reminds me how advanced rxjs and angular they are
But angular biggest problem it's huge
Are you going to release a Svelte course anytime soon?
I've thought for a long time that Vue is the natural step forward for angular and react developers. Angular people would have their mind blown by an extremely easy reactivity model compared to rxjs, (working) hmr, actually useful devtools, etc. React developers would have their mind blown by embracing the mutable nature of objects and automatic mutation tracking instead of doing (costly) reruns of functional code and immutable object creation.
But it seems a lot of devs are jumping ship from react over to svelte instead of Vue. Vue 3 and svelte are almost identical in syntax, but svelte bundles end up larger in size, and the written code is further from JS than Vue (the reactivity parts).
I've concluded that svelte might win the hearts of devs in 2023 by being young. If I google a vue problem, I'll find solutions for v1, v2, v3, options api, composition api, etc.
A lot more confusing for a newcomer than svelte which has few changes between versions.
Good documentation wins developers over I guess..
I've tried learning Vue and it felt very similar to Svelte, but with many little things that are a little bit less convenient.
Svelte is more lightweight then Vue and is overall simpler. I've used both svelte/kit and Vue/nuxt3, and I just feel that sveltekit does what I can do in nuxt3, but faster and with less complexity.
Vue does feel like a breath of fresh air coming from react - it tidies up the mess a lot by giving quick shortcuts for a lot of repeatedly used patterns and designated sections to split up code
The problem with react was never the functionality - it was always the resulting mess that kept happening if you don't have a really good dev team who knows how to manage code
But svelte seems more pure to me due to the no bundling idea - as long as the tree shaking and optimisations keeps happening I don't see why it would eventually have competitively small productions bundles (even if right now they aren't great)
And let's just compromise on the part that JS isn't exactly syntax/language standard anyone should aspire to
> vue is closer to js
I think svelte is meant to be close to plain html/CSS apps, with js, as opposed to building apps with js
At the end of the Custom Stores section you return an anonymous function that invokes the unsubscribe function. Can you just return the 'onAuthStateChanged' invocation instead? Just wondering if it doesn't work.
Which is better to learn as my first framework svelte or react ?
Nice. Now could you do it with vue + pinia + Vite with pure ES6 Modules ? Thanks i’m waiting
Is this still experimental or can it be used in production? I see the last update was 7 months ago.
Rich must have watched this with a Giant smile 😁😁 if he did that is!
wanna make 2023 tech prediction?
Why not just use something like netframework webforms with a db?
Maybe someday Meteor will be cool again
Sveltekit course ...soon ? 😌
Watch the last 10 seconds. It's coming in a month.
Ok boys, time to recode our Next13 apps to SvelteFire. But no worries, I'm sure this framework will last for at least one week!
Are you still working on this project or is it on hold? I've seen its not recommended for production. But I wish it was haha =D
sveltekit updated tutorial when
FIRE
how can I style children's from parent component? :)
HELP! I just don't get it working. Everywhere there's different documentation about how to set the config. If I try to make it exactly the way your docs suggest I run into a bunch of problems. Can someone please help me??
Maybe could you update the sveltefire Template? It would be soooo helpful! I want to start programming, instead I'm waisting hours with Firebase Config...
The thing I'm mostly missing on in UI driven data frameworks such as this one, is the fact that it's very difficult to test.
How do you test your app without hiding behind mocks for the entire transport layer?
I mean, you can spawn a local firebase simulator and point to it, but that's quite memory intensive in terms of resources, namely while developing.
I'd really love to have a separate in-memory transport layer which will run against the real-ones test suite, and once the two have passed, I could defer to the on-memory one from that point on, for the rest of the tests, but it seems like all of these ui-wrapped-data-libraries suffer from similar afflictions (not limited to svelte of course, react/angular/vue have a similar library for years now).
Could've went with " Sve *lit* "
Can you do the same for Vue?
why do ppl edit pauses out of their video? i don't have a moment to process what you're saying
$nice $video
Inb4 Jeff marries SvelteKit
I understand everything he said.
SvelteKit is the best!
SolidFire I wait for you
Svelte is the way
Could you please add subtitles to this video please?
Imagine SvelteNative
Is this library still active?