Does the SAFE stack integrate with React, Angular, etc?

General
1

If so, does it have an opinion about which is the best framework for use with SAFE?

Are there any examples of SAFE integrated with React, Angular, etc?

Thanks

2

Well, digging it a little deeper, I notice there are a lot of Nuget packages for Fable and Elmish with “React” in the name, but I did not find any with “Angular” or “Vue”, etc in the name. I guess that might answer my question.

3

In general, react is prefered because this is the one Elmish used by default.

You can use any JavaScript framework with Fable but more work can be needed to get started.

1 Like
4

Fable Elmish is the FE in SAFE I think. Fable translates F# to Javascript. Elmish is an implementation of Model-View-Update (MVU), a strategy for structuring UIs. By default, FE uses React to render the DOM, not as a “framework”. Elmish replaces the traditional front-end framework with mainly just libraries. You can build your UI with types and functions with minimal non-transferrable knowledge (unlike frameworks). MVU is awesome and it totally changed my world for the better.

You can easily replace the Fable-Elmish part with frameworks like Angular, Vue, React + ? components, or whatever else. In any of these cases, (including Fable-Elmish) it is a separately deployed front-end part and it still has to communicate back to an API over standard XHRs.

5

It’s important to remember that React is not a framework, it is just a View library. That’s why it perfectly fits to Elmish for outputting HTML.
Angular, on contrary, is a framework, which has it’s own mechanism for application state management instead of Elmish. It would be hard to replace just React with Angular, you would also need to replace Elmish.
And then all that becomes senseless :slight_smile:

6

I don’t like Elmish and I use WebSharper and its reactive views and vars (there is also an option for MVU in W# anyway, to be clear), but the question remains: can I use F# reactive WebSharper for Angular (indeed it is my question there)?
The real problem is that Angular is based on TypeScript instead of transpiling JavaScript from F#.
Of course the server part is always possible via Web api (again WebSharper web api or Giraffe, etc…). But then for the client I see 3 options:

  1. surrender to typescript and stay with F# only on server
  2. write binding to Angular sdk API calls
  3. find a trick to use an Angular component as a View Component by replacing Angular html values/events binding with the corresponding F# framework mechanism

Discussing it also in this external thread