React and Redux
React is Facebook’s JavaScript library for building user interfaces. It’s a joy to develop with and has a “learn once, write anywhere” philosophy that allows you to use your React skills to build not just JS based UI, but also Node-based server-side apps and mobile apps using React Native.
Redux is a predictable state container for JavaScript apps that is commonly used with React apps. It brings a whole pile more awesome to the table with things like time travelling debugging. There’s a bunch of free tutorial videos linked from the project’s home page.
All in all, the developer experience for using React is very joyful. The only downside is that setting things up can be difficult. I think this comment applies to a lot of the JavaScript world at the moment, but this is recognised and there is a lot of effort to make getting started easier. For example, check out the create-react-app project.
I’ve got to say thanks here to @nicklanng for introducing me to the joys of React and Redux – your lunchtime lightning talk changed my dev-life, mate! :)
Fable
The Fable Compiler compiles F# into JavaScript. It’s tag line is:
The compiler that emits JavaScript you can be proud of!
Or, in the words of Tomas Petricek,
JavaScript you can take home to meet your mother.
You’ve gotta love that description!
So, basically you can write beautiful, type safe, immutable F# code and Fable will translate it into JavaScript for you. That’s another level of awesome and I encourage you to take a look at the amazing samples to see what can be done with Fable. You can even set a breakpoint in Chrome and you’ll see the F# code in the Chrome dev tools! Oh my…
Whilst things like TypeScript and Facebook Flow are very good to help you write complex JavaScript apps, having the F# compiler behind takes that support to a whole new level.
Why not Elm? Elm also brings the benefits of a functional type-checked language to web development. and it’s certainly an awesome language. For me, the choice of Fable comes down to the fact that it can keep growing my F# skills whilst doing web development (the used key is the brightest, right?), and I can also leverage the wonderful “learn once, write many” approach of React to write native mobile apps. (Sure, there’s some talk about using Elm with React Native if that floats your boat.)
You even stop at breakpoints in Chrome in your F# code - tell me that that’s not just totally amazing!
But…
But setting up a Fable React/Redux project isn’t the easiest thing to do, particularly when you’re starting out. So, if you’d like to take Fable with React and Redux out for a spin, but didn’t know where to get started, read on.
Getting Started
Firstly, head over to Fable’s page about getting set up and install all the shizzle you’ll need (.Net Core, Yarn, etc.). You can find that here:
http://fable.io/pages/getting-started.html
Then follow the steps below to create your first Fable React/Redux project and start hacking:
1 – Create a Project
We’re going to create a project called “fableredux”. If you want, change that to something else, but make sure you use your name throughout the rest of the instructions. (You’ll be working mainly in your console.)
dotnet new fable -n fableredux
cd fableredux
2 - React and Redux
Install the NPM modules we’ll need:
yarn add react react-dom fable-core fable-react redux
yarn install (might not be needed)
3 - Configure webpack
Locate the file webpack.config.js. We’re going to add the externals section to tell webpack about the external dependencies. If the section is already present, just add the entries for react and redux, as below:
...
devServer: {
contentBase: resolve('./public'),
port: 8080
},// This section needs React and Redux
externals: {
"react": "React",
"redux": "Redux"
},module: {
...
4 - Update References
The Fable sample app loads the React and Redux JS dependencies from disk in in it’s index.html file. We’ll stick with that approach.
Copy index.html and the supporting files in the \lib folder from the Fable Redux sample and replace the files in the project’s \public folder. You can get those from here:
https://github.com/fable-compiler/samples-browser/tree/master/public/redux-todomvc/
5 - Add Fable.React
Use Paket to add the Fable.React Nuget package to the project (assumes Paket is on the path).
paket add fable.react
Also, make sure there is an entry for Fable.React in src\paket.references. Add it if it doesn’t already exist.
6 – Add Some Fable Code
Let’s get the Fable F# code in now. Replace the contents of App.fs with the contents of the App.fs from the Redux-ToDoMVC from the Fable samples. You can get that here:
https://github.com/fable-compiler/samples-browser/blob/master/src/redux-todomvc/App.fs
Make sure to change the line that says:
module ReduxTodoMVC
To the following (or whatever you named your project at the start):
module fableredux
7 - Restore and Build
cd src
dotnet restore
dotnet build
You should see a message that the build has succeeded.
8 - Run it!
Now you’re ready to run the project (sometimes I needed to close and re-open my console here as it complained about not finding an executable matching dotnet-fable. YMMV!):
dotnet fable yarn-start
Then open http://localhost:8080 and enjoy!
Getting Help
The Fable community is awesome so drop by their Gitter room (and thanks to @rkosafo for assistance getting me over some bumps along the way!):
