Live data from Hacker News

Comparing Svelte and React

jackfranklin.co.uk

11–20 of 338 posts

Re: Comparing Svelte and React

#11
post #5

The author praises Firebase Auth for its ease-of-integration, but I'm leery of depending on Google products due to its support horror stories. Can anyone recommend good, easy-to-integrate alternatives?

I've always wanted to try Auth0 and I've heard great things! I would love to hear if anyone has had a positive experience with Auth0 as well.

Re: Comparing Svelte and React

#12
post #3

I recently rewrote a small UI from Preact to Svelte and while it was certainly a learning experience, I have to say working with Svelte is fantastic. My only complaint is that the Typescript support isn't quite perfect yet, but it's already very functional.

I use Svelte + TypeScript in my personal projects, what issues did you run into?

Re: Comparing Svelte and React

#13
post #11
post #5

The author praises Firebase Auth for its ease-of-integration, but I'm leery of depending on Google products due to its support horror stories. Can anyone recommend good, easy-to-integrate alternatives?

I've always wanted to try Auth0 and I've heard great things! I would love to hear if anyone has had a positive experience with Auth0 as well.

Positive exp with auth0, though if you can afford to control this stuff yourself maybe I'd lean that way.

Re: Comparing Svelte and React

#14
post #4

> I love Firebase Authentication, it's such an easy way to add auth to side projects. It's easy to use but it adds 55kB gzip to your project. https://bundlephobia.com/result?p=@firebase/auth@0.16.4 A couple of comments on the Svelte code. 1) It doesn't makes much sense to use onMount() with listenForAuthChanges(). Just modify the currentUser writable whenever onAuthStateChanged() has an update. Now simply import and…

Re 1) Where should you put the code to initialize the SDK? Code that ideally should only be ran once in the entire lifecycle of the page. For Firebase, will ES modules help with code splitting? The new Svelte kit framework is built by Vite (runs on ES build underneath).

I use a dynamic `import()` in the login form submit handler with an initialization flag. Code splitting is handled by the bundler

Re: Comparing Svelte and React

#15
post #11
post #5

The author praises Firebase Auth for its ease-of-integration, but I'm leery of depending on Google products due to its support horror stories. Can anyone recommend good, easy-to-integrate alternatives?

I've always wanted to try Auth0 and I've heard great things! I would love to hear if anyone has had a positive experience with Auth0 as well.

Another positive experience with Auth0, if a little finicky in my usecase (using it as a SAML IDP for testing).

They have recently been bought out by Okta... Which by some accounts might not be a good move.

Re: Comparing Svelte and React

#17

Javascript n00b question... is there any difference between onMount(() => { return listenForAuthChanges() }) and onMount(() => listenForAuthChanges()) ?

They are the same. It's a matter of style.

For that matter, you could also write:

onMount(listenForAuthChanges)

which is technically simpler -- you're not constructing a new anonymous function. But if you wanted to extend the code (to say, add a console.log), you'd need to do the top version, which already has the braces.

It's up to your judgment of what's clearer and likely to be more maintainable.

Re: Comparing Svelte and React

#18
> writing complex React components feels more like admin; a constant worry that I'll miss a dependency in my useEffect call and end up crashing my browser session.

I don't understand this worry, but I guess that happens when you try to do everything with hooks, the way I settled in my approach is to use React components just for the view without hooks, nor lifecycle logic, just dumb components with ocasional local state (useState)

Then using Controller pattern, within the controller I use 4 types of hooks, 1 navigation (useHistory), 2 read global state (useSelector), 3 dispatch an action (useDispatch), 4 useEffect() to execute on props change or component mount.

That's it, that's where the realm of React and UI ends for me, everything else is in Ducks, Ducks are single file or folder per module that contains Actions, Epics (Obervables) or Sagas (generators), Reducers, initial state of store and Typescript types.

I really like this separation of concerns:

- dumb components: to worry just about the looks and local state.

- controllers: to worry about data in, actions out, life cycle and navigation.

- Ducks: Management of data fetching and global state.

I wrote this from the top of my head, but if anyone is interested I'm thinking about writing a demo repository and document this approach, maybe others have done it already this is not new, but practices that I've been collecting along the way.

Re: Comparing Svelte and React

#19

> writing complex React components feels more like admin; a constant worry that I'll miss a dependency in my useEffect call and end up crashing my browser session. I don't understand this worry, but I guess that happens when you try to do everything with hooks, the way I settled in my approach is to use React components just for the view without hooks, nor lifecycle logic, just dumb components with ocasional local st…

[deleted]

Re: Comparing Svelte and React

#20

> writing complex React components feels more like admin; a constant worry that I'll miss a dependency in my useEffect call and end up crashing my browser session. I don't understand this worry, but I guess that happens when you try to do everything with hooks, the way I settled in my approach is to use React components just for the view without hooks, nor lifecycle logic, just dumb components with ocasional local st…

> a constant worry that I'll miss a dependency in my useEffect call and end up crashing my browser session.

As an fyi for anyone not aware, there are eslint/tslint plugins for this to help avoid it.

Post reply on HN