Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save jeena/6337097 to your computer and use it in GitHub Desktop.
Save jeena/6337097 to your computer and use it in GitHub Desktop.
As a former iOS developer who quit his job to go back to school I was excited to hear about Firefox OS because paying $100 every year just to be able to install your own software on your own hardware doesn’t sound like a sweet solution for a student.
# Buying a device
Obviously Mozilla wouldn’t require people to do things like that. So when I was in Poland on vacation I got me an Alcatel One Touch Fire with Firefox OS on it, as far as I know you can only buy a device with Firefox OS in Spain and Poland yet.
I had to buy it via the internet and ask my father for his polish ID (I don’t have one) to get it for 400 PLN (ca. 100 €) because the T-mobile shops weren’t allowed to sell it to me without a contract, which would have ended up about 1000 PLN (ca 240 €), which this phone clearly isn’t worth.
# Development with jQuery Mobile
Anyway, as soon as I got it I started developing a clone of my [TinyTinyRSS](http://tt-rss.org) client [FeedTheMonkey](http://jabs.nu/feedthemonkey) which was written in Python with the Qt framework. It doesn’t do much, just shows me my unread articles and marks them as read when I move to the next article, really basic functionality and what I want to do with an RSS reader 99% of the time.
So I grabbed [jQuery](http://jquery.com) and [jQuery Mobile](http://jquerymobile.com/) and within two days on my holidays I wrote a basic app which showed a list of your unread articles from your TinyTinyRSS server, let you read them and mark them as read on your server, so it even had more functionality as the python app I have for my desktop.
## Privileged apps
I didn’t want the app to be a website because I wanted people who already had an TTRSS server to be able to use it without too much hassle installing another app on their server. But to be able to talk to arbitrary servers owned by the users I needed the systemXHR permission and thus the app needed to be a privileged app (this will be important later on).
So I added to my manifest two new keys:
<pre>
"type": "privileged",
"permissions": {
"systemXHR": {
"description": "Connection with your own TinyTinyRSS server."
}
}
</pre>
Then I found out that this wasn’t enough, you also needed to create your XMLHttpRequest object with a special object like this:
<pre>var xhr = new XMLHttpRequest({mozSystem: true});</pre>
First I wanted to use [jQuerie's $.ajax()](http://api.jquery.com/jQuery.ajax/) but that wasn’t that easy and although I later on found in a [comment of a bug report](http://bugs.jquery.com/ticket/13394#comment:2) that you indeed can set this option for jQuery, I couldn’t really find it in the documentation and I went for a plain XMLHttpRequest object. This later on turned out to be a really good idea anyway.
## First version
jQuery Mobile was really neat to work with, especially navigation, animations and a default style which was quite ok to look at and did a great job in reducing the amount of time I needed to put in to get something working. Here is a link to the [code up to this commit](https://github.com/jeena/FeedMonkey/tree/c588ae44cc54c7b7bf1d0d421676f94f9c3a2203) and a couple of screenshots:
![List view](/images/2013/fm1-list.png)
![Full view](/images/2013/fm1-full.png)
![Login view](/images/2013/fm1-login.png)
There was some weirdness with manually calling <code>$.mobile.changePage()</code> and it also kept weirding when I used not only <code><a href="http://api.jquerymobile.com/listview/">.listview()</a></code> but at the same time <code><a href="http://api.jquerymobile.com/button/">.button()</a></code> but I was able to work around it by not using the button code.
# Mozilla Marketplace
So I was quite happy about the progress and thought I would share the app with the world, and there is the Mozilla Marketplace already installed on every Firefox OS devise, where I assume people look for new applications to use.
So on Thursday the 22nd I uploaded it to the marketplace. While uploading the zip file with my application their static analysis tool gave me about 30 warnings like this:
<blockquote>
<pre>if ( parsed ) {
return [ context.createElement( parsed[1] ) ];
}</pre>
<p>CSP Violation Detected</p>
<p>Warning: It appears that your code may be performing an action which violates the CSP (content security policy) for privileged apps.</p>
<p>You can find more information about what is and is not allowed by the CSP on the Mozilla Developers website. <a href="https://developer.mozilla.org/en-US/docs/Security/CSP">https://developer.mozilla.org/en-US/docs/Security/CSP</a></p>
</blockquote>
But since those were only warnings, no errors I just dismissed them as some chatty thing, obviously using jQuery couldn’t be such a bad idea since jQuery Mobile is like made for Firefox OS!
## Rejection
Just about two hours later, boom, I already got an answer! But sadly not the one I hoped for, instead my app was rejected:
> Reviewed by Andrew Williamson (1 day, 3 hours ago)
>
> Hi, thanks for your submission. We found some issues which need addressing: 1) Your app includes code which will be blocked from executed by the CSP applied to privileged apps. The CSP prevents all inline Javascript such as eval; new Function(); setTimeout and setInterval (with String parameters); inline event handlers; new &lt;script&gt; elements. It also prevents external scripts from being added or used. [https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps](https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps) Once you’ve made the change please resubmit your app so we can take another look.
I know from the iOS review process at Cupertino that you can’t really argue with those people and I couldn’t find any way to write to the reviewer anyway. So I reached out to the person I first read about Firefox OS from, [Robert Nyman](http://robertnyman.com/), because I met him at one of the Stockholm Geek Meets a couple of years ago, we’re Facebook friends and he is a Technical Evangelist for Mozilla and the Editor of [Mozilla Hacks](https://hacks.mozilla.org/author/robertnyman/) where you can find lots of articles about how to build Firefox OS applications. I asked which library one should use when writing privileged apps for Firefox OS, sadly he didn’t know either.
## The list
So the next step was to beard the lion in his den, writing to the [dev-b2g](https://groups.google.com/forum/#!searchin/mozilla.dev.b2g/jeena/mozilla.dev.b2g/ZfGhNQsY4a0/SCyqyhNEa74J) and [dev-webapps](https://groups.google.com/forum/#!searchin/mozilla.dev.webapps/jeena/mozilla.dev.webapps/WnXhGInOIqE/4J-IPHAOGPoJ) mailing lists. I explained my problem and got mostly answers which would tell me that it is not my fault:
> We should workaround the limitation of this kind of false positive either by manual review or hash checking of libraries, if possible.
and
> these calls should not be the problem. If you have calls like "setTimeout('setLastScroll()', 100)" then it could be the problem, but using real functions is not forbidden, we do that all the time in Firefox OS.
Then even the person who wrote the code behind the static analyzer wrote:
> Those are warnings and can generally be ignored. I have a sticky note on my desk to improve the quality of the setTimeout/setInterval messages (they’re VERY noisy at the moment).
> ...
> In the Marketplace, we use a custom build of jQuery. If you clone the jQuery repo and use the grunt compiler, the following options will produce a pretty solid version:
>
> <code>-sizzle,-wrap,-event-alias,-ajax,-ajax/script,-ajax/jsonp,-ajax/xhr,-effects,-offset,-deprecated</code>
>
> ...or you could just use the version we built: [https://github.com/mozilla/fireplace/blob/master/hearth/media/js/lib/jquery-2.0.2.js](https://github.com/mozilla/fireplace/blob/master/hearth/media/js/lib/jquery-2.0.2.js)
> ...
So I grabbed their code and tried checked if it would also produce warnings, and it did, almost as many as mine. On top of that jQuery Mobile is not compatible with jQuery 2.0 yet so I installed everything so I could compile such a version of jQuery 1.9 but yeah, you guessed it, still quite many warnings :D. I answered and explained that and got back:
> ... Your app should **not** have been rejected on grounds that you included jQuery and a CSP warning was produced. If that is the case, I’ll talk to the reviewers and see what’s the story. Feel free to forward me any messages you received and I’ll see if I can parse what’s happening.
So that is where we stand now. I hope my questions and problems help the community to figure this things out. It seems that I am one of the first people who are trying to use a framework and yes, I tried [zepto.js](http://zeptojs.com/), it had almost the same amount of warnings.
# Second version without jQuery
In the meantime I rewrote the app, removed jQuery and jQuery Mobile code and came up with my own code and a new look and feel. jQuery Mobile is convenient because they figured out quite a lot already but it makes your app also quite slow, I assume mostly because of the animations but overall everything felt much slower then my pure JavaScript approach which makes the app snappy as hell!
For the first time I tried this new kid on the block, a flat design, I understand that it is not as polished as the jQuery Mobile default design but it is fast and I was able to even really easily implement different color schemas for the user to chose from:
![List view](/images/2013/fm-list.png)
![Full view](/images/2013/fm-full-red.png)
![Login view](/images/2013/fm-login.png)
![List view](/images/2013/fm-full-white.png)
![Full view](/images/2013/fm-full-blue.png)
![Login view](/images/2013/fm-full-yellow.png)
I just send it in to the marketplace again, after I fixed some of the bugs one of the people on the list [found and reported](https://github.com/jeena/feedmonkey/issues?page=1&state=closed). This time it said:
> Your app passed validation with no errors or warnings.
Wohoo! And the status is:
> This app is pending review by a Firefox Marketplace reviewer.
> Queue position: 1 of 14
> Estimated waiting time: 1 working day
I assume they don’t have as many reviews to do yet as Apple but it is still weekend so they will get to it tomorrow morning I hope and assume :)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment