1
00:00:02,160 --> 00:00:04,000
Now that is the front- end code.

2
00:00:04,000 --> 00:00:05,590
And again, we'll see it in action

3
00:00:05,590 --> 00:00:07,870
in a couple of minutes, no worries.

4
00:00:07,870 --> 00:00:10,300
I wanted to explain it in great detail though

5
00:00:10,300 --> 00:00:11,870
so that we're all on the same page,

6
00:00:11,870 --> 00:00:13,800
and you have a chance of understanding it

7
00:00:13,800 --> 00:00:15,840
once you see the action soon.

8
00:00:15,840 --> 00:00:18,770
But now one big question might come up:

9
00:00:18,770 --> 00:00:20,770
Why are we doing that?

10
00:00:20,770 --> 00:00:24,680
Why are we not just adding a regular view to the backend

11
00:00:24,680 --> 00:00:27,360
and we rendered this dynamic data on the backend

12
00:00:27,360 --> 00:00:29,093
as we did it before in the course.

13
00:00:30,040 --> 00:00:33,010
So why might we wanna have such a decoupled fronted

14
00:00:33,010 --> 00:00:34,720
which runs on a different server,

15
00:00:34,720 --> 00:00:38,430
which uses these Ajax requests to talk to a backend?

16
00:00:38,430 --> 00:00:42,701
The answer is we could absolutely add views to the backend,

17
00:00:42,701 --> 00:00:45,610
but maybe we built an API;

18
00:00:45,610 --> 00:00:49,710
we decided to go for an API instead of a classic website

19
00:00:49,710 --> 00:00:52,320
because we wanna have our clients as well.

20
00:00:52,320 --> 00:00:55,370
Maybe we also are building a mobile app that should talk to

21
00:00:55,370 --> 00:00:56,420
this API.

22
00:00:56,420 --> 00:00:59,550
And therefore we went for an API instead of a classic

23
00:00:59,550 --> 00:01:00,383
website.

24
00:01:00,383 --> 00:01:02,830
This could be one reason for having such a decoupled

25
00:01:02,830 --> 00:01:05,880
front-end. Another reason could be that such a decoupled

26
00:01:05,880 --> 00:01:07,190
front-end,

27
00:01:07,190 --> 00:01:10,541
which is served by a different server and where JavaScript,

28
00:01:10,541 --> 00:01:14,360
browser side JavaScript, is responsible for updating the

29
00:01:14,360 --> 00:01:18,750
user interface could provide a better user experience,

30
00:01:18,750 --> 00:01:20,760
not necessarily in all cases,

31
00:01:20,760 --> 00:01:24,370
but it could provide a better experience because since we

32
00:01:24,370 --> 00:01:26,520
use browser side JavaScript code,

33
00:01:26,520 --> 00:01:31,150
we never have to wait for a response from the server.

34
00:01:31,150 --> 00:01:33,830
I mean, we technically do, but for the user,

35
00:01:33,830 --> 00:01:35,460
when the user clicks a button,

36
00:01:35,460 --> 00:01:39,651
it's not the case that he or she sees the page refreshing,

37
00:01:39,651 --> 00:01:44,360
or has to wait for a response where the user might see an

38
00:01:44,360 --> 00:01:46,840
empty page whilst we're waiting. But instead,

39
00:01:46,840 --> 00:01:50,420
the user just sees a user interface and the page on which

40
00:01:50,420 --> 00:01:53,760
the user is never reloads the visitor off this page,

41
00:01:53,760 --> 00:01:56,520
never loads a different page because we have only one HTML

42
00:01:56,520 --> 00:01:58,570
file.

43
00:01:58,570 --> 00:02:00,160
And then it's the JavaScript code,

44
00:02:00,160 --> 00:02:02,550
which updates this existing page.

45
00:02:02,550 --> 00:02:03,430
But therefore,

46
00:02:03,430 --> 00:02:06,120
since all this updating happens behind the scenes,

47
00:02:06,120 --> 00:02:09,419
we could provide a better user experience because to the

48
00:02:09,419 --> 00:02:10,830
user, to the visitor,

49
00:02:10,830 --> 00:02:15,060
it's almost this mobile app like experience, where you are

50
00:02:15,060 --> 00:02:18,530
on a user interface and you never have a flashing white

51
00:02:18,530 --> 00:02:20,660
screen whilst a new page loads,

52
00:02:20,660 --> 00:02:23,740
but instead parts of that user interface update,

53
00:02:23,740 --> 00:02:28,410
as you interact with it, for example,

54
00:02:28,410 --> 00:02:31,660
here only the unordered list will update the rest of the

55
00:02:31,660 --> 00:02:34,260
pages static and will never change.

56
00:02:34,260 --> 00:02:36,730
And this could be a better user experience,

57
00:02:36,730 --> 00:02:40,100
not necessarily always, but it could be.

58
00:02:40,100 --> 00:02:43,180
So these are reasons why we might go for such a decoupled

59
00:02:43,180 --> 00:02:46,541
front-end and nowadays in modern web development,

60
00:02:46,541 --> 00:02:49,460
it's pretty normal to have decoupled

61
00:02:49,460 --> 00:02:53,512
front-ends, just as it is also still normal to build classic

62
00:02:53,512 --> 00:02:56,289
websites as you learned it throughout this course.

63
00:02:56,289 --> 00:02:57,750
And as you learned, you

64
00:02:57,750 --> 00:03:01,850
can also easily transition from classic websites to APIs.

65
00:03:01,850 --> 00:03:04,630
That's hopefully one of the main takeaways in this section

66
00:03:04,630 --> 00:03:07,240
anyways, but with that,

67
00:03:07,240 --> 00:03:10,470
this is why we might want to have such a decoupled front-end

68
00:03:10,470 --> 00:03:14,370
and this is how the code generally works there.

69
00:03:14,370 --> 00:03:15,900
But now that was a lot of talking.

70
00:03:15,900 --> 00:03:18,350
Let's finally see how it works.

71
00:03:18,350 --> 00:03:21,403
And there we'll see that we run into an error.