The easiest realtime app I’ve ever built
Вставка
- Опубліковано 1 чер 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 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
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.
Jeff: "Let's build a full stack app with Svelte Fire in about 30 seconds"
Also Jeff: *Uses copypasta*
This comment is still underrated 🤣
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
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!
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.
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
Wow Jef, that was aswesome! Looking forward to the course. Have a great year!
... I don't think I will ever get to this level of understanding.
Its so exciting watching these, also deflating...
Fireship uploads!! Day gets better
Wonderfully elegant. Love it!
Amazing work. I will be using SvelteFire soon.
5:15 So clean bro... ❤🔥💯 Awesome
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!
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'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.
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.
This stuff is simply amazing! 😀
Have taken your NextJS course. Looking forward to your SvelteKit course. 👍
Thanks for spreading the Svelte-y goodness!
Looking forward to that SvelteKit course :D
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 waiting for the course. It'll be my first course bought from Jeff :)
Amazing Job!
Beautiful.
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.
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 🚀
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.
Jeff: “Do not use in production”
Me: “challenge accepted”
great content! :)
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.
you should make a video about htmx and _hyperscript
I was working on a project with Sveltekit + Firebase, good timing that you created this so I can -copy- get inspired.
What a nice morning, talking trash to react and giving svelte some love
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
Hey Jeff, please make a playlist as how you script your videos please.
finally, thank you jeff :)
Blazing Svelte gang.
Please consider adding a little more TDD chapters for Sveltekit course
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!
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.
Now we need a pocketbase version!
course on Svelte and Sveltekit please
Rich Harris should salute Fireship.
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?
Nice. Now could you do it with vue + pinia + Vite with pure ES6 Modules ? Thanks i’m waiting
When are you going to have a whole course for Svelte??... ah you answered it at the end :)
Do a Supabase Auth + SvelteKit tutorial and I'll be your fan.
And there I was, thinking I finally understood Svelte.
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 didn't understand shit but looks cool 🤣
Idea for video(if wasn`t already made) ... why should i use svelte/react/vue/angular/etc. Why with Typescript?
Are you going to release a Svelte course anytime soon?
Which is better to learn as my first framework svelte or react ?
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
Playing with SolidJS at the moment, but keep wondering if I’m missing out on all the fun happening at the Svelte party
I've been trying to figure out how to use sveltefire since I randomly found it like a week ago. Thank you.
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
Rich must have watched this with a Giant smile 😁😁 if he did that is!
Is this still experimental or can it be used in production? I see the last update was 7 months ago.
This reminds me how advanced rxjs and angular they are
But angular biggest problem it's huge
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.
For me, the drawback is the few UI libraries
FIRE
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!
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.
Could've went with " Sve *lit* "
Can you do the same for Vue?
I understand everything he said.
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
Inb4 Jeff marries SvelteKit
Sveltekit course ...soon ? 😌
Watch the last 10 seconds. It's coming in a month.
Maybe someday Meteor will be cool again
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
SolidFire I wait for you
wanna make 2023 tech prediction?
$nice $video
SvelteKit is the best!
how can I style children's from parent component? :)
🤯
Svelte is the way
Why not just use something like netframework webforms with a db?
sveltekit updated tutorial when
Great, another JS library.
Oh no this is giving react contexts
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...
Imagine SvelteNative
I'm not a pro member but you bet your a$$ I will be when that SvelteKit course comes out