Hello,
I just installed fuse and tested the “hello world” basic example. The live-reload feature is very impressive and even if I just scratched the surface, the design and animation capabilities of the tool seems very powerful. But at this state, is fuse can be used for building large (and permanently evolving) applications ?
As a Flex developper, I’m programming in a strongly typed langage using MVC pattern with a clear separation between UI and logic, helped by additional tools like dependency injection etc. In the examples, the javascript code is mixed with the UI xml declaration (as it can be done in flex with a mxml/as3 mix) : this approach is very effective for small projects or rapid prototyping but quickly shows its limitations for larger projects.
I read in the docs that the UNO langage can be used for advanced things but in this case the live-reload feature is not available.
So, is fuse in its current state can be used to develop large projects ? how declarative UI and code can be separated ? do you plan to support « langages » like typeScript in the future ?
Thank you.
Hey there!
Although we don’t have any example projects at such scale, we think our current featureset is able to scale, at least to some degree.
As far as separating UX and JS code, that can be done by using the JavaScript tag’s File attribute, instead of inlining code for instance:
<!-- SomeFile.ux -->
<JavaScript>
module.exports = { myVariable: myValue };
</JavaScript>
can be rewritten as:
<!-- SomeFile.ux -->
<JavaScript File="SomeFile.js" ux:Global="SomeFile" />
with the accompanying JS file:
// SomeFile.js
module.exports = { myVariable: myValue };
UX can also be separated into multiple files, and as each .ux file corresponds to an Uno class, they can be used in other UX files just as any other class would be. I’m not sure if we currently support live reload when adding/removing additional UX files atm, but I do think our live reload works on those files once they’re in the project.
As for supporting languages that can compile to JS such as TypeScript, there’s been a lot of talk about a mechanism that allows users to specify additional language definitions using UX and basically shell scripting, so you can recompile the code on the fly when live reload would happen. Although we haven’t played with it in code yet, we’re likely to go down such a route to add support for additional languages without sandboxing too much.
If you’re considering building a large project with Fuse, we’re very much interested in helping out. There probably are limitations and bugs in our solution, and we’d love to identify and solve them 
Jake, can you please show us the code for including other .ux files in MainView.ux file?
Once it supports accessing Camera (i think currently it supports), TouchID, Outh, Battery status, Barcode scanner, Calander, Contact, Geo Location, NFC, Device Information, Accelerometer, Acess Device Files & Directories, Device Orientation, Ability to record sound video images, SQL Lite & CouchDB/PouchDB support, SMS, Email, Notifications- all through FuseJS then majority developers (who dont know MONO) can use FUSE for large projects.
That said, Iam pretty impressed with its current (beta) abilities that I started playing with its current features (which itself a lot) and impatiently looking forward for above features:)
Hello Jake, Thank you for your reply, we are currently investigating for alternative technologies to flex mobile and some aspects of fuse (especially live coding) looks very promising.
Hi Jake,
My team finished an app already and preparing to deploy. Our next step is to move forward modularizing the app to ensure that Fuse is ready for even larger project. May I know whether a JavaScript include within a ux is Singleton or not? What we are implementing is something like the following but I can’t make it work yet.
Main.ux
<App>
<JavaScript File="model.js" ux:Global="Model" />
<JavaScript File="controller.js" ux:Global="Controller" />
<JavaScript File="main.js" />
<View />
</App>
View.ux
<Panel>
<!--
this WhileTrue doesn't trigger
-->
<WhileTrue Value="{is_flag}">...</WhileTrue>
</Panel>
model.js
var Observable = require ('FuseJS/Observable');
var is_flag = new Observable (false);
module.exports =
{
is_flag: is_flag
};
controller.js
var model_object = require ('Model');
function controller_func ()
{
model_object.is_flag = true;
}
module.exports =
{
controller_func: controller_func
};
main.js
var controller_object = require ('Controller');
controller_object.controller_func ();
Hi Vicker,
This should work, but the problem is that you have multiple JavaScript modules on the same node.
You should only have one <JavaScript> tag on a node - the rest must be ux:Global (you use ux:Name, that’s not global).
Nodes marked ux:Global can be declared anywhere, it doesn’t matter.
Hi Anders,
Sorry about that. It is a typo. In my testing project it is using ux:Global but it doesn’t work.
I’m with vincent on this one… I work for a big name company who (currently) develop our own Android and iOS apps. Fuse looks very very promising, but after putting together a proof-of-concept for my boss, I’ve run into a lot of stopping points.
One of which is the ability to have multiple “views” (i.e. MainView.ux). We would need to be able to create several “Views” as they each have a level of complexity to them that would make a single “MainView” to bloated. I figured out how to have multiple JS files already, and that is a huge step forward.
Second, is the needed features like getting Lat/Long of the phone, getting the Android Device Identifier (we use this as a simple form of auth), and a few others (namely, Take Photos, Select Photos, and get phone number).
After putting together this reply, it’s seemingly more like a post. Sorry about that. Just wanted to “+1” vincent’s post, and “+1” this product.
Any thoughts on the above, or places to look for answers, would be wonderful.
Thanks, Levi
Hey guys, I’m sitting down and playing with a good way to do this currently. I’ll let you know what I find.
Im having the same issue importing modules, the returned import is just an empty object, even with the most simple sample seen below…
Import Statement
` ```ux
``` `
Use of the module
` ```uno
var resourceModule = require(‘fuseResource’);
console.log('Module: '+ JSON.stringify(resourceModule));
``` `
Contents of the file
` ```uno
module.exports = {
resource: {
ResourceClass: function() {
this.demo = ‘Yeah’;
}
}
}
``` `
Output
` ```js
{}
``` `
I was having the same issue importing modules, the returned import was just an empty object… however, I realised it was because I had declared the javascript import inside the first element, a dockpanel.
Once I moved the import statement out into the scope of the app, it worked and the subsequent calls to require yielded the module implementation.
Now, I have encountered another problem relating to the contents of the module. It seems that the function in the sample below is not exported in the same was as the string literal. I have tried in different ways to export a module with functions and namespaces, but it seems that functions generally are not exported.
Demo project: http://cl.ly/1W1a0p3y431X
My App
` ```ux
<JavaScript File="fuse-resource/fuse-resource.js" ux:Global="fuseResource" />
<JavaScript>
var resource = require('fuseResource');
debug_log('Module: '+ JSON.stringify(resource));
var demo = resource.demo;
debug_log('DEMO 1: '+ demo);
var demoFn = resource.demoFn;
debug_log('DEMO 2: '+ demoFn());
</JavaScript>
``` `
fuse-resource.js
` ```uno
module.exports = {
demo: ‘Hello Demo’,
demoFn: function() {
console.log(‘Demo’);
}
}
``` `
Output
` ```uno
LOG: Module: {“demo”:“Hello Demo”}
LOG: DEMO 1: Hello Demo
LOG: Demo
LOG: DEMO 2: undefined
``` `
