{"id":1801,"date":"2016-08-06T15:04:34","date_gmt":"2016-08-06T15:04:34","guid":{"rendered":"http:\/\/www.navision-blog.de\/blog\/?p=1801"},"modified":"2016-08-08T07:31:18","modified_gmt":"2016-08-08T07:31:18","slug":"fable-react-native","status":"publish","type":"post","link":"http:\/\/www.navision-blog.de\/blog\/2016\/08\/06\/fable-react-native\/","title":{"rendered":"Fable |> React Native – Native apps with F#"},"content":{"rendered":"

TL;DR available<\/a> at the bottom of the post.<\/p>\n

“A React Native App is a Real Mobile App”<\/h5>\n

With React Native, you don’t build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that’s indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React. [project site<\/a>]<\/p><\/blockquote>\n

That doesn’t sound too bad, but why do we have to do it in JavaScript?<\/p>\n

Well, this article shows that we don’t have to.<\/p>\n

The nightwatch app<\/h5>\n

Consider you are working for some kind of Nightwatch and it’s getting dark and your watch is about to begin.<\/p>\n

The nice people of your order gave you a phone and a new app. At the beginning of the night it downloads a list with locations that you have to check. Every location can be marked as OK or you can blow a virtual horn to trigger an alarm. The app also allows you to append an photo of the situation on the ground.<\/p>\n

Since many of the locations that you will visit are far away from good internet connection the app stores everything locally on your phone. Once in a while it will sync with the nightwatch central.<\/p>\n

So this could look a bit like this:<\/p>\n

\"Nightwatch<\/p>\n

So now after embaressing myself and\u00a0showing my design skills, let’s jump into the technical stuff.<\/p>\n

Developing with F# in VS Code<\/h5>\n

The app was developed with F#<\/a> in Visual Studio Code<\/a>\u00a0(with ionide<\/a> and react native<\/a> plugins). This development environment\u00a0runs on all platforms, so you can use\u00a0Windows, Linux or your Mac.<\/p>\n

\"Hotloading<\/a><\/p>\n

As you can see we have a React Native app with\u00a0automatic loading<\/a> of compiled F# code.<\/p>\n

The big difference to using JavaScript is that everything is statically typed – even the access to the JavaScript APIs. This gives you nice autocomplete features and depending on the concrete bindings you can even get documentation in the editor:<\/p>\n

\"Autcomplete<\/a><\/p>\n

Krzysztof Cie\u015blak<\/a> did really amazing work with the Ionide<\/a> – this tooling works pretty well. Take a look at his blog<\/a> to find out more about the awesomeness that he brings to the ecosystem. He also played an important part in\u00a0getting React Native to work with F#.<\/p>\n

Introducing Fable<\/h5>\n

Fable<\/a> is the most important technology behind all of this. It was designed by Alfonso Garcia-Caro<\/a>\u00a0as a F# to JavaScript compiler and can do real magic in the browser. Take the time and watch the 10min intro<\/a>. I can’t stress enough how well this open source project is managed. It’s\u00a0a real pleasure to be part of it now.<\/p>\n

In our case it bridges React Native APIs into F# and also compiles the F# code back to JavaScript whenever we save a file. The React Native framework is listening for the changes in the JavaScript files and swaps the code in the device simulator. There is a lot going on behind the scenes, but it’s already working surprisingly well.<\/p>\n

Using\u00a0JavaScript APIs<\/h5>\n

Since most of the React Native APIs are developed in JavaScript it’s important to bring these APIs over to F#. This is done as\u00a0a community effort and the Fable project creates typed JavaScript bindings for many\u00a0major JavaScript frameworks. This effort is comparable to DefinitelyTyped<\/a> in the TypeScript world. There is even a tool that can help to convert TypeScript bindings to Fable bindings.<\/p>\n

In our case the fable-import-react-native<\/a>\u00a0is the most important package. It provides typed bindings to most of the React Native APIs.<\/p>\n