Placeholder Image

字幕列表 影片播放

  • 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)

Our next speaker is Andreas Gal from Mozilla

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

Gaia:一個用HTML5和JavaScript製作的現代智能手機用戶界面。作者:Andreas Gal (Gaia: A modern smartphone user interface in HTML5 and JavaScript : Andreas Gal)

  • 259 15
    df1 發佈於 2021 年 01 月 14 日
影片單字