11 ms·

Building Firefox OS

168 points by bpierre 14y ago

arianvanp 14y ago
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 https://wiki.mozilla.org/Gaia/Design/BuildingBlocks
- ndesaulniers 14y ago
  Following the links at the bottom https://github.com/rnowm 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/ https://blog.mozilla.org/blog/2012/07/02/firefox-mobile-os/
sergiosgc 14y ago
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 14y ago
  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 14y ago
    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.
  - Andrex 14y ago
    Well, you could make an argument that Native Client is a hybrid approach, but in general I agree with you.
randomfool 14y ago
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 14y ago
  Could you clarify what you're asking for?
ndesaulniers 14y ago
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 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_unstable/progress_activity.css https://github.com/mozilla-b2g/gaia/blob/master/shared/style...
- padenot 14y ago
  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 14y ago
    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 14y ago
      Not sure, I am merely a C++ dev :-). Surely people in #gaia on IRC will know how this is handled.
    - padenot 14y ago
      Also, yes, it works, see https://github.com/mozilla-b2g/gaia/blob/master/apps/music/index.html https://github.com/mozilla-b2g/gaia/blob/master/apps/music/i... for instance. This app imports a bunch of code from /shared. Great for code sharing.
      - ndesaulniers 14y ago
        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 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.
sergiosgc 14y ago
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.
- deleted 14y ago
  [deleted]
amaks 14y ago
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.
hakaaaaak 14y ago
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.
- MatthewPhillips 14y ago
  You are mistaken, they definitely are adding *nix capabilities to JavaScript. Go read the B2G or WebAPI mailing list and you'll see they are working on every part of the OS, not just the UI.
  - hakaaaaak 14y ago
    The problem that I saw in the API was that it was not open to new types of devices and there was no apparent way to download and install new drivers. That is basic OS stuff if this is ever to be a desktop replacement, and that is why Chromebooks aren't selling like hotcakes.
    - fzzzy 14y ago
      The WebUSB api has always been on the roadmap, but it got deprioritized for 1.0. It takes a long time to finish all these pieces, so some patience will be needed. :-)
      - hakaaaaak 14y ago
        Thanks! Will try to be patient, but it's difficult. :) Would it allow me to connect a USB keyboard (for example) or a USB mouse to my phone? How about a USB webcam that requires an additional linux driver to be installed? How could that be installed easily by the user? How about connecting a printer via USB? Will I be able to print from my HTML5 app? If not, what will it support? I'd also like to be able to find devices and printers via wifi and print, scan, etc. Will I be able to do that?
masklinn 14y ago
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 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.
- Offler 14y ago
  I would suggest using a modern browser, it looks fine in FF 18.
  - kevingadd 14y ago
    I think you missed his point about how content shouldn't turn into a garbled mess of nonsense pixels just because your browser happens to be 3 months old.
    - deleted 14y ago
      [deleted]
    - shurcooL 14y ago
      True, but undefined behaviour is undefined behaviour, which is probably what's being triggered here. You can't really expect it to always be "slightly messed up but usable."
      - Scaevolus 14y ago
        They're probably using some new APIs and didn't consider degradation at all.
    - azakai 14y ago
      Being 3 months old does not explain nonsense pixels. That's a serious bug in whatever browser the commenter is using - possibly an exploitable one since it got the browser to read from a wrong memory address.
j45 14y ago
WebOS is dead, long live WebOS!
- vanadium 14y ago
  It hasn't been "alive" as a reasonable, retail-ready product for over a year and a half now.
  - PommeDeTerre 14y ago
    That's still more "alive" than Firefox OS currently is.
  - j45 14y ago
    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 :)
miles_matthias 14y ago
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.
contingencies 14y ago
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 14y ago
  So building from source is pretty trivial. Start here: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/... And we do have nightly builds for the desktop emulator: http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/ http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mo... "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 https://wiki.mozilla.org/B2G/Porting EDIT: Also to the above point: https://autonome.wordpress.com/2013/01/15/firefox-os-devices-and-dark-matter/ https://autonome.wordpress.com/2013/01/15/firefox-os-devices... 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-Phones-Out-Mozilla-Is-Holding-20-Hack-Days-This-Week-323162.shtml http://news.softpedia.com/news/With-the-First-Firefox-OS-Pho... What else can Mozilla do to help create excitement? That's a genuine question, not sarcastic.
  - jay_kyburz 14y ago
    I think you need to hire some really kick ass designers and make this stuff pixel perfect. I'm not sure what fonts are being used but it doesn't look "Apple" polished to me. The home screen icons are not as good as they could be either.
  - tmzt 14y ago
    Maybe a developer portal page linking to the desktop simulator download? This would feel more "official" and "complete" than a wiki page, or grabbing a nightly from FTP. Android's success was the way it brought in early developers and enthusiasts. The HTC/T-Mobile experiment could just as easily have failed and Android may have failed along with it, but it had developer attention and momentum, as well as an entire 'fanboy' set waiting for it on launch. The Building FirefoxOS site sounds like it could fill a similar niche as Burning Edge did for the first Firefox (post Firebird) releases, highlight what's new in each nightly release. I hope we will see more capable hardware and global launch, this is the third platform we need. EDIT: Sorry, I didn't mean that Building FirefoxOS could fill that niche, only that site similar to Burning Edge could.
sgarbi 14y ago
I wonder whether these interfaces have the same lag as Phonegap/Cordova interfaces....
esgoto 14y ago
Strange, the buttons on the examples are click-able when I have NoScript on, but if I turn it off they suddenly become unusable.
mattquiros 14y ago
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 14y ago
  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 14y ago
    Ubuntu's phone OS will be using QML, fyi.
    - compilercreator 14y ago
      Blackberry 10 Cascades is also based on QML syntax, though they implemented their own rendering engine instead of the QML implementation in Qt4.
josteink 14y ago
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.

168 points by bpierre 14y ago

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 https://wiki.mozilla.org/Gaia/Design/BuildingBlocks

ndesaulniers 14y ago
Following the links at the bottom https://github.com/rnowm 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/ https://blog.mozilla.org/blog/2012/07/02/firefox-mobile-os/

sergiosgc 14y ago

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 14y ago
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 14y ago
  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.
- Andrex 14y ago
  Well, you could make an argument that Native Client is a hybrid approach, but in general I agree with you.

randomfool 14y ago

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 14y ago
Could you clarify what you're asking for?

ndesaulniers 14y ago

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 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_unstable/progress_activity.css https://github.com/mozilla-b2g/gaia/blob/master/shared/style...

padenot 14y ago
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 14y ago
  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 14y ago
    Not sure, I am merely a C++ dev :-). Surely people in #gaia on IRC will know how this is handled.
  - padenot 14y ago
    Also, yes, it works, see https://github.com/mozilla-b2g/gaia/blob/master/apps/music/index.html https://github.com/mozilla-b2g/gaia/blob/master/apps/music/i... for instance. This app imports a bunch of code from /shared. Great for code sharing.
    - ndesaulniers 14y ago
      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 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.

sergiosgc 14y ago

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.

deleted 14y ago
[deleted]

amaks 14y ago

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.

hakaaaaak 14y ago

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.

MatthewPhillips 14y ago
You are mistaken, they definitely are adding *nix capabilities to JavaScript. Go read the B2G or WebAPI mailing list and you'll see they are working on every part of the OS, not just the UI.
- hakaaaaak 14y ago
  The problem that I saw in the API was that it was not open to new types of devices and there was no apparent way to download and install new drivers. That is basic OS stuff if this is ever to be a desktop replacement, and that is why Chromebooks aren't selling like hotcakes.
  - fzzzy 14y ago
    The WebUSB api has always been on the roadmap, but it got deprioritized for 1.0. It takes a long time to finish all these pieces, so some patience will be needed. :-)
    - hakaaaaak 14y ago
      Thanks! Will try to be patient, but it's difficult. :) Would it allow me to connect a USB keyboard (for example) or a USB mouse to my phone? How about a USB webcam that requires an additional linux driver to be installed? How could that be installed easily by the user? How about connecting a printer via USB? Will I be able to print from my HTML5 app? If not, what will it support? I'd also like to be able to find devices and printers via wifi and print, scan, etc. Will I be able to do that?

masklinn 14y ago

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 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.

Offler 14y ago
I would suggest using a modern browser, it looks fine in FF 18.
- kevingadd 14y ago
  I think you missed his point about how content shouldn't turn into a garbled mess of nonsense pixels just because your browser happens to be 3 months old.
  - deleted 14y ago
    [deleted]
  - shurcooL 14y ago
    True, but undefined behaviour is undefined behaviour, which is probably what's being triggered here. You can't really expect it to always be "slightly messed up but usable."
    - Scaevolus 14y ago
      They're probably using some new APIs and didn't consider degradation at all.
  - azakai 14y ago
    Being 3 months old does not explain nonsense pixels. That's a serious bug in whatever browser the commenter is using - possibly an exploitable one since it got the browser to read from a wrong memory address.

j45 14y ago

WebOS is dead, long live WebOS!

vanadium 14y ago
It hasn't been "alive" as a reasonable, retail-ready product for over a year and a half now.
- PommeDeTerre 14y ago
  That's still more "alive" than Firefox OS currently is.
- j45 14y ago
  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 :)

miles_matthias 14y ago

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.

contingencies 14y ago

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 14y ago
So building from source is pretty trivial. Start here: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/... And we do have nightly builds for the desktop emulator: http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/ http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mo... "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 https://wiki.mozilla.org/B2G/Porting EDIT: Also to the above point: https://autonome.wordpress.com/2013/01/15/firefox-os-devices-and-dark-matter/ https://autonome.wordpress.com/2013/01/15/firefox-os-devices... 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-Phones-Out-Mozilla-Is-Holding-20-Hack-Days-This-Week-323162.shtml http://news.softpedia.com/news/With-the-First-Firefox-OS-Pho... What else can Mozilla do to help create excitement? That's a genuine question, not sarcastic.
- jay_kyburz 14y ago
  I think you need to hire some really kick ass designers and make this stuff pixel perfect. I'm not sure what fonts are being used but it doesn't look "Apple" polished to me. The home screen icons are not as good as they could be either.
- tmzt 14y ago
  Maybe a developer portal page linking to the desktop simulator download? This would feel more "official" and "complete" than a wiki page, or grabbing a nightly from FTP. Android's success was the way it brought in early developers and enthusiasts. The HTC/T-Mobile experiment could just as easily have failed and Android may have failed along with it, but it had developer attention and momentum, as well as an entire 'fanboy' set waiting for it on launch. The Building FirefoxOS site sounds like it could fill a similar niche as Burning Edge did for the first Firefox (post Firebird) releases, highlight what's new in each nightly release. I hope we will see more capable hardware and global launch, this is the third platform we need. EDIT: Sorry, I didn't mean that Building FirefoxOS could fill that niche, only that site similar to Burning Edge could.

sgarbi 14y ago

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

esgoto 14y ago

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

mattquiros 14y ago

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 14y ago
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 14y ago
  Ubuntu's phone OS will be using QML, fyi.
  - compilercreator 14y ago
    Blackberry 10 Cascades is also based on QML syntax, though they implemented their own rendering engine instead of the QML implementation in Qt4.

josteink 14y ago

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.