 So my name is Alex. I'm a youtuber in gaming and when I'm not making videos I'm usually writing javascript learning about new libraries trying different experiments or volunteering to promote the open web such as giving talks like this one or helping create the Mozilla hive base here in Barcelona and In the future I want to be a social entrepreneur and this is a very elegant and fancy way of saying that I just want to build stuff that helps people simple as that and One of those small projects that I've been working on is actually the thing that led me to have the information That led me to make this presentation So to make the story very short What I noticed is that in many countries in places like South America Governments were spending millions of dollars on building computer labs for remote areas now There was something very interesting going on going on underneath all this So many people in remote areas already have internet access through mobile But their entire view of how the internet is and works is through mobile So the objective of this computer labs and schools and such will be to enable them to work using a keyboard The mouse do simple work that is very hard to do through mobile simple stuff, you know writer reports passing grades writing a lot of emails and Often what I noticed is that they will do everything through a browser Obviously, they will write through Google Docs. They will just use web tools But okay, so they will have this big tower computers running Windows XP And they will only use the browser and they were spending money on this So that made me question It's there an easier way to run something that is only a browser and extremely cheap I can do it very well. So let's think about that for a second and Obviously, the first thing that came to mind is let's use over-the-counter hardware such as a Raspberry Pi or bird yet this that you can see on the picture Maybe you saw this and kick started a few months ago This is called a chip it made a lot of headlines because it's the world's first $9 computer is running one gigahertz single core SOC that is the same SOC present in a lot of cheap Chinese smartphones and tablets and I proudly backed it. In fact, they are cheap in the developer units like next week It's anyone here based in Barcelona because if you are you can send me an email and we can hack around this thing I'm pretty much we can we can set it up Okay, so we can use something like that for hardware, but what about software? Okay, so what we needed was a very thin Client that could run a modern web browser on top of it and something that could be very customizable Thankfully through my volunteering in Mozilla. I already knew of such a thing some of you may have heard of Firefox OS now Firefox OS is better described through its engineering name, which is booth to Gecko Gecko should sound very familiar It's a web runtime that runs all versions of Firefox and what Firefox OS is is a mobile operating system for you funds such as this one that boots to Gecko as quickly as possible and There was an interesting thing going on with this operating system So if you grab an Android device a device a low-end device running Android, right? And you then start browsing the web on it and doing normal web activities and doing experiments And you have the exact same device running Firefox OS doing the exact web activities The web will run much better on the Firefox OS side. It's simply a matter of having less layers of abstraction Because of this this strategy of Firefox OS has been to this point and this changed recently while I was making this presentation on making cheap smartphones for developed countries the logic was if Developing countries people are having their first contact of the web through a mobile device Why not make a really cheap mobile device that is extremely good at surfing the web? Because of this reason if you have never heard of Firefox OS you are completely justified as You know as consumers we were not really the target onto the switching strategy If you have a decent iPhone or a decent Android device in your pocket as consumers You were not really the target the target But as developers of better yet as web developers there is something much more interesting going on here Why the entire upper layers of Firefox OS everything the user sees and touches and interacts with all the apps Window manager a lot of stuff are written completely using web technologies Everything is HTML CSS and JavaScript is right in the center of it So that means that using the exact same tools used for web development This operating system could be modified heavily for almost a great variety of many interesting cases Obviously As I mentioned before my idea for web box was something to use a keyboard and mouse And we're talking about the mobile operating system But using the same tools it can be adapted for so but the best example I know of this Is this thing if you were lucky enough to be a mobile world congress in Barcelona this year Maybe you saw a guy a very elegant gentleman with a scarf walking around Showing this to a lot of people and made a lot of headlines. This is called the run civil by a very small startup called Mono So what the run civil is is advice inspired by a pocket watch That has an interest in philosophy behind of it basically as the CEO told me they had This idea of making a device that was just not another smart device filling your life with stressful notifications In fault they call it a post smartphone device. You should Google this up. It's really interesting. So They wanted to convey information Through the sign and not simply through a notification system Because of that unique Bishop and the fact that round screens are still not that super common and they're a super small start up They needed something they could customize with the tools you already had at hand and they chose Firefox OS for this Every single video screen that you see of the device that is Firefox OS That's HTML CSS and JavaScript. They customize it for their own design ideas pretty easily the entire stack is open source and Of course Mozilla themselves know this. This is why Firefox OS lately has been work to adapt to something like smart TVs There's already Panasonic smart TVs out there with Firefox OS running on them And even there's concepts such as a device That is a feature phone an extremely cheap feature phone with no touch screen completely designed to be able to serve a web easily using a trackpad and That for me is fascinating But if we are going to if you want to hack or understand Firefox OS as a developer We need to start understanding how it works and to start that the best way is With the three layers is met on off We're going to focus here on one a specific layer, but I think it's important to understand what each one does Started by this guy gunk the best way to explain gunk is like a miniature Linux distribution Using the same kernel on a lot of the low-level components from the Android open source project So if you are porting Firefox OS device usually gunk is the most important part If the target devices are running running Android have the work is already done for you on top of it It's get cool. They should be a name that is extremely familiar It's the web runtime that runs all versions of Firefox and Thunderbird And in top of it is my favorite one is Gaia Gaia is everything else It's the window management is a great deal of the power management power management all the apps all the screens Everything the user ever interacts or touches and every single component of it. It's web All of it you could almost say like JavaScript, which to someone who is His best language is JavaScript is really exciting JavaScript is really almost like the native language on Firefox OS And to start working with it You probably already have the tools to do this if you have Firefox installing your computer right now You already have the tools to start working with this if you look into Firefox in the dev tools There's something called web ID and in web ID you can run a Firefox OS Simulator where you can see Gaia an action and not only see Gaia an action But inspect every single aspect of it using the same developer tools Used for web development in Firefox Now the next question that I usually get when I talk to my friends about this is okay But how do you use JavaScript to access low-level TCP ports or raw Bluetooth or send an SMS or such? Well, this is handled by web API's and like good API's There are simply the bridge between the high-level JavaScript and anything that is underneath and There is one for everything I highly recommend you check the entire list right there in that link or just Google web API's is the first result and Here are some really simple examples because some of them are really extensive This first is the API used to send a text message as you can see extremely simple Then it's the web API to place a phone call. This is how it's done inside Firefox OS I'm finally an example of the one used to store a file and The best part one of the best parts of me of this web API structure is That if you have been doing web development on mobile on the last few years You probably already know this because there has been a lot of work on Standardizing as many web API's as possible if you look at the status bar in Firefox OS This is how it gets about your level. This is the exact same of API it uses This is the API every app and every component uses to vibrate make the phone vibrate or get location And as you can see they are widely supported in a lot of older mobile and even desktop browsers Also, I'm really lucky because you probably already believe me if you were here yesterday You probably saw the amazing demonstration on the internet for browser stock We're connected. I was connected to another smartphones vibrated and changing color and took touch and took like battery data Standardized web API support baby. They're already out there that are ready out there And they're already easy to use and these are the basic building blocks that make it possible to build almost an entire operating system a mobile operating system using JavaScript Those are the building blocks, but how does it all come together if we're going to visualize Firefox OS as a gigantic HTML document that HTML document as a system app is the first thing that Gecko launches as soon as it ready and as any good HTML document with a main JS file it has a load event as you can see there and As soon as it's done loading all the JavaScript and CSS that it needs for the operating system It defines functions and just goes on for example the fit the first function that's defined there is called FDU That stands for first time use is the screen that you see right there You know the screen where you configure first time you turn on your phone You configure your name your language all the normal Initialization data and after that is done an event is triggered and with that event a lock is created That's part of the system settings web API, but it's used to save those settings inside the phone Right after that and a special event is created and when that event is triggered the system app Notifies Gecko that is ready to receive messages from other services such as radio or Wi-Fi and Of course since the system app is the main HTML in top of the entire operating system Things like the status bar are right there as you can see that the status bar is just a dev It's run by two JavaScript files and everything is extremely well commented on documented So for example a good experiment that you can try right now if you have a simulator you can get inside Firefox OS You can inspect the notification bar You can see which CSS attributes has been loaded and you can start playing around with it put it in the bottom Put it on the left putting on the right or start changing the behavior and Trigger a notification when it slide it down Now another interesting thing inside Firefox OS is how they implemented a window match now the best way I have seen to explain this Window match more is through the history of how it came to be and that goes through the browser app You will get this order in a second So it's an interesting question. You know you have an entire operating system But it's basically a browser so but you do need a browser app that the user clicks and opens a window And you can serve the web so the first attempt and doing a browser app was basically what you see there an iFrame with a bar where you could put your URL now I don't know about you, but iframes make me nervous They not all websites will load an iFrames for security reasons. They don't have access to the content window property There's many limitations to iFrames and the guys that will have been this knew that very well That is why they created a special API called the browser API the browser API allows The creation of special eyes for iFrames with the most frame attribute these iFrames have Its own set of variables each one is sandbox and has its own system process So if one crashes the operating system doesn't go entirely down The overlaying JavaScript has access to what is going inside the iFrame is able to get events from it put events Take it forward backward reload all sorts of things even it's able to know how much power it's consuming and if it has crashed So it's extremely easy to see how this could be implemented as a Windows management And that is exactly what happened. In fact, what do you have in Firefox OS? Which is very interesting. It's just a set of special iFrames and each app is running inside one of them Each one is being hidden or shown depending on which app is active all inside the system of the O.M. And With this you can implement a pretty simple app lifecycle every time an app is launched You will append a special iFrame to the D.O.M. You will start the app use the app have the animations etc When the app is closed you remove the iFrame simple as that And of course another advantage of using iFrames in this way is the fact that you can Re-say it we shape them for a lot of third circumstances if you're using an on-screen keyboard Just reduce the size of the iFrame and if the web content side of it. It's well done It's responsive. It uses a grid correctly It should get the content it should get the window size correctly and be able to reform based on it Especially because on an operating system You there are many options on how much size the actual app is going to have you could have the normal bar on top the Keyboard a full-screen app or even when you rotate the phone You simply have to re-shape that iFrame to adapt there is and I have to make this note There is a Specialized a API to know the orientation of the phone if the app which is to use that for any reason But if it's a simple information app simply having a responsive web design already makes this a lot easier And you can re-shape the iFrame in a variety of ways Of course all this talk about how apps are running is that iFrames And they need to talk about how apps are implemented because this is a this has a lot to do with the Security policy in in Firefox OS, which is always a touchy subject. There are three types of apps First, you know normal web apps you have an app running on the server nothing special here The only thing that is stored in the phone is a manifest file that you can see here. It's called Manifest web app if I'm not wrong and These web apps have access to most of this tenderize API's vibrations screen orientation geolocation battery level Basically, it's almost the same as developing a web app that is going to run on Firefox for Android and many times on Chrome mobile and other mobile browsers But then you have something a little bit on top you have privilege apps privilege apps are still web apps But all the resources are stored inside the phone This because there's a security reason for that as I already mentioned Because they have access to a certain level of API's that are a little bit more sensitive They have access. These are just examples. So this is really long, but they can access TCP sockets They can access the device storage. They can access the contacts the browser API or making even non same origin requests because of this the ROM is built in such a way that Privilege apps have to be installed from an signed and authorized web store that is configured inside the ROM and Obviously, this is in order to sort of preserve that idea of security and finally You have a little bit of the more controversial and my personal favorite type of app the internal certified apps This is almost This has access to everything they have access to all the API's even the most sensitive ones You can control everything from the phone into a certified app But the certified app there's like no way to actually publish one It has to be included in the ROM just a developer. You can push a certified app your phone But you cannot just publish it on the store or something But as you can see this is the most important one if you're customizing your Firefox OS for any specific hardware project Must be the day So it's here, but it's not here. Okay Right. So this apps Have access to power management mobile connections bluetooth all sorts of things Now when I was working on this talk a very interesting video came out of a prototype version that is currently being worked about Firefox OS that actually addresses a lot of the concerns that came with the current security model The video is called experimental new version of Firefox OS I highly recommend you look that in YouTube. These are all pictures taken from that video and Basically, I have mentioned several times that the old strategy was about making affordable smartphones in developed countries This has been Changed this actually change while I was working on this presentation The new strategy seems to be more about extreme customization. So for example If you have a dialer app, which is a certified app you can install a new one because it's using certified API's And you want to change that for something the new version of Firefox OS enables to inspect the code of any part of the JavaScript OS Even from the phone There's gonna be like a like a bug silhouette where you can check the code immediately and even start making changes on your phone and Create sort of add-ons where you can inject html CSS or JavaScript on any app to modify it the way you wish in fact They're working on something called a hacker place, which is a more Easy to get stored for add-ons where Customizations of the OS can be used on an app by app basis Obviously the question that came out of this is okay How is that when I work with security especially when you're injecting things like JavaScript and this is a work in progress So it still hasn't been announced, but it is definitely very interesting So if you are have any idea for the hardware project or something like the runs it was something Unique that you as a web developer want to customize to meet your view of what it does I highly recommend you give the Firefox OS code a try the best place to start is You know the entirety the full stack of this operating system is open source But as a web developer the best place to start is the Gaia repository in GitHub You can just search Gaia on GitHub If in inside the repository there's all the instructions for building a debug profile And once you have a debug profile you can link that to your Firefox simulator So you can do changes and run them in Firefox and see exactly what are you doing pretty easily and If you have very specific technical questions one of my favorite part about Mozilla is how they open there for communications This is the official IRC channel for Gaia and if you get there and they hang there all the time You can see even the internal communications between the developing team and you can go and ask them questions And they do answer especially the good ones. So I highly recommend you do that Also, if you have any more as specific questions I will be hanging around or if you just want like a Firefox sticker or something I will be hanging around come get me I will answer all your questions or refer you to what you need We're here for you. Thank you Hey Thanks for the presentation. So my question is related to the web APIs that you mentioned I'm interested to know about the performance of the communication of the web APIs with more low-level Stack How does that compare to native operating systems? Well, obviously it depends on what context we're talking of if we're talking Firefox OS They're highly optimized because that's the entire point of it Obviously, if you compare it to Firefox running on Android, for example, obviously it's going to be less But they are working on trying to implement it. It's still on Firefox OS a little bit Less than native because they're simply more layers of abstraction to go through but they're working on making it as fast as possible And a follow-up question. Do you know anything that exists on the market? Let it be a small computer or even a feature phone that implements this that we can buy Like Firefox OS. Yeah, if you go to eBay, there's a zillion of them. Yeah, the best way to start as a developer One of the hardest parts of Firefox OS because Firefox is much smaller a certainization than most people assume It's actually getting developer phones out So one of the solutions that I hear have heard a lot of developers doing is to buy a Nexus 4 Online and there is I mean one of the target builds of any nightly coming out of Firefox OS It's a Nexus 4 so you can literally buy a use Nexus 4 install there and it's gonna work perfectly It's literally on the first tier Thanks