Advanced 3318 Folder Collection
After playing the video, you can click or select the word to look it up in the dictionary.
Loading...
Report Subtitle Errors
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 ("installsallowedfrom": ["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)
    You must  Log in  to get the function.
Tip: Click on the article or the word in the subtitle to get translation quickly!

Loading…

Gaia: A modern smartphone user interface in HTML5 and JavaScript : Andreas Gal

3318 Folder Collection
df1 published on September 26, 2013
More Recommended Videos
  1. 1. Search word

    Select word on the caption to look it up in the dictionary!

  2. 2. Repeat single sentence

    Repeat the same sentence to enhance listening ability

  3. 3. Shortcut

    Shortcut!

  4. 4. Close caption

    Close the English caption

  5. 5. Embed

    Embed the video to your blog

  6. 6. Unfold

    Hide right panel

  1. Listening Quiz

    Listening Quiz!

  1. Click to open your notebook

  1. UrbanDictionary 俚語字典整合查詢。一般字典查詢不到你滿意的解譯,不妨使用「俚語字典」,或許會讓你有滿意的答案喔