Comments (9)
I doubled down on the notification miss 🙈. I'm glad that you always take the time to reply!
The resources you posted are extremely helpful and guide into the right direction.
While fiddling around with Gatsby I began to discover what my actual use case essentially is 😄.
For me, it is about the ability to create JAMStack apps with Fable and Elmish. And content sourced from Markdown at build-time side-by-side, such that the Markdown content to be sourced sits in the same repo as the app itself, and whenever the content gets updated (i.e. by a new commit by one of the numeruous Headless CMS, the site gets updated.
So that there is still a app.js
in the end as usual, but with hyperlinks to the proper generated content parts weaved in at build-time if any. So assume there needs to be some sort of top-level client-side router logic reconciling those. That is the aspect I want to take from Gatsby.
I see this as a good opportunity to use and spread SAFE/Fable/Elmish. And I see it as a sweet spot for certain kinds of sites/apps that small to mid-size businesses need. They usually have something knocked off with Drupal or WordPress or use some sort of site building service like WiX. However, the crucial part is the delivery of CMS functionality and that can then be outsourced to mature tools that are decoupled from the web site /app itself. And it would be a great feature for blogs and documentation homes too. And it can be hosted anywhere for no cost, e.g. with Netlify that gives instant leverage to additional mighty features.
I was mentioning GraphQL because Gatsby supports content generation from GraphQL queries at design time + live updates and I really liked how easy I could plug external content into the app. However 70% of that experience is probably attributed to Gatsby tool chain and not to GraphQL, so before I consider tackling that, I need to have a real-world use-case myself. And I think the Markdown part is way more important.
I am currently preparing a little sample app with SAFE for a talk I will be giving in August in Zurich. I already have some ideas for that Markdown scenario within that app, but I will only possibly tackle it after the talk. Would be a good project for a proper deep-dive into Fable and JS tooling too for me 😄.
BTW was good seeing you at fsharpconf :D.
from fable-react.
Hi @kfrie! I'm really sorry I didn't reply earlier. I just saw this issue and realized I must have missed the notification somehow 😞
Elmish is a state manager so it's only used for dynamic sites. An example of a site made with Elmish that's mostly static is the web of last FableConf, while Fable's own site is indeed generated statically from markdown files (it uses Fable.React but not Elmish, because there's no state). We tried to extract the helpers to this repo but we haven't worked much on it and it's probably old.
About GraphQL, I haven't had good experiences with it so personally I don't like the technology very much. But it'd be great if you could integrate it with Fable!
from fable-react.
My website is based on Fable+React+Elmish, I did whatever I can do for PWA and SEO, but seems google doesn't like my website. the crawler can not get the real content other than the template html file. it will be good if you have any best practices.
you can check the webcache here: http://webcache.googleusercontent.com/search?q=cache:y3o1wYExOH4J:https://www.xcg123.com/series/54720E76C72E21635BF8B465119BDDE1&hl=en&gl=ph&strip=0&vwsrc=0
and my website https://www.xcg123.com
from fable-react.
from fable-react.
hi @forki yes I was considering server side rendering .. but client side rendering also have some benefits which not easy for me to make the decision ..
my current website the FE is hosted on netlify, a very nice static website host service. and I am planing move my api service to azure function, to make it as a serverless app.
from fable-react.
from fable-react.
Hmm okay I got your point .. but where to host the home page is the problem.
now my https://www.xcg123.com is hosted on static web hosting server. and my api service is on anther server with diff domain. this is the tricky part.
from fable-react.
If you can't use SSR, I think you can improve the situation by user a page loader.
Here is a demo of a page loader to be sure we speak of the same things :)
Or if you don't want a page loader, you can also make your components reserves their dimensions in the DOM using placeholder and then replace the placeholder with the real content.
I don't remember exactly the rules of the performance measurement for SEO so I am not sure if this can work or not.
from fable-react.
hi @MangelMaxime thanks for your reference .. currently I am trying to use pre-rendering for my website, see how is the result :)
from fable-react.
Related Issues (20)
- React Server Components integration HOT 2
- Can't figure out how to wrap my view with a Higher Order Component HOT 4
- JsInterop helper for wrapping a higher order component HOT 2
- Can't reference React in Fable HOT 2
- Fable.ReactServer.cssProp very slow HOT 4
- Add Custom DU to DOMAttr HOT 1
- FunctionComponent.Lazy and SSR HOT 1
- Update samples to Fable 3
- ReactDOM.hydrate is no longer supported in React 18 HOT 17
- Can't update shared state passed with useContext? HOT 3
- Q: Use ReactElement import member for Storybook HOT 3
- Missing 'open' from Fable.React.Props? HOT 2
- Last Fable.React upgrade breaks my code HOT 7
- Publish source files from Fable.React.Types and Fable.ReactDom.Types to nuget HOT 5
- Fable.React version 8 depends on React.Dom gte 18 lt 19 according to femto
- Add Pointer Events HOT 3
- Why is useCallback not implemented? HOT 3
- How to obtain a component ref in a function component? HOT 5
- FunctionComponent.Of functions cache breaks reusable code HOT 1
- voidEl breaks with: $ELEMENT is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fable-react.