{"id":1875,"date":"2016-08-14T13:47:37","date_gmt":"2016-08-14T13:47:37","guid":{"rendered":"http:\/\/www.navision-blog.de\/blog\/?p=1875"},"modified":"2016-08-17T09:23:41","modified_gmt":"2016-08-17T09:23:41","slug":"fable-sudoku-creating-a-sudoku-solver-app-with-f","status":"publish","type":"post","link":"http:\/\/www.navision-blog.de\/blog\/2016\/08\/14\/fable-sudoku-creating-a-sudoku-solver-app-with-f\/","title":{"rendered":"Fable |> React &#8211; Running a F# Sudoku solver everywhere"},"content":{"rendered":"<p>A couple of years ago I was flying to Canada and was bored enought to\u00a0write a <a href=\"http:\/\/www.navision-blog.de\/blog\/2010\/12\/06\/sudoku-solver-in-f\/\">Sudoku solver console app in F#<\/a>. 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 <a href=\"http:\/\/www.navision-blog.de\/blog\/2016\/08\/06\/fable-react-native\/\">this blog post<\/a> for an introduction).<\/p>\n<p>So the solver code is this:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/forki\/ab6132f846eaec1681adfbbc2bd52aaf.js\"><\/script><\/p>\n<h5>Sudoku on React Native<\/h5>\n<p>It turned out porting this code to React Native was pretty easy. I just copied the <a href=\"https:\/\/github.com\/fsprojects\/fable-react_native-demo\">F# React Native demo app<\/a>, added my solver code and created a React View with the data points\u00a0and got\u00a0this:<\/p>\n<p><img src=\"http:\/\/www.navision-blog.de\/images\/sudokuapp.gif\" alt=\"Sudoku solver on android\" \/><\/p>\n<p>I find it really amazing that you can just take\u00a0fairly complex code that was written against .NET Framework collection APIs and run it as\u00a0JavaScript apps. Fable is mapping the .NET API calls into similar JavaScript API calls behind the scenes.<\/p>\n<p>You can find the full source code at\u00a0<a href=\"https:\/\/github.com\/forki\/SudokuApp\">https:\/\/github.com\/forki\/SudokuApp<\/a>.<\/p>\n<h5>Sudoku in the browser (via React)<\/h5>\n<p>As a\u00a0the next step I took the same code and ported it to a React web app that runs in the browser:<\/p>\n<p><img src=\"http:\/\/www.navision-blog.de\/images\/sudoku-browser.gif\" alt=\"Sudoku solver in the browser\" \/><\/p>\n<p>You can find the full source code at\u00a0<a href=\"https:\/\/github.com\/forki\/react-sudoku\">https:\/\/github.com\/forki\/react-sudoku<\/a>.<\/p>\n<h5 id=\"virtualdom\">Sudoku in the browser (via VirtualDOM)<\/h5>\n<p>[Update] <a href=\"https:\/\/twitter.com\/tomasjansson\">Tomas Jansson<\/a> ported the sample to <a href=\"https:\/\/github.com\/fable-compiler\/fable-virtualdom\">fable-virtualdom<\/a>. Here is how he creates the text boxes:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/forki\/3152044dbec9d36cb43594759f11f758.js\"><\/script><\/p>\n<p>You can find the full source code at\u00a0<a href=\"https:\/\/github.com\/fable-compiler\/fable-virtualdom\/tree\/master\/samples\/sudoku\">https:\/\/github.com\/fable-compiler\/fable-virtualdom\/tree\/master\/samples\/sudoku<\/a>.<\/p>\n<h5>Sudoku on electron<\/h5>\n<p>In order to come full circle I tried to put the Sudoku solver into a React app on the <a href=\"https:\/\/github.com\/electron\/electron\">Electron shell<\/a>. This gives me a cross-platform desktop app:<\/p>\n<p><img src=\"http:\/\/www.navision-blog.de\/images\/sudoku-electron.gif\" alt=\"Sudoku solver desktop on Electron\" \/><\/p>\n<p>You can find the full source code at\u00a0<a href=\"https:\/\/github.com\/forki\/sudoku-electron\">https:\/\/github.com\/forki\/sudoku-electron<\/a>.<\/p>\n<h5>Summary<\/h5>\n<p>I&#8217;m really amazed how easy <a href=\"https:\/\/github.com\/fsprojects\/Fable\">Fable<\/a> + <a href=\"https:\/\/facebook.github.io\/react\/\">React<\/a> makes it for me to put existing F# code into the JavaScript ecosystem.<\/p>\n<p>The same code is now running<\/p>\n<ul>\n<li>as Console App on .NET,<\/li>\n<li>as React Native app on Android and iOS,<\/li>\n<li>in the browser on React,<\/li>\n<li>in the browser on VirtualDOM,<\/li>\n<li>and with Electron as Desktop app on all operating systems.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A couple of years ago I was flying to Canada and was bored enought to\u00a0write 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/posts\/1875"}],"collection":[{"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/comments?post=1875"}],"version-history":[{"count":25,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/posts\/1875\/revisions"}],"predecessor-version":[{"id":1901,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/posts\/1875\/revisions\/1901"}],"wp:attachment":[{"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/media?parent=1875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/categories?post=1875"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/tags?post=1875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}