We've just released v5 of the SAFE Template and we're excited to share the significant changes in this post!
Check out the quickstart to get up and running fast ⚡
.NET 8 and F# 8
.NET 8 and F# 8 were released on November 14 and SAFE v5 gives you access to both! This means that you get ASP.NET Core 8's performance improvements and new language features including anonymous function shorthands and nested copy-and-update expressions. It's encouraging to see such great improvements in the fundamental technologies underpinning SAFE Stack! You can be sure that there will be more in future, making SAFE Stack a safe bet (pun intended) for your next web app 🚀
Fable 4 and Feliz 2
They're not quite so new, but SAFE v5 now comes with the latest versions of Fable and Feliz, ensuring that you can continue to benefit from the latest innovations in the world of front-end F# and have access to the latest features of React.
Innovations in Fable 4 include being able to use JSX in your front-end F# code. There's also support for other languages (in various states of maturity), so you may even want to experiment with using Fable on the server to run Python ML workflows written in F#!
Node 20 and npm 10
In the spirit of keeping up to date with tooling, the template now uses Node 20 and npm 10.
Tailwind
One change that will have a significant impact on developer experience is that the template now uses Tailwind CSS instead of Bulma for styling.
We started experimenting with Tailwind in earnest in 2022, and it's now our preferred way of styling our apps. While Bulma is very good for getting started quickly, we found that it causes a bit of friction when you want to break out of its model. Conversely, Tailwind CSS makes it very easy to tweak styling. We also found that getting started with Tailwind CSS wasn't particularly hard. As you can see, it's possible to get a similar look and feel from Tailwind.
As a result of this change, extending an app starting from the template will feel quite different. Rather than relying on a package like Feliz.Bulma to provide well-styled components, developers will need to more precisely specify how they want elements styled, usually by adding Tailwind CSS classes directly to their React components. Those who want something closer to the experience offered in SAFE v4 can follow our recipe for adding Feliz.DaisyUI to SAFE Stack. Our blog post on Feliz.DaisyUI might give you some insight into whether it's something you want to try.
For those who would rather stick with plain Tailwind CSS, there are plenty of sources of example components, including Tailwind UI (made by the creators of Tailwind CSS) and tailwindcomponents (open-source, made by the community).
Vite
We now use Vite as our JavaScript build tool, instead of webpack. The Vite site has a good page explaining general motivations for doing this. For us it came down to two things: config simplicity and speed. Our new Vite config is extremely simple: just 23 lines of easy-to-understand JavaScript; our webpack config was 140 lines and included a variety of plugins and branching logic. The faster reload times during development came as a nice bonus.
Wrap up
As I'm sure that you can see, SAFE Template v5 includes plenty of significant changes. There's lots to like, including new F# features, more flexible styling and shorter development feedback cycles.
If your app started with SAFE Template v4 and you want to align with the v5 template, you can follow the upgrade recipe on the SAFE Stack docs site.
Of course, SAFE just brings together some of the best of what the open-source community makes available. We have to thank Microsoft and the community contributors to F#, .NET and ASP.NET, and the authors of Node, npm, Tailwind and Vite. Worthy of particular mention in the F# open-source space are Alfonso and the Fable contributors, Zaid and the Feliz contributors, the Elmish contributors, Dustin and the Giraffe contributors, Krzysztof and the Saturn contributors, and Maxime who has helped us bring a lot of the parts of SAFE v5 together. Those of us at Compositional IT have been doing our part too 💪
We hope that you're as excited as we are to get going with SAFE v5!
