openf2 / f2 Goto Github PK
View Code? Open in Web Editor NEWRedefining web integration for the financial services community
License: Apache License 2.0
Redefining web integration for the financial services community
License: Apache License 2.0
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;
};
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
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.
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:
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:
AppConfig
(currently handled by the appRoot
argument).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.
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.
Leaning on the baseline Jasmine tests in 1.0.3, add more thorough unit tests for F2.js
When Apps get removed, add the following hooks:
BeforeAppRemove
OnAppRemove
AfterAppRemove
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.
Line 74 in 'F2/examples/apps/PHP/News/appclass.js' it has:
App_Class.prototype._propulateSettings = function() {
I think it should be 'populateSettings'.
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.
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.
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.
This file should either be deleted or else updated (it is sitting at version 1.0.1).
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
*
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.
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.
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.
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
"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"
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.
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.
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.
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
When F2.init() is called without passing 'secureAppPagePath', the following error is shown in Chrome
TypeError: Cannot read property 'secureAppPagePath' of undefined
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>
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.
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.
https://travis-ci.org/ and https://circleci.com/ are possibilities.
I haven't used either of these, though.
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.
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.
As of version 1.1, Bootstrap modals were embedded within F2.js but that script is not being minified inside of f2.min.js.
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.
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.
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.
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:
to
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.
Thumbs.db
_.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
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(); }
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
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.
A script error is thrown when the Yahoo! quote api fails because Yahoo fails to provide any meaningful error result.
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.
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?
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.
Currently, the links point to the old contributing to F2 wiki page which links back to the CONTRIBUTING page.
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?
F2 most likely should adopt one of the two prevalent module loader specifications. This is to track evaluation effort.
Questions
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.