0:00:00.000,0:00:16.343
(Upbeat music playing)

0:00:16.720,0:00:20.062
Hello, welcome to

0:00:20.062,0:00:23.271
the Mozilla Roadshow in Ho Chi Minh

0:00:23.271,0:00:25.540
I would like to thank before

0:00:25.540,0:00:28.083
we get started the wonderful people

0:00:28.083,0:00:30.652
here at Dreamplex for hosting us.

0:00:30.652,0:00:32.333
It is a beautiful venue.

0:00:32.333,0:00:34.279
We are really excited to be here.

0:00:34.279,0:00:36.331
I think this is the first Mozilla developer

0:00:36.331,0:00:39.051
event we have done here in Ho Chi Minh

0:00:39.051,0:00:40.982
And I think possibly Vietnam

0:00:40.982,0:00:43.102
So we are all really excited to be

0:00:43.102,0:00:44.897
here and thank everyone

0:00:44.897,0:00:46.380
for coming!

0:00:46.380,0:00:48.212
Um, so how many people here

0:00:48.212,0:00:51.581
know Firefox? (Hands raise)

0:00:51.581,0:00:54.216
You know Mozilla? Are you aware that

0:00:54.216,0:00:58.212
Mozilla is a non-profit company?

0:00:58.212,0:01:00.572
Yeah? Oh great, okay, So you make my

0:01:00.572,0:01:03.341
life easy. Uh, so my name is Ali Spivak.

0:01:03.341,0:01:06.961
I work for Mozilla, I run a big

0:01:06.961,0:01:10.039
chunk of our developer outreach

0:01:10.039,0:01:12.150
department of which is also known

0:01:12.150,0:01:14.531
generally as developer relations.

0:01:14.531,0:01:17.332
You can find me on twitter @alispivak

0:01:17.332,0:01:19.760
I have been at Mozilla little over

0:01:19.760,0:01:22.809
5 years now, mostly running MDN

0:01:22.809,0:01:25.622
which is our web developer documentation

0:01:25.622,0:01:28.480
site, and I also help, sort of be the

0:01:28.480,0:01:30.657
executive sponsor of events like this.

0:01:30.657,0:01:33.100
So, I am really happy to be here!

0:01:33.100,0:01:35.912
So our schedule for tonight; I am going

0:01:35.912,0:01:39.370
to talk about...is it that alright? I can

0:01:39.370,0:01:42.951
kind of hear it going in and out.

0:01:42.960,0:01:45.669
Does it sound alright? Okay, I am

0:01:45.669,0:01:47.742
going to talk a little bit about Firefox

0:01:47.742,0:01:50.210
and some of the work we are doing at

0:01:50.210,0:01:52.450
Mozilla, around new technologies. Then

0:01:52.450,0:01:57.168
Fabien will talk about Web VR & A-Frame

0:01:57.168,0:02:00.611
Then, Hui Jing will talk about Web Design

0:02:00.611,0:02:03.079
and we will finish up with, uh, Vitaly

0:02:03.079,0:02:05.389
talking about Responsive Design.

0:02:05.389,0:02:07.822
So we have a good, a great line up for you

0:02:07.822,0:02:10.869
I hope everyone is going to enjoy it.

0:02:10.869,0:02:13.181
Uhm, I would like to mention really

0:02:13.181,0:02:15.632
quickly Mozilla and all the events we do

0:02:15.632,0:02:17.332
have Code of Conduct. Uh,

0:02:17.332,0:02:20.422
there is a lot of words here. But just

0:02:20.422,0:02:22.911
remember that the whole point of this

0:02:22.911,0:02:25.400
event is for everyone to enjoy themselves,

0:02:25.400,0:02:28.144
to have fun, and feel welcomed. So keep

0:02:28.144,0:02:30.708
that in mind, when you are interacting

0:02:30.708,0:02:33.260
with people it will be kind, be nice, uhm

0:02:33.260,0:02:35.932
it is an important part of the events we

0:02:35.932,0:02:38.419
throw to make sure that the people,

0:02:38.419,0:02:41.271
everyone who is here feels like they

0:02:41.271,0:02:43.181
belong.

0:02:43.181,0:02:45.050
So Mozilla in addition to being a

0:02:45.050,0:02:46.862
non-profit is also open source company,

0:02:46.862,0:02:48.580
and there is a lot of ways you can

0:02:48.580,0:02:50.991
join Mozilla, Uhm you can contribute to

0:02:50.991,0:02:53.922
our Code Base so all of our projects are

0:02:53.922,0:02:55.922
open source, we are always looking for

0:02:55.922,0:02:58.257
people to help us contribute code

0:02:58.257,0:03:00.490
Uh we also have something called

0:03:00.490,0:03:03.033
Outreachy which is getting diverse interns

0:03:03.033,0:03:05.510
into Mozilla, it is a fabulous program

0:03:05.510,0:03:08.760
and we are always looking for people

0:03:08.760,0:03:11.422
Uhm, We also have WebVR projects. Uh we

0:03:11.422,0:03:13.991
have our WebVR demo set up over there.

0:03:13.991,0:03:15.921
Uh, once we finish doing speakers,

0:03:15.921,0:03:17.631
you know, having talks, you are more

0:03:17.631,0:03:20.509
than welcome to go and try out some of

0:03:20.509,0:03:23.921
our VR programs. They're fun. Uh

0:03:23.921,0:03:27.465
The main we are demoing is a great way to

0:03:27.465,0:03:30.689
get familiar with VR if you aren't already

0:03:30.689,0:03:34.440
Uh, then we also are obviously always hiring here

0:03:34.440,0:03:38.229
at Mozilla, there is a career site

0:03:38.229,0:03:40.471
So everyone said there are pretty much

0:03:40.471,0:03:42.791
familiar with Firefox, how familiar are

0:03:42.791,0:03:45.071
you with the different sort of branches

0:03:45.071,0:03:46.329
of Firefox?

0:03:46.329,0:03:48.742
Does anybody here use Nightly?

0:03:48.742,0:03:51.092
Does anybody know what nightly is?

0:03:51.092,0:03:54.580
Aha! Alright good!. So we have 3 different

0:03:54.580,0:03:57.859
Branches of Firefox

0:03:57.859,0:04:00.282
We have the general release of Firefox,

0:04:00.282,0:04:02.932
That is the standard one that everyone uses.

0:04:02.932,0:04:05.502
uh that is currently what we call version 55.

0:04:05.502,0:04:08.921
So it is the 55th time we have released

0:04:08.921,0:04:12.650
Firefox. We release roughly every 6 weeks.

0:04:12.650,0:04:16.910
Uhm we are currently 55 as of next week,

0:04:16.910,0:04:20.462
Uh, we will be moving to Firefox 56 and i

0:04:20.462,0:04:22.652
will talk a minute about what that

0:04:22.652,0:04:23.932
all means.

0:04:23.932,0:04:25.501
Then we have a very large release

0:04:25.501,0:04:27.434
coming up in November which is our

0:04:27.434,0:04:29.691
57 which is a massive performance

0:04:29.691,0:04:32.440
increase. Uh and also the new look and

0:04:32.440,0:04:34.801
feel for Firefox.

0:04:34.801,0:04:37.432
Before the release we have what we call

0:04:37.432,0:04:39.342
the developer edition, or beta.

0:04:39.342,0:04:41.296
and this is a pre-released version of

0:04:41.296,0:04:43.577
Firefox, that is very specifically

0:04:43.577,0:04:46.342
designed for developers.

0:04:46.342,0:04:49.051
It gives you an extra 6 weeks to try out

0:04:49.051,0:04:51.691
new features as it comes out in

0:04:51.691,0:04:52.902
Firefox.

0:04:52.902,0:04:55.763
Uhm, on a fairly stable platform. I say

0:04:55.763,0:04:57.965
fairly stable because it is a pre

0:04:57.965,0:05:00.261
released channel and there is a good

0:05:00.261,0:05:02.062
chance if something coming out

0:05:02.062,0:05:03.820
says css grid which was the big release

0:05:03.820,0:05:06.420
over the summer. If you want a chance to

0:05:06.420,0:05:08.564
play with grid before it's out in production

0:05:08.564,0:05:10.909
on sort of the general production

0:05:10.909,0:05:12.910
it gives you 6 weeks to do that.

0:05:12.910,0:05:14.591
And before that we have nightly. Nightly

0:05:14.591,0:05:16.851
is exactly as it says, it is updated

0:05:16.851,0:05:20.691
nightly. So it is constantly pushing new

0:05:20.691,0:05:23.172
features, patches, changes,

0:05:23.172,0:05:26.630
so if you like to live on the wild side

0:05:26.630,0:05:29.251
Nightly, is really fun. You get you know

0:05:29.251,0:05:34.901
much earlier version and view but you are

0:05:34.901,0:05:37.502
not necessarily getting exactly the thing

0:05:37.502,0:05:40.308
that we will be showing up at our release.

0:05:40.308,0:05:44.660
Uh so nightly updated, Main update every

0:05:44.660,0:05:47.032
6 weeks or so, all of the things

0:05:47.032,0:05:50.231
follow the same timeline. Each 6 weeks

0:05:50.231,0:05:54.681
you get to see earlier. We're currently in Nightly 57

0:05:54.681,0:05:57.761
which is our big performance realease

0:05:57.761,0:06:01.012
which gets me talking about big stuff

0:06:01.012,0:06:03.780
that is happening in Firefox. Uhm,

0:06:03.780,0:06:06.812
I have been around Mozilla for 5 years and

0:06:06.812,0:06:09.111
this is going to be an amazing release

0:06:09.111,0:06:12.262
for us, it is very exciting. Huge, Huge,

0:06:12.262,0:06:15.492
increases in performance. What we are

0:06:15.492,0:06:19.893
seeing is at least twice as fast.

0:06:19.893,0:06:24.081
Internal metrics that we have been running.

0:06:24.081,0:06:26.770
What we are hearing from people who are

0:06:26.770,0:06:28.802
using nightly. is that it feels really

0:06:28.802,0:06:31.222
fast. We have been doing this switch

0:06:31.222,0:06:33.361
over to mult. process architecture that

0:06:33.361,0:06:35.532
started rolling out earlier this summer

0:06:35.532,0:06:37.591
We were pushing out more pieces that

0:06:37.591,0:06:38.682
enable that.

0:06:38.682,0:06:41.632
We also have something that we are

0:06:41.632,0:06:43.451
calling Quantum compositor.Quantum is our

0:06:43.451,0:06:45.532
project to modernize Firefox.

0:06:45.532,0:06:47.612
It is a lot of components to it.

0:06:47.612,0:06:49.781
But we are ruling out Quantum CSS.

0:06:49.781,0:06:54.561
This is a brand new engine for CSS inside

0:06:54.561,0:06:58.481
Firefox. It makes a difference. Smoother,

0:06:58.481,0:07:01.511
Faster, reduces a lot of "Jank"

0:07:01.511,0:07:03.942
Then we has Quantum Compositor.

0:07:03.942,0:07:06.862
So this is again just how we do rendering.

0:07:06.862,0:07:09.530
It is the first step toward web

0:07:09.530,0:07:11.741
rendering. Which is much bigger

0:07:11.741,0:07:14.101
project that will roll out later on

0:07:14.101,0:07:15.221
this year.

0:07:15.221,0:07:17.652
This is just how we can pile graphics.

0:07:17.652,0:07:21.392
Moving from using the CUP to using the

0:07:21.392,0:07:24.000
GPU. So we are realying on more graphics

0:07:24.000,0:07:26.651
card to do that image processing then

0:07:26.651,0:07:29.068
the computer. Which also really really

0:07:29.068,0:07:31.162
helps performance.

0:07:31.162,0:07:34.442
Then we have active tab prioritization.

0:07:34.442,0:07:36.740
So basically if you have a bunch of tabs

0:07:36.740,0:07:38.532
open, uh it focus and prioritizes the

0:07:38.532,0:07:40.122
tab that you are actually looking at.

0:07:40.122,0:07:42.060
Versus, all the things running in the

0:07:42.060,0:07:43.480
background in your other tab.

0:07:43.480,0:07:45.550
Again that gives a much better performance

0:07:45.550,0:07:47.350
We also have new features.

0:07:47.350,0:07:49.902
refreshed design, photon. because we

0:07:49.902,0:07:53.161
really like things like photon, electron

0:07:53.161,0:07:55.300
and cool terms like that.

0:07:55.300,0:07:58.942
It really is talking about huge shift

0:07:58.942,0:08:01.521
in the way we do things.

0:08:01.521,0:08:03.581
We are doing container tabs, this is so

0:08:03.581,0:08:06.670
you can actually open a tab, as a

0:08:06.670,0:08:08.671
container, so it is a self contained

0:08:08.671,0:08:11.751
tabs. So if you have 3 different email

0:08:11.751,0:08:14.122
accounts, you can actually have a tab for

0:08:14.122,0:08:15.831
each one. So they won't constantly

0:08:15.831,0:08:17.972
interfere with them on different

0:08:17.972,0:08:21.799
profiles. Moving to Web extensions for

0:08:21.799,0:08:24.480
add-ons. Does anybody know web extenions

0:08:24.480,0:08:26.911
or use web extensions? So Firefox has

0:08:26.911,0:08:30.582
had a very robust system of add ons.

0:08:30.582,0:08:33.582
It was built in to our underlying engine

0:08:33.582,0:08:35.331
which is called, Gecko.

0:08:35.331,0:08:37.151
Web extensions is a standard way of

0:08:37.151,0:08:39.110
building extensions onto browsers.

0:08:39.110,0:08:41.802
Chrome uses the extensions as well as all

0:08:41.802,0:08:44.122
of the other browsers in one form

0:08:44.122,0:08:46.196
or another. So we are moving to web

0:08:46.196,0:08:48.082
extensions which will also really help

0:08:48.082,0:08:48.991
performance.

0:08:48.991,0:08:51.091
But it also gives us a standard it is

0:08:51.091,0:08:52.679
much easier to use if you as a developer

0:08:52.679,0:08:54.860
want to build an extension to a browser.

0:08:54.860,0:08:56.448
you can have it working on chrome and

0:08:56.448,0:08:59.180
Firefox. So forth and so on. As opposed

0:08:59.180,0:09:02.021
write the code for each one of them.

0:09:02.021,0:09:04.672
Ans understand all of the underlying

0:09:04.672,0:09:06.772
characteristics of each engine.

0:09:06.772,0:09:08.722
So it is a really helpful thing

0:09:08.722,0:09:10.053
for people.

0:09:10.053,0:09:11.831
There is something called activity stream.

0:09:11.831,0:09:13.571
Which is changing how the content

0:09:13.571,0:09:15.610
shows up on a new tab.

0:09:15.610,0:09:18.847
Our developer tools is next, does anyone here

0:09:18.847,0:09:22.662
write css? anybody? Yeah? I know you do.

0:09:22.662,0:09:25.803
Haha, Uhm so we have a CSS layout panel

0:09:25.803,0:09:28.463
Earlier this year we launched the CSS

0:09:28.463,0:09:30.721
grid inspector which is really awesome.

0:09:30.721,0:09:32.971
Uh we have expanded that capability.

0:09:32.971,0:09:35.191
so there is actually a panel within the

0:09:35.191,0:09:37.783
Firefox developer tools, that let you do

0:09:37.783,0:09:40.740
deeper examination of your CSS.

0:09:40.740,0:09:44.150
Particularly around things like Grid and Flexbox.

0:09:44.150,0:09:46.711
We have a new design and themes.

0:09:46.711,0:09:48.890
we are going a refresh look of Firefox.

0:09:48.890,0:09:50.530
And we're also doing.....

0:09:50.530,0:09:52.610
In the spirit of really supporting the

0:09:52.610,0:09:55.280
web extensions. Our dove tools are going

0:09:55.280,0:09:57.884
to be moving to becoming web extensions

0:09:57.884,0:10:00.178
as opposed as to in the actual engine of Firefox.

0:10:00.178,0:10:02.193
This lets us do updates faster.

0:10:02.193,0:10:04.143
And be a lot more responsive.

0:10:04.143,0:10:06.153
I'm going to pause here.

0:10:06.153,0:10:08.793
I am going to pause here. Am I talking

0:10:08.793,0:10:11.172
too fast? I talk really fast usually.

0:10:11.172,0:10:13.783
Is everything ok? You guys good?

0:10:13.783,0:10:15.942
Alright!

0:10:15.942,0:10:18.003
So as I mention earlier, I a part of

0:10:18.003,0:10:20.274
developer outreach. We sit in Moziilla'a

0:10:20.274,0:10:21.932
emerging technologies group

0:10:21.932,0:10:24.652
which is a combination of research, R&D,

0:10:24.652,0:10:27.681
and then thinking broadly, sort of long

0:10:27.681,0:10:29.526
term about webstack.

0:10:29.526,0:10:32.333
Uhm, what happens in ET in addition to all

0:10:32.333,0:10:35.023
of our developer work. Is we are building

0:10:35.023,0:10:36.762
research projects.

0:10:36.762,0:10:39.691
A lot of those research projects are aimed

0:10:39.691,0:10:41.810
at thinking how well the web

0:10:41.810,0:10:43.862
and the internet, look in 3, to 5, to 10

0:10:43.862,0:10:46.975
years. Uhm some projects that have come

0:10:46.975,0:10:49.310
out of that is uh the Rust Language.

0:10:49.310,0:10:52.053
Does anybody here know the Rust Language?

0:10:52.053,0:10:54.723
Uhm, Rust is a new programming language

0:10:54.723,0:10:57.363
uh it was primarily built to address

0:10:57.363,0:11:00.661
some of the issues with C++

0:11:00.661,0:11:04.247
Uhm, and sort of service side programming.

0:11:04.247,0:11:07.265
Uhm, it, one of the strongest features is

0:11:07.265,0:11:10.483
enhanced security. We are using Rust

0:11:10.483,0:11:13.252
to build a lot of the new components

0:11:13.252,0:11:15.723
of our Firefox engine, and sort of pushing

0:11:15.723,0:11:18.340
those architecture into the browser.

0:11:18.340,0:11:20.312
One of those is something called Servo.

0:11:20.312,0:11:22.573
so again that is our engine. Uhm, we're

0:11:22.573,0:11:24.672
not replacing Gecko, which was the

0:11:24.672,0:11:26.882
original engine of Firefox, we are

0:11:26.882,0:11:29.372
taking the best parts of servo and

0:11:29.372,0:11:31.572
embedding those into the browser.

0:11:31.572,0:11:34.094
Replacing those older and outdated

0:11:34.094,0:11:36.171
elements. Uhm we are also working on

0:11:36.171,0:11:38.464
WebAssesmbly, which is uh essentially

0:11:38.464,0:11:41.322
functions as a virtual CPU in your browser

0:11:41.322,0:11:43.975
its complies things, It was originally

0:11:43.975,0:11:46.574
designed for speeding up gaming and

0:11:46.574,0:11:49.444
giving gaming and the browser. the same

0:11:49.444,0:11:54.122
type of performance you have in games.

0:11:54.122,0:11:56.132
but it has a lot of applications

0:11:56.132,0:11:57.904
for web developers as well.

0:11:57.904,0:12:00.034
because that type of increased performance

0:12:00.034,0:12:02.424
and the ability to have those increased preformances

0:12:02.424,0:12:04.487
and enriched experiences is something

0:12:04.487,0:12:07.630
is something that all developers want to do.

0:12:07.630,0:12:09.824
uhm, Obliviously you have WebVR and

0:12:09.824,0:12:14.302
A-frame uh fabian will be talking in dept

0:12:14.302,0:12:16.491
so I won't go too far deep into it. Uh and

0:12:16.491,0:12:19.182
then we have something called project

0:12:19.182,0:12:21.443
Quantum uh I was talking about how we

0:12:21.443,0:12:23.563
have different Firefox releases. Our big

0:12:23.563,0:12:25.960
release in Nov. of 57. Uhm, we also call

0:12:25.960,0:12:27.991
that release Firefox Quantum because so

0:12:27.991,0:12:30.382
much of this long term quantum project is

0:12:30.382,0:12:33.694
rolloing into that release. Uhm that is really

0:12:33.694,0:12:37.220
taking Servo and upgrading CSS style

0:12:37.220,0:12:42.203
program. We have a project called Stylo,

0:12:42.203,0:12:45.203
Which is upgrading our CSS engine which is

0:12:45.203,0:12:48.453
and graphics processing so much smoother

0:12:48.453,0:12:51.483
and much faster. And again we have

0:12:51.483,0:12:54.012
moving towards Webrender which is again

0:12:54.012,0:12:56.592
Sort moving toward that graphics and

0:12:56.592,0:12:59.291
doing our processing the graphics

0:12:59.291,0:13:01.202
processor to as opposed to the CPU.

0:13:01.202,0:13:03.322
We have a lot of other things we are

0:13:03.322,0:13:05.723
working on so mixed reality

0:13:05.723,0:13:07.853
Uh we are doing a lot of projects around

0:13:07.853,0:13:09.742
speech, and keeping sort of things

0:13:09.742,0:13:12.013
much more open source.

0:13:12.013,0:13:13.643
Uhm, There is a lot of stuff. uh if you

0:13:13.643,0:13:15.131
are interested in experimenting

0:13:15.131,0:13:16.572
with things i highly recommend

0:13:16.572,0:13:18.823
downloading Firefox nightly. Uhm

0:13:18.823,0:13:20.461
Like I said it's a little bit of a walk on

0:13:20.461,0:13:22.522
the wild side. But is it a good chance

0:13:22.522,0:13:24.175
to really see how is the browser

0:13:24.175,0:13:27.823
Evolving? Quickly? Uhm trail web extensions

0:13:27.823,0:13:33.672
are really looking for more of those. uhm

0:13:33.672,0:13:35.854
try out A frame. Uh and then you know we

0:13:35.854,0:13:39.132
have WebAssesmbly there is a lot of

0:13:39.132,0:13:43.163
components that you can use to build

0:13:43.163,0:13:45.412
sort of those really rich experiences.

0:13:45.412,0:13:47.632
Uh Lynn Clark who works at Mozilla has

0:13:47.632,0:13:51.582
done a fantastic series of blog posts.

0:13:51.582,0:13:54.381
uh written in cartoons, to really dig it

0:13:54.381,0:13:56.970
into what WebAssesmbly is and sort of the

0:13:56.970,0:13:59.313
benefits uh if you look at Mozilla Hacks

0:13:59.313,0:14:01.904
and look for WebAssesmbly is a whole

0:14:01.904,0:14:04.234
article that I highly recommend

0:14:04.234,0:14:06.630
Uhm and we also have out speech projects

0:14:06.630,0:14:09.746
And what we are doing with speech is in a

0:14:09.746,0:14:11.400
sort of standard Mozilla tradition is

0:14:11.400,0:14:13.029
keeping the internet open

0:14:13.029,0:14:15.233
we are looking at the world of voice and

0:14:15.233,0:14:17.513
uh speech and uh seeing that is

0:14:17.513,0:14:22.172
more and more dominated by people like

0:14:22.172,0:14:24.543
google. Who are really interested in

0:14:24.543,0:14:26.612
keeping their systems closed. Uhm and we

0:14:26.612,0:14:29.043
feel like all developers should

0:14:29.043,0:14:32.130
Be able to access an open source.

0:14:32.130,0:14:34.202
So things like voice and speech. So we

0:14:34.202,0:14:36.853
actually have a project called common

0:14:36.853,0:14:38.971
voice. Which we are having people record

0:14:38.971,0:14:41.282
their voices. and languages. And making

0:14:41.282,0:14:43.416
those available Open source project,

0:14:43.416,0:14:47.452
so developers want to build out more

0:14:47.452,0:14:50.901
voice or speech capabilities, you're not

0:14:50.901,0:14:53.524
stuck in one ecosystem.

0:14:53.524,0:14:55.483
Or paying a specific provider.You'll

0:14:55.483,0:14:58.362
have those for you. So common voice and

0:14:58.362,0:15:00.800
speech are things that we are investing in

0:15:00.800,0:15:05.201
and trying to. and moving forward as Mozilla.

0:15:05.201,0:15:07.339
That is a very fast, quick

0:15:07.339,0:15:10.202
review of Firefox and our emerging

0:15:10.202,0:15:12.262
technologies. Uhm I will be around after

0:15:12.262,0:15:14.711
if you have any questions or like I said

0:15:14.711,0:15:16.812
you can always find on on Twitter. Uh and

0:15:16.812,0:15:19.209
now I would like to welcome Fabian to

0:15:19.209,0:15:21.325
talk about Web V&R and webframe.

0:15:21.325,0:15:24.353
(Crowd applause)