A couple of years ago I was flying to Canada and was bored enought to write a Sudoku solver console app in F#. For some reason I was thinking about that today and thought that I should try to put that into a F# React Native app (see this blog post for an introduction).
So the solver code is this:
Sudoku on React Native
It turned out porting this code to React Native was pretty easy. I just copied the F# React Native demo app, added my solver code and created a React View with the data points and got this:
I find it really amazing that you can just take fairly complex code that was written against .NET Framework collection APIs and run it as JavaScript apps. Fable is mapping the .NET API calls into similar JavaScript API calls behind the scenes.
You can find the full source code at https://github.com/forki/SudokuApp.
Sudoku in the browser (via React)
As a the next step I took the same code and ported it to a React web app that runs in the browser:
You can find the full source code at https://github.com/forki/react-sudoku.
Sudoku in the browser (via VirtualDOM)
[Update] Tomas Jansson ported the sample to fable-virtualdom. Here is how he creates the text boxes:
You can find the full source code at https://github.com/fable-compiler/fable-virtualdom/tree/master/samples/sudoku.
Sudoku on electron
In order to come full circle I tried to put the Sudoku solver into a React app on the Electron shell. This gives me a cross-platform desktop app:
You can find the full source code at https://github.com/forki/sudoku-electron.
Summary
I’m really amazed how easy Fable + React makes it for me to put existing F# code into the JavaScript ecosystem.
The same code is now running
- as Console App on .NET,
- as React Native app on Android and iOS,
- in the browser on React,
- in the browser on VirtualDOM,
- and with Electron as Desktop app on all operating systems.
