Static website frameworks for SAFE Network

General
, , ,
14

Ionic 4 sounds like a major step forward, but they still haven’t sold me on why I should use it… if I’m making a mobile-friendly website I’ll use React, if I’m making a mobile app with native features (like camera) I’ll use React Native, and if I want the exact same thing on both mobile and web (highly unlikely) I’ll use react-native-web.

Is the benefit just that Ionic 4 lets you publish existing websites as mobile apps and run them in a webview, sort of like Cordova but better? Maybe I’m missing the point :upside_down_face:

2 Likes
15

Hey @happybeing thanks for sharing with us. No I haven’t used Ionic before, but now as web component they sounds interesting for me.

2 Likes
16

@cooperka I’ve only read the linked blog announcement, which is useful because it gives the history and then explains what is such a big deal with Ionic 4. What I understand is that you can use Ionic components, including any customisations and derived components of your own, in any popular framework, so Angular, Vue, React etc, and that they put a lot of effort into making them fast, compact, slick etc.

With the rapid turnover of frameworks, and easier handling of different platforms, it sounds a good way to reduce effort and keep apps fresh. Anyway, Tanner was enthusiastic, which I take as :clap:

:wink:

2 Likes
17

I see, that sounds useful indeed. I suppose you could do something similar with React and e.g. use those components inside of a primarily Angular app, but it may not be as smooth of an integration. I want to play around with this, thanks for the links!

2 Likes
18

For wordpress, there are a few options. Free-est seems to be: https://wordpress.org/plugins/simply-static/

2 Likes
19

I think speed will be an important factor for making effective Web apps and websites on SAFE Network.

Most websites so far built on SAFE tend to be sluggish when you click on a link etc, but it doesn’t have to be this way.

The following shows that we can have blazing fast websites on SAFE Network by using the same tech designed to create the fastest sites on the Web.

React-static does this not just by creating a static website, but by making each page compact and bundled, along with built in preloading of linked pages just in time for the visitor to click on them (e.g. on page load, or when a link scrolls into view etc).

The following demo shows the same React-static website on both Web and SAFE, and can be used by anyone as a starting point for testing this out or developing their own super fast website, with all the power of React.

After adding new content or editing a page you can build your website and automatically upload it to Web and/or SAFE Network with one command.

UPDDATE: see also:

https://dweb.happybeing.com

4 Likes
21

Update on React Static:

TLDR; Tanner Linsley is moving on, looking for other to maintain RS.

RS is a very nice option so I hope it continues to be developed.

EDIT: React Static has a new sponsor and maintainers so all is good :smile:

3 Likes
22

That’s right!

Currently doing a maintenance release and accepting proposals to work on post-summer!

4 Likes
23

The following is a site built with React-static :slight_smile:

24

I struggle to see the difference between sites buit in React and those created with React Static to be honest. I don’t think they explain this very well. Or perhaps they assume a level of understanding that I don’t have.

1 Like
25

The difference is speed.

React-static generates the pages in advance, and will prefetch pages and resources that might be loaded next so you don’t have to wait for them to load when you click, or scroll etc.

I’m sure there are other techniques but I think that is the gist of it.

So if you click on a link in DWeb Blog, web or safe versions, the page loads instantly. A React site would only request the page after you click, which causes a delay which can end up being not just noticeable but a poor UX.

26

As I understood it React does that anyway, since a website is essentially one app so everything is ready to go. Certainly the Primer 2 site is pretty whizzy, but maybe there’s a noticable difference when you’re talking about larger sites or sites with lots of links. It would be interesting to see a side by side comparison.

I was going to learn React Static but found the concepts a bit alien, so thought it would be best to learn some React first. Maybe I’ll give it another try when I have some time (haha).

27

You could be right and I may not have understood. I haven’t learned either, so may be wrong but my impression is that there’s not that much difference in learning one or the other. I think that the same concepts, components etc apply to both (so I went to the React docs to understand how I might customise React-static), but React-static generates faster code by automating things that would take more work to achieve in React, and I would guess comes with some restrictions. But that is mostly guesswork.

Best to ask the React community, and Tanner in particular for a definitive answer.

I’ve asked @SleeplessByte if he might comment, and found this:

React vs React-Static: What are the differences?

What is React? A JavaScript library for building user interfaces . Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it’s easy to try it out on a small feature in an existing project.

What is React-Static? A progressive static-site framework for React . React-Static is a next-gen static site generator for React. Finally, you can build a website like you do any other React App. There’s no special CMS, query language, or crazy lifecycle hooks. Just good old React producing an amazing SEO-ready, user experience driven, progressively enhanced website. The effort is minimal, but the benefits are not!.

React belongs to “Javascript UI Libraries” category of the tech stack, while React-Static can be primarily classified under “Static Site Generators” .
Ref

And this intro from Tanner was one of the first things I read and very helpful. It includes:

Introducing React Static !

A progressive static-site framework for React, designed to deliver an amazing experience for your users and developers alike, without compromising React in any way. It’s insanely fast, SEO-ready, and is the most React-friendly static-site library on the planet.

Let’s get to it.

How is it different?

Contrary to most other static site generator for react, React-Static is very direct with how data flows from its source to a route. Not only does this provide a convenient abstraction point for managing all of your static data, but by keeping the data pipelining and react templating as separate as possible, your site can be built as a “function of state” with only a single pass of SSR!

3 Likes
28

This is not a bad idea!

On top of the resource given by @happybeing, (by Tanner), there are a few other considerations:

  • use React
  • when you now deploy, each client needs to download react and the data and build it locally
  • SSR solves this. It lets the server render the site and send back both: the data and the html. More bandwith required, but no need to wait for the local build of a page
  • react-static does not require a server. It does what SSR does on build.
  • Speed (perceptive)
  • SEO (Google uses a JS crawler, but there’s more than just Google)
  • You can use react to build a static site. If you have NO interaction and JS is turned off, react-static sites will fallback to html without react.
  • Preloading! Because the data is known in advance it can also be loaded in advance.
4 Likes
29

This is a great topic, thanks for all

1 Like
30

This is very good - learn React in ten tweets:

1 Like
31

Aaaand this is very good too - sveltejs in ten tweets:

33

primo looks like a very nice option for creating SAFE sites.

It’s written in Svelte but at first sight is not just for building with Svelte - it’s more a website builder that lets you build slick sites fast, and deploy them anywhere as static HTML, but which also gives developers access to code.

  • primo is an all-in-one IDE, CMS, component library, and static site generator, written in Svelte (website, forum, HN Announcement) [Note: to be released as open source "soon"according to the author on HN]

When the code is released you will be able to host the CMS locally or on your own public server, so it could be a very nice way to build SAFE websites.

1 Like
34

More up to date, get started with SvelteKit and create a static blog on Safe Network:

35

It’s 2024 and I’m bringing this topic up to date. Here’s what I’m up to: