1
00:00:02,180 --> 00:00:06,620
If you're writing an application with Javascript, if you're writing some Javascript code that should

2
00:00:06,620 --> 00:00:12,040
run in a browser, you of course need to find out if a certain feature you're planning to use is available

3
00:00:12,110 --> 00:00:14,900
and of course that might be the case multiple times in a project

4
00:00:14,900 --> 00:00:20,830
if you're using multiple features where you're not sure. Now of course there is a certain core feature set,

5
00:00:20,840 --> 00:00:26,930
core syntax that is available in most browsers but it comes with experience that you know what

6
00:00:27,020 --> 00:00:29,870
is available where and for newer features

7
00:00:29,890 --> 00:00:34,190
but even for older features where you're just not sure whether they're supported everywhere,

8
00:00:34,250 --> 00:00:39,890
there are a couple of resources you can check to find out how browsers support is looking for these

9
00:00:39,890 --> 00:00:40,860
features.

10
00:00:40,880 --> 00:00:42,660
One resource is MDN,

11
00:00:42,800 --> 00:00:49,280
we already used MDN throughout this course because it is a great resource for getting more information about

12
00:00:49,280 --> 00:00:57,000
Javascript functionalities, diving deeper into Javascript features and simply learning more about Javascript.

13
00:00:57,020 --> 00:01:03,320
Now whenever you are on an article, on a page on MDN about a certain feature, you'll find a browser

14
00:01:03,320 --> 00:01:05,580
support table in that same article,

15
00:01:05,600 --> 00:01:11,780
typically at the bottom of the article. The table there or the article might also not just give you

16
00:01:11,780 --> 00:01:17,630
that a rough overview over which browser version supports which feature, it might also give you extra

17
00:01:17,630 --> 00:01:23,810
notes, hints about how you can work around missing browser support, fallbacks and so on.

18
00:01:24,710 --> 00:01:30,590
Let's take the fetch API as an example, here I googled for fetch and i get the MDN result as the

19
00:01:30,590 --> 00:01:34,340
first result and now I'm here on the article.

20
00:01:34,360 --> 00:01:38,980
We can learn more about fetch and that's all nice but if we scroll down, we see the browser compatibility

21
00:01:38,980 --> 00:01:40,090
table here.

22
00:01:40,270 --> 00:01:42,980
Now there, you see various browsers,

23
00:01:43,000 --> 00:01:48,610
here you also see the differentiation between desktop browsers and mobile browsers and then you see

24
00:01:48,880 --> 00:01:55,450
how well they're supporting fetch and different variations or different niche features of the fetch

25
00:01:55,450 --> 00:02:00,150
API and you see for fetch, the support is generally quite good,

26
00:02:00,160 --> 00:02:06,300
Chrome supports it, Edge, Firefox, Opera, Safari but for example Internet Explorer does not.

27
00:02:06,310 --> 00:02:10,120
You'll also see since which version this is getting supported

28
00:02:10,120 --> 00:02:14,780
and if you expand this, here on Firefox for example, you got this on a couple of browsers,

29
00:02:14,920 --> 00:02:18,910
you'll learn more about it, how it is enabled there and so on.

30
00:02:19,090 --> 00:02:21,000
So that should give you a first good idea

31
00:02:21,010 --> 00:02:26,830
and if you for example know that you don't need to support Internet Explorer in your application because

32
00:02:27,100 --> 00:02:31,060
you're targeting users who are not likely to use Internet Explorer,

33
00:02:31,060 --> 00:02:37,120
well then you can of course simply go ahead and use fetch like this and it should work in all these

34
00:02:37,120 --> 00:02:41,370
browsers. Maybe you want more details though

35
00:02:41,420 --> 00:02:44,540
or simply an alternative source to double check

36
00:02:44,690 --> 00:02:52,520
and then caniuse.com is another great resource for determining browser support for a certain feature.

37
00:02:52,530 --> 00:02:58,250
There, you can search for a feature name to get a detailed overview over that feature and which browser

38
00:02:58,270 --> 00:03:05,330
support it, you even get market shares so that you can see how many users will be able to use this feature

39
00:03:05,420 --> 00:03:07,730
if you implement it in your application,

40
00:03:07,730 --> 00:03:12,110
so how many users are using which browser and then this is added up for you

41
00:03:12,110 --> 00:03:16,730
so that you get an impression of how many people you could reach and how many people on the other hand

42
00:03:16,730 --> 00:03:17,990
would visit your web site

43
00:03:18,000 --> 00:03:24,480
and it would just not work as expected. This page, just like MDN also often includes notes and fallbacks

44
00:03:24,480 --> 00:03:30,410
and workarounds to give you extra information and extra ideas on how you can make something work.

45
00:03:31,030 --> 00:03:34,190
So for that, you can visit caniuse.com and here for example,

46
00:03:34,190 --> 00:03:36,110
you could just type fetch, by the way

47
00:03:36,110 --> 00:03:39,910
you can also type something like let and find out how the let keyword is supported.

48
00:03:40,040 --> 00:03:44,130
So it's not just about browser APIs but also about syntax features.

49
00:03:44,150 --> 00:03:49,800
So here I'm searching for fetch though and now you see this table, there you see various browsers,

50
00:03:49,800 --> 00:03:55,760
also desktop browsers and then the mobile versions and you see which versions are supporting a feature,

51
00:03:55,790 --> 00:03:58,790
which versions are supporting parts of that feature,

52
00:03:58,790 --> 00:04:00,620
which versions are not supporting it

53
00:04:00,680 --> 00:04:04,890
and there you also see how many people are using these browser versions,

54
00:04:04,880 --> 00:04:12,110
for example Chrome 4 to Chrome 39 in this example is getting used by 0.26% of all users,

55
00:04:12,170 --> 00:04:13,490
so not that many of course.

56
00:04:13,490 --> 00:04:19,310
For example if we go to this stable version, we got almost 30% using one of these versions here which

57
00:04:19,310 --> 00:04:20,880
does support fetch.

58
00:04:21,020 --> 00:04:26,150
We see Internet Explorer is not supporting it and there we see overall, we would miss out on around 2%

59
00:04:26,150 --> 00:04:27,640
of users

60
00:04:27,800 --> 00:04:35,690
if we use fetch and we ship that on our page, 2% of all users would not be able to use our page

61
00:04:35,690 --> 00:04:38,880
correctly because fetch would just not work there.

62
00:04:38,930 --> 00:04:44,760
So this can be another great resource for finding out how well a certain feature is supported. Here you also

63
00:04:44,840 --> 00:04:47,920
find additional notes that might be interesting,

64
00:04:48,200 --> 00:04:53,540
you'll find subfeatures, so features related to that feature which might also be interesting to you

65
00:04:53,970 --> 00:04:58,160
and under resources, you can find additional information,

66
00:04:58,160 --> 00:05:03,130
for example a polyfill, something that will become interesting later and so on.

67
00:05:03,200 --> 00:05:08,720
So this is another very useful resource and MDN and caniuse.com together are the two

68
00:05:08,720 --> 00:05:13,730
resources I commonly used to find out how well something is supported.

69
00:05:13,730 --> 00:05:19,850
Now we don't stop there however, there also is Google of course. Now the first two resources are by far

70
00:05:19,850 --> 00:05:26,030
the most important but for some niche feature or some advanced use case, it can also be useful to just

71
00:05:26,150 --> 00:05:31,730
google for it, something like fetch Javascript browser support and then check the results. You'll of course

72
00:05:31,730 --> 00:05:33,920
also find MDN and caniuse there

73
00:05:33,980 --> 00:05:39,630
but you might also find some stack overflow discussions that might contain additional useful hints,

74
00:05:39,650 --> 00:05:44,720
for example there you might also learn how you can make it work in older browsers as well.

75
00:05:45,580 --> 00:05:48,030
So these are three great resources for that.

76
00:05:48,130 --> 00:05:53,730
Now when we talk about Javascript syntax features, there is another very interesting feature, that's

77
00:05:53,720 --> 00:05:59,980
a specific ES6 Javascript compat table, compat for compatibility.

78
00:05:59,980 --> 00:06:05,920
It's a web site which you can visit where you find a detailed list of Javascript syntax features and

79
00:06:05,920 --> 00:06:08,660
which browser is supporting these features,

80
00:06:08,740 --> 00:06:14,560
so it's great for checking whether some next generation Javascript feature is available. You'll find

81
00:06:14,560 --> 00:06:20,500
a detailed feature split there and it even shows you support of various transpilers, something I'll

82
00:06:20,500 --> 00:06:26,290
come back to later in this course, so that you can learn that even if a browser does not support a feature,

83
00:06:26,590 --> 00:06:33,580
whether you can make it work with a certain transpilation tool. If you will google for E56 compat table,

84
00:06:33,580 --> 00:06:38,980
you should find this ECMAScript 6 compatibility table by kangax and if you visit this, you'll find

85
00:06:39,040 --> 00:06:40,620
this page here,

86
00:06:40,630 --> 00:06:42,710
now that's a huge table here.

87
00:06:42,820 --> 00:06:49,810
Now what you see here is for one up there, you can choose Javascript versions, ES6 and then even more,

88
00:06:49,900 --> 00:06:53,230
next gen 2016+ and so on.

89
00:06:53,250 --> 00:06:58,360
You can simply click through that and learn about certain features, like the global this keyword here

90
00:06:58,360 --> 00:07:03,580
which is a very new feature or if you go back to E56, about rest parameters which you learned all

91
00:07:03,580 --> 00:07:05,440
about, const, let

92
00:07:05,440 --> 00:07:06,470
and so on

93
00:07:06,640 --> 00:07:11,710
and then here you see how support is looking for it. You see compilers and polyfills,

94
00:07:11,710 --> 00:07:17,290
so this basically shows you if you can make this feature work everywhere with some tools and there you

95
00:07:17,290 --> 00:07:22,300
see for const and let, support would be pretty good for example but then if you scroll to the right, you also

96
00:07:22,300 --> 00:07:28,300
find browsers, desktop browsers to be precise and you'll learn how support is looking like in Firefox

97
00:07:28,300 --> 00:07:34,780
different versions, Chrome different versions, Safari, Edge, Internet Explorer and you'll see that for example

98
00:07:34,780 --> 00:07:41,980
Internet Explorer 11 is having some support for const and let actually, older versions of Internet

99
00:07:41,980 --> 00:07:47,800
Explorer will not have that however. So this can also be nice to learn whether some core Javascript syntax

100
00:07:47,860 --> 00:07:53,170
is available there. If you scroll all the way to the right by the way, you can even see that for Node.js,

101
00:07:53,210 --> 00:07:58,960
so if you don't plan on running your Javascript code in the browser but instead with Node.js, something

102
00:07:58,960 --> 00:08:03,490
I will come back to in a separate module, then here you can learn which Node.js version you need

103
00:08:03,490 --> 00:08:07,030
to use to support certain core Javascript features.

104
00:08:07,210 --> 00:08:12,010
So this is the last really useful resource I want to show you so that you can build your application in

105
00:08:12,010 --> 00:08:17,680
the best possible way and find out which browser supports which feature and which syntax.