Looks like there is no mechanism determining when the style sheets are loaded which has the potential of showing unstyled content on slow file loads. Currently we are experiencing this issue when going through a client proxy/relay.

I think this can be solved by providing an onload event for each stylesheet.
https://developer.mozilla.org/en-US/docs/HTML/Element/link#Stylesheet_load_events

Inside the F2.js default download, EasyXDM is included. Inside the EasyXDM line (line 60), 2 references of '+ ++' are included. When run through some compression engines, this is compressed to '+++', which breaks some browsers like Firefox.

The fix is to convert the line just slightly to protect the second and third plus:

• ++i

to

• (++i)

A script error is thrown when the Yahoo! quote api fails because Yahoo fails to provide any meaningful error result.

i have to admit that I am fairly new to debugging javascript in the client but using Chrome I was always able to view the source in the developer tools and set breakpoints. Unfortunately I cannot find the source in the sources list. How can I debug the appclass.js file for my app?

There's an issue with HighCharts and IE when the monthly data is passed to the chart object.

https://github.com/OpenF2/F2/blob/master/examples/apps/JavaScript/Chart/appclass.js#L157

I have a patch for this, but don't have an email to mail this to and I can't attach files in GitHub issues. But, since you have Visual Studio examples you should add the VS excludes to .getignore. Here are the excludes I use for all my VS projects on GitHub. Just add this after the current excludes.

ignore thumbnails created by windows

Thumbs.db

Ignore files build by Visual Studio

_.obj
*.exe
*.pdb
*.user
*.aps
*.pch
*.vspscc
*i.c
*p.c
*.ncb
*.suo
*.tlb
*.tlh
*.bak
*.cache
*.ilk
*.log
*.dbmdl
[Bb]in
[Dd]ebug/
.lib
*.sbr
obj/
[Rr]elease/
ReSharper/
[Tt]est[Rr]esult
_UpgradeReport/
src/UpgradeLog.XML
*.gpState
src/_UpgradeReport_Files/
*.dbmdl

While non-MoD F2 contributors can easily use Github to fork and contribute, there is a possibility of closer collaboration using cloud tools such as https://c9.io/site/features/. If Cloud9 workspaces could be set up by MoD during the hackathon and people allowed to try it, this would encourage collaboration between Hackathon members after the event. This would help but not completely solve the current F2 organization structural issue where MoD is the central hub of communication and collaboration and none of the other companies talk directly to each other.

F2's internal _loadApps() function--which uses $.ajax to load script dependencies--doesn't properly set the cache property. As a result, jQuery adds a random ID to the end of each script URL defined in the manifest overriding any possible browser caching.

It looks like the HelloWorld app is trying to do event delegation, but it still needs to do a DOM lookup because of the way it's written.

https://github.com/OpenF2/F2/blob/master/examples/apps/JavaScript/HelloWorld/appclass.js#L12

Currently, the links point to the old contributing to F2 wiki page which links back to the CONTRIBUTING page.

Right now its possible to pass in both a single AppConfig and an array of AppConfigs into F2.registerApps(), but it isn't possible to do the same with the 2nd parameter for AppManifest. For example, F2.registerApps(appConfig, appManifest) does not work, but F2.registerApps(appConfig, [appManifest]) does.

Not Urgent.

When working on Streaming News Module integration with Ivan, I ran into the problem that scripts loaded by F2 were not appearing in FireFox script tag, even though they appeared correct in the Net tab and the functions included in them were executing. I later tried with Chrome and got the same problem. This makes it impossible to set breakpoints in the debugger. On the other hand, looking at the F2 examples, I can see the loaded scripts, so it's not necessarily easy to duplicate.

In the F2 code, the loading is via $.ajax. Apparently, there are some problems with this. See http://stackoverflow.com/questions/874256/dynamically-loaded-js-function-does-not-appear-in-firebug-js-debugger. According to http://stackoverflow.com/questions/690781/debugging-scripts-added-via-jquery-getscript-function

However, if you reference a local script file such as any of the following:

$.getScript("http://www.mysite.com/script.js")
$.getScript("script.js")
$.getScript("/Scripts/script.js");
then jQuery will download the script content asynchronously and then add it as inline content:

which seems to apply in my situation. I'm going to try this and report back if it works, but I cannot yet contribute code via a pull request.

In the Index.html file, in the init function, the is the following code:

            window.f2_example_apps = [
                { language:'csharp', script:'./js/csharpSampleApps.js' },
                { language:'js', script:'./js/jsSampleApps.js' },
                { language:'php', script:'./js/phpSampleApps.js' }
            ];

But the files in the 3 examples are not in the js folder.

Found here:

https://github.com/OpenF2/F2/blob/master/docs/src/sdk-template/layouts/main.handlebars#L66

As of version 1.1, Bootstrap modals were embedded within F2.js but that script is not being minified inside of f2.min.js.

With the latest release of 1.1.1 and a 1.2-wip branch already being worked on it seems like moving forward a tag should be created for all stable releases when they are phased out. This way developers who have yet to upgrade or feel they can not upgrade (for what ever reason) will be able to review docs and can find their stable version. Also, it will provide better history, bug tracking, etc as the framework evolves.

Ideally we would have a tag for each stable release <major>.<minor>.<patch>, but if that becomes obnoxious it would be nice to at least have a tag for <major>.<minor>.<last_patch>

When F2.init() is called without passing 'secureAppPagePath', the following error is shown in Chrome

TypeError: Cannot read property 'secureAppPagePath' of undefined

Enhancement:

I'm seeing code like

if (F2.Apps[appConfig.appId] !== undefined)

in places. This kind of comparison is not recommended. For why, see http://stackoverflow.com/questions/776950/javascript-undefined-undefined or http://stackoverflow.com/questions/3390396/how-to-check-for-undefined-in-javascript.

In general, I recommend adding some sort of Javascript linting to the Travis-CI build process. I'd recommend JSHint over JSLint as you have more granular control over the style rules.

This file should either be deleted or else updated (it is sitting at version 1.0.1).

Thanks Quentin. Looks like inlineScripts included in the AppManifest are not evaluated if there are no scripts defined.

Recommended fix is to add evalInlines() to this block:

https://github.com/OpenF2/F2/blob/master/sdk/src/container.js#L239

// if no scripts were to be processed, fire the appLoad event if (!scriptCount) { evalInlines(); appInit(); }

Previously tracked in #41 but that pull request is now closed. Reference commit 28053bc and this comment from 41.

@brianbaker, @Ali-Khatami - can you review this change?

The following files are missing from the CSharp Apps folder F2\examples\apps\CSharp

Shared_Layout.cshtml
Shared_LogOnPartial.cshtml
Sharfed\Error.cshtml
Account\ChangePassword.cshtml
Account\ChangePasswordSuccess.cshtml
Account\LogOn.cshtml
Account\Register.cshtml
Home\About.cshtml
Home\Index.cshtml
_ViewStart.cshtml

Remove jQuery dependency in F2.js making library capable of running alongside frameworks such as jQuery, Dojo, ExtJS, PrototypeJS, etc. without any additional overhead. Possibly replace jQuery dependency with Zepto.js to reduce effort.

Updating the appConfigReplacer function to the following seems to do the trick:

F2.appConfigReplacer = function (e, t) {
return (e == "root" || e == "ui" || e == "height") ? undefined : t;
};

Line 74 in 'F2/examples/apps/PHP/News/appclass.js' it has:
App_Class.prototype._propulateSettings = function() {

I think it should be 'populateSettings'.

Pulled from #38:

So here are some clarifying questions/comments to this approach:

The docs say that

The appConfig object is sent to the server using the params querystring name as shown in the example below. This is the complete app manifest request sent by F2.registerApps() with the appConfig URL-encoded ...
My opinion is that some of this information is sensitive and should not appear in a plain URL. Additional guidelines need to be added to prevent the appearance of sensitive information in URL querystring in a uniform way across all containers.

The fact that appConfig is to be serialized as JSON and sent as a request parameter implies that any callback methods placed in appConfig must be small, and DOM nodes probably can't be placed in AppConfig. Also, other than parameters for authentication, the vast majority of parameters are only relevant for client-side, not server-side. So, these concerns point towards a necessity to censor the serialized appConfig object passed to manifest.js which isn't currently in the spec.

I question whether the AppConfig needs to be sent to manifest.js as a default. I actually prefer a static manifest.js response rather than a dynamic one for security reasons -- a static response allows me to compute a SHA1 on the manifest.js and all its contents so I can be sure that versions haven't changed without my knowledge.

We should add a source map for F2.js.

We're using UglifyJS 1.3.4 for minification in our build process, and they added support for generating source maps in UglifyJS v2 (more on their blog).

It looks as easy as adding --source-map to the UglifyJS command in our build.js file.

https://github.com/mishoo/UglifyJS2#usage

There are couple of minor typos that I noticed in the App Development doc:

First, under http://docs.openf2.org/app-development.html#testing-the-basics, it says "Continue reading and understanding the F2 spec to build exactly the financial solutions that our customers want." I'm pretty sure for these docs it should be "your customers".

Second, under http://docs.openf2.org/app-development.html#app-design, the "Progressive Enhancement" link is broken.

Clarification.

From reading the F2 docs and code, the diagram below is my understanding of what an archetypal F2 HTML structure is like. While I have gone beyond what F2 has proscribed in some places (notably the panels to the left and right of the central app content and the footer panel), please verify that what I have down is correct.

If this is correct, I'll follow up with some documentation/api clarification requests.

Original discussion is over at https://groups.google.com/forum/?fromgroups=#!topic/openf2/4rJ4mc9_h_A

Manifest requests (and perhaps requests for the styles and scripts contained within) need a version number or other configurable parameter added so that when updates to apps are pushed to production, the changes will be reflected across browsers. Without it, users would have to clear their browser's cache in order to see the updates.

Looks like the handlebars text substitution is no longer working as of 1.1. From the source:

/*!
 * F2 v{{sdk.version}}
 * Copyright (c) 2013 Markit On Demand, Inc. http://www.openf2.org
 *

When Apps get removed, add the following hooks:

BeforeAppRemove
OnAppRemove
AfterAppRemove

https://github.com/OpenF2/F2/blob/master/examples/apps/JavaScript/Chart/appclass.js#L157

I was browsing the example Chart app and I noticed a reference to jQuery's "browser" object. It's not a big deal, but this should probably be removed for compatibility with jQuery 1.9.

Not urgent.

Currently, F2's script loading simply writes the manifest's scripts array into script tags in the html page without alteration. When relative urls are specified in the manifest, they are resolved relative to the target page. This is incorrect because the app provider controls the manifest and scripts whereas the container provider controls the target page. If the same manifest is to be used across different organizations/containers, the urls must be resolved relative to something the app provider controls , not something the container provider controls -- though a lot of current F2 implementations work because the app provider == container provider.

This can be resolved by publishing only full urls in the manifest, but this is not the preferred solution. The better solution is for the F2 loader to add logic to resolve relative urls relative to the manifest. The best solution would be to switch the underlying loader to AMD, as AMD's loader has this kind of logic.

This may cause some backward compatibility problems with existing implementations, but these are easily correctible.

Enhancement:

The hello world snippets in the documentation still required a bit of playing around in order to get working. Since F2 already has jsFiddles for those, then the snippets should be replaced by those jsFiddles.

Consider making the jsFiddles gitpowered a la http://doc.jsfiddle.net/use/github.html. While the code itself can be stored in Github, storing the ajax responses in github as well allows some more impressive basic demos that don't require exposing a fully functional F2 app.

If jsFiddle server availability is a problem because it's getting too popular, you can try http://codebins.com. It's not as feature full as jsFiddle, though.

Disclosure: the Codebins.com owner is a colleague of mine.

"F2 is a web integration framework which means are apps are inherently insecure"

"F2 is a web integration framework which means our apps are inherently insecure"

url: http://docs.openf2.org/app-development.html

Hello,
Tried to post these questions to http://groups.google.com/group/OpenF2/topics, but it does not seem to an active group. Trying again...

I have couple questions about F2:

1. We have several JavaScript widgets that currently use ExtJS. Will it be possible to use these with F2 or Bootstrap is required for the widgets to function? It will obviously not function very well with mobile devices, but there are a lot of potential clients that would work with the desktop version only and would require more sophisticated GUI that Bootstrap currently provides.
2. Do you have an example of market data providers that require authentication? Samples simply connect to the public data sources, but real-world application would require connecting to potentially multiple data providers, each requiring authentication. Any best-practices on how it would function?
3. Is it true that F2 applications/ containers must be hosted by Markit, or it is not mandatory? If I developed an Application, would I need to make sure that it works with some 'standard' containers? Or I need to develop container and provide both Container and Applications?
   Thanks

Goal is to get to this:

This fixes it:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

jQuery 1.8.3 minified which is compiled into F2.js is 94KB out of a total 146KB in f2.min.js. Zepto is 9.7KB minified. Obviously, more unit tests will be needed for this update.

F2 most likely should adopt one of the two prevalent module loader specifications. This is to track evaluation effort.

Questions

1. AMD vs CJSM
2. Can we get away with AMD containers or standard (non loader) containers without duplicating too much effort?
3. Can manifests and css and html dependencies pull through same method?
4. Should F2 provide any build time tools to package modules?
5. Should F2 provide a proxy to allow non module loader format script files to be loaded as if they were conforming to the chosen spec?

Musings

• http://unscriptable.com/code/AMD-vs-CommonJS/#0
• http://unscriptable.com/code/AMD-vs-CommonJS/#57
• http://blog.millermedeiros.com/amd-is-better-for-the-web-than-commonjs-modules/
• http://requirejs.org/docs/whyamd.html
• (AMD Spec) https://github.com/amdjs/amdjs-api/wiki/AMD
• http://tagneto.blogspot.com/2011/04/on-inventing-js-module-formats-and.html
• http://tagneto.blogspot.com/2010/03/commonjs-module-trade-offs.html
• https://gist.github.com/907115

Libs

AMD

• https://github.com/cujojs/curl
• http://requirejs.org/

CJSM

• Ender, stitch, OneJS, etc. Almost all require build steps.

Leaning on the baseline Jasmine tests in 1.0.3, add more thorough unit tests for F2.js

The goal here is to expand on F2.registerApps() to provide Container Developers more control over placement of F2 apps. This includes initial placement on-page-load as well as on more rich client apps where F2 apps are loaded on-demand after the initial page-load.

Two immediate additions are:

• Adding a simpler mechanism for Container Developers to provide a DOM node via the AppConfig (currently handled by the appRoot argument).
• Provide hooks for beforeAppRender(), appRender() and afterAppRender() through F2.registerApps(). Those handlers are currently only available in F2.init().

We'll expand with more comments and commits on this Issue.

I'm consistently getting an error(s) while it's compiling the .less bootstrap files. The error says something along the lines of, Expected ')', which is coming out of the less parser.

I can't get past this. I can comment out the block of code that builds the less files in build.js and it builds straight through with no errors, but that's just silly.

Also,
I noticed that the NPM package of uglify-js has been updated to use UglifyJS2. I'm assuming that F2 was not built with version 2 of uglify-js. So, last night I was trying pull down and build F2 but I kept getting an undefined error for require("uglify-js").parser.

npm uninstall uglify-js
npm install uglify-js@1

The the README file should be updated to install uglify-js@1 instead, if this is the case.

Currently F2 only supports global event emitting/subscribing through F2.Events.on() and F2.Events.emit(). It would be great for the following, app to app(s), container to app(s) securely. Here as an example scenario:

Container has 3 Apps

AppA
AppB
AppC

The Container was developed by HIJ Corp

AppA and AppC were developed by XZY Corp

AppB was developed by ABC corp

Due to licensing agreements all corporations are NOT allowed to share data.

AppA needs to emit an event that AppC listens for, but AppB and the Container should not be able to bind to these events

This could also resolve questions or requests for multiple containers on the same page.

https://travis-ci.org/ and https://circleci.com/ are possibilities.

I haven't used either of these, though.

Original discussion can be found https://groups.google.com/forum/?fromgroups=#!topic/openf2/TYBuHegEKfQ

The example container could be enhanced by creating rows of apps (with max grid width of 12) instead of putting all apps inside of a single row and allowing the browser to float them.

The markdown-to-html converter isn't playing nicely with the multiple headings for "Scripts" when making anchors links.

Click App Class in the 'About Inline Scripts' box to see this issue. It should go to app-development.html#scripts-1 instead of app-development.html#scripts.

The Travis status image does not point at a specific branch and therefore picks up build status from other branches. For example, Build 38 failed because the wget request for phantom-jasmine failed and now it appears that the F2 build is failing. Build 38 was a build for a separate issue branch and not the master branch.

Master:

Issue 28 (Build 38):

F2.js creates a singleton on the window and you can't create more than one instance of window.F2... which would allow n F2 containers within a single page. This issue can track our evaluation of changing the current pattern to something else—perhaps a JS pattern that more closely follows AMD, coupled with a simultaneous replacement of F2's internal dependency loader.