Subtitles section Play video Print subtitles Our next speaker is Andreas Gal from Mozilla Andreas is currently working on various development of web technology including the mobile operation system solution: Boot to Gecko his topic is "Gaia: A modern smartphone user interface in HTML5 and JavaScript" Let's welcome him All right, um, sorry for the technical problems there so let's get it started OK. My name is Andreas Gal I work for Mozilla, and I am the director of research and development and my group is a bunch of different researchy and development projects from Mozilla So basically the goal of my group is to identify things you can not do as the web and find out why unit can not do that and then gonna fix that and I want a year ago, we decided to find out why mobile phones or cell phones were in general mobile devices are not really built as a web If you look as the desktop, almost everything in desktop happens as the web It's very rare these days that people make software for windows 32 APIs Everything is delivered as the web and for some reason phones and mobile devices work very differently so we.. we just set out to find out why and as a part of that, we started to build a project called Boot to Gecko, that's what we'll talk about today and let's start with some motivation and explain to you why I think that it's so strange that we have Android and iOS and why I think it doesn't even make any sense to me those things should not be around when we usually have the web so let's talk about that a little bit so first of all, I am not sure how many of you know Mozilla we have a very interesting history so Mozilla is a non-profit entity we are very distributed and global we are in many different countries amongst others we're in taiwan and the main thing you people know us is from Firefox it's the web browser product we are making and the slide we have made we have more than 450 million users I think now it's close to 500 million and we are localized in lot of languages and there are, mozilla foundation which is the nonprofit entity that really is mozilla, actually it also owns a company, the mozilla corporation and that company has over 650 employees again this slide is a little out of date. I think by now we have 700 employees and we have subsidiaries in 15 different countries ant this is just the core of mozilla, this is basically the mozilla foundation itself and a bunch of people that mozilla foundation employs to implement firefox but around that there's such a large community of people so these thousands of people who actually help us to develop firefox and there are couple of people who are in this room as well who have contributed to firefox and in addition to that, to the, in addition to the actual core of firefox that people build the browser itself there is also very large community of building add-ons so we have more than 40000 add-ons people built, these are things that you can build to customize the browser with, and you can build small than code snippets that make your browser behave as certain way that you would like so we don't do all the customization ourselves we don't have to be a browser with everything that you want to do but we do as the platform for you, that you can go and customize the way you like and much of that is done in javascript as all so that's a very popular way of extending firefox and that is also being built by thousands of contributers now, mozilla's history goes back more than 10 years ago so more than 10 years ago, there was a company called Netscape that made, uh, pretty much of the first commercially successful browser and netscape's business model was, they were making a browser as a closed-source proprietary software product and there were giving it out for free for people to use and how the web really started growing suddenly the web soon substituted the FTP and telnet, which are really boring race to attack as the web they came just like lively things you can touch and colors, and that's actually interesting. So netscape gives their browser away for free, if we are private user, but they charge money if you're a company and, um, there's rapid development beginning after microsoft decided to make a browser as well and at that point this entire model started working because microsoft made a browser as well, it was also closed-source microsoft made it, and microsoft gave you the binary but then microsoft gave away the browser completely for free, that was internet explorer and this of course, is very difficult for netcape, because netscape was deriving its money from selling netscape the Navigator browser and microsoft did not need the money from IE, they just really making money on windows so very quickly, netscape disappeared from the market place in the background of all this and as netscape was kind of dying, the one of the last dying acts of netscape was create the mozilla foundation and there was a very interesting rationale behind that netscape observed that you can't really compete on the web, making a web browser until the web is really open, and completely based on open standards so when netscape ran into, the, the microsoft very quickly started to get a little market share and microsoft started expanding the web as microsoft-only technology a very famous example for that is ActiveX, who in here has ever heard something like ActiveX so actually here in asia it's still even used a little bit more than it's used than other parts of the world and that's a horrible piece of microsoft technology, it's completely non-standard, only mocrosoft can implement it so this is actually often a problem still to this day, for firefox in some asian markets and pretty good in mainland china, where ActiveX are still being used, because we can't implement it nobody knows how it works. Only microsoft knows how it works so based on those observations that netscape made 10 years ago, has ever kinda like dying, and they realized that they have to make sure that the web is open and that, everything is implemented within open standards because only them can others implement the same standards and this led to this core mission, of mozilla, that we wanna get people choice so mozilla makes firefox so that's very likely when we use firefox but firefox's even more important for us is that you have choice you can decide what you want to use, you don't have to use internet explorer there's couple of options for you so this is the history of mozilla, and mozilla in couple of years, it turned the area with a very strong success so now our 30% of people using the web are using firefox browser and in many countries, we are the #1 browser amongst others, in european countries now, compare the web today, it's more than it was 10 years ago when its journey started so I am not sure how many of you here have used the really old version of internet explorer, alright, the IE6 that was really a miserable experience the web really sucked, like that you could barely look at documents, and everything was slow, and it was crashing all the time and the browser has very few capabilities you could display a document, kind of sort of, and you could render some fonts but all the cool stuffs that it's part of web today, you can't do with IE and, it's a bit of obvious why you couldn't do that, because first of all, microsoft was the only party that could implement many of these standards in IE6 such as ActiveX and also there was no competition there was basically only IE 98% of people have done when IE6 came out, they were all using internet explorer so microsoft, and it wasn't a new pressure to really make the web better because people are using it epidemic so compare that today, today everything is really really different so today, most that pages that you go to are based on open standards there is very little activex used in most parts of the world for example and there's no longer just one browser, internet explorer there's many many browsers now so there's firefox obviously which we make but there's also chrome, and safari, and there's opera which is little more popular in europe than here but then, also actually there's IE, IE's back IE is in new version 9, and that browser is much much better than IE6 so even microsoft suddenly had to go back and provide a good browser which have for many years then you'll feel it's neccessary so how did this happen? how did we get from a really crappy web to awesome web as many browsers so mozilla actually have a very big part in that this cuz all back to our missions. So our mission is to make sure you can choose you can decide which browser to use and ideally, you'd really like it when you choose firefox but that's kind of like our secondary goal the primary goal is to make sure you actually have a choice first of all and, as how we said, the key thing for all of that is interoperable standards if it's not based on standards, there's no real choice because someone like microsoft can go ahead, and implement some other activex thing and only microsoft knows how to implement that and it sized how we are using that that you can only use a microsoft browser to go there so really the only way to ensure that you can use whichever browser you like as we make sure all the browsers implement the same technology this of course is really nice for content providers because if you are creating a web site, and you base everything in open standards then suddenly, you write your code once and it runs accross all these different browsers and all these different devices but there's actually a very nice other effect of this so do we explain that to you i'm gonna use a little example here so you see here, su.. rather a blurry screen here um.. a benchmark graph so in the last 3 or 4 years the different browser vendors happened in a very vicious performance game everyone is trying to build the fastest possible browser why are we doing that at first of all we want to build the fast browser and for sure but also, there's competition the press likes writing about benchmarks alright then, every time new version of chrome comes out they wanna benchmark and chrome must be fast here, chrome must be fast there there firefox is faster and then you read that and you might decide which browser to use based on which browser is faster and you won't do to use all browser, you have to go and make a browser faster so a couple of years ago, and then chrome came out, they really sent a new benchmark, that's called V8 uh, or V8Bench it's actually a really terrible benchmark so it doesn't really represent what the web does but it doesn't really matter the press started benchmarking with this benchmark, so chrome was out, and there was a benchmark we were really slow on it so on the left side of this it's August 3 (?) um, oops August 3, um you could see that, we were really slow so saf.. um, safari and chrome some webkit thing 2000 3000 milliseconds we were taking 7000 milliseconds so we were twice as slow as chrome that's really bad the press's gonna say that wow the firefox is very slow in this benchmark it didn't really matter much actually in practice like the web wasn't really slow because of the benchmark but it doesn't really matter the press was saying we are slower so we're, we're prom(?) and you can see that vision of very.. short amount of time thing obvious turned on October 8 we besically invested a ton of engineers there were 20 or 30 people working as day and night to make us fast on the benchmark and we very quickly baught to the point that we are fast as everyone else so, this is why the web is moving this fast; this is why the web is so cool because we're, everytime we are slow there we are under pressure to fix that and this applies everyone else so everytime we come out as a performance improvement, and we started being faster than chrome, then google has to do this google has sent a bunch of people and build their browser to make it faster so there's, there's strong competition between these browser vendors everyone wants you to use their browser so they all have to make our browsers better but the nice part is we are not doing that by adding some eh random, mozilla-specific or microsoft specific stuff instead we are all implementing the same standard and it's just better so we're in the competition that is not about who has the strangest activex implementation that's the most proprietary but who can implement the same open standard the best so this, this is really great for users because you'll get a really fast browser all of it that's also very great for developers because we don't really have to target any of these specific browsers but it's target to any browser and it's gonna be really fast to them so this is the desktop this is really cool and this has been a very fantastic evolve so of the last 10 years, pretty much the reason that you have all these browsers to choose from is because mozilla of the last 10 years has worked very aggressively on making standards so most of the standards you know today is HTML5 and many of these W3C standards then we really did grow in creating those standards and of course other browser vendors worked for this as well so we pretty much, the fact we have competition today from safari or chrome basically create that for ourselves so today we have to compete with chrome which is a very cool browser as well and, that's, in a wild hand, of course competitions for us as if it's as hard to believe there's another browser that you want to use but at the same time, this is exactly what our mission told us to do you want to have, you'd have choice and now you do so in desktop it worked really great for last 10 years the desktop has come in environment where the operating systems in desktop really doen't even matter much anymore alright, the windows or mac most of time you spend at the browser anyway so the operation system has become the bootloader it's the thing that starts your machine until you can open the browser and in next couple years it's gonna get in more so and this, this really makes the notion of operation systems in native APIs like windows 32 or cocoa on the desktop, pretty much irrelavant as long as HTML5 you don't really care so that's, that's cool that really run on desktop now let's compare just smartphones um, everyone in this room here, has a smart phone on bound it doesn't really matter which smart phone you have that actually all look the same and the order very different for the desktop unfortunately so let's look at android for example um, in case of android the web is on that phone, but it's not really an important part of it all the critical stuff actually use pure google technology so the, the platform for android is java but not just any java, it's like a special google magic sauce dalvik java and APIs on that platform are all defined by google so some google engineers behind closed-door decide what kind of APIs we should have and, if you make an application for android you can only use that on an android because they used dalvik and all that google magic sauce that same as true for apple if you have an apple iOS phone, they are basically the same thing they have an apple platform, they use ObjectiveC which is really..terrible language and in addition to that it uses all sort of apple technologies like cocoa, alright and that's really bad because if you are developer you have to write an android application because half of phones are android and you have to write completely separate iOS application it's completely separate file and microsoft was like, I would want too so now there's windows phone 7 and they have again the complete different sort of uh, tools to use you have to use C# and XNA and some other like core of microsoft technologies so this is, basically exactly the opposite to what's happening on the desktop on the desktop, all that native craft is going away while we seen here an the mobile, it's kind of back and it's basically the main way of intacting of these devices and that's actually, that's really crappy for everyone like, everyone who's not microsoft, google or apple it's really bad for you I'm gonna explain to you a little why I think that so first of all this is really bad for users if you buy an iphone for example you buy angry birds on iphone then you are stuck with that if you want to keep that angry bird version you paid for you have to stick with apple if you buy an android phone you can't simply take that application with you there's several reasons why you can't do that so on one hand, that angry bird application that you installed, is written in java, and dalvik and some google.. technology so it simply doesn't run on an iOS form that is the first problem but then second this is actually more important on these phones, it's not just technologies that owned just owned by the different silo holders it's actually also the, the stores and the service on the device so your angry bird's version you bought on apple you bought from the apple store which is very separate from the google store so you have the relationship with apple there you bought something from apple and not from google so you cannot simple take it to an android phone so for users it necessarily means that once you buy an apple device or an android device, you are stuck with it you can't easily switch because all your applications and all your data is not portable and data actually more important on iOS, all your context are just stuffed and stored on your iCloud in google you're stored in a google account so once your data disappears in these vendors' um, silo, it's very hard to get it out of there though, this is of course bad for you because you don't have choice anymore if you ever bought an iphone and starting using it then that's it, you are an iphone user for life you can not easily get out that silo that's really great of course for apple right they like that you keep buying iphones, and the same as google google like it because you keep buying android but it's really bad for you because you are much as, choice suddenly well actually for developers on the other hand it's what equally bad because developers as how I said previously, they have to target their applications for all these different ecosystems you have to write in android at these days there are so many android phones you have to write in iOS phones and iOS apps those are best phones that people want to use them and then, now microsoft wants to make you write the 3rd, um, for microsoft phones as well so developers really don't like this because there are lot into this uh, platforms that they invest and have to build those things 2 or 3 times but actually gets the inverse of that because the stores on these devices are completely controlled by the vendor and the terms of these stores are often really terrible so in case of, of apple is pretty much higher robber and they take that 30% of direct revenue of app developers and um, especially magazine publishers who'd like publish magazines on phones or tablets really don't like that so once you have created this kind of silo, you have to lock the developers are using this to develop but in turns out that actually, the other two parties that participated in this ecosystems of smart phones which are operators that do the networking part and OEMs that make the devices also equally suffer from this for the operators, what they really lost in this game is they lost the relationship with you couple years ago when you bought a phone from eh, from an operator, you have a relationship with this operator you were thinking of it as the phone of the operator today, really, you ask someone, what kind of phone do you have you do not have to say I have, I have like phone of operator X you now have to say I have an android phone or I have an apple phone, or an iOS phone so people think of these devices as the device of the silo owners the operators don't have the contact with you anymore they basically, they are coming.. they use the term "downpipe" all they have to do is shuffle the bits to you that's not a very good business they rather like to do some of the services like operators who'd like to do apps or maybe the store so all the cool things that can make money within this platform the operators no longer have a part in, they really don't like that the, the party in this actually the effect is as diverse as OEMs OEMs make the devices and in case of apple, they're not allowed to any of the devices on the apple manufacturers themselves but even in case of android what, OEMs wanna do, that want to build the devices that are special to them so htc wants to build an htc android device that's a very special htc, so you like it and you choose it but google really likes to control the platform, so as every release of, eh android, google is allowing OEMs less and less to change the appearance or the features of the phone so as the next version of android, jelly bean basically you can't really change anything anymore when you make devices you simply put android on it, and you can change the plastic shell on it that's very bad for OEMs because they, only thing they can compete all is price and competing of price really sucks you can remind that well right, if you try to make everything cheaper cheaper it's not a good way to make money they would have these highly-customized devices off your cool additional features that's only a samsung phone or an htc, and zte wants to do something entirely different and they can't really do that, as in this ecosystem because they have no stake in it either and this is actually very important to know that, um android call itself open-source, right android has 2 things not, it's not open, it's definitely not open and most of time they don't have the source available so android, the source becomes available after google has released the phone but you can't really influence the way the source develops for example it's almost impossible to send any changes to android back to google if you're not working for google and, also there is even openless the source is developed completely inside google so it's not really the same as we mean, when we talk about open source for us, open source means firefox and everything we do is developed completely open if any of you have an idea how to improve firefox, you can submit as a patch, and then your patch will be treated the same as if an employee or mozilla have submitted so these platforms really are primarily all the same, they're very closed and it has led to a system where we accept for some reason that it's okay to make, these devices, these proprietary platforms so if you, imagine you are facebook, executive right facebook has had a big IPO, and you are sitting there and someone comes in and has a great idea it is a fantastic idea that he is gonna build you a facebook application for windows 32 alright, that's ridiculous you would laugh the person off the room nobody would ever do that but if you replace the word windows 32 as iOS, it's OK we do that all the time so, why it's ok on these mobile devices to use native APIs and on desktop it's clear to everyone that's again a dumb idea well, when we think that what's missing there is basically standards so how can we change this there, these mobile devices have many of the things that you want to do as devices have no standards there's no html5 way of using bluetooth so that's why everyone went and build the native stuff so basically what mozilla set out to do last year when I was actually decided to do this boot to gecko project and build mobile devices as the web is, we, we have decided that we want to use the same strategy that we are using for last 10 years to make the desktop open and providing choices there we're using the same thing on mobile devices as well which means that is a two-part process first, we have to make the standards that allow us to build these devices as the web and 6 months ago you really couldn't do that because most of the APIs were not there and then we have to actually build the very cool device, just like firefox and then exactly we are hoping to change the entire smartphone, space so we are not against there being other smartphones this is what makes a difference like google really would like there be only android we don't want there to be only mozilla phones but we want to make sure there is a choice we want to make sure that the technologies from apple, and mozilla, and google phones are all the same so you can take your applications with you you can take your data with you and to do that we need open standards, and actually we'll implement it this is very important so the reason that the web looks like the way it is today it's not because mozilla just make standards everyone can make standards if there is no implementation, no people want to use and it doesn't really matter so we actually have to build it that's what we've been doing last year alright, so, the situation we would like to get to away from these existing silos is really use the web as central point, of smartphones so all the key technology on the smartphone should be based on the web and if you do that, basically you have the web platform html5, what we build applications with and we are adding 2 critical pieces of that um, one is the notion of webapps, and we will talk about that in a more technical level a little bit and also, we are defining a bunch of new services for the web, including identity so currently in smartphones all these different services are defined as proprietary standards so apple for example there is certain way how apple account for us and google has certain way how google account for us we think it's very important that we define the web way and should be a web account, and web identity and webapp, and web store and only if we do that, then suddenly it becomes interchangeable between devices beacuse everyone is using the same platform and again the goal is not just, mozilla does not want to make the smartphone platform now and then everyone only uses mozilla phone that's not the goal the goal is that there's one web way of doing things and there's multiple different parties implementing it so we are very much welcome apple or google implementing a web-based smartphone as well that's very good, that's what happened on the desktop so that's really the ultimate goal is to provide systems that everyone can implement these things um, but the key difference for today is that we're gonna make it possible for other people to also be participants in this so, (let's see how it's.. there's a problem out here) ok, um, so, amongst others, operators, compete a lot out of the system we can enable them again to participate for example, your operator might want to run a phones board where you can buy applications and once you build them open standards, that are defined on the web, everyone can do that so operators can do it, we can run it mozilla intent to run an application store, we think we are pretty good at helping you find and discover cool applications like the other parties like amazon, that also would like to sell applications and then they can sell these applications because all the different platforms doesn't really matter who makes the smartphone it's based on the web and everyone can buy those things so, the first key step we have to do for this is provide a bunch of functionality for smartphones, that previously didn't exist on the web we think that the main reason that the web has not been used much on the smartphones is people write applications that is in native APIs since that is that, to be honest, the web on smartphone sucks can we want to do the website recently on smartphone? it's much less of its optimized experience than the desktop and it's even worse, if you are extra trying to use any of these advanced features of smartphone NFC, there's no way to use NFC from the web Bluetooth, SMS, camera, contacts, all of these very essential stuff that makes the phone really a phone until recently you couldn't even use on the web so this has been the focus of the first 9 months in this project basically for everything you see up here, uh, on the slide mozilla went and we proposed a new standard how to do that so we proposed a standard for web contacts, that explained how we can read contacts from some of your device on the website we have some of the telephony, sms we can send, um, send sms and make phone calls and as important, we didn't just propose standards, right because that doesn't really change much instead, we went and tried to implementing these so all these new standards we have proposed we have also the same time implemented we've implemented on this boot to gecko phones and i'm gonna show you a couple minutes and what does it looks like but also we have implemented actually in every version of firefox for example, the battery API, the batter API of course is available on this new smartphone we are making but we have also added the battery API to every other version of firefox so half a billion of people now have already accessed the battery API if they use the latest version of firefox and this is really what makes these API get adopted quickly so 30% of the web already can read the battery status and can read geolocation and can read contacts so this is how we can very quickly push technology up there onto the web so this is since nine month we have quite a few APIs already in production in production version of firefox you can download so the goal really is to take these new standards and what we're trying to build is we wanna build a smartphone device where everything on device is completely based on open standards so, it's very important that we're not building yet another silo right, we don't build like the mozilla silo, as the 4th one and we've worked for many different reasons but that not really what we wanna do but what we wanna do is build something as the web and build everything based on open standards so the way actually we did that is that if you look at an existing smartphone system that your using here android as an example they all look the same basically so iOS and android windows phone 7 all pretty much look the same at the bottom there's device layer that's actually like hardware right and some of kernel on top of that, and in all smartphones are actually they have rebuilt today except for the windows one, is the windows kernel and on top of that kernel, there's some native APIs and these are the very things are different so on iOS you're using some apple native APIs and on google you use the dalvik native APIs and then on top of that, these vendors implement the actual user interface so using all these native APIs to implement the lock screen for example, and the home screen and then the web browser itself are just native application on top of this platform and, what we have built is basically we, we care first of all for all system the bottom 2 parts is the same so we're not changing the hardware we're working for these very traditional OEMs, we basically use the same hardware all these outside guys are using as well and the kernel actually we didn't change much either there's no reason, like why lead us is these kernel of smartphones has no reason for mozilla to reinvent that so the bottom parts of the system actually are very similar to the existing systems as android but things become very different in this actual native API layer so as you can see we don't have that we don't have any of that APIs when you start this device, it starts the kernel and it boots directly to the web engine and it does very quickly so this, basically when you turn on this device within 1 second, the device is ready to display html5 page and then, the entire device experience itself and any kind of web content that you browse to is all displayed in that web engine so again they turn on this phone it's within 1 second or less you're ready to run html5 and everything else in the phone everything that you see everything you can touch just implemented with html5 so what does it mean really is that, they have to shift a little bit the model so, a few years ago when the html5 start and became really popular 10 years ago it was a document display format this causes us pages to be structured certain way, right so, many simple pages are, as you can see on the left here it's just, one is images, and links you can click on and kind of like, like documents, like content you can read and they are using the same technology html5 to build applications and, we can use the same technology but it means also we have to adjust applications a little bit we have to make applications a little more interactive and also we have to take care things like offline caching and actually make them install the applications but at that end, we use the same html5 standards to build them so, this means the notion of webapp, or open webapps it involves a lot of web pages out there many of these web pages are already old applications so this maps for example, right there is different websites you can go to and you can navigate, and it can paint out the maps for you that's clearly application, that is not just something like this here not just a page with links and images people already built a very nice maps application but what's missing is, right now on the desktop you have to enter URL to go to that maps application and that's really not the way people think about apps on the mobile device on the mobile device want to get the device out and you want to click on the link somewhere on the, on the icon on your screen so, for this you define this notion of webapp a webapp basically is just an html5 page that is optimized to develop as an application, such as a maps application and then, we add something to it called a manifest the manifest describes, uh, the name of the application, and icon and couple of other things are necessary to be able to install that and then in parallel what we did is that we build the store for these things so we, mozilla built the store based on open standards that can host these applications once they have manifest and I will show you how the manifests look like and then we can offer people to see those experience they're used to so on smartphones people are really used to, they want to go to a store and click on it and they wanna go and browse this store and look at the content so if you add a manifest, if you add an API for these stores then we can basically offer people the same interaction method and it looks very familiar to them the difference is actually it's all open so anyone can implement the store, so as I done this talk to you, you can look up the API that I talked about here today and you can build your own app store, and you can start building your own webapps and on any device that supports this, you don't need mozilla's permission, for example, to install store you just make a store if users like the store they can start using it and if they want to buy applications from you they can buy applications from you so kind of breaking apart these silos that kind of exist on smartphones all right, so this is where so this is the conference of javascript so it's time to get a little bit technical here so on the right side here you see is manifest it's actually a json file and, this manifest contains a couple, um a couple simple entries so this manifest in access just serves 2 things it's supposed to help user find the application or help the store to help the users find application and also facilitates payment methods if necessary so here for example, um, this starts obviously describes the application and giving its name and then we defining a bunch of icons ("icons": { "16": "/img/icon-16.png",... ) and these icon definitions can have different resolutions and this is basically to the icon, then a form we use on the home screen, to display for your application and there's some information like the developer so this is some mozilla internal application that our labs grouped it, so that's mozilla labs and then, you can define who's allowed to install this application and then this thing ("installs<u>allowed</u>from": ["https://marketplace.mozilla.org"],) on the manifest we are saying that only the mozilla marketplace is allowed to install that in most manifest we actually expect that this fear doesn't appear so most webapp you don't really care, right if you make a webapp, as long people paid the price that you required for it, if there's one you don't really care who's the intakes of that and then, there's, we can define additional locale if you support multiple languages, and that's it so what I have to do is make those little file, you put it up on the server and then you're a webapp now of course this is very basic webapp so it still requires that you optimize your webapps to actually be a very good experience on smartphones and that's what we'll talk about a little bit next so first of all how do we install these webapps so there are couple different ways um, the first most important of all is there's javascript api for it so you can say navigator.mozApps, and the moz part is because it's not fully set up yet so as long not all vendors all agree to support the same API we use the moz prefix so bad so again there's navigator.mozApps.install, and give it a URL to the manifest and this is gonna cause a prompt to appear where user can say that whether he's ok or she's ok with this target application and after user confirms that, then this application's gonna get registered in the web engine's list of applications and there's couple additional APIs and you can google for this on mozilla developers network um, you can see there is couple other APIs, amongst others you can check for example like they have organize the installs, and you can list applications so you can see what applications are installed if you have necessary privilege and that is actually what we're using for the home screen and even the marketplace itself, is completely implemented using html5 so marketplace applications you have seen here, this one actual use as small apps to find out what applications are installed in the system and can already tell you, you can't install this right now, it's already installed so you can use this for the home screen to startup applications for the actual, um, marketplace is also is a website owner to install an application now the second really important piece is making sure your application runs well offline, but all of that starts very quickly so if you just add a manifest to your page and install it, um, on your phone then basically your phone needs a data connection all the time so you can startup application and, that's usually not ideal because it can be pretty slow so, there's a stuff called AppCache, which allows to specify that if you add this manifest file to a site it basically tells the phone to cache all these resources locally on the phone then we start the application, it immediately gonna trigger execution of that code and it's not going to be fetched by your wait however in the background the browser's gonna make sure the web engine is gonna make sure then it updates the cache it's actually the javascript API as you can see the bottom here that you can use and you can install event listener and it's gonna tell you when the cache is updated so as that I can tell that your quantom is available, and then can trigger a reload so you can take advantage of it but as here we have achieved 2 things, the application works offline you no longer need network connection and, it starts much faster, since all the content is going to be on the device already alright, um, additional way of discovering by the way is you don't need actual your stores, so the browser also looks out for these manifest files by itself so if you go to new york times for example, they have their manifest installed you don't even have to go to the marketspace in new york times it can check whether the app is installed or not and if's not installed it'll actually prompt the user to install it so this is really nice because it means that in the future we can have much more interesting ways of discovering contents you don't just need a marketplace, you can also integrate some social networks or when, if users visiting a site you're doing, you can offer them install a couple other apps on other sites so it's simply a much chainwired(?) and, lots important technology piece I want to talk about is browser ID so one key difference when you'd like to do with this system as existing systems is that, we want to make sure these apps are exchangeable between devices and currently if you have an iOS device, you install the application for the device instead what we want to do is we want to install these applications for the user so this we have propose a new identity standard called BrowserID and any vendor can implement that so mozilla is implementing it, but also we have already gotten couple large operators of some, um, phone networks to sign on they can all implement this identity format and then when you buy applications it link to identity so if you sign in this identity into your phone and your desktop, you can use all that applications between all these devices it doesn't really matter who's your network operator or who implements this all right, so the phone actually we have built is using all these different technology pieces that we talked about so here is couple screenshots of the user interface which the codename for it is Gaia it's not really the product name, it's just the codename um, but that's really called internally right now so the left sand hide, the left hand side you see is the lock screen the way it looks like right now this is all pure html5 when you startup device, first thing the device does is load the lock screen html5 page and everything you see is html5, so the image there you see this is the pipes in the background that's actually just image tag on the background and then the time it's javascript reading the time and updating that but even on the top you see a little bar there all the information that's in the bar so the name of the operator for example, all being read from the phone using new html5 API we have proposed so there's network information API now, and there's signal strength API where you can read the strength of the local wifi signal and network signal and this phone of course we have a firefox browser however even the browser itself is implemented in html5 so we have added a couple new APIs that allow you in html5 to write a browser so the inside of it of a browser is basically an iframe and around of that is some more html5 code so the URL bar and the buttons and menus everything is all html5 so everything on this phone as you can see all is completely html5 I really talked about the home screen as you can see on the left here so the list of applications on the home screen actually is, the home screen itself is just again a background image and couple of images we load here and the list of those apps is again completely done, this is mozapps api so if you install a webapp on this device, it appears on your home screen because it's in the registry even the things of the keyboard for example you see in the right here is by the way done by someone here in our Taipei office even that is completely implemented in html5 so everything on this phone you can see and touch is completely html5 all right, couple pitfalls I'm gonna talk about is, um it's, you can do very nice-looking UIs as html5 but it's very tricky to make sure all it performs very well a couple hints I would give you is that there's concept in the browse called redraw so if you change a layout property like top or left it causes your page to be re-layed out and repainted that's very slow so instead what we are doing, we are using more advanced html5 styling primitives like transform which applies after layout so they don't require repainting the home screen for example if we wanna move around, we wanna move around the 60 frames per second for that you make sure there is no repainting so we use this transform primitives you should give those a try because then, basically we don't have to repaint we can very easily and very smoothly move these things across the screen as just a GPU texture all right, um, one thing I want to show you before I'm ready to take questions that this is the latest UI design I've gotton from the team so these are just couple days old, and this is probably still gonna change by a bit and you are the second group of people on the planet ever see this outside mozilla so this is basically what the new UI's gonna look like um, and I'm not the UX person, but from what I can tell is also the orange there reminds a little of firefox and I really like the UI ant there's a lot of white in there because the web tradition is white, most web pages background just white so, it's really the UI we are trying to make such a way that it ties everything in that mozilla is so it ties the mozilla brand, but also the web and in fact this is a web-based phone all right, um we have couple more links if you want to get involved I will set everything we do is completely open source and all the code you can find in github um, you can find the gaia user interface itself, on the github as well if you want to help, you can help us, um, hack on gaia you can write applications for this as the manifest I have shown you and there's also couple phones you can buy, couple android phones if you buy those and you can install boot to gecko in them and last but not least, actually what we work.. do as for living I heard that mozilla taiwan is also still hiring both to the boot to gecko project as gaia as well all right, thank you very much (applause) so I think I have 6 minutes of questions all right, any questions sorry, I think that B2G project is very cool but it's totally based on html5 is there have some issue if all the applications are based on html5 because if you develop an application with html5 every people can easily get your, maybe something you write, very easily and another issue is, if we only use some reader or some browsing function maybe performance is not very big issue but if we use some game or something they must have very heavy computing power maybt it's another question all right, so um actually, think of the slide I showed at the beginning this one here so everyone we talked to about this, you mentioned performance, right there is no other system, out there that is under as much performance pressure as browsers like we are against google or microsoft, 2 large corporations, a lot of smart people and all compete who can run javascript the fastest on android, how many people implement android one company, who? what is google's interest in making dalvik faster? there's none so actually javascript today in browsers is already often a lot faster than dalvik the java language on android phones so performance is not ideal everywhere I already showed you the slide, the slide is the transform instruction you have to be careful how you do these things and then there's definitely a lot of performance work we have to do but in main area, browsers are already today, much much faster than android the java environment android for example so I can show you a couple benchmarks we are 5 times faster than the java execution on android phones and the main reason for that is that we are competing everyday we have to make our engine faster whereas google doesn't really have to compete because they have the only implementation of android ok, any other questions? ok thanks for a nice talk uh, also related to the previous question my question is about the html5 does support 3D capability so is that something that's also considered for the gaia project I mean is it expected that, like video playback or 3D display is going to be a fluent experience yes, so um both thing you mentioned like 3D capabilities for gaming and also video playback are essential parts of a smartphone so actually for download gaia, there already a demo in there there has a 3D skull rotating and we are working with these OEMs that make these devices to highly optimize the video playback as well so that we support actually is for video playback, and then full media capabilities and which is, you expect that, you can't really set up a smartphone if it doesn't play cool 3D games and videos and third question is developing for desktop I mean, is it going to be the same as developing for websites as for the smartphone yeah, few months ago sometimes people ask where's the SDK where can we download the boot to gecko SDK there is really none, that you have to write html5 applications and there is always a little bit difference there so the latest API says sometimes a little bit different like firefox and chrome and there's sometimes small differences but in general if you write for html5 for mobile html5 it should run at boot to gecko it should run on safari phones and it should run on android phones often in our phones it runs a little bit better so our phones are really highly optimized for html5 it's the only way we can render contents on the screen so often we're little bit faster than iOS for example or android um but, and then in theory it should be pretty applicable so also as we think forward, there's gonna be more and more support in libraries so jQuery touch and all these kind of infrastructure libraries often help you to hide the difference between the small differences between the platforms any other questions? all right, thank you very much (applause)
B1 mozilla browser web html5 android firefox Gaia: A modern smartphone user interface in HTML5 and JavaScript : Andreas Gal 259 15 df1 posted on 2013/09/26 More Share Save Report Video vocabulary