React-static and Gatsby.js frameworks

I’m interested in tools suitable for client side / static apps for use will Solid, SPARQL etc, and wonder if anyone has experience of, or comments on React-static and gatsbyjs.org.

Both seem suitable at first glance and could be used with @RubenVerborgh’s React components I think (so LDflex very neatly) but I’m new to these frameworks having not done any serious front end stuff myself.

Gatsby.js seems state of the art and trendy, and oriented towards GraphQL but I’m not sure if this is an advantage or taking us away from easier integration with RDF/SPARQL, and any other pros and cons. Any thoughts?

[Also posted on the Solid gitter chat here]

EDIT: I’ve been looking into React-static and like the look of it, wrote some findings up as part of a similar topic on the SAFE Dev forum.

6 Likes

@RubenVerborgh has a great blog post here which includes a section about building higher order react-components for Solid from existing react-components. For example, it would be great to have the functionality of a nice pod viewer/browser like @jeffz’s solid ide as a react-component that could be reused in other higher order components.

2 Likes

Responses from chat:

I would be very much on-board with re-factoring solid-ide for React. I am currently busy with improvements to solid-file-client and an interactive shell app I am developing so it may be a while before I return to solid-ide. And, although learning React has been on my to-do list for a while, I haven’t accomplished that yet. :slight_smile: If anyone wants to take the react-re-factoring on before I can get to it, that would be fantastic and I would be glad to assist.

4 Likes

I would like to help refactor solid-ide for React too!

Full disclosure though – I’m relatively new to JavaScript and totally new to React although I did do a lot of programming in the previous millennium, even Fortran :). On the plus side I did make a small library of polymer elements for Solid some months ago, so I think I can learn React.

I’m a hobbyist and a part-timer, so hopefully we can get others to join too, but if it’s ok with you I’m looking forward to helping!

2 Likes

@anon36056958 Great! Feel free to dig in on any part that looks interesting to you and ask me anything - everyone programs at their own level and being a beginner is where we all started.

Great! Thanks @jeffz!

@anon36056958 @jeffz I hope to find time to learn React-static, starting with making a static website /blog based on markdown files, then using Solid RDF documents (eg created using Dokieli) and so on as I go.

So I’ll be happy to help where I can once I have some knowledge. There is a community forum on spectrum for React-static, and its creator Tanner has already offered to help me. Based on this and the little I’ve learned so far from the videos and chats I think React-static is a good way to go.

Making higher order components from more basic components really appeals to me, because then you can make other components using the ones you already made. So I think I would like to focus on that. If you can use React-static to make components it would be great, but otherwise I think I would like to make a react-component out of solid-ide and in the process maybe make whatever smaller react-components are needed to make the solid-ide react-component. Then maybe React-static could be used to compose existing components. What do you think @happybeing and @jeffz ?

From my little learning so far I think React-static is pretty much React with bits added to allow generation of very responsive static HTML sites / apps. It can certainly use React components, as does Gatsby.js and of course React Native.

So I think making React components is ideal.

Having said all that, I’m still very early in my learning, so no warranty :wink:

@happybeing glad to have you on board! @anon36056958 - solid-ide is based on solid-file-client. I wonder how that will integrate with the components, as well as simply re-factoring how the user-view in solid-ide is presented - thoughts?

1 Like

@jeffz, @happybeing, I need to get more familiar with how to make components in React. Then as a start, if it looks feasible, maybe I can try to make a component of solid-ide without changing the internals of it, just wrapping it. Then if I can get that working maybe I can try to make a component or components of solid-file-client by just wrapping that too and having the solid-ide component use that. I can learn React and how to make React components that way, and also learn about how solid-ide and solid-file-client work. Then when the react-component repository with ldflex is ready with writing components, I can gradually work those into the solid-ide and solid-auth-client repos. That’s what I’m thinking anyway. Let me know if that makes sense. It all may take a while!

1 Like

@jeffz I just hope I will be capable of helping!

@anon36056958 that sounds sensible to me. Once you have code you could push changes to a github repo so we can follow progress, and start a topic for this when you have something to share /discuss.

Hi @jeffz,
Sorry, but for the sake of aligning my efforts with yours I have to ask some things. I see that you’re using Vue, whereas Ruben is using React. I wonder what direction you’d like to go with that in the long term. Do you want to continue in the long term with Vue, or for the sake of compatibility with react-components would you be willing to switch to React? From what I can tell from the point of view of a novice, it looks like both Vue and React are capable, so it looks like a matter of preference. But the path forward kind of depends on that choice. If you want to continue with Vue, I need to dig further into how to use Vue components from React components. It might be possible to do but it might introduce some complexity.

I have no attachment to Vue. Using both Vue and React does not sound like a good idea though maybe as a transition there could be parts of both. Perhaps as a start you could bring one React component into the mix. What Solid-ide needs most right now is ability to upload and download. Perhaps you could look at the React components which implement those and port those over to Solid-ide?

I don’t think react-components are that far along yet, to have an upload component. I was thinking the idea was to implement solid-ide as a React component. That would really be useful for building other react-components.

1 Like

I stumbled on a couple of neat looking React libraries for data presentation among other things. The github page has animated demos, so worth a visit:

2 Likes

Sorry more questions @jeffz,

What are the differences between the solid-file-client.js file in the solid-ide repository and the code in the solid-file-client repository? Are they kept in sync?

Also, have you thought any more about making solid-ide a React component?

Thanks

@anon36056958 No apologies needed for questions. Unfortunately, the solid-file-client in the solid-ide is out of sync with the real solid-file-client. I need to refactor it slightly to match the changes introduced. I will try to do that today and push the changes. As you’ve seen, solid-file-client itself is evolving rapidly, but none of the most recent changes require any refactoring of solid-ide so it should be caught up soon. I’m afraid I don’t know enough about React yet to be much help there.

@jeffz no problem. So is it ok if I make pull requests on both the solid-ide and solid-file-client repos to change Vue to React?