Functional Programming failure in Fuse: Observable passing unwanted arguments to function

General
1

Hi All!

I am new to Fuse, mobile app development, and now most recently to Functional Programming. I started coding my first Fuse app in a procedural style, but attempted to rewrite my code using FP principles. I am finding this extra tricky regarding data-bound Observables.

I am curious how many in the community are using FP in their Fuse apps, and just how successful implementations of FP in JavaScript can be. There seem to be very contrary opinions on this subject. Is it worth the trouble, or is FP better left to languages that fully support FP?

Some background on the app: I coded a TextInput for the user to type text. This input is combined with other data such as api key to form the url that is passed to a fetch function. At first all this was done inside one function or procedure, and triggered by the “ValueChanged” event of the Observable.

I made the Value of the TextInput a global, exported, Observable variable, and when the ValueChanged event triggered the function, it would concatenate the url string using the global Observable TextInput Value variable and then fetch the data. This is a FP no-no, as the data was not fed into the function via its arguments.

Some of the FP principles I tried to implement are avoiding side-effects and passing all data into functions through their arguments. So I moved all the api parameters into an Array object variable and created functions using filter, map, and reduce to turn it into the url string. Then I created a separate function for the fetch and am stuck on how to pass the url as an argument. The function is triggered by ValueChanged, which seems by default to pass the TextInput Value as the argument.

I tried too many variations to remember… I also tried making the function a global variable that ValueChanged would trigger, so that way I could pass my functions in as arguments. But it seems that now the code only executes once when the app is initialized, and after that, ValueChanged doesn’t trigger the function when it is contained in a variable.

Is what I am trying to do even possible in this context? Or should I give up trying to write more FP code in Fuse? And just mutate global variables and not worry about trying to pass arguments to a function triggered by an Observable that will pass its own values to it? Do I just need to wait, be patient, learn more FP and implement some more advanced concepts such as currying, composing, etc? Or is there something else entirely that I haven’t considered?

Thanks for reading my post. Your feedback is greatly appreciated!

2

If I’m understanding your problem correctly yes, perhaps currying is what you want:

function subscribeOnTextValueChange(obs) {
  return function(arg) {
    obs.value = arg.data;
  }
}

var textValue = Observable('');
var onValueChange = subscribeOnTextValueChange(textValue);

module.exports = {
  onValueChange: onValueChange
}

<TextInput ValueChanged="{onValueChange}" />

Besides in JS you will not have a fully functional solution, even though its both an OOP and Functional programming language. JS is different because its not just one, you can use both, one, or neither.

To do things after you’ll need to use callbacks

<App>
	<JavaScript>
		var Observable = require('FuseJS/Observable');
		function subscribeOnTextValueChange(obs, callback) {
		  return function(arg) {
		      obs.value = arg.value;
		      setTimeout(function () {
		      	callback(obs, arg.value);
		      }, 1000);
		  }
		}

		var textValue = Observable('');
		var onValueChange = subscribeOnTextValueChange(textValue, function(obs, val) {
		  console.dir('Obs Value:', val);
                  // do your fetch call here
		});

		module.exports = {
		  onValueChange: onValueChange
		}
	</JavaScript>
	<DockPanel>
		<Basic.TextInput Value="Hi" ValueChanged="{onValueChange}" />
	</DockPanel>
</App>
3

Hi,

FuseJS is not based on functional programming. Fuse’s Observable primitive encourages sort-of “functional-reactive” programming, but it is mostly a reactive pattern topped with some ideas stolen from functional programming, by no means purely functional.

In Fuse, each Observable holds local state, allthough most of the time that state is computed automatically by applying a function (e.g. a map() on another observable).

If you are looking for more “pure functional” programming in Fuse, I reccommend checking out the Fuse F# integration community project: https://github.com/7sharp9/Fable-Fuse

4

Thank you Edwin and Anders!

I haven’t had a chance yet to check out your suggestions, but I will do soon and let you know how they go :slight_smile: