The easiest realtime app I’ve ever built
Vložit
- čas přidán 29. 05. 2024
- I built a library called SvelteFire to make building realtime apps with Svelte and Firebase even easier github.com/codediodeio/svelte...
#webdevelopment #javascript #sveltekit #firebase
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
I can finally die happy knowing I can make realtime apps in under 30 seconds.
Svelte has become the definitive UI framework for me. I can't imagine using anything else when I have a choice.
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
@@tabiasgeehuman Then it should be called Smelt, and should use a fish icon
we need that svelte kit course nowwww
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 🎉
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.
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 :).
Jeff: "Let's build a full stack app with Svelte Fire in about 30 seconds"
Also Jeff: *Uses copypasta*
This comment is still underrated 🤣
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.
Wow Jef, that was aswesome! Looking forward to the course. Have a great year!
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
Fireship uploads!! Day gets better
... I don't think I will ever get to this level of understanding.
Its so exciting watching these, also deflating...
Amazing work. I will be using SvelteFire soon.
Wonderfully elegant. Love it!
I can't wait for your SvelteKit course!
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.
Looks awesome, might try to reproduce it in my Nuxt app!
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.
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!
Thanks for spreading the Svelte-y goodness!
5:15 So clean bro... ❤🔥💯 Awesome
Jeff: “Do not use in production”
Me: “challenge accepted”
Looking forward to that SvelteKit course :D
This stuff is simply amazing! 😀
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.
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.
excited for those next two courses.
I'm waiting for the course. It'll be my first course bought from Jeff :)
Have taken your NextJS course. Looking forward to your SvelteKit course. 👍
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 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.
Amazing Job!
Beautiful.
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 🚀
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.
great content! :)
What a nice morning, talking trash to react and giving svelte some love
Blazing Svelte gang.
Rich Harris should salute Fireship.
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
Now we need a pocketbase version!
finally, thank you jeff :)
Hey Jeff, please make a playlist as how you script your videos please.
i love the acronyms xD
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.
And there I was, thinking I finally understood Svelte.
Please consider adding a little more TDD chapters for Sveltekit course
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!
SvelteKit rocks, happy to see you using it!!
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
I've been trying to figure out how to use sveltefire since I randomly found it like a week ago. Thank you.
Could've went with " Sve *lit* "
course on Svelte and Sveltekit please
Do a Supabase Auth + SvelteKit tutorial and I'll be your fan.
I didn't understand shit but looks cool 🤣
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?
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!
For me, the drawback is the few UI libraries
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!
When are you going to have a whole course for Svelte??... ah you answered it at the end :)
Nice. Now could you do it with vue + pinia + Vite with pure ES6 Modules ? Thanks i’m waiting
FIRE
Playing with SolidJS at the moment, but keep wondering if I’m missing out on all the fun happening at the Svelte party
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
Idea for video(if wasn`t already made) ... why should i use svelte/react/vue/angular/etc. Why with Typescript?
i was in love with svelte but
recently just made my own web component library(framework), that is lightweight, does everything i want it to do, and has no dependencies
im pretty happy with it, and syntax and stuff too
i think it has the best parts of svelte and solidjs/react
its basically, for me, i made it for myself in a week or so
- easy to read
- transparent about what is happening and what is what, no magic
- lightweight
- reactive like solid and svelte, updates only the changing part
- lets you create web components or fragments
- everything is a HTML Node
- supports async stuff by design
- etc
its SPA because well i dont need SSR because i use IPFS on my personal projects so they are serverless, cloudless, always anyway
perfect for me, so i dont think i would use something else for my own stuff, its like a breath of fresh air
i had to use solid for a new job, it was either gonna be solid or react and i was expecting solid to be like svelte but nope
its like an updated react and still a pain
i thought solidjs would be nice but it turns out to be a mess, nothing works as expected, a ton of random features, useThat, useThis, useYourM*m, createThis, createThat, etc
nothing works as expected etc, a pain
same thing as react, instead of elegantly fixing the root of the problem, it just have a f/ck ton of patches/features that is trying to make the thing work
This reminds me how advanced rxjs and angular they are
But angular biggest problem it's huge
I was working on a project with Sveltekit + Firebase, good timing that you created this so I can -copy- get inspired.
Are you going to release a Svelte course anytime soon?
Which is better to learn as my first framework svelte or react ?
Maybe someday Meteor will be cool again
Rich must have watched this with a Giant smile 😁😁 if he did that is!
SolidFire I wait for you
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.
Is this still experimental or can it be used in production? I see the last update was 7 months ago.
$nice $video
Inb4 Jeff marries SvelteKit
I understand everything he said.
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).
Really happy to support you through Fireship Pro since it enables you to work on and test all these different approaches.
🤯
wanna make 2023 tech prediction?
Can you do the same for Vue?
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
Svelte is the way
SvelteKit is the best!
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 course ...soon ? 😌
Watch the last 10 seconds. It's coming in a month.
how can I style children's from parent component? :)
Imagine SvelteNative
sveltekit updated tutorial when
Great, another JS library.
Why not just use something like netframework webforms with a db?
Oh no this is giving react contexts
I'm not a pro member but you bet your a$$ I will be when that SvelteKit course comes out