
Building Firefox OS - bpierre
http://buildingfirefoxos.com/
======
masklinn
You know, what's great about this new web and these new methods of laying out
UI is this: before, content arrived to your browser, and sometimes if you were
using a slightly older browser or one which wasn't really tested it'd look
somewhat wrong. Useable, but wrong.

Nowadays, it looks like this: <http://imgur.com/a/Z7IXu>

I'm slightly wary about the future considering these improvements, since we're
talking about a page displaying an alternation of a bit of text and an image,
a bit of text and an image, ... which I used to believe was something we'd
come get right.

~~~
azakai
> Nowadays, it looks like this: <http://imgur.com/a/Z7IXu>

What browser is that in? It looks like a weird bug is showing there,
potentially an exploitable one since some of that looks like garbage pixel
data, like it's reading from invalid memory. That seems to be the issue here,
not that web content isn't like the "old days" when it always worked but was
sometimes wrong.

Speaking of which, there never were any "old days" that I can remember. Often
sites only worked in IE, not just rendered properly but also only worked. You
couldn't enter data into forms, or couldn't get them to submit properly. The
web wasn't just a little incorrectly rendered in the IE days, it was totally
broken on many sites.

~~~
masklinn
> What browser is that in?

Camino, which uses FF 3.6's engine.

~~~
batgaijin
Fuck Tesla; it's not fair those cars get to run on electricity.

~~~
masklinn
Congratulation on having produced the "complete failure car analogy" of this
thread, and thank you for your contribution.

------
sergiosgc
It is a great time to be a web developer! I have no idea whatsoever if Firefox
OS will gain enough of a stronghold to be a viable competitor in the mobile
space. I have high hopes, however, that it will spur the technological
advancement of HTML-based mobile apps (aka hybrid apps).

Today, hybrid apps are kind of second rate applications. Facebook (on
android?) was the most prominent case, but examples abound, where the UX for
an hybrid app is leagues away from a native alternative. Better foundation
(frameworks/OS support) can change that, and one must applaud the unification
of development stacks.

~~~
MatthewPhillips
Hybrid apps are those which mix the native languages with Web languages. in
Firefox OS and Chrome OS the web _is_ the native environment. There are no
hybrid apps, just web apps.

~~~
y0ghur7_xxx
I think it is common understanding that "Hybrid apps" are apps that run on the
device, and are written with HTML, CSS and JS and leverage the device’s
browser engine - not the browser - to render HTML and process the JavaScript.

PhoneGap/Cordova/appMobi apps are Hybrid apps.

------
hakaaaaak
I'm excited about Firefox OS, in concept. However, I'm waiting for something,
anything, to show that this isn't going to suffer from large project scope +
inadequate resources death. Web controls? Great, but the developers have
admitted that they aren't spending that much time on Gonk, etc. because they
are UI/Javascript guys and don't want to focus on the underpinnings.

Think about all of the things that Android and iOS _don't_ do that Linux is
capable of doing. Firefox OS could be exposing all of that to Javascript, but
instead they are focusing completely on the UI and it will always lose to
Android and iOS. The power of FF OS/B2G should be the flexibility of allowing
HTML5 apps/Javascript to have access to the hardware.

~~~
mburns
>Think about all of the things that Android and iOS don't do that Linux is
capable of doing.

Like what, exactly?

~~~
hakaaaaak
To not only stage FirefoxOS as a potential desktop OS replacement, but 1-up
Android and iOS, how about:

* Add support for various types of USB devices. Anything that is supported in Linux via a driver you could install via FF OS would be available to HTML5 apps. Printers, displays, thumbprint scanners, etc.

* Similar support for bluetooth devices, etc. as long as the driver could be coded to work on the device hardware, obviously.

* Gonk should be more dynamic, letting you declare drivers, etc. that you want to use via a path. It's primary purpose would become managing permissions between HTML5 apps and devices. As new devices come out, those could be added easily either by discovery or manual install. When the OS-level drivers are available, it would only be a matter of the HTML5 app declaring what it is able or needs to use and then it asks you (or you configure it) to allow access to the drivers/etc. and then your HTML5 app could use your new bluetooth retina scanner, for example, or control some new helicopter+videocam toy.

The way Firefox OS is now is just a Javascript replacement of Android's
interface and it provides a similar level of access to the hardware. That is
not enough. I don't want or need a Javascript phone and Javascript gaming
device. I want to be able to use the same OS on my desktop as my phone, and if
my phone has a USB plug, I should be able to plug one side into my Firefox OS
phone and the other side into a label printer and print a label from my HTML5
app if I want. Is that level of integration ever going to be possible?

~~~
fzzzy
Yep. The entire goal of this project has always been to fill in all the gaps
in web apis like these you suggest.

------
ndesaulniers
So these aren't necessarily accessible from the device. You need to go to the
github for gaia styles and copy them into your third party app.

For instance: <http://buildingfirefoxos.com/#progress_activity>, you can't
just add this stylesheet to your app and get all of the associated styles, but
you can go here and get them:
[https://github.com/mozilla-b2g/gaia/blob/master/shared/style...](https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/progress_activity.css)

~~~
padenot
You can just include them from your app, those are shared style sheets.
Everything in the /shared directory is accessible from third every app. This
also includes js helpers.

Also, hi :-)

~~~
ndesaulniers
Hey buddy. How would name resolution work then if your app actually had styles
or js in a 'shared' directory? I tried this quickly on Friday but had no luck.
Still, I didn't look too much into it. Have you been able to import these into
an app of yours?

~~~
padenot
Also, yes, it works, see
[https://github.com/mozilla-b2g/gaia/blob/master/apps/music/i...](https://github.com/mozilla-b2g/gaia/blob/master/apps/music/index.html)
for instance. This app imports a bunch of code from /shared. Great for code
sharing.

~~~
ndesaulniers
But music is a built in Gaia app. I believe these styles to be shared across
the "Certified apps" that ship with the phone:
<https://wiki.mozilla.org/Apps/Security#Certified_application>

An example that was a third party app, not certified or made by Mozilla or
partners, would be more definitive.

~~~
padenot
See <https://wiki.mozilla.org/Gaia/Shared> for the details on how this works.
Not having this mechanism would be pretty crappy.

See <https://github.com/taratatach/FFDoku/blob/erwan/index.html> for a third
party app that reuses code from shared/ (a sudoku game).

~~~
ndesaulniers
RE: the first link, it looks like you need a custom profile, therefore a
custom build of Gaia, for it to "Probably" work.

FFDoku just copies the assets, as I had originally recommended. That repo
contains a 'shared' folder in the root dir, so it's not using the assets
shared by Gaia, it's using a literal copy of them. So the same asset winds up
on the device twice.

~~~
padenot
Nick, you were absolutely right, and I was wrong. This is a pain, though, but
is understandable. I'll ask the right people if we can do something, because I
like not copying stuff all over.

Or maybe we can we can do a static analyzer to make the whole process easier.

~~~
ndesaulniers
No worries, we were both unsure. :fabrice verified this today with me.

------
arianvanp
Is this created by a third party based on own design ideas, or is this by a
third party, based on ffOS design guidelines (do they exist already?) or is
this published by mozilla?

It looks really great, but those were some questions that came up in my mind
when I saw it. It never hurts to have a bit of description on the page.

*edit :

After doing some research, it seems to be a showcase of the Gaia Design
Building Blocks page which can be found here:
<https://wiki.mozilla.org/Gaia/Design/BuildingBlocks>

~~~
ndesaulniers
Following the links at the bottom <https://github.com/rnowm> you'll see the
site was developed by someone from Telefonica, a network operator that will
feature Firefox OS devices. <https://blog.mozilla.org/blog/2012/07/02/firefox-
mobile-os/>

------
josteink
What's (still) a little mindbending to me about all this, is that you look at
that code, code for making native apps for a phone, and it's all just HTML.

It's not for a mock-up or anything. That's what you'd use in a real app.
That's lovely.

------
randomfool
I see that they're using data-* attributes for a number of these controls- is
there associated code for these as well? Markup is great, but a rich control
model is more critical for creating great mobile experiences.

~~~
shardling
Could you clarify what you're asking for?

------
amaks
I like how intuitive and thoughtful animations in Firefox OS. They are also
discoverable and consistent, way better than those in Windows 8 and Windows
Phone.

------
mattquiros
What excites me about Firefox OS is how HTML makes it so much easier to
programatically lay out all those UI elements. Android's XML layouts are okay
with me but look at how there's much less code to be typed in FFOS to achieve
the same effect! I guess the same can be said about iOS?

~~~
zanny
I personally fell in love with qt qml layouts recently, just because having a
layout and styling syntax based off something like JSON rather than XML is so
much nicer.

But then again, I hate xml. So much useless overhead.

~~~
nextparadigms
Ubuntu's phone OS will be using QML, fyi.

~~~
compilercreator
Blackberry 10 Cascades is also based on QML syntax, though they implemented
their own rendering engine instead of the QML implementation in Qt4.

------
sgarbi
I wonder whether these interfaces have the same lag as Phonegap/Cordova
interfaces....

------
miles_matthias
I'm not a big fan of the selectors and date pickers taking up the entire
screen. I suspect there will be a lot of hitting "Cancel", reminding yourself
what it is you're setting a date for, and then setting the date again.

------
sergiosgc
What's with these bootstrap-like fixed menus on the left? On my laptop, at
1024x768, it does not fit on the screen and does not scroll :-/

If these are going to be the next fashion item, they better be usable.

------
esgoto
Strange, the buttons on the examples are click-able when I have NoScript on,
but if I turn it off they suddenly become unusable.

------
j45
WebOS is dead, long live WebOS!

~~~
vanadium
It hasn't been "alive" as a reasonable, retail-ready product for over a year
and a half now.

~~~
j45
Technically the "revolutionary" use of HTML5/JS to create an entire phone's
UI/OS/App's is entirely WebOS and it continues to live on.

Little is new, most is old anyways :)

------
contingencies
I thought this was about building the source; something I for one have tried
and found a point of pain.

FF(O)S, people!

Invest in some cloud build infrastructure (binary blobs excepted; wrap the
existing glassechidna client for that), expand your device count, and help
people try out your code. No try, no show and tell. No show and tell, no
excitement. No excitement, no devs. No devs, no win.

~~~
ndesaulniers
So building from source is pretty trivial. Start here:
[https://developer.mozilla.org/en-
US/docs/Mozilla/Firefox_OS/...](https://developer.mozilla.org/en-
US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites)

And we do have nightly builds for the desktop emulator:
[http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-
mo...](http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-
central/)

"Expanding device count" requires quite the bit of engineering and working
with device manufacturers. If you think it's easier than I claim, here's a
starting reference and we accept pull requests:
<https://wiki.mozilla.org/B2G/Porting>

EDIT: Also to the above point:
[https://autonome.wordpress.com/2013/01/15/firefox-os-
devices...](https://autonome.wordpress.com/2013/01/15/firefox-os-devices-and-
dark-matter/)

For now, the emulator works, third party devs in target markets are getting
devices, and a developer phone is shipping in February. And we're having
hackathons around the world this week: [http://news.softpedia.com/news/With-
the-First-Firefox-OS-Pho...](http://news.softpedia.com/news/With-the-First-
Firefox-OS-Phones-Out-Mozilla-Is-Holding-20-Hack-Days-This-Week-323162.shtml)

What else can Mozilla do to help create excitement? That's a genuine question,
not sarcastic.

~~~
contingencies
Thanks for your reply. I know sometimes it's hard to take a step back and see
others' experience, so let me try to show you what I meant about difficulty.

Firstly, I am definitely not the garden-variety user when it comes to mobile
devices. I was involved in the launch of the Galaxy Series devices and even
spent time at Samsung HQ in Korea for this purpose, and have since run custom
ROMs on my phone... so came to this with a relatively strong knowledge,
compared to most. If you can't make the process work for me, it's not going to
work very well for others.

The build page you mentioned is not the right one for SGS2, which is an
extremely popular device, yet in the category 'third tier' supported (ie.
effectively ignored).

You should get someone from Samsung to solve this. They have entire
skyscrapers devoted to different phone platforms at their headquarters in
Suwon, Korea, made vast and record profits this last quarter, and it should
not be an issue for them to provide a useful contact for their most popular
devices.

Next point. Since the build process itself is IIRC is only supported on Ubuntu
or something, I had to download that and set up an entire VM before cloning
the code. Second, cloning the code takes years on a third-world connection
(literally hours and hours, it's something like a few GB in size).

Third, it wasn't hugely clear that I needed to upgrade from a custom ROM with
Ice Cream to a stock ROM with Ice Cream in order to install (in fact, the
notion that the existing firmware would be hacked in to the new FFOS image was
really not clear at all, and should have been). This resulted in builds
failing in non-obvious ways.

Realizing the situation, since I didn't have a stock ROM image just lying
around, now insert many hours of downloading different ROM images, trying to
install them, getting errors with them. If must have downloaded and tried at
least five of these already.

There were also lots of fun errors related to a bug in recent versions of the
upload tool, which bricked my phone. Thankfully, because I am somewhat
familiar with the Linux boot process and persistent, I did manage to unbrick
the phone an eventually get what might be a valid Android ICS ROM going that
might be good to install FFOS.

Unfortunately, after spending more than two days on this already, I simply
didn't have time to continue prior to my current period of travel.

I am motivated to help, pre-experienced, willing to flash my device and use it
on a daily basis even if it's going to reduce functionality vs. Android,
but... FF(O)S, people! You can't provide a faster route to an install?

What would have made things easier was a source for something I could 'just
flash'. I don't care if it's semi or illegal and it comes from a torrent. I
have to go through those routes anyway just to get from Custom ROM -> ICS
stock -> FFOS. Give me a script, give me a daily build.

~~~
doublec
The reality is that with the time pressures to get Firefox OS running and
working on the devices intended to be released there has been very little
resource to supported other hardware. At some point this may change but it's
really up to those interested in that hardware putting the effort in from the
looks of things.

Mozilla can't provide an image to flash due to licensing restrictions on
binary blobs for the hardware (graphics drivers, video decoders, etc).

