WEBVTT 00:00:00.006 --> 00:00:02.306 Hello everyone. 00:00:02.306 --> 00:00:07.840 [FOREIGN] My name is David. 00:00:09.080 --> 00:00:10.290 I'm David Catuhe. 00:00:10.290 --> 00:00:15.870 I'm working for Microsoft DX, and my focus is on 00:00:15.870 --> 00:00:20.650 the Open Web standards and obviously for Microsoft Edge. 00:00:20.650 --> 00:00:23.520 I will do that all along this session, 00:00:23.520 --> 00:00:27.640 trying to not say Microsoft Spot on and just saying Microsoft Edge, so 00:00:27.640 --> 00:00:29.750 please bear with me. 00:00:29.750 --> 00:00:31.070 I'm here with David. 00:00:31.070 --> 00:00:32.320 >> Hello. So, I'm doing 00:00:32.320 --> 00:00:34.020 more of the same things, and 00:00:34.020 --> 00:00:37.300 I'm working as the Senior Program Manager on the same stuff. 00:00:37.300 --> 00:00:40.970 >> So yeah, today we will present to you the inner core 00:00:40.970 --> 00:00:42.830 of Microsoft Edge. 00:00:42.830 --> 00:00:45.990 And mostly we will try to focus on the new features 00:00:45.990 --> 00:00:47.590 that we added on it. 00:00:47.590 --> 00:00:51.600 And we just want to do a little introduction before, 00:00:51.600 --> 00:00:53.960 to explain you why a new browser? 00:00:55.210 --> 00:00:56.455 What's inside? 00:00:56.455 --> 00:00:59.185 And then we'll go to do some coding. 00:00:59.185 --> 00:01:00.185 >> And a lot of demos. 00:01:00.185 --> 00:01:03.455 >> Yeah, so please, submit an evaluation. 00:01:03.455 --> 00:01:05.125 There are some prizes to win. 00:01:05.125 --> 00:01:06.725 Just use the QR code here. 00:01:06.725 --> 00:01:09.435 I think you are used to that. 00:01:10.435 --> 00:01:13.700 So the agenda, three parts, why a new engine? 00:01:13.700 --> 00:01:17.400 Then, what modern web interoperability means today, and 00:01:17.400 --> 00:01:20.267 obviously we'll focus then on features and code. 00:01:21.540 --> 00:01:23.230 Just a quick poll. 00:01:23.230 --> 00:01:25.090 Who is a web developer? 00:01:26.530 --> 00:01:27.670 I love you guys. 00:01:27.670 --> 00:01:29.830 I love user one obviously as well. 00:01:29.830 --> 00:01:33.310 [LAUGH] But that's a big bunch of people, and 00:01:33.310 --> 00:01:35.910 I can remember the last year, when we asked this question, 00:01:35.910 --> 00:01:40.830 it was perhaps 20% of the room, and I think it's like 50 now. 00:01:40.830 --> 00:01:42.380 That's a good evaluation. 00:01:42.380 --> 00:01:43.690 So, first question. 00:01:43.690 --> 00:01:44.880 Why creating a new engine? 00:01:44.880 --> 00:01:46.780 Why creating a new browser? 00:01:46.780 --> 00:01:50.520 So, to just give you a little bit of vocabulary, 00:01:50.520 --> 00:01:52.570 it is how a browser is working. 00:01:52.570 --> 00:01:54.790 We have the Window itself. 00:01:54.790 --> 00:01:55.820 What we call the Chrome. 00:01:55.820 --> 00:01:58.460 It is not easy to use when we deal with browser, so 00:01:58.460 --> 00:02:00.360 let's call it a Window. 00:02:00.360 --> 00:02:04.760 And inside that Window, we have the Web Platform itself, meaning the DLL 00:02:04.760 --> 00:02:09.430 and all the C++ code that handle all the things related to HTML, 00:02:09.430 --> 00:02:14.900 JavaScript, CSS in order to render a picture of your page, okay? 00:02:14.900 --> 00:02:18.420 For IE the name of the Web Platform is Trident. 00:02:18.420 --> 00:02:22.190 We have obviously the same story for Chrome, and 00:02:22.190 --> 00:02:25.760 the name of the Web Platform this time is Blink. 00:02:25.760 --> 00:02:30.870 We have WebKit for Safari, and we have Gecko for Firefox. 00:02:30.870 --> 00:02:32.830 But we all work the same way, a Window, and 00:02:32.830 --> 00:02:34.690 inside, a Web Platform, okay? 00:02:34.690 --> 00:02:35.450 A rendering engine. 00:02:37.400 --> 00:02:38.502 Just a little bit of history. 00:02:38.502 --> 00:02:42.860 20 years ago, we started 00:02:42.860 --> 00:02:47.820 in 1995 with a very first version of Internet Explorer, 20 years ago. 00:02:47.820 --> 00:02:51.450 When we talk about computer science, it's like dinosaurs. 00:02:52.740 --> 00:02:54.510 At that time we created a very first version. 00:02:54.510 --> 00:02:57.330 But let's just move to IE6. 00:02:57.330 --> 00:03:01.210 IE6 was the very first version where we introduced a new toy, 00:03:02.370 --> 00:03:05.130 the !DOCTYPE. 00:03:05.130 --> 00:03:10.163 It was an idea for us to address in the same time, new features and 00:03:10.163 --> 00:03:14.102 back work compatibility. 00:03:15.470 --> 00:03:18.010 We wanted to add a lot of new features inside IE 00:03:18.010 --> 00:03:20.330 without breaking the web. 00:03:20.330 --> 00:03:23.080 So we said, okay, let's consider 00:03:23.080 --> 00:03:28.632 if the web developer put bank.type at the very beginning of the page. 00:03:28.632 --> 00:03:30.440 We consider it's a trigger for 00:03:30.440 --> 00:03:35.880 us to use the very new feature that we added in IE6. 00:03:35.880 --> 00:03:37.428 But because we don't want to break the web, 00:03:37.428 --> 00:03:42.830 we outsource report the previous version like IE5 etc. 00:03:42.830 --> 00:03:46.470 We call that the doc mode, document mode. 00:03:46.470 --> 00:03:51.670 The doc mode is a compact flag inside our code that turns on and 00:03:51.670 --> 00:03:54.400 off any specific feature we have. 00:03:54.400 --> 00:03:58.584 We can just imagine that inside iCode, there are a dozen of if. 00:03:58.584 --> 00:04:01.306 If IE6, then I can do that. 00:04:01.306 --> 00:04:04.050 If IE5, then I cannot do that. 00:04:04.050 --> 00:04:05.330 Okay? 00:04:05.330 --> 00:04:07.969 And for IE6, we had at that time, 00:04:07.969 --> 00:04:11.330 inside the same engine, two doc mode. 00:04:11.330 --> 00:04:15.680 So, it can be a combination of two if, actually. 00:04:15.680 --> 00:04:18.170 If this for any version, then we can do that. 00:04:18.170 --> 00:04:21.570 If not this specific version, then we cannot do that. 00:04:23.040 --> 00:04:24.930 Moving forward, let's go to IE8. 00:04:27.160 --> 00:04:30.690 With IE8 we introduced a third document mode. 00:04:30.690 --> 00:04:33.130 Same story here actually. 00:04:33.130 --> 00:04:34.960 We took this concept further. 00:04:34.960 --> 00:04:38.260 Three document mode, so mode if inside the code. 00:04:39.490 --> 00:04:43.757 Always keep in mind that we wanted to provide new 00:04:43.757 --> 00:04:47.712 features without breaking the web, okay? 00:04:47.712 --> 00:04:49.151 And then. 00:04:49.151 --> 00:04:52.481 Let's move to IE11. 00:04:52.481 --> 00:04:54.457 Guess what? 00:04:54.457 --> 00:04:58.315 At that time, we knew that there were a problem. 00:04:58.315 --> 00:05:03.200 >> [LAUGH] >> It's not possible. 00:05:03.200 --> 00:05:08.230 The developer that created IEngine were really brave guys. 00:05:08.230 --> 00:05:12.880 Let's imagine we have bunch of if IE11 and not 10 but 00:05:12.880 --> 00:05:17.080 8 and whatever, it was just really complicated to do. 00:05:17.080 --> 00:05:21.679 But we do that because I worked for Chris at that time, was compat, 00:05:21.679 --> 00:05:25.320 backward compat. 00:05:25.320 --> 00:05:29.750 In the same time, Chrome, 00:05:29.750 --> 00:05:33.740 Firefox, Opera, Safari are what we call evergreen. 00:05:33.740 --> 00:05:37.540 That means they just have one specific version. 00:05:37.540 --> 00:05:41.890 They don't have if Chrome 31 or if Chrome 32, whatever. 00:05:41.890 --> 00:05:45.240 They just have all the feature always available. 00:05:45.240 --> 00:05:49.070 And they are updated quite frequently. 00:05:50.640 --> 00:05:52.940 It was not a fair game for us. 00:05:54.660 --> 00:05:56.890 So we decided to introduce a new browser. 00:05:56.890 --> 00:05:58.850 The idea it's pretty simple actually, 00:05:58.850 --> 00:06:01.530 let's keep IE11 from backward compatibility. 00:06:01.530 --> 00:06:03.680 We won't touch IE11 anymore. 00:06:03.680 --> 00:06:07.296 It would be under the [INAUDIBLE] if we acquired for enterprise, 00:06:07.296 --> 00:06:11.650 or for a specific feature that are not supported by the modern web. 00:06:11.650 --> 00:06:13.970 We call that the legacy features. 00:06:13.970 --> 00:06:17.100 We don't want to break the web, but we want to go and 00:06:17.100 --> 00:06:20.270 to provide a better experience for our web developers. 00:06:20.270 --> 00:06:25.380 So, let's introduce Microsoft Edge, based on the new 00:06:25.380 --> 00:06:29.900 DLL that is a fork of Trident, and I'll get back to that after, and 00:06:29.900 --> 00:06:33.340 that will span across all our Windows 10 devices. 00:06:33.340 --> 00:06:37.340 And you can see here will have, it's not spot on but 00:06:37.340 --> 00:06:40.680 Edge on your Windows phone, on your tablet, on your PC. 00:06:40.680 --> 00:06:45.969 And that's something I really love, to be honest with you. 00:06:45.969 --> 00:06:50.470 [LAUGH] And talking about the new browser, 00:06:51.520 --> 00:06:54.240 obviously we need to talk about inter-operability with 00:06:54.240 --> 00:06:57.160 the web itself, and with other browser vendors. 00:06:57.160 --> 00:07:01.470 And David, can you give us more information about that? 00:07:01.470 --> 00:07:05.110 >> Yes, so today when you are using the web, addressing the web, 00:07:05.110 --> 00:07:09.260 there is a variety of devices you can target, so it's huge, so 00:07:09.260 --> 00:07:14.060 it's tablets, PCs, phones, TVs, even. 00:07:14.060 --> 00:07:15.710 >> Fridge. >> A lot of them. Fridge. 00:07:15.710 --> 00:07:16.720 Yeah, in your case fridge, 00:07:16.720 --> 00:07:17.260 that's right. 00:07:17.260 --> 00:07:18.970 >> We have a connected fridge. 00:07:18.970 --> 00:07:23.200 >> The idea isn't to write once and to run everywhere, this is a dream. 00:07:23.200 --> 00:07:26.460 Then, you see that there is a specification. 00:07:27.990 --> 00:07:32.115 Writing specification as browser vendors is a bit complex. 00:07:32.115 --> 00:07:33.124 It takes time. 00:07:33.124 --> 00:07:34.186 For instance, 00:07:34.186 --> 00:07:39.600 HTML file specification is more than 600 pages to read and to review. 00:07:39.600 --> 00:07:43.590 So, we're doing that, we're writing browsers together. 00:07:43.590 --> 00:07:46.900 But the web developers sometimes, are not reading the specifications. 00:07:46.900 --> 00:07:48.760 >> Sometimes, which I can't understand. 00:07:48.760 --> 00:07:49.260 >> Yeah. 00:07:50.980 --> 00:07:52.730 And, but it works well most of the time. 00:07:52.730 --> 00:07:57.660 On the desktop power for instance, if you have a look to this side. 00:07:57.660 --> 00:08:01.700 Now, if you're using modern version of Firefox from an Internet Explorer 00:08:01.700 --> 00:08:04.000 11 or to the Microsoft Edge. 00:08:04.000 --> 00:08:06.680 Well most of the time you won't have much problem 00:08:06.680 --> 00:08:09.250 building the website for all the decks of browser. 00:08:09.250 --> 00:08:13.410 So on the desktop side, I get the dream is there. 00:08:13.410 --> 00:08:14.420 Almost there, almost. 00:08:15.730 --> 00:08:19.130 Let's switch to the mobile version. 00:08:20.850 --> 00:08:24.505 On the mobile space, you can see that the same size is being run on 00:08:24.505 --> 00:08:28.810 Firefox OS, on Safari Mobile, on an iPhone for 00:08:28.810 --> 00:08:32.670 instance, and Internet Explorer, Element and Window's Phone. 00:08:32.670 --> 00:08:36.400 And you can see that there is some values rendering problem, and 00:08:36.400 --> 00:08:39.160 let's try to understand why we have this problems. 00:08:39.160 --> 00:08:40.550 >> Absolutely David. 00:08:40.550 --> 00:08:43.770 So we have this problem, we try here to capture, 00:08:43.770 --> 00:08:48.010 it's not scientific it's not something proportional or whatever. 00:08:48.010 --> 00:08:53.100 It's just a way for me to explain to you how the web is working. 00:08:53.100 --> 00:08:55.540 We have browser Windows, and 00:08:55.540 --> 00:08:59.730 they have their own implementation of some specific stuff. 00:08:59.730 --> 00:09:02.187 But most of the time we try to work on what we call the core of the 00:09:02.187 --> 00:09:06.180 inter-operable intersection where the web just works everywhere, okay? 00:09:07.380 --> 00:09:10.710 When we think about the mobile web it's a little bit different, because 00:09:10.710 --> 00:09:16.270 most of the time web developer created mobile website for web kit. 00:09:16.270 --> 00:09:20.510 And it was a little bit complicated, even for Firefox. 00:09:20.510 --> 00:09:23.140 And IE need to go this way. 00:09:23.140 --> 00:09:25.600 So, here comes Edge. 00:09:25.600 --> 00:09:29.790 And for Edge, the very first thing that we did was to get rid of 00:09:29.790 --> 00:09:32.540 all the specific ice turf we had. 00:09:32.540 --> 00:09:34.968 So, we remove this blue part at the bottom. 00:09:34.968 --> 00:09:39.270 Think about attachments. 00:09:39.270 --> 00:09:44.040 Instead of using advent listener, we add back in time attachments, 00:09:44.040 --> 00:09:45.280 which is just fine. 00:09:45.280 --> 00:09:49.040 And I can see, even today, even on [INAUDIBLE] or things like that 00:09:49.040 --> 00:09:52.670 I can see if attachment, and use attachment instead. 00:09:52.670 --> 00:09:54.878 If it's not present then use. 00:09:54.878 --> 00:09:56.503 We removed that. 00:09:56.503 --> 00:09:58.671 We just want things that work everywhere. 00:09:58.671 --> 00:10:01.336 And then we added a lot of. 00:10:01.336 --> 00:10:06.474 Interoperable fixes and features to ensure that our connection 00:10:06.474 --> 00:10:11.470 with the Interoperable intersection is bigger, okay? 00:10:11.470 --> 00:10:17.380 So David, if we can just think about web standards here. 00:10:17.380 --> 00:10:20.810 Microsoft obviously works towards web standards. 00:10:20.810 --> 00:10:23.480 That's the way of walking. 00:10:23.480 --> 00:10:25.434 But as you mentioned, we have to be pragmatic. 00:10:25.434 --> 00:10:33.550 And the way things are working, the way things should work, 00:10:33.550 --> 00:10:37.530 actually, is that web developer should guide the spec. 00:10:38.550 --> 00:10:41.990 So what we decided was to be pragmatic, as I mentioned before. 00:10:41.990 --> 00:10:45.790 We will work with web standards but sometimes we have to update or 00:10:45.790 --> 00:10:47.290 align specifications. 00:10:47.290 --> 00:10:50.610 Sometimes we will have to fix libraries out there. 00:10:50.610 --> 00:10:54.480 Sometimes we will have to provide web feedbacks to other browsers and 00:10:54.480 --> 00:10:59.180 obviously anytime we want to work, we will fix our own browsers. 00:10:59.180 --> 00:11:03.080 The way we want the web to work is it should just work. 00:11:03.080 --> 00:11:05.490 You open a webpage with Edge. 00:11:05.490 --> 00:11:07.070 It should work, okay? 00:11:08.490 --> 00:11:09.910 And obviously, as I mentioned before, 00:11:09.910 --> 00:11:13.760 we can provide bugs to libraries or any browser window. 00:11:13.760 --> 00:11:16.900 So it's not just about us actually. 00:11:16.900 --> 00:11:20.290 It's also about how we are seen by users. 00:11:20.290 --> 00:11:24.090 So let's review some samples to give you an idea how we've managed to fix 00:11:24.090 --> 00:11:26.950 some of the things quite easily. 00:11:26.950 --> 00:11:29.340 Let's reboot the page on the left, 00:11:29.340 --> 00:11:33.210 before we introduce some of the fixes for our web server. 00:11:33.210 --> 00:11:37.710 So, it was running on Windows phone and IE. 00:11:38.980 --> 00:11:43.150 And it wasn't working well because on the website parts, 00:11:43.150 --> 00:11:47.620 people have probably think of you overcoming with iPhone or 00:11:47.620 --> 00:11:50.430 Android and was doing by something on the web server. 00:11:50.430 --> 00:11:52.000 If it is Android or 00:11:52.000 --> 00:11:55.860 it is WebKit, then please provide the mobile version of the website. 00:11:55.860 --> 00:11:58.820 If not then provide the desktop version of the website. 00:11:58.820 --> 00:12:02.800 The problem for us is that IE was a mobile version of IE running on 00:12:02.800 --> 00:12:07.810 Windows phone and we added then the mobile, another mobile version. 00:12:07.810 --> 00:12:12.740 So to change that, we just introduce a specific 00:12:12.740 --> 00:12:17.740 way to, we found a skeleton key in the UID, in fact. 00:12:17.740 --> 00:12:21.680 So the way is just to say that we are not on the IE, 00:12:21.680 --> 00:12:25.190 we are also acting like Server E or Android. 00:12:25.190 --> 00:12:28.510 And the way that the web server code will think that we are an iPhone and 00:12:28.510 --> 00:12:32.270 an Android devices and will service the content for the mobile. 00:12:32.270 --> 00:12:36.560 And it will to work directly because there was no problem 00:12:36.560 --> 00:12:39.020 on the run ring part of JavaScript engine. 00:12:39.020 --> 00:12:42.240 It was just some bad detection of the server side 00:12:42.240 --> 00:12:44.709 that was breaking the run ring on the mobile's version. 00:12:46.510 --> 00:12:50.060 So we decided to change our User-Agent. 00:12:50.060 --> 00:12:53.990 So I guess you all know User-Agent strings. 00:12:53.990 --> 00:12:57.450 And let's go back in the history again of the first one, 00:12:57.450 --> 00:12:59.800 which introduced it, which is Netscape. 00:12:59.800 --> 00:13:03.240 And we're using the Mozilla 5 version. 00:13:03.240 --> 00:13:06.420 And everybody has been mixing all the steps. 00:13:06.420 --> 00:13:10.720 So we're all playing the same game when Chrome entered the game and 00:13:10.720 --> 00:13:15.190 decided to introduce a like Gecko things to add to 00:13:15.190 --> 00:13:16.678 Firefox version the code. 00:13:16.678 --> 00:13:20.200 The web server was sniffing that and today you can see that, 00:13:20.200 --> 00:13:22.905 everybody is being copy pasting the different version. 00:13:22.905 --> 00:13:25.640 So the idea is really not to do that anymore, 00:13:25.640 --> 00:13:31.490 to use some feature detection rather than sniffing the UA. 00:13:31.490 --> 00:13:33.010 Some other interesting things. 00:13:33.010 --> 00:13:36.300 So we're gonna go to a website that wasn't working well on 00:13:36.300 --> 00:13:38.440 IE11 one Windows 8.1. 00:13:38.440 --> 00:13:41.070 The main problem was due to the fact that, 00:13:41.070 --> 00:13:43.620 the code was using some prefixes. 00:13:43.620 --> 00:13:48.750 So prefixes were used to enable you to test some new features. 00:13:48.750 --> 00:13:49.390 So for instance, 00:13:49.390 --> 00:13:53.630 here, the website was using the -webkit trial edition version. 00:13:53.630 --> 00:13:56.520 Problem is that -webkit is not being used by IE. 00:13:56.520 --> 00:13:59.440 Obviously, you see, we're using Trident, as we were saying. 00:13:59.440 --> 00:14:01.690 So to manage to solve this problem, 00:14:01.690 --> 00:14:07.300 we decided to add some of the -webkit's specific feature, CSS, 00:14:07.300 --> 00:14:12.190 to the startup version being used by IE and today, Microsoft Edge. 00:14:12.190 --> 00:14:13.110 Just by doing that, 00:14:13.110 --> 00:14:16.890 then we've been fixing a lot of problem on the web, because the code 00:14:16.890 --> 00:14:19.950 will not update it to the last version of the specification. 00:14:19.950 --> 00:14:23.260 And we were using the last version of the specification. 00:14:23.260 --> 00:14:25.160 >> Yeah, that's an interesting point here. 00:14:25.160 --> 00:14:28.450 It was working the web rendering engine was working but 00:14:28.450 --> 00:14:31.900 we were not receiving the right dash something. 00:14:31.900 --> 00:14:34.430 We were receiving not dash MS or nothing so 00:14:34.430 --> 00:14:36.010 it's really the problem here. 00:14:36.010 --> 00:14:39.585 >> So the idea when we, well all the [INAUDIBLE] was thinking about 00:14:39.585 --> 00:14:43.470 letting you playing with some new features was prefixes. 00:14:43.470 --> 00:14:47.000 What it sounds like a good idea at that time. 00:14:47.000 --> 00:14:51.990 But now the new version of using experimental features would be 00:14:51.990 --> 00:14:55.690 to use rather the About:flags things like you can have in Chrome and 00:14:55.690 --> 00:14:57.130 now in Microsoft Edge. 00:14:57.130 --> 00:14:59.370 So just by typing that in the address bar, 00:14:59.370 --> 00:15:02.350 you can enable some experimental features. 00:15:02.350 --> 00:15:06.080 So if the user don't have that in the browser, it won't break. 00:15:06.080 --> 00:15:09.660 And if the feature becomes then stored in the following program, 00:15:09.660 --> 00:15:11.830 you can, we move it from the other flag. 00:15:11.830 --> 00:15:13.120 >> And you won't have to change your code? 00:15:13.120 --> 00:15:14.110 >> You won't have to change your code. 00:15:14.110 --> 00:15:15.290 It will enable by default. 00:15:18.360 --> 00:15:22.300 So how could you, well pay attention to some things. 00:15:22.300 --> 00:15:26.710 So please don't use sniffing, do feature detections, 00:15:26.710 --> 00:15:28.030 it's really important. 00:15:28.030 --> 00:15:31.020 Because by default you have to the that a new browser and 00:15:31.020 --> 00:15:33.130 unknown browser are good by default. 00:15:33.130 --> 00:15:34.640 So let's imagine that today. 00:15:34.640 --> 00:15:35.480 I don't know. 00:15:35.480 --> 00:15:40.660 Most of you write a new program with a new name, and new user address. 00:15:40.660 --> 00:15:43.552 But it will be good because it will be modern. 00:15:43.552 --> 00:15:45.083 So you don't have to sniff it. 00:15:45.083 --> 00:15:46.230 And please fill some bags. 00:15:46.230 --> 00:15:47.720 So we are all filling bags today. 00:15:47.720 --> 00:15:52.100 So you have bunch of bug bays you can fill, so at mosy@google. 00:15:52.100 --> 00:15:55.350 And now you can also send us some bugs that you tell us 00:15:55.350 --> 00:15:57.860 that are problem we may have in our rendering engine. 00:15:57.860 --> 00:16:01.025 Just by sending some simple code like on JSFiddle or 00:16:01.025 --> 00:16:04.070 them,and we will review it and try to fix our engine. 00:16:05.800 --> 00:16:08.680 >> Yep, so enough about story and why we did that and 00:16:08.680 --> 00:16:10.800 more about new features that we added. 00:16:10.800 --> 00:16:17.560 So just a little point before One engine, we know means faster pace. 00:16:18.710 --> 00:16:21.080 That's obvious we won't have to spend time. 00:16:21.080 --> 00:16:25.061 Just think if all the bunch of if that we had in the time is still 00:16:25.061 --> 00:16:27.440 working with the new feature we add. 00:16:27.440 --> 00:16:28.320 So that's easy for 00:16:28.320 --> 00:16:31.690 us and here is this new feature that's we are working on. 00:16:31.690 --> 00:16:36.124 It's just an extract of the status.modern.ie 00:16:36.124 --> 00:16:38.480 website is our roadmap. 00:16:38.480 --> 00:16:40.260 What are we working on? 00:16:40.260 --> 00:16:41.930 What is already done. 00:16:41.930 --> 00:16:45.026 Everything here is public. 00:16:45.026 --> 00:16:49.164 You just have to go to status.modern.ie to find a lot of 00:16:49.164 --> 00:16:50.579 steps that we did. 00:16:50.579 --> 00:16:55.451 We did millions of new stuff just to ensure that we know the path 00:16:55.451 --> 00:16:59.210 in the interoperable section is working well. 00:16:59.210 --> 00:17:03.876 We had new features, we did fixes for interoperable ability. 00:17:03.876 --> 00:17:07.339 More about it just go to status.modern.ie you may find every 00:17:07.339 --> 00:17:09.146 information that you may want. 00:17:09.146 --> 00:17:12.251 And also you will find things that we are working on and 00:17:12.251 --> 00:17:14.670 things that we are considering so far. 00:17:14.670 --> 00:17:17.359 So just waiting for a good reason to implement them. 00:17:18.990 --> 00:17:23.510 So, let's have a look at what is possible today with Edge. 00:17:23.510 --> 00:17:24.410 Okay? 00:17:24.410 --> 00:17:25.850 So, I'll switch to the six. 00:17:29.880 --> 00:17:34.520 The very first demo I want to show is this one. 00:17:34.520 --> 00:17:38.230 This demo was developed with a friend of ours, Michel Rousseau, 00:17:38.230 --> 00:17:40.570 who is a designer, a 3D designer. 00:17:40.570 --> 00:17:45.550 And we did for us 3D object inside 3Ds Max. 00:17:47.440 --> 00:17:51.865 No plug-in only Microsoft Edge, this features webGL, 00:17:51.865 --> 00:17:53.870 web-OGO and Game Pad. 00:17:53.870 --> 00:17:58.820 So let me just enable the Game Pad here, find the Game Pad somewhere. 00:17:58.820 --> 00:18:00.100 >> The right Game Pad. 00:18:00.100 --> 00:18:02.595 >> Yeah because >> Think its the right one. 00:18:02.595 --> 00:18:04.010 >> Yep. 00:18:04.010 --> 00:18:07.810 >> And can we just turn on, turn off the lights is that possible 00:18:08.980 --> 00:18:12.730 perhaps no, sorry, try to go there. 00:18:12.730 --> 00:18:17.060 So this version run on my little x1 its an Intel HD card so 00:18:17.060 --> 00:18:20.850 one of the less what else we can find out there. 00:18:20.850 --> 00:18:24.490 And we can see that we are running at 60 frames per second. 00:18:24.490 --> 00:18:26.287 And with Web Audio, 00:18:26.287 --> 00:18:31.798 running to give you this wonderful atmosphere we can can say. 00:18:31.798 --> 00:18:35.535 And once again, the sound is currently following the camera 00:18:35.535 --> 00:18:39.080 [INAUDIBLE] under camera what you're looking at. 00:18:39.080 --> 00:18:41.180 Web Audio's going to compute everything for you, 00:18:41.180 --> 00:18:45.140 so you will have the ability to have some stuff. 00:18:45.140 --> 00:18:48.110 It's really easy to do it,we will see that together. 00:18:48.110 --> 00:18:49.780 So for instance, going there, 00:18:49.780 --> 00:18:53.010 you can have the marvelous skeleton playing some pianos. 00:18:53.010 --> 00:18:55.830 And if we move away from the skeleton, automatically, 00:18:55.830 --> 00:18:58.620 there is a specific distance being computer by Web Audio and 00:18:58.620 --> 00:19:00.840 you won't hear the sound anymore. 00:19:00.840 --> 00:19:03.580 And then you can move to the cemetery. 00:19:03.580 --> 00:19:06.320 We have some fun stuff over there. 00:19:06.320 --> 00:19:09.480 >> So far we found Clippy is dead. 00:19:11.350 --> 00:19:13.756 We found his ghost. 00:19:13.756 --> 00:19:15.461 >> I don't know if you remember Clippy. 00:19:15.461 --> 00:19:18.005 Who knew Clippy in the room? 00:19:18.005 --> 00:19:21.712 >> He's there. 00:19:21.712 --> 00:19:23.045 So rest in peace, Clippy. 00:19:23.045 --> 00:19:25.672 >> Maybe the with that- >> Schroedinger cat. 00:19:25.672 --> 00:19:30.212 >> We don't know if it was dead or not, so we now know it's dead. 00:19:30.212 --> 00:19:34.961 >> And finally we found that IE6 is dead. 00:19:34.961 --> 00:19:39.171 >> [APPLAUSE] 00:19:39.171 --> 00:19:43.836 >> And now long live to Spartan. 00:19:43.836 --> 00:19:50.461 >> [APPLAUSE]. 00:19:50.461 --> 00:19:53.635 >> So the main goal here is to show you that without any plugin, 00:19:53.635 --> 00:19:57.444 just web, we can do really awesome stuff like in a native application, 00:19:57.444 --> 00:19:58.090 actually. 00:19:58.090 --> 00:19:59.730 >> Just imagine having that in full screen. 00:19:59.730 --> 00:20:03.010 Nobody will probably knows or not is that PC is HTML5 running and 00:20:03.010 --> 00:20:03.990 JavaScript code. 00:20:03.990 --> 00:20:05.461 So It's pretty cool. 00:20:05.461 --> 00:20:08.907 >> Yep, and also example we demonstrated yesterday during 00:20:08.907 --> 00:20:12.610 the keynote is Flight Arcade, same story here. 00:20:12.610 --> 00:20:14.010 Can you please get, okay, so 00:20:14.010 --> 00:20:18.575 I'm just, the of this specific game, so sorry. 00:20:18.575 --> 00:20:20.170 Same thing here. 00:20:20.170 --> 00:20:20.900 >> Are you ready to fly? 00:20:20.900 --> 00:20:24.661 Use the right and left arrow keys to turn 00:20:24.661 --> 00:20:25.380 >> Sure. 00:20:25.380 --> 00:20:25.973 I did that. 00:20:25.973 --> 00:20:28.132 >> And the up and down arrow keys [CROSSTALK] [INAUDIBLE] 00:20:28.132 --> 00:20:33.339 >> Web here is not solving 00:20:35.258 --> 00:20:39.750 with the players. 00:20:39.750 --> 00:20:44.010 So if you're back layers are playing games, so. 00:20:44.010 --> 00:20:44.990 >> But thanks. 00:20:44.990 --> 00:20:47.730 Here we have durm to render all the UI. 00:20:47.730 --> 00:20:50.867 Inside the durm we have the kent blaster, we have the WebGm stuff. 00:20:50.867 --> 00:20:53.260 Webaab is used to do the sound. 00:20:53.260 --> 00:20:55.389 We have game packs we bought directly without any 00:20:56.540 --> 00:20:59.210 specific plug-in once again that's just awesome. 00:20:59.210 --> 00:21:02.000 >> And finally let's move to something else. 00:21:02.000 --> 00:21:04.730 So everything has been built on top of our 00:21:04.730 --> 00:21:06.935 favorite engine which is Babylon GS. 00:21:06.935 --> 00:21:10.490 [LAUGH] An open source web gl framework so 00:21:10.490 --> 00:21:13.700 this is the thing with showcase during the first keynote. 00:21:13.700 --> 00:21:17.690 So It's running the Pompeii city that's been 00:21:17.690 --> 00:21:19.090 rebuilt using some drones. 00:21:19.090 --> 00:21:23.150 So we take some pictures of the city and rebuild a complete 3D mesh 00:21:23.150 --> 00:21:25.940 that really use with some a lot of textures. 00:21:25.940 --> 00:21:29.870 We are using, acknowledge your 3D expert what we are naming the load. 00:21:29.870 --> 00:21:33.560 So it's a way to load the device version of the mesh based on 00:21:33.560 --> 00:21:34.640 the distance you are. 00:21:34.640 --> 00:21:37.860 >> We have more than a trillions pixels here because the drones were 00:21:37.860 --> 00:21:40.390 able to capture >> One T cell for 00:21:40.390 --> 00:21:41.850 every two centimeters. 00:21:41.850 --> 00:21:43.040 So three centimeters. 00:21:43.040 --> 00:21:44.640 I hope you get it. 00:21:44.640 --> 00:21:45.980 I don't have translation in a. 00:21:47.150 --> 00:21:48.740 >> And you see we can move, in a city, and 00:21:48.740 --> 00:21:50.840 everything is being compute in real time. 00:21:50.840 --> 00:21:52.710 The city is really, really huge, so. 00:21:53.810 --> 00:21:55.880 Everything can be run now in the progress. 00:21:55.880 --> 00:22:00.530 Using the gamepad, now and web GL you can fly over the city and 00:22:00.530 --> 00:22:02.370 you can move near some of this. 00:22:02.370 --> 00:22:05.950 And we will load some higher definition measures and texture. 00:22:05.950 --> 00:22:10.603 And it's pretty cool to imagine that this is available immediately if you 00:22:10.603 --> 00:22:14.956 go to a specific web server you can get this kind of experience running 00:22:14.956 --> 00:22:16.290 in the browser. 00:22:16.290 --> 00:22:18.310 With no plugins at all. 00:22:18.310 --> 00:22:20.980 So [INAUDIBLE] really could be able to demonstrate you. 00:22:20.980 --> 00:22:23.870 And now we need to show you how to- >> How to do that. 00:22:23.870 --> 00:22:24.440 >> How to do that. 00:22:26.010 --> 00:22:30.530 So let's switch to your computer which is a five and 00:22:30.530 --> 00:22:33.840 let's start by talking about web audio. 00:22:35.760 --> 00:22:40.950 So, web review is a way to attach 00:22:40.950 --> 00:22:45.550 some sound and put some sound in the free space on [INAUDIBLE]. 00:22:45.550 --> 00:22:48.400 It's based on the routing graph, so 00:22:48.400 --> 00:22:52.650 you've got some specific audio node that are going to connect together. 00:22:52.650 --> 00:22:54.830 And thus node could have some impact on the volume, 00:22:54.830 --> 00:22:57.940 could have impact on the free [INAUDIBLE] specialization. 00:22:57.940 --> 00:22:59.450 You could have impact on filters. 00:22:59.450 --> 00:23:01.810 You can have some low filters, some high filters. 00:23:01.810 --> 00:23:04.850 You can slow down the music, you can speed up the music. 00:23:04.850 --> 00:23:07.060 You can do whatever you like. 00:23:07.060 --> 00:23:10.290 Like you can imagine in games, for instance, using Webado. 00:23:10.290 --> 00:23:13.490 You could create some sound in the procedural way. 00:23:13.490 --> 00:23:15.540 So it's really impressive. 00:23:15.540 --> 00:23:19.860 So I'm going to show you something we've got on our js website using 00:23:19.860 --> 00:23:24.520 web audio such as let me enable the sound. 00:23:24.520 --> 00:23:27.190 Oh, I've been composing the music so sorry for that. 00:23:27.190 --> 00:23:30.360 It's going to be very boring because it's a loop. 00:23:30.360 --> 00:23:34.120 Just to show you that we're loading sound here, and 00:23:34.120 --> 00:23:37.400 we're going to ask to be looped. 00:23:37.400 --> 00:23:40.420 And to autoplay it, and I'm binding it to the web adjuster. 00:23:40.420 --> 00:23:41.630 I'm going to show you and 00:23:41.630 --> 00:23:46.040 then I'm going to attach this music to specific 3D objects. 00:23:46.040 --> 00:23:47.620 We call that a mesh, and 00:23:47.620 --> 00:23:50.200 by doing that I don't know if you are going to really [INAUDIBLE] 00:23:50.200 --> 00:23:53.260 in the room because you need most of the time headphone. 00:23:53.260 --> 00:23:56.070 But the current box is moving all around my head. 00:23:56.070 --> 00:23:59.950 And thanks to Webado, I can iterate on the right, in front of me, and 00:23:59.950 --> 00:24:00.730 then on the left, 00:24:00.730 --> 00:24:04.990 automatically wizard doing any computation on the Java screen part. 00:24:04.990 --> 00:24:08.330 This is being rendered by the browser and by the API itself. 00:24:09.760 --> 00:24:13.120 So let me show you the code. 00:24:13.120 --> 00:24:15.270 The first things you need to do when you want to create some 00:24:15.270 --> 00:24:17.970 web audio stuff is to create the context. 00:24:17.970 --> 00:24:21.160 So if you are a JavaScript programmer maybe 00:24:21.160 --> 00:24:25.340 you already know about or so you need to create the context. 00:24:25.340 --> 00:24:28.680 So the way to do it, so we were talking about that just before. 00:24:28.680 --> 00:24:33.820 The start off way is to create the other context on the Window object. 00:24:33.820 --> 00:24:37.240 But as Chrome was the first one to introduce it. 00:24:37.240 --> 00:24:39.060 They introduced it using a prefix. 00:24:39.060 --> 00:24:40.810 So you may add function to it. 00:24:40.810 --> 00:24:43.090 They are about to remove it in the next version. 00:24:43.090 --> 00:24:45.690 In the mean time, you need to test both versions. 00:24:45.690 --> 00:24:49.900 Is it the webkey version or the en preface version? 00:24:49.900 --> 00:24:51.890 if once you've been about you to check that. 00:24:51.890 --> 00:24:57.660 This is existing can then create it and create some specific node. 00:24:57.660 --> 00:25:01.030 So for instance, the gain node, is the volume. 00:25:01.030 --> 00:25:04.570 And then, you will be about to connect it to this connection. 00:25:04.570 --> 00:25:07.930 This connection could be some speakers, some headphones, or 00:25:07.930 --> 00:25:11.240 if you want to write the sum down on a disk for instance. 00:25:11.240 --> 00:25:13.970 So you're connecting notes like that together. 00:25:13.970 --> 00:25:17.610 Then when you want to create some specific things, 00:25:17.610 --> 00:25:21.155 you need to set up some specific auto properties for 00:25:21.155 --> 00:25:24.210 [INAUDIBLE] for instance about the Panner. 00:25:24.210 --> 00:25:27.920 The Panner node in [INAUDIBLE] view, is a way to do some 3D stuff. 00:25:27.920 --> 00:25:29.100 In the audio spaces. 00:25:29.100 --> 00:25:31.750 So let's say that you want to create 3D sounds. 00:25:31.750 --> 00:25:35.100 So you need to create the panner to connect that to your audio node 00:25:35.100 --> 00:25:36.750 to your source node. 00:25:36.750 --> 00:25:37.740 And once you done that, 00:25:37.740 --> 00:25:41.750 you have to choose the way the sound will behave in the 3D space. 00:25:41.750 --> 00:25:44.500 So let's say that I want the sound to stop 00:25:44.500 --> 00:25:46.380 after ten meters in a linear way. 00:25:46.380 --> 00:25:50.250 I can set up that in the engine by setting some properties. 00:25:50.250 --> 00:25:54.411 So you need to understand a bunch of properties in our gaming engine and 00:25:54.411 --> 00:25:58.400 [INAUDIBLE] have decided to set up some default 00:25:58.400 --> 00:26:00.730 properties to [INAUDIBLE] and let's see how it works. 00:26:00.730 --> 00:26:05.139 So based on that, what we decided to create is a funny experience. 00:26:12.140 --> 00:26:13.310 So I need to reload it. 00:26:20.150 --> 00:26:21.050 How are you guys? 00:26:21.050 --> 00:26:22.150 I can talk for awhile so. 00:26:22.150 --> 00:26:23.460 >> Yes. 00:26:23.460 --> 00:26:24.146 >> This is your to do. 00:26:24.146 --> 00:26:28.661 And let's lend that 00:26:32.748 --> 00:26:34.580 So not in I. 00:26:34.580 --> 00:26:35.888 It's already in use. 00:26:35.888 --> 00:26:37.202 Okay. 00:26:37.202 --> 00:26:39.269 This one. 00:26:44.643 --> 00:26:47.270 >> Are you sure it's already in use? 00:26:47.270 --> 00:26:48.760 >> No, it's not already in use. 00:26:48.760 --> 00:26:49.260 >> Retry. 00:26:50.450 --> 00:26:54.300 Vent work, I'm sure yes we have time. 00:26:54.300 --> 00:26:59.660 You see that? 00:26:59.660 --> 00:27:06.010 Refresh, that should work, yes good, 00:27:06.010 --> 00:27:09.590 so the idea remember that I show you a cube that was moving around my 00:27:09.590 --> 00:27:13.220 head and I've put some sound on it, so I use the same principles. 00:27:13.220 --> 00:27:17.090 So rather than updating the position of the sound based on the camera 00:27:17.090 --> 00:27:20.770 itself, we decided to update the sound based on the distance you 00:27:20.770 --> 00:27:22.750 are from the center of the circle. 00:27:22.750 --> 00:27:26.180 And on each cube, I have decided to put some specific music I've been 00:27:26.180 --> 00:27:29.130 composing, so it's several tracks of my musics. 00:27:29.130 --> 00:27:32.600 And when I'm moving one of the cubes near the center of the scene, 00:27:32.600 --> 00:27:34.840 it's going to pump up the volume. 00:27:34.840 --> 00:27:37.330 And when I'm removing it from the circle, it would stop the sound. 00:27:37.330 --> 00:27:40.080 So the idea is to let you mix these sounds using the cube. 00:27:40.080 --> 00:27:43.520 So we found out it was very funny and since to the pointer 00:27:43.520 --> 00:27:48.535 events being used by IE 11 and by Max off edge today. 00:27:48.535 --> 00:27:50.865 You can now move that experience in a very easy way. 00:27:50.865 --> 00:27:52.195 So, I'll need several figures. 00:27:52.195 --> 00:27:53.985 >> Yes. >> So, I will ask you some else. 00:27:53.985 --> 00:27:54.525 >> That's good. 00:27:54.525 --> 00:27:57.265 >> For instance, let's move the figure. 00:27:57.265 --> 00:27:58.772 And we can then play the music together. 00:27:58.772 --> 00:28:01.072 [MUSIC] 00:28:01.072 --> 00:28:02.135 Like that. 00:28:02.135 --> 00:28:03.965 And then reuse the mouse. 00:28:03.965 --> 00:28:08.520 And we can even do, you see, you can access some of the cube. Alright. 00:28:08.520 --> 00:28:09.770 So. 00:28:09.770 --> 00:28:10.950 I'm going to do the stupid joke, 00:28:10.950 --> 00:28:13.655 because maybe you notice that we have a strange accent. 00:28:13.655 --> 00:28:20.320 [LAUGHTER] And 00:28:20.320 --> 00:28:23.180 I've got some problem to reading my own slides like. 00:28:24.450 --> 00:28:26.890 And you can write the front version of the music by building blocks 00:28:26.890 --> 00:28:28.950 together by building blocks together and 00:28:28.950 --> 00:28:31.200 putting that into something of the same. 00:28:31.200 --> 00:28:31.730 >> Thank you David. 00:28:31.730 --> 00:28:33.640 Let's switch to mine. 00:28:33.640 --> 00:28:38.020 Let's switch to something completely different. 00:28:38.020 --> 00:28:40.790 I want to show you the CSS features. 00:28:40.790 --> 00:28:42.910 This is something I really love. 00:28:42.910 --> 00:28:47.120 CSS Filter is a way for any web developer to add 00:28:47.120 --> 00:28:50.650 post process effect using shaders on any dumb element. 00:28:52.310 --> 00:28:56.160 And to show you that, this example I have a This reading page. 00:28:56.160 --> 00:28:58.590 I want to read my text but I have this wonderful dragon. 00:28:58.590 --> 00:29:02.160 I am big fan of dragon if you didn't notice. 00:29:02.160 --> 00:29:04.180 And I don't want to remove my dragon. 00:29:04.180 --> 00:29:06.500 I want to keep my dragon but when I want to read my text, 00:29:06.500 --> 00:29:08.520 I want just to remove all the distraction. 00:29:08.520 --> 00:29:10.810 We can find that in a reading view, whatever. 00:29:10.810 --> 00:29:14.360 So what I'm doing when I'm hovering the text. 00:29:14.360 --> 00:29:19.590 I'm just applying a [INAUDIBLE] on my div element on the back. 00:29:19.590 --> 00:29:23.340 So I just, I can just easily read my text. 00:29:23.340 --> 00:29:28.170 I have the opportunity to also use grayscale and blur together. 00:29:28.170 --> 00:29:31.510 We can mix CSS features together so 00:29:31.510 --> 00:29:34.410 then it will be blurred and grayscale. 00:29:34.410 --> 00:29:39.280 And if you see I can play [INAUDIBLE] 60 frame per second and 00:29:39.280 --> 00:29:40.500 you can control it easily. 00:29:40.500 --> 00:29:42.450 So, let's just have a look at the code. 00:29:42.450 --> 00:29:45.150 And for that I'm using Visual Studio Code, I love this tool. 00:29:46.290 --> 00:29:48.975 I just uninstalled Sublime Text. 00:29:48.975 --> 00:29:52.070 >> [LAUGH] >> So! 00:29:52.070 --> 00:29:54.200 What we have here is pretty simple actually. 00:29:54.200 --> 00:29:58.110 I just have my text here, in this Content. 00:29:58.110 --> 00:30:00.211 And I have my background. 00:30:00.211 --> 00:30:05.131 This is the diveware I put using my css Rule here, 00:30:05.131 --> 00:30:09.220 I put just my backed up JPG image inside. 00:30:09.220 --> 00:30:14.890 And what I want to do is, when I hover my text, I want to apply this. 00:30:14.890 --> 00:30:17.560 It's a CSS rule that say, okay, 00:30:17.560 --> 00:30:20.370 let's use the blur effect with that size of blur. 00:30:20.370 --> 00:30:23.835 And because I'm walking well, I'm using prefixes version and 00:30:23.835 --> 00:30:25.280 unprefixes version as well, 00:30:25.280 --> 00:30:28.790 just to be sure I won't have problem in the future. 00:30:28.790 --> 00:30:31.440 So from the point of view of the JavaScript code itself that's 00:30:31.440 --> 00:30:32.780 pretty simple. 00:30:32.780 --> 00:30:36.140 On mouse over I apply the CSS rule. 00:30:36.140 --> 00:30:38.590 On mouse out I remove the CSS rule. 00:30:38.590 --> 00:30:39.090 That's it. 00:30:40.250 --> 00:30:42.950 And another example that I am doing when I click 00:30:42.950 --> 00:30:44.390 on the grayscale object. 00:30:44.390 --> 00:30:47.590 You can also control it obviously directly from JavaScript by saying, 00:30:47.590 --> 00:30:50.700 I want blur and grayscale. 00:30:50.700 --> 00:30:52.640 So you can mix all the effects, 00:30:52.640 --> 00:30:55.310 you can do convolutions, sepia, whatever. 00:30:55.310 --> 00:30:58.060 You can play photoshop like effect. 00:30:58.060 --> 00:31:01.720 Then we click, and it's all the way accelerating using shader, so 00:31:01.720 --> 00:31:03.270 that's free to use. 00:31:03.270 --> 00:31:04.470 Please do that. 00:31:04.470 --> 00:31:05.700 The main problem we may have, 00:31:05.700 --> 00:31:10.250 is that sometime, CSS filters may not be supported. 00:31:10.250 --> 00:31:13.300 So, this lead me to another demonstration. 00:31:13.300 --> 00:31:14.170 David? 00:31:14.170 --> 00:31:15.470 >> Yes. 00:31:15.470 --> 00:31:16.240 >> This one. 00:31:16.240 --> 00:31:20.020 This time, let's just show, how it should work. 00:31:20.020 --> 00:31:24.980 So as you can see, I have always the same result. 00:31:26.950 --> 00:31:30.230 But what happen if CSS filter are not supported? 00:31:30.230 --> 00:31:31.710 And to simulate that, and 00:31:31.710 --> 00:31:35.390 to show you as well all of the flags are working, I can come in and 00:31:35.390 --> 00:31:38.910 say okay, so far the CSS filter is an experimental feature. 00:31:38.910 --> 00:31:44.130 And I want to not use them just to see how they could work 00:31:44.130 --> 00:31:46.150 if there is no CSS filter. 00:31:46.150 --> 00:31:50.400 So, I just have to do that, relaunch my browser. 00:31:52.180 --> 00:31:56.890 Switch to support here and I have unreserved behavior. 00:31:56.890 --> 00:31:59.455 This time because CSS feature is not supported, 00:31:59.455 --> 00:32:03.480 I'm just playing with the opacity of the picture and 00:32:03.480 --> 00:32:07.400 setting it to 0.1, so we can see the background. 00:32:07.400 --> 00:32:11.420 How to do to that without any code, any JavaScript code? 00:32:11.420 --> 00:32:13.890 That's cool question I ask. 00:32:16.000 --> 00:32:17.710 I have just to use a really cool, 00:32:17.710 --> 00:32:23.530 new feature called ArtsReport allow me to test the presence or 00:32:23.530 --> 00:32:29.150 the absence of any CSS rule, even with associated parameter. 00:32:29.150 --> 00:32:31.780 So that's really interesting here. 00:32:31.780 --> 00:32:38.190 If webkit-filter is not supported for blur with 20 pixels, or sorry, 00:32:38.190 --> 00:32:42.090 if supported, or if filter with blur with 20 pixels is supported, 00:32:42.090 --> 00:32:44.820 let's define that the blur rule is this one. 00:32:46.760 --> 00:32:49.200 And if it's not, supported, 00:32:49.200 --> 00:32:53.060 then let's define that blur is just changing opacity. 00:32:53.060 --> 00:32:54.980 From the point of view of the JavaScript developer, 00:32:56.000 --> 00:32:58.460 the JavaScript developer will still apply the same rule, blurred. 00:32:59.690 --> 00:33:02.690 But the CSS filters will be removed and 00:33:02.690 --> 00:33:05.120 replaced by opacity, thanks to ArtsReport. 00:33:06.480 --> 00:33:10.341 So we can give the control over let's say, 00:33:10.341 --> 00:33:13.243 adaptability to CSS designer. 00:33:13.243 --> 00:33:13.963 That's really cool. 00:33:13.963 --> 00:33:16.725 That's really powerful. 00:33:16.725 --> 00:33:18.025 David. 00:33:18.025 --> 00:33:21.290 Next demonstration about Flex Books. 00:33:21.290 --> 00:33:22.480 >> Flex Books and Subset. 00:33:22.480 --> 00:33:25.490 So, let's move back to my Information. 00:33:25.490 --> 00:33:27.100 >> Because we talk about adaptability. 00:33:27.100 --> 00:33:27.780 >> Yes. 00:33:27.780 --> 00:33:30.310 So, today you've seen that we are talking a lot about 00:33:30.310 --> 00:33:33.580 responsive design and more about adaptive design, 00:33:33.580 --> 00:33:38.790 which is more how to adapt the Global UX to the current device. 00:33:38.790 --> 00:33:41.840 And when you're building some responsive stuff, you've got media 00:33:41.840 --> 00:33:46.080 queries, you've got a lot of cool new display like the flex box. 00:33:46.080 --> 00:33:49.190 But the problem you may have when you want to display some images, and 00:33:49.190 --> 00:33:53.350 that you've got various definition of the resolution of the images for, 00:33:53.350 --> 00:33:57.208 let's say, for an iPhone using some retainer screens, for 00:33:57.208 --> 00:33:58.897 a classic phone and for a PC. 00:33:58.897 --> 00:34:02.740 And you don't want to download all images on the client side and 00:34:02.740 --> 00:34:06.630 to define, through JavaScript, how to choose a proper one? 00:34:06.630 --> 00:34:09.150 So, it would be better to let the browser decide 00:34:09.150 --> 00:34:11.510 based on what's gonna be executing? 00:34:11.510 --> 00:34:15.970 So, if it's currently running on the new Windows phone with our 00:34:15.970 --> 00:34:19.430 resolution screen, I want to show the specific version of the image, 00:34:19.430 --> 00:34:21.730 rather another one on the load device. 00:34:21.730 --> 00:34:25.710 So to do that, you've got SourceSet being available. 00:34:25.710 --> 00:34:27.310 So it's very simple to use. 00:34:27.310 --> 00:34:30.030 The first thing you need to use on the Image tag, 00:34:30.030 --> 00:34:33.570 is to use the classic source property you may have. 00:34:33.570 --> 00:34:34.370 So it's a fall back. 00:34:34.370 --> 00:34:37.480 So if the browser is not supporting source set, 00:34:37.480 --> 00:34:40.610 it's going to use this specific image. 00:34:40.610 --> 00:34:42.290 So, let's do that by default. 00:34:42.290 --> 00:34:46.890 But, if the browser is being able to handle this new property over there, 00:34:46.890 --> 00:34:53.230 you can say to the browser, please use this version of the image x1. 00:34:53.230 --> 00:34:57.720 If the current DPI of the screen really match the CSS and 00:34:57.720 --> 00:35:02.220 the hardware ratio and pixels, then please use this image. 00:35:02.220 --> 00:35:06.510 So, if for instance you go a smaller more physical screen 00:35:06.510 --> 00:35:09.380 with eye of the finisher, ask for the browers. 00:35:09.380 --> 00:35:13.140 Please use another version of the image and you've got the point you 00:35:13.140 --> 00:35:17.550 can go up to whatever you like on this specific rules. 00:35:17.550 --> 00:35:22.700 So it could be very cool, now with some of the guys, like myself, 00:35:22.700 --> 00:35:24.950 got some 4K screen at home. 00:35:24.950 --> 00:35:28.540 When you want to have some, cool website being displayed on that. 00:35:28.540 --> 00:35:31.250 So, we can choose it like that. 00:35:31.250 --> 00:35:35.200 Let me show you this simple webpage inside i11. 00:35:35.200 --> 00:35:37.230 It's not using. 00:35:37.230 --> 00:35:39.320 It's using the default image. 00:35:39.320 --> 00:35:43.050 And you check that, because when I'm going to use a new version of 00:35:43.050 --> 00:35:47.390 the image, I'm will put a specific logo on the top left of the image. 00:35:47.390 --> 00:35:51.660 So, currently, iE has been using the default image of it was- 00:35:51.660 --> 00:35:53.040 >> A blurry one. 00:35:53.040 --> 00:35:56.290 >> A blurry one, again, we've been building with our game agent. 00:35:56.290 --> 00:35:57.660 So really cool. 00:35:57.660 --> 00:36:01.400 If I'm switching to Microsoft Edge, you can see that 00:36:01.400 --> 00:36:06.410 we see the very same image translate using the 1x version. 00:36:06.410 --> 00:36:09.870 But, how to simulate now that I want higher version. 00:36:09.870 --> 00:36:13.444 [CROSSTALK] So, you need a full, on a specific device. 00:36:13.444 --> 00:36:18.130 You can simulate that by using the zooming option, of your browser. 00:36:18.130 --> 00:36:21.860 For instance, let's say that I want to simulate the fact that 00:36:21.860 --> 00:36:24.330 my current screen resolution is still the same, but 00:36:24.330 --> 00:36:28.590 I want to change the DPI, by doing like that, and you need to refresh. 00:36:28.590 --> 00:36:31.780 And you see the browser automatically decided to take 00:36:31.780 --> 00:36:33.520 a newer version of the image, and 00:36:33.520 --> 00:36:36.400 it has been downloading only this specific image. 00:36:36.400 --> 00:36:40.590 So to check that, we can, for instance, go under S2F2s. 00:36:42.080 --> 00:36:44.980 Find out the proper demonstration, should be this one. 00:36:48.250 --> 00:36:49.363 Log that here. 00:36:55.943 --> 00:36:58.719 And let's check the Network, let's refresh. 00:37:00.500 --> 00:37:03.998 it wasn't the right one, so let's close Edge just to avoid letting me. 00:37:03.998 --> 00:37:07.306 >> You're really good at that. 00:37:16.541 --> 00:37:17.475 >> Yeah, I'm really good. 00:37:17.475 --> 00:37:20.960 >> [LAUGH] Thank you to support me David. 00:37:20.960 --> 00:37:23.150 And you can see that the browser decided, 00:37:23.150 --> 00:37:24.990 to just load the proper version of the image. 00:37:24.990 --> 00:37:30.370 So, you've been referenced a bunch of different images in your code. 00:37:30.370 --> 00:37:33.705 But the browser and the client, decided to choose the proper one 00:37:33.705 --> 00:37:36.525 based on the current resolution and capacities. 00:37:36.525 --> 00:37:41.275 And even in the specification, it is specified that the browser 00:37:41.275 --> 00:37:44.865 could even choose to load the image based on the current bandwidth. 00:37:44.865 --> 00:37:48.025 So, let's say that you've got a retina screen, so you're pretty 00:37:48.025 --> 00:37:50.735 happy with that, but you've got a very slowed down connection. 00:37:50.735 --> 00:37:53.465 It's probably not a good idea to give you the high resolution 00:37:53.465 --> 00:37:54.390 image of that. 00:37:54.390 --> 00:37:57.400 So if the probe is being about to direct that you would try, to send 00:37:57.400 --> 00:38:03.370 you the low resolution of the image to a speed website, a fast website. 00:38:03.370 --> 00:38:07.870 So, we decided to use that, so I'm currently re-writing our website so 00:38:07.870 --> 00:38:10.530 I will loop to our Babylon website today. 00:38:12.700 --> 00:38:13.745 >> This is free advertising. 00:38:13.745 --> 00:38:15.720 >> Yeah. 00:38:15.720 --> 00:38:17.130 Maybe we will get into trouble. 00:38:17.130 --> 00:38:17.630 I don't know. 00:38:18.640 --> 00:38:21.310 So, today our website is like that. 00:38:21.310 --> 00:38:25.894 So, we've tried to mimic the modern US stuff using 00:38:25.894 --> 00:38:28.140 some specific layouts. 00:38:28.140 --> 00:38:31.870 We were pretty happy about that, but it wasn't standing out. 00:38:31.870 --> 00:38:35.760 Also, we are fairly good JavaScript developers. 00:38:35.760 --> 00:38:37.945 We are less good designers. 00:38:37.945 --> 00:38:43.730 [LAUGH] And with this idea to change that, we all decided to change that. 00:38:43.730 --> 00:38:48.980 For that, the new version I'm currently working on is this one. 00:38:48.980 --> 00:38:52.058 So, I've been using Magical Queries and Flexbox. 00:38:52.058 --> 00:38:54.730 To be able to have some better size, 00:38:54.730 --> 00:38:58.220 that is going to adapt itself, to the current resolution. 00:38:58.220 --> 00:39:01.271 And the good thing is I can mix sourceS Flex Box 00:39:01.271 --> 00:39:04.190 queries to have some good experience. 00:39:04.190 --> 00:39:08.720 If I'm zooming inside the website, and now refresh it. 00:39:11.170 --> 00:39:14.950 You see again the resolution of the image. 00:39:14.950 --> 00:39:18.100 And I can even test that, so the design is not finished. 00:39:18.100 --> 00:39:20.540 If you are a good designer, and you work for free. 00:39:20.540 --> 00:39:22.560 We [LAUGH] are welcoming you. 00:39:22.560 --> 00:39:23.630 >> Please send us email. 00:39:27.572 --> 00:39:29.740 >> But, if I'm running that on my phone 00:39:31.270 --> 00:39:32.250 >> That should be somewhere. 00:39:34.180 --> 00:39:37.292 Here it is, so I'm going to send read on that. 00:39:41.307 --> 00:39:43.960 Can see it, so this is the same website. 00:39:43.960 --> 00:39:46.190 And on the phone if I'm turning it back, 00:39:46.190 --> 00:39:48.900 you can see here I'm loading into 2x version of the image. 00:39:48.900 --> 00:39:52.260 Because, the current screen resolution of my 00:39:52.260 --> 00:39:55.390 Window phone is high enough to have a good ration of the image. 00:39:55.390 --> 00:39:56.753 You can test it on a device. 00:39:56.753 --> 00:39:59.776 So the good thing is that you can test it on Microsoft Edge on 00:39:59.776 --> 00:40:01.690 the desktop and as David was saying, 00:40:01.690 --> 00:40:04.920 this is the exact same engine- Running on the Windows phone. 00:40:04.920 --> 00:40:08.092 So, it's pretty easy to do to just double check that everything 00:40:08.092 --> 00:40:11.420 is being working fine, on your specific hardware screen. 00:40:11.420 --> 00:40:14.600 And then you've got a good experience too, like that. 00:40:15.830 --> 00:40:17.210 >> Thank you David. 00:40:17.210 --> 00:40:19.228 So, get back to another demo. 00:40:22.936 --> 00:40:29.660 Yep, so we also, since IE9, we supported SVG inside HTML. 00:40:29.660 --> 00:40:34.460 But the community ask us, and thanks to UserVoice which I will 00:40:34.460 --> 00:40:37.930 mention after, and thanks to the way we are working now. 00:40:37.930 --> 00:40:43.610 We hear the community, and they ask us please support foreignObject. 00:40:43.610 --> 00:40:44.900 So, what's foreignObject? 00:40:44.900 --> 00:40:49.665 foreignObject is the opposite of having SVG inside HTML. 00:40:49.665 --> 00:40:54.470 foreignObject is the capacity to embed HTML inside SVG. 00:40:55.610 --> 00:40:58.510 So in this way, you can have an SVG page. 00:40:58.510 --> 00:40:59.510 Let me show you. 00:41:02.280 --> 00:41:05.350 So here, I have my HTML element. 00:41:05.350 --> 00:41:08.170 Inside my HTML, I have my SVG element, so 00:41:08.170 --> 00:41:10.710 a vector based rendering. 00:41:10.710 --> 00:41:16.630 And inside this SVG, I can have what we call the foreignObject here, 00:41:16.630 --> 00:41:18.180 where I can put HTML. 00:41:19.350 --> 00:41:22.226 So, that's interesting because SVG is purely a vector. 00:41:22.226 --> 00:41:27.020 The foreignObject then will be controlled by this purely vector 00:41:27.020 --> 00:41:31.830 space, and we can apply any specific effect we can have for SVG. 00:41:31.830 --> 00:41:36.280 We can mix vector object, and put some, for instance, text inside. 00:41:36.280 --> 00:41:39.440 We can use it to play like I'm doing here. 00:41:39.440 --> 00:41:44.430 I would like to show you the power of SVG using HTML inside. 00:41:45.440 --> 00:41:47.390 I will use filters, again. 00:41:47.390 --> 00:41:50.317 It's not CSS filter this time, it's SVG filters. 00:41:50.317 --> 00:41:52.110 We support SVG filters. 00:41:52.110 --> 00:41:55.230 And SVG filters apply an effect 00:41:55.230 --> 00:41:57.770 on top of the vector-rendered image, okay? 00:41:57.770 --> 00:42:02.780 This image will now include, the HTML rendered image. 00:42:02.780 --> 00:42:08.300 And that's interesting, because I can do things like this one. 00:42:08.300 --> 00:42:11.110 Here, this is what I call the drunken browser. 00:42:14.630 --> 00:42:17.670 Too much beer, you go home and you want to search something, and 00:42:17.670 --> 00:42:18.899 the world look like this one. 00:42:20.160 --> 00:42:23.874 Okay, let's search for Microsoft Edge. 00:42:23.874 --> 00:42:28.750 >> [LAUGH] >> And, remember, we all knew that. 00:42:28.750 --> 00:42:33.420 The iFrame inside my SVG is working perfectly well. 00:42:33.420 --> 00:42:34.686 There is no problem with that. 00:42:34.686 --> 00:42:37.544 And because I'm inside SVG, 00:42:37.544 --> 00:42:41.895 I can apply SVG on top of that and use my stuff. 00:42:41.895 --> 00:42:44.728 I have another thing I can do with that I wanted to show you. 00:42:44.728 --> 00:42:48.799 So instead of using that, 00:42:48.799 --> 00:42:53.061 I want to use just this one. 00:42:56.228 --> 00:42:58.770 Oops,let's go back there. 00:42:58.770 --> 00:42:59.895 I forgot something. 00:42:59.895 --> 00:43:00.895 >> Yeah, the dash. 00:43:00.895 --> 00:43:02.728 >> Yep, thank you, David. 00:43:05.853 --> 00:43:07.450 Let's force a refresh. 00:43:07.450 --> 00:43:08.825 This one is a Minecraft Browser. 00:43:08.825 --> 00:43:12.270 >> [LAUGH] >> So, and what's interesting is 00:43:12.270 --> 00:43:15.770 that if I search for babylonjs.com, that's not easy. 00:43:15.770 --> 00:43:17.580 I have to remember to click here. 00:43:18.680 --> 00:43:22.660 I'm a Minecraft player and I can take any 3D object. 00:43:22.660 --> 00:43:27.978 And this is, HTML page, using SVG, inside SVG there is Web GL with- 00:43:27.978 --> 00:43:31.812 >> [APPLAUSE] 00:43:31.812 --> 00:43:34.639 >> It's running at 60 frames per 00:43:34.639 --> 00:43:36.110 second, okay? 00:43:36.110 --> 00:43:37.740 I have to admit that's just cool. 00:43:38.960 --> 00:43:41.765 So, we're not sure about the use case here, but 00:43:41.765 --> 00:43:44.310 [LAUGH] you get the point. 00:43:44.310 --> 00:43:44.850 You get the point. 00:43:44.850 --> 00:43:46.440 You can use HTML inside SVG. 00:43:46.440 --> 00:43:46.940 That's cool. 00:43:48.300 --> 00:43:49.975 I'm pretty sure that your kid will love that. 00:43:49.975 --> 00:43:54.090 >> [LAUGH] >> And then the very latest things 00:43:54.090 --> 00:43:59.115 we wanted to show you guys before moving to the Q&A is HTTP/2. 00:43:59.115 --> 00:44:01.944 So HTTP/2, it's a bit difficult 00:44:01.944 --> 00:44:06.884 to find something very visual to let you see what HTTP/2 is. 00:44:06.884 --> 00:44:11.490 Well, HTTP/2 is being built thanks to what Google has been doing 00:44:11.490 --> 00:44:12.350 with SPDY. 00:44:12.350 --> 00:44:15.670 So SPDY is, they're trying to build something new, 00:44:15.670 --> 00:44:20.252 different from HTTP/1.1 which is fairly old now. 00:44:20.252 --> 00:44:21.790 We do think some mobile devices, and 00:44:21.790 --> 00:44:24.520 other new devices, we have some problem with the performance. 00:44:24.520 --> 00:44:27.890 So, we try to find some hacks in that. 00:44:27.890 --> 00:44:31.680 So, let's talk for instance about the number of requests a browser can 00:44:31.680 --> 00:44:33.160 send to a web server. 00:44:33.160 --> 00:44:38.100 So most of the time, by default it was four simultaneous requests to 00:44:38.100 --> 00:44:42.720 the web server from a specific client on to a specific domain. 00:44:42.720 --> 00:44:45.490 So, if you wanted to load, let's say 10 or 00:44:45.490 --> 00:44:48.740 20 image, from this web server from your clients. 00:44:48.740 --> 00:44:52.914 You were only able to do it through four different requests and 00:44:52.914 --> 00:44:54.300 you have to wait it. 00:44:54.300 --> 00:44:59.000 And if you want to, turns out there was a hack being known by everybody. 00:44:59.000 --> 00:45:01.960 So, you can have several domains like CDNs. 00:45:01.960 --> 00:45:06.570 So, CDN number one, CDN number two, CDN number three to four. 00:45:06.570 --> 00:45:10.480 Let's say that, and thanks to that you are able to four requests to 00:45:10.480 --> 00:45:14.190 the first CDN and then four requests to the second one, etc. 00:45:14.190 --> 00:45:15.580 But, you are doing kind of hacks, 00:45:15.580 --> 00:45:21.160 because the browser has to do that plus, the fact that you were forced. 00:45:21.160 --> 00:45:24.520 When you do something a lot of request to add a lot of 00:45:24.520 --> 00:45:28.620 overhead on top of every of the HTTP request to the web server. 00:45:28.620 --> 00:45:33.522 So, writing HTTP/2 is now be handled by the IETF task force as 00:45:33.522 --> 00:45:36.860 a start out and we're all working on that. 00:45:36.860 --> 00:45:39.510 So, it's being implemented by Microsoft Edge and 00:45:39.510 --> 00:45:41.390 Chrome and Firefox. 00:45:41.390 --> 00:45:45.510 And the idea I'm currently browsing a web page from the Google server, 00:45:45.510 --> 00:45:48.890 so they've been implementing it in one of their server stack. 00:45:48.890 --> 00:45:53.476 And you will see that the way to load the image much faster for 00:45:53.476 --> 00:45:54.875 various reason. 00:45:54.875 --> 00:45:59.095 First we have been able to do some multiplexing on the streams. 00:45:59.095 --> 00:46:02.335 You're not forced any more to send various requests on the web server. 00:46:02.335 --> 00:46:04.145 You can create a single request, and 00:46:04.145 --> 00:46:07.155 we're going to embed several streams inside this request. 00:46:07.155 --> 00:46:10.265 So, we'll negotiate it only once with the web server. 00:46:10.265 --> 00:46:14.185 We are using binary encoding also, using HTTP/2. 00:46:14.185 --> 00:46:18.370 So, it's more light on the network. 00:46:18.370 --> 00:46:22.550 And we can also anticipate what you need on the client side. 00:46:22.550 --> 00:46:25.390 For instance, when you load an HTML page, 00:46:25.390 --> 00:46:29.330 we all know that it will be some CSS, and JavaScript inside that. 00:46:29.330 --> 00:46:32.840 So, it's a bit stupid to load the HTML page and 00:46:32.840 --> 00:46:35.300 then, yes, I know this specific JavaScript file. 00:46:35.300 --> 00:46:37.950 Then do another round trip to the server, get it back. 00:46:37.950 --> 00:46:39.810 And then I want the CSS file, etc. 00:46:39.810 --> 00:46:44.573 So the idea is to let the web server say that you want index.html, 00:46:44.573 --> 00:46:47.640 inside in the HTML, there is foo.js. 00:46:47.640 --> 00:46:49.390 So, what we're going to do in the same request, 00:46:49.390 --> 00:46:52.580 we're going to send you back directly the foo.js, 00:46:52.580 --> 00:46:54.700 to the client to save some time. 00:46:54.700 --> 00:46:56.550 So, we can anticipate what you need. 00:46:56.550 --> 00:46:58.170 It would rather say I don't need this file, 00:46:58.170 --> 00:47:00.110 because I've already got it in the cache. 00:47:00.110 --> 00:47:04.270 We lost a bit of time but most of the time it will earn the speed. 00:47:04.270 --> 00:47:05.790 So this is a webpage done by Google, 00:47:05.790 --> 00:47:09.690 that is really interesting because it can simulate what's going on. 00:47:09.690 --> 00:47:14.244 So, let's load the page using HTTP/1 and then 2002, 00:47:14.244 --> 00:47:17.650 sorry, 200 millisecond light latency. 00:47:17.650 --> 00:47:20.590 You can see it's currently being serialized. 00:47:20.590 --> 00:47:23.690 So, I have several requests to part of the image. 00:47:23.690 --> 00:47:26.170 And I cannot do it very fast, because I need to 00:47:26.170 --> 00:47:30.460 go back to the server every time to load some new piece of the page. 00:47:30.460 --> 00:47:34.120 >> And each request will have 200 millisecond latency. 00:47:34.120 --> 00:47:36.560 >> And the other part, using HTTP/2, 00:47:36.560 --> 00:47:40.300 you see that I'm being able to have some multiple stream being rendered. 00:47:40.300 --> 00:47:42.870 And I've got the unique request, on the web server to load 00:47:42.870 --> 00:47:45.790 all the streams, so it's much faster to load the image. 00:47:45.790 --> 00:47:47.770 And you get now the point. 00:47:47.770 --> 00:47:49.928 It's very visual because it's on a image. 00:47:49.928 --> 00:47:53.240 But think about that, with all the paths of the web page you need to 00:47:53.240 --> 00:47:55.500 load from the server side, and really at the same speed. 00:47:55.500 --> 00:47:59.750 So, it's really good to have that specifically on the mobile, 00:47:59.750 --> 00:48:02.660 on the Windows Phone 10 using Microsoft Edge. 00:48:02.660 --> 00:48:07.720 Or every new devices you may have got modern engine, because it would 00:48:07.720 --> 00:48:11.620 really amp the speed of the webpage without doing anything for you. 00:48:11.620 --> 00:48:15.050 It's completely compatible with HTTP/1.1. 00:48:15.050 --> 00:48:17.310 This is the same column, the same verbs. 00:48:17.310 --> 00:48:20.610 We just change the way to communicate on the protocol and 00:48:20.610 --> 00:48:23.740 on the stream and all the net session involved. 00:48:23.740 --> 00:48:24.240 >> Thank you, David. 00:48:25.440 --> 00:48:30.240 So, we try here to hand pick some of our favorite features but, 00:48:30.240 --> 00:48:33.860 as I mentioned before, a lot of them are still inside the box. 00:48:33.860 --> 00:48:36.130 So, the best idea for you if you want to try it, 00:48:36.130 --> 00:48:39.710 just install the very latest version of the Windows 10 build. 00:48:39.710 --> 00:48:41.820 The Edge engine is here. 00:48:41.820 --> 00:48:44.660 So far, is it still Project Spartan? 00:48:44.660 --> 00:48:47.940 But, just change in your mind and rename it to Microsoft Edge and 00:48:47.940 --> 00:48:49.100 you get the point. 00:48:49.100 --> 00:48:53.410 If you want a feature, if you really want a feature, please use, and 00:48:53.410 --> 00:48:56.730 give your feedback on uservoice.modern.IE. 00:48:56.730 --> 00:48:59.690 For instance, here I capture ASM.js. 00:48:59.690 --> 00:49:01.900 It was a huge ask for the community. 00:49:01.900 --> 00:49:03.870 Please support ASM.js. 00:49:03.870 --> 00:49:07.754 ASM.js is a way to compile C++ into JavaScript, 00:49:07.754 --> 00:49:10.820 and ASM.js will add some. 00:49:10.820 --> 00:49:14.290 I can't say that, some additional information for 00:49:14.290 --> 00:49:15.400 the garbage collector and for 00:49:15.400 --> 00:49:18.796 the JavaScript engine, to enhance performance, okay? 00:49:18.796 --> 00:49:23.700 Unity supported, Unreal engine supported, so if you're using 00:49:23.700 --> 00:49:29.080 Unity 5 you can just export your game to Web GL with ASM.js. 00:49:29.080 --> 00:49:32.640 So now if you just install the very latest version of Windows 10, 00:49:32.640 --> 00:49:35.510 and Microsoft Edge, 00:49:35.510 --> 00:49:40.530 you will be able to run Web GL games from Unity using ASM.js. 00:49:40.530 --> 00:49:42.112 You go to do about:flags. 00:49:42.112 --> 00:49:46.100 So, if you go on Microsoft Edge today, you type about:flags and 00:49:46.100 --> 00:49:50.150 you are able to enable ASM.js inside Microsoft Edge. 00:49:50.150 --> 00:49:53.130 And I show you another example here on the backlogs. 00:49:53.130 --> 00:49:56.878 So, people ask to show syntax errors in the debugger, fair. 00:49:56.878 --> 00:50:00.838 We put that on our backlog, and we indicate that it's on the top and 00:50:00.838 --> 00:50:02.336 we hope to start it soon. 00:50:02.336 --> 00:50:05.623 So, this is a new way for us to communicate with you guys, and 00:50:05.623 --> 00:50:06.795 with the community. 00:50:06.795 --> 00:50:09.355 Let us know that you want something and 00:50:09.355 --> 00:50:13.675 we will let you know that we are working on some we consider over, 00:50:13.675 --> 00:50:17.440 and some of them are not really on our top priority list. 00:50:18.760 --> 00:50:21.390 Please evaluate the session. 00:50:21.390 --> 00:50:22.470 And now it's time for question. 00:50:23.670 --> 00:50:24.195 Yep. 00:50:24.195 --> 00:50:32.000 >> [INAUDIBLE] >> So let me show you [LAUGH]. 00:50:33.670 --> 00:50:34.920 Oh, I can't answer this question. 00:50:36.230 --> 00:50:39.449 I can go to modern type. 00:50:39.449 --> 00:50:43.020 So status.modern. 00:50:43.020 --> 00:50:44.000 The question about- >> Oh, sorry. 00:50:44.000 --> 00:50:44.756 >> Yes please, question is. 00:50:44.756 --> 00:50:47.690 >> The question is about template, html template, that's right. 00:50:47.690 --> 00:50:48.832 Are we working on it? 00:50:48.832 --> 00:50:49.690 >> Are we working on it? 00:50:51.400 --> 00:50:52.110 So, yes. 00:50:52.110 --> 00:50:54.170 So far, we are under investigation. 00:50:54.170 --> 00:50:56.520 It's part of a more bigger story, actually. 00:50:56.520 --> 00:51:01.470 So, the best thing you can do is to provide us feedback on User Voice 00:51:01.470 --> 00:51:03.560 to let us know why it's really important for you. 00:51:03.560 --> 00:51:04.810 Then, ask people to vote. 00:51:04.810 --> 00:51:07.130 That's the best way to communicate with us. 00:51:07.130 --> 00:51:09.280 But, yes, we know it's really important. 00:51:09.280 --> 00:51:11.035 And it's under consideration. 00:51:11.035 --> 00:51:13.650 >> [INAUDIBLE] >> Yeah. 00:51:13.650 --> 00:51:16.690 It's, some of the other parts can be easily prefilled 00:51:16.690 --> 00:51:18.790 on the web partners, I know with this one. 00:51:18.790 --> 00:51:22.230 One other question. 00:51:22.230 --> 00:51:23.355 Yep? 00:51:23.355 --> 00:51:23.855 >> So how long are we going to maintain IE 11? 00:51:27.350 --> 00:51:30.679 >> So the question is, how long are we going to maintain IE 11? 00:51:30.679 --> 00:51:35.034 IE 11 is part of Windows 10, so 00:51:35.034 --> 00:51:39.250 same life cycle as Windows 10. 00:51:39.250 --> 00:51:41.230 >> Life cycle like Vista? 00:51:41.230 --> 00:51:43.438 >> I have no idea for this, I am so sorry about that. 00:51:43.438 --> 00:51:49.780 I can dig into our support staff [FOREIGN] and I find out for you. 00:51:49.780 --> 00:51:55.093 But IE 11 would be supported as long as Windows 10 will be supported, 00:51:55.093 --> 00:51:57.194 it's part of Windows 10. 00:51:57.194 --> 00:51:58.654 Yes? 00:51:58.654 --> 00:51:59.813 >> What's on your t-shirt? 00:51:59.813 --> 00:52:00.845 >> That's a good question. 00:52:00.845 --> 00:52:03.698 [LAUGH] What's on my t-shirt? 00:52:03.698 --> 00:52:09.070 [LAUGH] So I keep this question, I just want to be sure. 00:52:09.070 --> 00:52:10.946 Is there any other question I? 00:52:10.946 --> 00:52:11.782 >> Yep. 00:52:11.782 --> 00:52:12.618 >> Yep. 00:52:12.618 --> 00:52:17.060 >> [INAUDIBLE] >> Yes. 00:52:17.060 --> 00:52:20.390 The question is, is Microsoft 10 will be Windows 10 only? 00:52:20.390 --> 00:52:22.035 And yes, the answer is yes. 00:52:22.035 --> 00:52:25.520 Yep. 00:52:25.520 --> 00:52:34.810 >> [INAUDIBLE] 00:52:34.810 --> 00:52:38.051 >> Most of the time, if you are in 00:52:38.051 --> 00:52:44.855 the about flags, I think that is here. No. 00:52:44.855 --> 00:52:46.410 >> [INAUDIBLE] 00:52:46.410 --> 00:52:47.120 >> Okay. 00:52:47.120 --> 00:52:48.107 >> Yeah, so it's a good question for 00:52:48.107 --> 00:52:49.105 you [CROSSTALK] >> But the question, 00:52:49.105 --> 00:52:51.270 can you repeat the question? >> So the question is, 00:52:51.270 --> 00:52:55.250 some of the features are under flags now in the Microsoft Edge. 00:52:55.250 --> 00:52:57.910 So I have to go to about flags to enable them. 00:52:57.910 --> 00:53:01.724 If I'm using Windows 10 Web View, can I use, for instance, SMGS? 00:53:01.724 --> 00:53:06.480 >> No, you won't be able to [INAUDIBLE]. 00:53:06.480 --> 00:53:08.480 >> I was pretty sure but I just wanted to make sure. 00:53:08.480 --> 00:53:11.510 >> The answer is no. Yup. 00:53:11.510 --> 00:53:12.715 Question over there? 00:53:12.715 --> 00:53:16.460 >> [INAUDIBLE]. 00:53:16.460 --> 00:53:18.655 >> Yes. We are working on implementing Web 00:53:18.655 --> 00:53:20.310 driver into Microsoft Edge. 00:53:23.296 --> 00:53:24.491 Yes? 00:53:24.491 --> 00:53:31.200 >> [INAUDIBLE] >> Extension. 00:53:31.200 --> 00:53:33.050 You mean JavaScript extension right? 00:53:33.050 --> 00:53:37.280 So far, I cannot answer this question because it's really 00:53:37.280 --> 00:53:38.540 too early for us. 00:53:38.540 --> 00:53:40.730 We already did a demonstration yesterday. 00:53:40.730 --> 00:53:43.580 I don't know, it was two days ago during the keynote. 00:53:43.580 --> 00:53:44.170 It's possible. 00:53:44.170 --> 00:53:47.100 We are working on that but everything related to performance 00:53:47.100 --> 00:53:49.760 and things like that, we are too early in our development cycle. 00:53:50.870 --> 00:53:52.215 Hopefully no, clearly. 00:53:52.215 --> 00:54:02.590 >> [INAUDIBLE] 00:54:02.590 --> 00:54:03.090 >> I don't know. 00:54:04.400 --> 00:54:06.100 I'm so sorry, but I don't know. 00:54:06.100 --> 00:54:07.990 It's a different part of the engineering team. 00:54:07.990 --> 00:54:09.700 So, I don't want to say something wrong. 00:54:09.700 --> 00:54:12.010 So, I don't know. 00:54:12.010 --> 00:54:12.604 Yes? 00:54:12.604 --> 00:54:13.620 [LAUGH]. 00:54:13.620 --> 00:54:15.145 >> [INAUDIBLE]. 00:54:15.145 --> 00:54:17.586 >> So the questions is, 00:54:17.586 --> 00:54:23.150 is CSS tutoring is working with CSS transition? 00:54:24.210 --> 00:54:26.660 I tested with transition, so, yes. 00:54:26.660 --> 00:54:30.790 And for animation, I don't see any reason why it should not. 00:54:30.790 --> 00:54:34.120 I just checked but 99% it's okay. 00:54:34.120 --> 00:54:37.679 And I see that Jacob say, yes, so it's 100% yes. 00:54:37.679 --> 00:54:39.424 [LAUGH]. Yep? 00:54:39.424 --> 00:54:43.177 >> For the app support rules in CSS, 00:54:43.177 --> 00:54:46.670 is that a [INAUDIBLE] standard? 00:54:46.670 --> 00:54:47.810 >> Absolutely sir, absolutely. 00:54:49.230 --> 00:54:51.291 >> Do you know how widely that's supported in browsers? 00:54:51.291 --> 00:54:53.996 >> I know that it's supported in Chrome. 00:54:53.996 --> 00:54:55.540 We can go to. 00:54:55.540 --> 00:54:56.603 Do you know this site? 00:54:56.603 --> 00:55:01.820 >> [INAUDIBLE] >> It's not yet- 00:55:01.820 --> 00:55:02.455 >> Yeah, it's not yet. 00:55:02.455 --> 00:55:09.400 >> [INAUDIBLE] >> So yes, it's supported. 00:55:09.400 --> 00:55:11.360 >> Firefox, Chrome, Edge, wonderful. 00:55:11.360 --> 00:55:12.356 We live in a wonderful world. 00:55:12.356 --> 00:55:16.486 >> No Safari, interesting. 00:55:17.743 --> 00:55:20.800 >> [LAUGH] >> [INAUDIBLE] 00:55:20.800 --> 00:55:21.446 >> Yes? 00:55:21.446 --> 00:55:26.094 >> [INAUDIBLE] >> Web socket? 00:55:26.094 --> 00:55:27.350 Yes sir. 00:55:27.350 --> 00:55:29.165 And that's a good transition, thank you. 00:55:29.165 --> 00:55:32.860 [LAUGH] Because what I have on my shirt is based on WebSocket. 00:55:32.860 --> 00:55:37.010 So issue one guys, we have just four minutes. 00:55:37.010 --> 00:55:38.050 If you have any other question, 00:55:38.050 --> 00:55:40.250 please feel free to ask us right after. 00:55:40.250 --> 00:55:43.288 I just want to show you what JS is. 00:55:43.288 --> 00:55:46.618 We announced that yesterday, so let's explain what the product is. 00:55:46.618 --> 00:55:49.820 We decided just after JS to work on a new framework. 00:55:49.820 --> 00:55:53.080 So we love writing new frameworks to help developers. 00:55:53.080 --> 00:55:56.028 But apparently not all developer are web ad developer, 00:55:56.028 --> 00:55:58.190 so we discovered that recently. 00:55:58.190 --> 00:56:01.586 And then, we decided to work on the framework that could help more 00:56:01.586 --> 00:56:03.470 developer than just WebGL. 00:56:03.470 --> 00:56:08.600 And when we were writing our own code, we found that it was so 00:56:08.600 --> 00:56:12.468 complex to debug it on all the mobile versions. 00:56:12.468 --> 00:56:15.610 When you're writing some code, you want to write it once and 00:56:15.610 --> 00:56:18.700 run it everywhere, but then if you want to run it everywhere, 00:56:18.700 --> 00:56:21.270 you need to debug it everywhere. 00:56:21.270 --> 00:56:24.440 The problem with that is there are many different tools to do that, but 00:56:24.440 --> 00:56:27.500 no tools for running really everywhere to help us. 00:56:27.500 --> 00:56:30.150 So we decided to write a debugging 00:56:30.150 --> 00:56:32.460 tool framework to help you doing that. 00:56:32.460 --> 00:56:38.090 And only based on pure JavaScript CSS and using a Node.js server 00:56:38.090 --> 00:56:43.370 on the back end to enable real time communication using WebSockets. 00:56:43.370 --> 00:56:47.910 >> So here I have a Node.js server, I just do npm install Vorlon. 00:56:47.910 --> 00:56:49.240 That's it, nothing more. 00:56:49.240 --> 00:56:51.500 That will run and provide me a dashboard. 00:56:51.500 --> 00:56:52.310 The dashboard is here. 00:56:52.310 --> 00:56:54.450 I can go just look at it to my dashboard. 00:56:54.450 --> 00:56:57.279 If we'll wait for any connection using Web Sockets, for instance, 00:56:57.279 --> 00:56:58.254 if it's supported, or 00:56:58.254 --> 00:57:00.771 using polling with it's assurity if it's not supporting. 00:57:00.771 --> 00:57:03.400 We are using Socket.IO to do that. 00:57:03.400 --> 00:57:05.130 It works almost everywhere. 00:57:05.130 --> 00:57:06.045 That works on my fridge. 00:57:06.045 --> 00:57:10.750 [LAUGH] So I have a demo here, specially for 00:57:10.750 --> 00:57:13.990 that, and I just want to show you this demo. 00:57:13.990 --> 00:57:15.620 Let's open it here. 00:57:15.620 --> 00:57:17.840 And I have this one. 00:57:17.840 --> 00:57:23.470 So we introduce preserve 3D support inside Edge as well. 00:57:23.470 --> 00:57:26.600 So we have the wedge, we do this kind of really cool stuff. 00:57:26.600 --> 00:57:31.690 I'm trying to reproduce what we have now on my XBMC media player. 00:57:31.690 --> 00:57:34.050 That's pretty cool and if I don't have a preserve for it. 00:57:34.050 --> 00:57:38.820 So this is just a demo I want to give because what. 00:57:40.350 --> 00:57:41.092 Oh, I can not. 00:57:41.092 --> 00:57:43.390 This demo is not working on a specific device. 00:57:43.390 --> 00:57:46.230 That's not easy to know if I'm using a phone, 00:57:46.230 --> 00:57:47.890 I don't understand why that's not working. 00:57:47.890 --> 00:57:52.928 So, what I can do is just add in my 00:57:52.928 --> 00:58:01.520 code here a reference to http://localhost. 00:58:01.520 --> 00:58:03.550 So my server is running on this URL. 00:58:03.550 --> 00:58:05.460 And I just want vorlon.js. 00:58:05.460 --> 00:58:06.280 That's it. 00:58:06.280 --> 00:58:07.920 You don't need anything more. 00:58:07.920 --> 00:58:09.380 Crap. 00:58:09.380 --> 00:58:12.530 You don't need anything more. 00:58:12.530 --> 00:58:13.100 Sounds good. 00:58:13.100 --> 00:58:14.470 >> You need to type it correctly. 00:58:14.470 --> 00:58:16.240 >> Yeah, and I'm not really good at that, right? 00:58:16.240 --> 00:58:20.610 >> This is a most difficult part, we still try to fix that, to help you. 00:58:20.610 --> 00:58:22.658 >> [LAUGH] Sounds like, oh no it's not good, 00:58:22.658 --> 00:58:25.750 because I forgot this one yeah, thank you. 00:58:25.750 --> 00:58:27.200 It could be long for me. 00:58:28.860 --> 00:58:33.490 And then going back here, I'm reloading this page xxyy, okay? 00:58:36.520 --> 00:58:38.019 >> And go on to that web site. 00:58:39.170 --> 00:58:41.200 >> I forgot something but let me check that here. 00:58:43.190 --> 00:58:46.430 And so I'm working on UI Analysis Tool, 00:58:46.430 --> 00:58:49.370 so please don't consider the iPhone stuff here. 00:58:49.370 --> 00:58:52.338 I'm just trying to analyze the user string sent by the client so 00:58:52.338 --> 00:58:54.890 I want to say, hey it's an iPhone or whatever. 00:58:54.890 --> 00:58:55.540 I'm just working on that. 00:58:55.540 --> 00:58:58.540 So here, by just clicking on my client, 00:58:58.540 --> 00:58:59.770 I can see that I have my [INAUDIBLE]. 00:58:59.770 --> 00:59:03.840 So this client can be on any device that can reach the server. 00:59:03.840 --> 00:59:05.650 So if you want to use it publicly, 00:59:05.650 --> 00:59:08.700 you just have to put that on any server, on Azure or whatever. 00:59:08.700 --> 00:59:13.390 It will work and you can see that you have your here. 00:59:13.390 --> 00:59:16.700 You can obviously click on any element to see, oh yeah okay, 00:59:16.700 --> 00:59:20.330 I see you are using this stuff. 00:59:20.330 --> 00:59:25.410 By selecting things like, let me find a GUI for instance. 00:59:25.410 --> 00:59:29.700 You can then have red rectangle around the selected item, so 00:59:29.700 --> 00:59:32.520 you know where you are and what you are working with. 00:59:32.520 --> 00:59:34.460 And you also have the console here. 00:59:34.460 --> 00:59:37.260 The console is really important, because if something is 00:59:37.260 --> 00:59:41.100 crashing on the device, it will send some messages on the console. 00:59:41.100 --> 00:59:43.190 The console will send all the messages for you, 00:59:43.190 --> 00:59:44.150 back to your dashboard. 00:59:44.150 --> 00:59:45.900 So you know what's happening. 00:59:45.900 --> 00:59:49.865 I wanted to show you also ferb plug-in here. 00:59:49.865 --> 00:59:53.428 We are using modernizer on the device to know all the feature 00:59:53.428 --> 00:59:55.550 capabilities of your device. 00:59:55.550 --> 00:59:58.250 Send that back to the dashboard so you can notice okay, 00:59:58.250 --> 01:00:01.740 this specific device sounds like it's supporting for instance, 01:00:01.740 --> 01:00:04.180 CSS Transform 3D or Preserve 3D or whatever. 01:00:04.180 --> 01:00:06.720 We have all the list here, and 01:00:06.720 --> 01:00:10.300 I'm pretty proud to show that it's on DreamWeaver Edge. 01:00:10.300 --> 01:00:10.880 That's cool. 01:00:10.880 --> 01:00:13.789 Oh no, we are not supporting SQL database but that's okay. 01:00:13.789 --> 01:00:17.860 That's the old one. 01:00:17.860 --> 01:00:21.340 You can also here, add hot air or whatever. 01:00:21.340 --> 01:00:25.050 You can just say I want to execute something here in my console and 01:00:25.050 --> 01:00:26.890 this will be executed on the client. 01:00:26.890 --> 01:00:29.230 So you can control this kind of stuff. 01:00:29.230 --> 01:00:30.190 You can do that. 01:00:30.190 --> 01:00:30.910 It's free. 01:00:30.910 --> 01:00:33.960 Please use that on any of your debugging step and 01:00:33.960 --> 01:00:37.160 we are open to any contributions of >> It's open source. 01:00:37.160 --> 01:00:40.470 >> Yeah. Then we will add web audio plugins 01:00:40.470 --> 01:00:47.700 to allow you to show the node and to display the node web audio stuff. 01:00:47.700 --> 01:00:50.880 We think about connecting to debug mode as well. 01:00:50.880 --> 01:00:52.920 So, for instance, you are writing on Firefox OS. 01:00:52.920 --> 01:00:56.230 There is a debugger port where we can connect to know where we are in 01:00:56.230 --> 01:00:59.680 the code and probably put some break point perhaps in the future. 01:00:59.680 --> 01:01:02.270 So, it's a really open infrastructure. 01:01:02.270 --> 01:01:02.850 It's really at 01:01:02.850 --> 01:01:05.730 full because most of the time when we're dealing with mobile devices, 01:01:05.730 --> 01:01:09.890 code of application, anything that's really hard to develop. 01:01:09.890 --> 01:01:12.010 This provide very first ad kit. 01:01:13.880 --> 01:01:15.520 Thank you all for being there. 01:01:15.520 --> 01:01:16.428 I really appreciate it. 01:01:16.428 --> 01:01:23.810 >> [APPLAUSE] >> Don't forget to evaluate. 01:01:23.810 --> 01:01:25.317 >> Thank you, thank you. 01:01:25.317 --> 01:01:28.330 [FOREIGN]