Static website frameworks for SAFE Network

Thanks @Shankar_S that’s very helpful to someone like me who hasn’t delved into either of these. Much appreciated.

FYI Ruben Verborgh has been pointing out the differences between SPARQL and GraphQL in a video at the head of this twitter thread (not watched myself yet):

5 Likes

Thanks for the link. I’ll watch it :+1:

1 Like

Not sure how important this is, but:

1 Like

Thanks for sharing. That look’s interesting. Let me play with it :+1:

1 Like

I made a post on the Solid forum looking for more info:

1 Like

A bit more depth on React-static

  • React-static get started video (5min YouTube)
  • Walkthrough - Installing and creating a new project with Styled Components (20 min YouTube)
  • Introducing React-Static! How it works and why we built it! (80mins YouTube)

React-static looks very promising for building fast static sites for SAFE, and I think it would work well with a local CMS (which could be sync’d to SAFE, eg via SAFE Drive/SAFE git). I wonder if netlifycms.org could be adapted to give a decent CMS experience too.

The last one is very impressive - see ~15 mins onwards for details of how React-static works and why it is so fast. Looks like an ideal way to generate very fast static sites for SAFE.

I made a few notes on the last video above…

Comments: (06:00)
	Next.js - not fast, feels Wordpressy, very popular
	Phenomic - poor dev exp
	Gatsby.js - fast, feels like forces GraphQL which is not needed for blogs etc. Not great dev experience, reliance on plugins to modify anything.
React-static data sources (e.g. Contentful, WordPress, Markdown, JSON etc)
	- Tanner uses Contentful (like WordPress but without front-end)
	- Contentful -> React-static -> HTML + JSON (for every page on the site)
	- uses Netlify to deploy (drag and drop folder), autobuild from github, free for low traffic sites
	- FAST (~15min): 
		HTML loads page with full visual, then react-app loads behind and gives full interactivity/effects etc.
		Navigation only loads JSON (so very fast - uses React Router so no need to load HTML, react-app etc)
		You can preload links to make it even faster
		Offline - entire website can pre-load and browse without internet connection
	Code (31:15 mins)
	static.config.js
		- /public - put static assets in here 
		- getRoutes() - gets the data (e.g. from WordPress etc) returns an array of paths (obj, path key, path to export) <- GOOD
			here you can decide to pre-load, or fetch on load etc.
		Build minifies and excludes anything you aren't using
		- HTML page customisation (39mins) 
	src/index.js
		- sets everything up (probably don't need to touch)
	src/App.js (42mins)
		- defines pages, navigation etc
		- each page is a React component (a JS file)
		- Blog.js more complex defines a 'higher order component' using getRouteProps() (45:20mins)
			getRouteProps() ensures posts is available elsewhere using getProps({posts}) (see static.config.js)
		static.config.js (52:00 mins)
				const { data: { posts } = await axios.get('some url')
		is same as
			const resp = await axios.get('some url')
			const { data } = resp
			const { post } = data
		- customise page title (52:10 mins)
		- SEO sitemap setting (59:15mins)
		- load progress bar NProgress.js (01:03:40)
		- prefetch links (01:04:35)
	web hooks to auto re-build (netlify site) when data on github, Contentful etc change
	Netlify CMS (video 01:18:05)

Latest features in React-static v6: https://medium.com/@tannerlinsley/react-static-v6-8dbe9fd202d4

4 Likes

This Tanner :slight_smile:

As the old-school guy he is referring to I did find this useful also:
medium.com/@tannerlinsley/️-introducing-react-static-a-progressive-static-site-framework-for-react

2 Likes

I’ve used react-static for multiple large, complex, production-ready websites and I highly recommend it. It’s significantly simpler and more flexible compared to big frameworks like Next.js or Gatsby. The new react-static v6 plugins are also a breeze to use and publish for shared SAFE functionality, if desired.

Big frameworks like Gatsby are great for creating an initial website for you, but as soon as you realize you want something even remotely customized, they tend to get in your way rather than helping. Just my two cents.

2 Likes

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:

3 Likes

I’ve been playing with React-static and am liking it a lot. Still not tried Gatsby.js!

Today Tanner Linsley who created React-static shared this about Ionic 4 - it provides customisable framework agnostic components for Web and mobile apps. Sounds very good, and possibly a great cross platform option - anyone have experience / comment on this? @Shankar_S @bochaco @joshuef @cooperka See:

I’m learning a lot from Tanner (and I have a lot to learn about front end development) and here’s something else that he shared: CodeSandbox. This blew me away, here’s a link he shared so people can play with the update to React-table that he’s working on:

4 Likes

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

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

@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

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

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

2 Likes

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

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

That’s right!

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

4 Likes

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

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