MAD 2 - Lectures

0:00this way for a few reasons but we are

0:02also doing it as a trial i want to sort

0:03of see how this works out moving forward

0:06and uh you know depending on

0:09how this works we might have more of

0:10these live sessions

0:12uh for the videos uh and of course it's

0:14being recorded so you know it should be

0:16possible for everyone to see it later as

0:17well

0:19all right so uh just a couple of quick

0:22things regarding how we are going to do

0:24this

0:24um

0:25i will

0:27be doing you know partly a presentation

0:30but it's not a very long presentation

0:32it's just sort of an overview of some

0:33concepts

0:34and after that i will basically be going

0:36through a bit of a demo right of some

0:39code that hopefully serves to illustrate

0:42some of the ideas that i am talking

0:43about in the initial part of the talk

0:47now the way that

0:48i think we can take this forward is that

0:52you know let's try and keep it

0:54reasonably interactive okay which means

0:56that

0:58you are pretty much free to ask

1:00questions at any point

1:02okay

1:05although the one catch over there is

1:06because i am trying to present and at

1:08the same time also talking right i am

1:10not sure how quickly i will be able to

1:12pick up on the questions

1:14now in any case this

1:16uh

1:17talk that i have got is reasonably

1:19structured into sort of parts right

1:22meaning that you know initially there is

1:23a presentation and then afterwards there

1:25are like multiple implementations that i

1:26will be walking through after each one

1:28of them i will be sort of pausing right

1:30so we can definitely sort of take

1:31questions and so on at that point

1:34right

1:36if there is something that is unclear

1:38then you are welcome to you know uh

1:42raise your hand or even you know just

1:44sort of

1:45uh unmute and talk if necessary please

1:48avoiding i avoid unmuting directly for

1:50the most part if you raise your hand i

1:52think i will be able to pick it up or i

1:53would request abhishek or one of the

1:54other co-instructors to you know just

1:56alert me to it in case i haven't noticed

1:58it

2:00but

2:01i i think for the most part you know i

2:02would like to see if this can be kept

2:04sort of reasonably interactive

2:06as of now we have somewhere around 50

2:08participants which is still fine it's

2:09not too large a number

2:11uh as long as all of you remain on mute

2:14unless you have a specific question to

2:15ask i think we should be fine

2:17okay so uh

2:19like i said you know because i will be

2:21switching between the

2:23presentation and

2:25talking over here i'm going to turn off

2:26the video from my side but

2:29and you know

2:30get started with the presentation

2:33before we start are there any specific

2:35questions or anything anybody would like

2:36to ask

2:38as we move forward

2:41one request is that you know let's keep

2:43the questions

2:45to start with at least focused on

2:46today's topic

2:48at the end of the session depending on

2:50time i am happy to take further

2:51questions if needed

2:53okay

2:56all right um

2:57abhishek if there is anything i have

2:59missed or anything let you know please

3:00let me know at any point otherwise we

3:02just continue

3:04sure sir i guess that would be a better

3:05model i think everyone should remain on

3:08view and if in case anyone wants to ask

3:11anything they can just raise their hands

3:13and if you can notice this that would be

3:15okay but if you are not able to notice

3:18at that moment or maybe

3:20for some time we will allow you at that

3:21point sounds good thank you

3:25all right so

3:27let's get started um just give me one

3:29moment please

3:58yes i'm back

4:00um okay so

4:02today's topic is basically we are going

4:05to be talking about

4:07what it means

4:08or rather different techniques and

4:10different concepts that are associated

4:12with the idea of implementing

4:14a front end

4:15okay

4:16so

4:17from mad one essentially we have already

4:19you know in mad one we primarily focused

4:21on the so called back end and

4:22application logic itself right i mean we

4:24have some

4:25code written in python flask

4:28that allows us to

4:30implement a database connectivity

4:32the http server functionality the

4:35controller right and the different views

4:37which of course we did using templates

4:40jinja templates in the case of madwin

4:42and as you know we had already discussed

4:45that

4:46in math 2 one of the things we are going

4:47to do is look a little bit deeper into

4:49the front end right and see some few

4:52more techniques by which you can get

4:55a better user experience in terms of

4:57what can happen on the front end okay

5:01so

5:01first things first what do we mean by

5:03the front end right and in this context

5:06what i'm saying is this is the user

5:07facing part of an app

5:09okay it usually you will see these terms

5:11user interface which is ui and user

5:14experience which is ux coming up very

5:16often in conversation right or when you

5:18are reading on any articles

5:20and ultimately that's the important part

5:22the user is very important as far as the

5:24front end is concerned okay

5:26and it's sort of easy to dismiss it and

5:29say that oh you know it's like

5:32it's just about making it look fancy but

5:34that's not really the case the point is

5:36a good user interface and a good user

5:38experience

5:39can make the difference between an app

5:41that somebody will actually use versus

5:43something that has great functionality

5:45but nobody is interested in actually

5:47using it

5:48one very important thing to keep in mind

5:50over here is

5:51a good user interface is not the same

5:53thing as a fancy user interface

5:56okay in fact one of the

5:58most powerful and good user interfaces

6:01in existence is the so called command

6:03line

6:04right so those of you who have used the

6:06linux command line would be familiar

6:08with that you know that you know you can

6:09just type in

6:11commands you can sort of have multiple

6:13commands each of which does a specific

6:15kind of operation

6:17and using that command line interface

6:19the terminal you can chain those

6:20commands together right and create like

6:23really complex and interesting kinds of

6:25functionality

6:26now

6:27almost nobody right except a die hard

6:29linux fan is going to say that that's a

6:31beautiful interface

6:33okay but on the other hand it is a

6:35really good interface from the point of

6:37view of what it achieves and how

6:39elegantly it achieves it right so in my

6:42opinion at least it is an example of

6:43what you could call an elegant interface

6:46right it just does what is required

6:49without anything ultra fancy about it

6:52and in a very efficient manner

6:54okay so the fact that a user interface

6:57does not necessarily mean anything fancy

7:00but is the important part is how

7:02effective it is at being usable that's

7:05the main part that we are interested in

7:08now

7:10what are the requirements that we

7:12typically have from

7:14the front end okay

7:16and

7:17one thing that we can sort of say over

7:19here is we would prefer that we avoid

7:21any complex logic

7:23right what i mean by complex logic is

7:25anything which is the application logic

7:27anything which needs to do computations

7:29anything which needs to do sort of

7:30detailed comparisons and selections of

7:32different parts of the database

7:34all that should not be in the front end

7:37okay there should be some way by which

7:39the application logic can be

7:41sort of

7:42pushed nicely to the server where the

7:44data is stored and the front end only

7:47sort of makes data requests to the

7:49server

7:50and its only job is to

7:53portray the result of that request

7:56okay

7:57now

7:59what we would also prefer is that you

8:01don't really store any of the

8:02application data at the front end

8:05okay

8:06as far as possible and the reason for

8:08that is because you know at least the

8:10way that we are considering with web

8:11apps and so on it is entirely possible

8:13that our connection gets cut or

8:15something else happens which essentially

8:17results in loss of the communication

8:19between where we are looking at the

8:21application

8:22and what is happening on the server

8:24right and we already know that http is a

8:27stateless protocol and what we mean by a

8:30stateless protocol is that

8:32the messages that are exchanged between

8:34the client and the server

8:36do not by themselves depend on the state

8:39of the system

8:41okay that is not the same as saying that

8:43you cannot implement

8:44that you know it is impossible to have

8:46state in an http based system it is just

8:48that the protocol by itself is stateless

8:51which means that if you want to sort of

8:53give the illusion that you know the

8:55system has some memory and knows who you

8:57are or what you were doing there have to

8:59be some other ways of doing it which is

9:01not just part of the normal protocol

9:03itself

9:05okay

9:06so these are all sort of requirements

9:08that we would like to see in a front end

9:10framework for want of a better word

9:13right

9:14and

9:16there are also certain desirable aspects

9:18to it one of them is that it should be

9:20aesthetically pleasing right i just gave

9:22you an example of something which

9:24a lot of people may not normally

9:26consider aesthetically pleasing the

9:27command line

9:28but that also depends on you know where

9:30you're coming from and what you are used

9:31to right the point is it does not have

9:34any i mean then what i mean by the

9:37aesthetically pleasing is

9:39when you look at it you should not be

9:41sort of turned off you know you should

9:42not see like ugly looking fonts and

9:45things of that sort or colors which are

9:47just jarring which essentially make you

9:50feel okay i don't want to use this

9:51particular application

9:53right it's sort of obvious it's

9:55intuitive but it's something that a lot

9:57of people miss

9:59okay

10:00now the next thing is

10:03uh responsive and what i mean what i

10:05mean by responsive over here is probably

10:07a little different from the context from

10:10the word responsive as used in the

10:12context of css

10:14what i mean is that something

10:16an application is considered responsive

10:18when

10:19it responds to your interaction very

10:21quickly

10:22right let's say that you input something

10:25there is pretty much an immediate

10:26response to what you do you click

10:27somewhere on the screen there is an

10:28immediate response

10:30okay normally in css responsive is used

10:33in order to indicate something else

10:34which is the next word that i've got

10:36which is that it's adaptive right if you

10:38have different sort of outputs different

10:40screen sizes

10:41uh different kinds of monitors whatever

10:43it is on which you are displaying

10:45then

10:46you would like your user application to

10:48also adapt nicely to those contexts

10:51right and in very often in the context

10:53of css at least that word

10:55responsive is sometimes used to mean

10:57adaptive i am using it in this

11:00with these meanings over here

11:02okay

11:03so now all of these are sort of things

11:05that we would like to see in a front end

11:07right

11:09now how do we achieve this okay and in a

11:12large part what we are going to do this

11:14week as well as in the next couple of

11:16weeks is sort of show

11:17different ways by which we can use one

11:20particular framework in order to achieve

11:22a lot of these things and to have a nice

11:24sort of way of building up

11:26a good

11:27user interface

11:29okay

11:30and there is one concept over here which

11:33again you would probably have come

11:34across in other contexts right basically

11:36in the

11:37while talking about programming

11:39languages

11:41and this is more to do actually with

11:42something called a programming style you

11:44might also have heard of this as

11:46programming languages right

11:48there is something called an imperative

11:50style of programming

11:52and there is something else called a

11:53declarative style of programming right

11:56and there are other styles as well but

11:58these are the important ones for our

12:00purposes right now okay now what i mean

12:03by imperative

12:04programming

12:05is

12:06that if you want to achieve a certain

12:08result

12:09right you literally specify the sequence

12:12of actions that have to be taken

12:14right by the computer in order to

12:16achieve that final result

12:18okay so let's say that i want to have

12:21uh

12:22something on the screen right where

12:24there is a navigation bar

12:27right there is a footer

12:30there is some kind of a sidebar

12:32then there is some

12:34date

12:35module somewhere on a corner and then

12:38there is one

12:39blob of text over here

12:41there is a picture somewhere over here

12:44right

12:45this lets say is the final output that i

12:48want to

12:49see

12:50right in an imperative style of

12:51programming literally the way that i

12:53would do it is

12:54look at the screen

12:56right

12:57and now in the top

12:58whatever you know let's say 100 pixels

13:01of the screen go and draw a box

13:03make that the and you know within that

13:05box go and enter this text which is the

13:08left arrow for going back right arrow

13:10for going forward some link for going to

13:13the home page etcetera type in all of

13:15those things so that will be probably

13:16one function

13:17which as you run through the steps of

13:19the function

13:20we'll actually go through and draw the

13:22navigation button

13:23okay then after that i will have another

13:25function which basically says okay go

13:27through and draw the things

13:28corresponding to the footer then another

13:31one for the sidebar then another one for

13:32the picture and so on okay so imperative

13:35programs will basically go through this

13:37process of running the steps one by one

13:41and will draw whatever you want on the

13:43screen

13:45okay

13:46now for things like user interfaces

13:50it is often considered that there is a

13:52slightly better way of

13:54achieving this result

13:56where the programmer does not go around

13:59giving the sequence of steps

14:01what the programmer says is basically

14:03draw this picture

14:05right you say that at the top there

14:07should be a navigation bar at the bottom

14:09there should be a footer on the left

14:11there should be a sidebar in the middle

14:12there should be text

14:14right and there will be some kind of a

14:16compiler or an interpreter some

14:20intermediate piece of code

14:23which

14:24understands what you are trying to do

14:26and achieves all of these results

14:29okay so declarative programming allows

14:32the programmer to sort of concentrate on

14:34what their final result should look like

14:37rather than how to achieve that result

14:41okay so that is the primary difference

14:43that we are talking about over here in

14:44declarative programming

14:46you try and specify what you want the

14:48final result to be

14:51right whereas in imperative programming

14:53you give the exact sequence of steps how

14:55should you go about computing something

14:58okay now if you take a step back and

15:00think purely in terms of programming

15:02languages or arbitrary programs right

15:05let's say that i am trying to implement

15:07some kind of a climate simulation or

15:09something of that sort right

15:11or there using an imperative style of

15:13programming probably makes more sense

15:15right because literally i have a

15:17sequence of actions to follow i

15:18basically say okay i have all this data

15:20corresponding to climate information

15:23right maybe temperatures pressures

15:26air pressure

15:27latitudes longitudes all of those things

15:29read all of them right

15:31construct a model for that and then go

15:34through a time simulation where i say ok

15:35you know i am basically doing some kind

15:36of numerical integration in order to

15:38find out how the system will evolve with

15:40time

15:41okay so it makes sense to specify it in

15:43full detail

15:45whereas when you are talking about

15:46something like a user interface then

15:49specifying it in full detail like this

15:51may not really be the best way to go

15:52about doing things

15:54right instead you sort of broadly say

15:56okay i want to have a navigation bar i

15:57want to have a footer i want to have a

15:59sidebar

16:00and let some other system take care of

16:03making sure that all of those things are

16:05delivered and kept up to date okay so

16:08this whole business of that declarative

16:10programming style is something that we

16:12will be sort of looking at more and more

16:15and we will be understanding in the

16:16context of how we are building up front

16:18end

16:19front ends over here

16:23so this is actually a nice picture which

16:25i have taken from you know the flutter

16:28documentation flutter for those of you

16:30who don't know it is a separate

16:33sdk it's a software development kit

16:35right and is in fact in another

16:38programming language called dart right

16:40so this basically comes from google and

16:43it was originally developed sort of for

16:44android but also the whole point of

16:46flutter is that it is cross platform

16:49meaning that in principle at least if

16:51you develop something using flutter it

16:53should work on android it should work on

16:55ios right

16:57and probably also on i i believe it has

17:00targets even for you know the

17:02desktops and so on right

17:05now flutter is

17:08a very good platform a very good

17:09software development kit but

17:12that's not our focus over here we don't

17:14want to sort of get sidetracked and go

17:15into understanding flutter it's a bit

17:17more complicated

17:19what we have been trying throughout this

17:20course is to look at what are simple

17:23enough platforms

17:24that can give you an idea of what we are

17:27trying to convey over here

17:29right so that the concepts come through

17:31and then you should be able to apply

17:32these same concepts in other programming

17:35languages or in other sdks as well

17:38okay so what is this picture that we

17:40have got and in fact you know you can

17:41look at the

17:43page that

17:44from where i got this essentially it's

17:47you know

17:48in part of the documentation that says

17:49start thinking declaratively

17:52right

17:52and

17:53what they are saying is that

17:56for user interfaces using this

17:57declarative style of programming is

18:01preferable it is probably the best way

18:03to go about building your system

18:06okay

18:06now

18:07what are these what is this equation

18:09right

18:10essentially it's telling you that there

18:11is something over here called the

18:13application state

18:16okay

18:17and understanding what exactly

18:19application state means is a very

18:21important part of how you go about

18:23designing

18:24not just an application but its user

18:26interface as well

18:28okay and in this case what they are

18:30saying is once you have the application

18:32state

18:34you apply a set of functions to it which

18:36they are calling your build methods

18:39right

18:40and

18:41that should result in the layout as seen

18:43on the screen

18:47okay

18:48what exactly does this mean

18:50what it seems to be saying is that there

18:53is some magical

18:54you know entity called state

18:57which once i know what the state of the

19:00application is

19:01then the user interface should be

19:02uniquely determined because after all i

19:04am just applying a function to it

19:06and getting that final user interface

19:08output

19:10okay so what exactly do we mean by state

19:13that is something that is quite

19:14important to understand clearly

19:19to put it

19:21quite simply the state is essentially

19:23the memory of the system

19:25okay it consists of all internal details

19:28of the system it basically says

19:29everything that is required in order to

19:32reproduce a given state of the system

19:36okay that i mean i use the word given

19:38state of the system so you know it

19:40sounds like a circular definition but

19:42effectively what i am saying over here

19:44is

19:46if you have a specific set of

19:49things in the memory right that includes

19:52the database that includes what has been

19:54clicked on the screen that includes

19:56pretty much everything that you can

19:57think about the system at any given

19:58point in time

19:59you should be able to get back and

20:01reproduce this exact same state

20:02somewhere else

20:04okay and what that equation that i just

20:07showed you right ui is equal to f of

20:09state is telling you is that

20:11given a particular system state the

20:13system should always respond the same

20:14way to further inputs that is it should

20:16show you the same user interface

20:18and then respond the same way to further

20:20inputs

20:22okay

20:23now

20:25it is possible to think of applications

20:27that do not require any internal state

20:29right with where

20:30there is no concept of state you don't

20:33need to really store anything the user

20:35interface is just

20:36you know

20:37always constant but that effectively

20:40becomes a kind of trivial application

20:41trivial

20:42it's just a static page right without

20:45any sort of variable variation at all in

20:47it right whereas anything that you can

20:49think of as an application needs some

20:51kind of internal state to be effective

20:53and useful

20:55okay

20:57so let's look at a few more examples

20:59right so i am using this term system

21:01state it is again something which you

21:03may not commonly come across in multiple

21:05places

21:06but what the system state is saying is

21:08at least what i mean by system state is

21:10pretty much everything that describes

21:12the system

21:13right so for example if i am looking at

21:14something like amazon.in or flipkart.com

21:17right they have a complete database of

21:20available items the prices who are the

21:22registered users who are the ones who

21:24are currently logged in all of that

21:26information is stored somewhere in the

21:27databases

21:28right the databases themselves may be

21:30distributed they may be split among

21:32multiple types of databases

21:34right but at the end of the day if i

21:36have all of that information available

21:38to me i make a copy of that

21:40i can reproduce the exact system

21:42somewhere else

21:45similarly if i look at times of india as

21:47a newspaper website or the hindu or bbc

21:49whatever it is right

21:51i can basically get

21:53all the news articles they have ever

21:55published and also have some information

21:57about them all that put together would

21:59constitute the system state of that

22:00particular website

22:02right for something like nptel or the

22:04online degree course right all the

22:06students who are registered all their

22:08courses the marks certificates all of

22:10that information put together

22:11constitutes the system state

22:13okay now

22:15it's not very clear what you do with

22:17something like this it's not that i can

22:18actually ask what is the state of this

22:20system because it is huge right for any

22:22non-trivial application this is huge

22:23because among other things it

22:25constitutes the entire database that the

22:27system has

22:29right

22:31and

22:32the important point over here is if you

22:33look at this system state it is actually

22:35completely independent of the user

22:36interface that is it does not depend on

22:38who is looking at it or what you are

22:41seeing or how your

22:43web page looks like this is just

22:45background information that is required

22:47for reproducing the system at any given

22:49point in time

22:51okay so from the point of view of a

22:53front end developer this is important to

22:55know you need to know where your data is

22:58but on the other hand it does not

22:59directly affect how you design your

23:01application

23:03right

23:03instead what we have is something else

23:05called application state

23:08okay now application state is the

23:11application it's once again the system

23:13as seen by an individual user

23:16okay

23:18and

23:19examples of this would be you know on

23:21amazon or flipkart it's your shopping

23:23cart

23:24right what are the items that you have

23:25put into your shopping cart

23:27similarly do you have any user

23:29preferences right do you want to pay in

23:31indian rupees or in us dollars right

23:34on some cases it might even just be the

23:35theme of the thing right on gmail for

23:37example maybe you have chosen to have a

23:39different theme than the default

23:41right all of that is part of the

23:42application state

23:44in other words when i look at generating

23:46the user interface

23:48i need to know these pieces of

23:49information i need to know what are the

23:51what is the choice of theme that this

23:53person has

23:54right what kind of user preferences do

23:56they have what font well probably not

23:58the font but you know at least like

24:00uh in which style do they want to

24:02see

24:03the

24:04date displayed for example right all of

24:07those things are user preferences

24:10shopping carts all of that information

24:12is required in order for me to generate

24:14what the output user interface looks

24:16like

24:17right similarly

24:19when i

24:20log into one of my news websites i might

24:22find that you know the recommended news

24:24items for me are based on my past

24:27preferences you know what are the things

24:28that i like to read

24:30okay

24:31or else you might have a dashboard kind

24:32of a display right something which

24:34basically says okay these are all the

24:35courses that you are registered for or

24:37maybe on nptel these are the courses

24:38that are currently running number of

24:40students registered

24:41the state of the course you know have

24:43any quizzes been conducted all of that

24:45information is application state

24:48and

24:49now this becomes important from the

24:50point of view of the front end designer

24:53because i need to know what is the

24:54information i need to be present in this

24:56state

24:57and how it will impact my user interface

25:02okay

25:03and finally there is something else

25:04which is called ui state once again in

25:06the case of flutter they use this term

25:08ephemeral state

25:10okay now ephemeral the dictionary

25:13definition of this is basically

25:14something that lasts for a very short

25:16time okay

25:17and this is a term in fact used by

25:19flutter

25:20it makes a lot of sense effectively what

25:22it's saying is that it is the part of

25:24the application that is actually being

25:26interacted with

25:28okay so let's say that you are loading a

25:30particular page there might be some

25:32spinner icon that you know shows that

25:34currently loading right or something

25:36else which has a progress bar that says

25:38this much has been loaded

25:39right that has no real impact on the

25:42functionality of the system

25:45right mostly it is just something which

25:47is required for you to

25:49display something properly but even if

25:52that information is lost

25:54right it does not have any long-term

25:56impact on the functionality of the

25:58system

25:59okay so there might be for example uh on

26:02wikipedia there is a you know a talk

26:04page versus the no that's not really the

26:05best uh option but uh you know there are

26:08some of these websites on which you

26:10might have multiple tabs

26:12that you can select right and depending

26:13on which tab you select it will show you

26:15different pieces of information

26:17now which is the currently selected tab

26:19will determine what is shown on the

26:21screen

26:22but it's again just a short time a short

26:24term piece of information it doesn't

26:26have any long term effect on

26:28what you are on how the application

26:30actually behaves

26:32okay so these two things this

26:34application state and ephemeral state

26:36are important to keep in mind when you

26:37are going around designing

26:40an application and the front end

26:41corresponding to that

26:43okay

26:46so now with all of that so hopefully

26:49that sort of makes it clear what we mean

26:51by state as such in a system right

26:54now

26:56all this sounds good but one of the

26:57fundamental principles of http is that

26:59http by itself is stateless

27:02in other words the protocol is stateless

27:04okay the protocol does not have any way

27:06of remembering what the application

27:09state is right

27:11the protocol only allows you to define

27:12things like get and post and similar

27:14requests and the server then based on

27:17those

27:17right will be able to send back some

27:19information

27:21now in addition to that the server might

27:23also get some more information such as

27:25for example what cookies have been set

27:27or which

27:28ip address you are coming from

27:30right

27:31and it then has to infer something about

27:33the state of the client

27:35right including things like are you

27:36logged in that will probably depend on

27:38some cookie or the other

27:40right or it might depend on some other

27:43information which is somehow passed

27:44between the client and the server

27:46separately

27:47okay i mean it is passed over some http

27:49request but it is not part of the

27:51protocol itself

27:53okay

27:55this is something you know that it's

27:56sort of well worth thinking about

27:58clearly and you know understanding right

28:00why we keep on and on about http being

28:03stateless is that there are other

28:05transport protocols that are stateful

28:08okay

28:09where the protocol itself might say okay

28:11you know currently i am in a state where

28:13i can accept certain kind of requests or

28:15currently i'm in a state where you're

28:16only allowed to sort of close the

28:18connection or currently i'm in a state

28:20where you can send an image right you

28:22could have a kind of protocol that

28:23allows you to do something of that sort

28:26where the protocol itself also sets up

28:28some extra information between the

28:29client and the server

28:31http does not do that in http every

28:33request is more or less independent of

28:35the previous request

28:37a previous set of requests right and

28:40only by sort of keeping track of how the

28:42requests were made one after the other

28:43can the server sort of build up a

28:45picture of where the client is and

28:47thereby decide what to how to respond

28:50okay

28:52so with that background what it means is

28:54that you if you want to convey some

28:57state between the client and the server

28:59one possibility is that the client

29:00maintains

29:02an idea of what the application state is

29:05right and what the user interface looks

29:07like and based on the application state

29:09that it knows it sends request to the

29:11server for specific items and updates

29:14those items on the screen

29:16right the other possibility is that the

29:18client is a pure you know completely

29:22uh

29:22sort of

29:26ah a dumb client so to say right

29:28something which does not have

29:30any processing capabilities of its own

29:33right and the server maintains the

29:36complete state of the system

29:37it shows the client what kind of

29:39requests it is allowed to make at any

29:41given point in time by probably putting

29:43them in urls

29:44and depending on which url is clicked

29:46the server will then decide what to show

29:48next and sends the entire information

29:50back to the client

29:51okay so these are sort of the two

29:53extreme ways by which you can convey

29:55state and sort of have a concept of

29:57state and convey between a client and

29:59the server

30:00right and

30:02in actual front end what you will find

30:03is that you know you are trying to do

30:04something in between

30:06these okay

30:09so what i am going to do next is in

30:12order to explain all of this right i am

30:14going to take one particular example

30:16which is tic-tac-toe

30:18okay so what is picture its basically

30:20knots and crosses x and o right you

30:22would have come across it

30:23at some point in time

30:25essentially what we have is there will

30:26be a grid of this sort which is

30:28displayed on the screen right we assume

30:30that x is going to play first

30:32so let's say so

30:34what the user interface should do is it

30:36should allow

30:37the person to indicate either an x or an

30:40o marker right as soon as x has played

30:42the next turn goes to o

30:44right and let us say that o plays over

30:46here

30:47after that x plays somewhere else let us

30:49say that o plays in some other location

30:52finally x comes over here and thus at

30:54this point it should say okay x

30:56wins

30:58right

30:58or

30:59o wins or it's a draw right because it's

31:02entirely possible that you could also

31:03have a drop right neither side is

31:05winning

31:06so the game itself is very simple

31:09but we look at what exactly it means to

31:12sort of what are the things that you

31:13need to maintain as the state of the

31:15system

31:17different ways by which this can be

31:18implemented and where the state of the

31:20system is being recorded corresponding

31:21to those

31:23and we will use this in order to

31:25motivate one particular front end that

31:27we are going to be using moving forward

31:28which is view.js

31:31okay now

31:32some of you may already be familiar with

31:34some parts of view dot js or you know

31:36you may be really comfortable with

31:38programming in mu dot js we are going to

31:40be sort of taking baby steps in that

31:42direction right we are going to be using

31:44view.js in a very restricted manner

31:47okay and one thing that i would request

31:49is those who have prior experience with

31:52vue.js you might be used to using the

31:54command line interface and you know

31:55using like various modules and so on in

31:57view.js

31:59that's not what we are looking for over

32:01here right i am primarily using view as

32:04a platform for indicating certain basic

32:07concepts so and i am not an expert in

32:10view.js uh

32:11tejes the other instructor is like much

32:13more experienced with it

32:15but the point that we are trying to make

32:16over here is

32:18what we are trying to teach is not

32:20advanced view usage

32:23right what we are trying to do is to

32:25focus on concepts what is it that you

32:27can and cannot do and how do you sort of

32:30use it in order to build good

32:31applications

32:34okay so i can take a small break over

32:36here

32:38because after this i'm switching over to

32:39the demos

32:40if you have any questions if anything is

32:42there this would be a good time

32:44to ask

33:19uh yes somebody has raised hand

33:35should look like right but while

33:37developing that there are certain

33:38decisions where

33:40we have to take for example uh for some

33:43people having a header always there

33:46could be an easy to navigate but for

33:49some it could contain

33:51the it could consume the webpage

33:54space

33:56or for some now we're getting through

33:58the left hand panel would be comfortable

34:00but possum having wide area to view

34:02would be comfortable so how do we decide

34:05on those

34:07i mean that's a good question i think

34:09there have been a few phd thesis

34:11published on this topic

34:13uh there's no simple answer it

34:14completely depends on your application

34:17and uh

34:19problem is it's not just on the

34:20application it also depends on the

34:22person

34:23right so like you rightly pointed out

34:26it's not just and there might be certain

34:28applications for which it makes sense to

34:30have you know a large header or

34:31something of that sort but then it might

34:33also be personal preference

34:35right because for example you know i

34:37mean nowadays i see that pretty much

34:38every website that i look at has one

34:40huge big image right on top it's called

34:42that banner the jumbotron or whatever it

34:44is

34:45right i mean

34:46that seems to be the design style of the

34:48day right have a nice big jumbotron

34:50picture over there which

34:52sort of is supposed to convey something

34:54about your

34:55company or whatever it is and as you

34:57scroll down the further information sort

35:00of

35:01slides into view

35:02now i actually find that a bit

35:04irritating right i don't particularly

35:05like that

35:06but then that's my personal preference

35:08right so how do you sort of answer this

35:11in general

35:12a lot of it is just based on experience

35:15but there are websites that actually

35:18talk about good guidelines right so in

35:20mad one actually sorry application

35:22development one i had actually talked

35:23about i think nielsen

35:25jacob nelson's

35:27guidelines for ui design

35:29right and there is also

35:31i mean there are a few websites that

35:33talk about this another thing to keep in

35:35mind is the w3 consortium right

35:38worldwide web consortium they have their

35:39accessibility guidelines

35:41those are all good things to keep in

35:43mind right which generally are useful

35:46for people who are interested in you

35:48know having a

35:50usable

35:51good user interface

35:53but uh yeah beyond that uh there's no

35:56sort of clear cutting saying okay you

35:57know this is the right way or this is

35:58not the right way to do it

36:01okay so it's completely sort of

36:02dependent on what you are trying to do

36:07and also continuing with that how do you

36:10measure the page loading time because it

36:12also has some variable parameters that

36:14depends varies from user to user

36:17so is there any yes

36:22again see

36:23there is no standard that you can put

36:25over there right the

36:27you need to finally look at it

36:29by saying you know at the end of the day

36:31whoever is my user should have a good

36:33user experience

36:35right it's no use if you tell people

36:37that i have a

36:38you know i measured like whatever some

36:40hundred on light speed or something of

36:42that sort

36:43right uh but the user finally when they

36:45try loading your webpage it turns out

36:47that their experience is slow

36:49now in some cases it is not in your

36:50control it might be that the user has a

36:52poor

36:53or low bandwidth or high latency

36:55connection and you know there's nothing

36:57that you can do about that

36:59although i mean even there there are

37:00some tests that can be uh done which

37:03sort of say that you know even if the

37:04user has a low bandwidth connection how

37:06should you improve the performance and

37:07so on

37:08but

37:10otherwise you know it's not like uh

37:13this is some kind of a score scoring

37:15game where you just say i had a very

37:16good score why are you saying that my

37:18website is bad

37:19nobody really cares about the score

37:21beyond the point what they do care about

37:23is what does it actually feel like when

37:24they are trying to load your page

37:26okay so all of these things like i mean

37:29how do you measure it you have to

37:30measure well worst case is probably one

37:33thing that you need to do or you might

37:34have to look at some kind of average or

37:36median or something of that sort but you

37:38need to set your metrics and say that

37:41for these kind of users i will have you

37:43know

37:44this kind of good performance and so on

37:53um

37:54also sir uh can we

37:57what we show on this screen yeah can we

38:00decide that on the parameter of what is

38:02the bandwidth of user like google imp

38:05that the fast loading

38:07yeah i mean it can be done right so uh

38:10definitely it is possible

38:12uh i mean so forget about amp amp i

38:14think is something specific for

38:16accelerated mobile pages and there are

38:19some controversies also regarding that

38:20right i mean people felt that it becomes

38:22too google specific and so on

38:24but uh even if you look at the google

38:27gmail web page right they actually they

38:29have handled it in a very simple manner

38:31right when you are opening gmail.com you

38:33will see that at the bottom initially

38:35there is one thing which says

38:37click here for standard html for slow

38:39connections

38:42right so if the user the user can then

38:44take that decision if they find that

38:45it's not loading quickly enough for them

38:47they just click on that and yes they get

38:48something which is like pure html with

38:50very little javascript or no javascript

38:52and loads much faster

38:55okay so that kind of thing you could

38:58you you can choose either you can leave

39:00it to the user to select the low

39:02bandwidth uh version of the page

39:04or you can say that you know you will

39:06try and detect somehow how long it took

39:08them i mean but that's not easy right

39:10because mostly your communication is one

39:12way you are sending information to the

39:14user it's not very easy to sort of get

39:16the round trip time and find out how

39:18quickly they got it and so on

39:20there are ways of doing it but that

39:21becomes much more invasive

39:23right

39:25and but if you do have that information

39:27saying that a user is on a slow

39:28connection then maybe you can actually

39:30on the server side itself change and you

39:32know maybe either don't send some images

39:35or send smaller images

39:37lots of options are there for you as a

39:39designer

39:42right so as a designer or developer you

39:45have to we have to strike a balance

39:47between these scripts we use because

39:50that

39:51imperatively what i can understand is or

39:53reduces the page loading time

39:57uh wait wait what was that about

39:58imperative

40:00uh the the more scripts we use it

40:03hampers the page loading time

40:06uh yeah in general yes

40:08i can't think of any uh reason where

40:10running more scripts would help

40:12so yeah you know generally speaking as a

40:14rule of thumb having fewer scripts will

40:16probably be a good idea

40:20but that's not the only thing i mean if

40:21you're still sending large images or you

40:24know you have something else which makes

40:25your loading slow that can also cause

40:27problems

40:30okay so

40:32um so

40:38can we just not use stateful protocols

40:41everywhere rather than stateless

40:44why would you want to use stateful

40:46protocols

40:49they carry almost all the information

40:52uh around it let's see uh you have to

40:55sort of think back about how and in what

40:58context http was designed in the first

41:00place

41:01right see the internet by itself

41:04is

41:06i mean it is subject to broken

41:08connections right even like uh whatever

41:11you know uh nearly 30 years after the

41:13design of http

41:14uh we still have the problem of

41:16connection dropped or

41:18connection lost things of that sort

41:20happening right either you're on a

41:21mobile phone and you're you get into a

41:22bad signal area

41:24or uh your

41:26power goes off at home and your wi-fi

41:27gets cut right

41:29so now if you have a stateful protocol

41:31that causes lots of problems because

41:34what happens in a stateful protocol is

41:35that you have built up something the

41:37protocol knows exactly where you are and

41:39now suddenly it is not getting requests

41:41that it expected to see

41:43right and let's say that your connection

41:45goes for let's say five minutes and then

41:47comes back

41:48what is the state of your connection

41:50right because uh let's say that your

41:51phone rebooted

41:53okay or your uh

41:55desktop computer rebooted then what is

41:58the state of the connection because the

41:59desktop doesn't know the state of the

42:01connection anymore the server thinks

42:02that it is in a certain state

42:04right so stateful protocols are usually

42:08avoided in general for network related

42:11things unless you have a you know very

42:13strong way of guaranteeing that the

42:16connection will not be easily lost

42:18you can still recover right i mean

42:20let's say that a server gets some

42:22bad request in the case of a stateful

42:24protocol then it will have to start

42:25falling back saying okay now you know

42:27this did not make sense

42:29let me go and reestablish the connection

42:31and recreate the state from the

42:32beginning

42:34okay but usually the overhead associated

42:36with that is just too much it's not

42:38worth it because you know there are so

42:39many people trying to connect

42:41and

42:42trying to sort of maintain state like

42:44this for each and every one is not worth

42:46it so you usually look for better or

42:48other alternative ways of maintaining

42:50state

42:52okay

42:56all right so let me switch over to my

42:59other screen

43:08okay

43:47okay sorry about this

44:16sorry i think i may have temporarily

44:18disconnected

44:32all right let me just

44:34share the screen and be done with it

44:35it's easier

44:46okay

44:47i hope you can see my screen the problem

44:49is that now i can't really see what is

44:52there so

44:54i wish i would rely on you to let me

44:56know if there's any problem here

44:59sure

45:01all right so

45:02let's get to what i am going to do over

45:04here is

45:06look at

45:08basically four different implementations

45:09of this tic-tac-toe program right

45:12so what it what is tic-tac-toe

45:14essentially what we want is to have

45:16something where there is a board right

45:18which has nine entries in it

45:20and each time we want to be switching

45:23between a x and an o and allow the

45:25person to click on it

45:27okay

45:28so i am going to start with a very basic

45:31python based implementation right i'm

45:33using flask over here right and what i'm

45:36doing is i'm basically you know this is

45:38a very trivial kind of flask application

45:40but it makes sense because flask allows

45:42you to write trivial applications right

45:45now let us look at these two lines over

45:47here line three and line four right

45:49where essentially i am defining my board

45:52okay now how have i done it if you look

45:55at this you know this ah

45:56bracket zero star nine essentially what

45:58it it's saying is that i am creating a

46:00list

46:01of nine zero entries

46:04okay

46:05ah it's just a shortcut i could have

46:07written this as zero comma zero comma

46:08zero also you know it would have worked

46:10exactly the same

46:12and i also have this next

46:15which is a global variable right both of

46:17these board and next are global

46:18variables

46:20the initial state of board is all zeros

46:22and next has the value one right and as

46:25i put in on the comment over here

46:27one corresponds to x minus one

46:29corresponds to zero

46:31i could have directly you know instead

46:32chosen to have x and o itself as the

46:35entries over there

46:36i just did this because

46:38it made my life slightly easier when i

46:40was trying to check whether the game is

46:42completed or not

46:44okay

46:45so

46:46this is the

46:47in other words these two lines right

46:49this line three and line four the two

46:51variables that we have over here board

46:53and next

46:55they essentially correspond to the

46:57application state

46:59okay so this in the context of this very

47:02trivial example is what i mean by

47:03application state

47:05okay now with all of that and why have i

47:08declared it as a global variable because

47:10it has to be seen by multiple different

47:12things that are there in the application

47:14okay is this the only way of doing it

47:18there may have been better ways by which

47:20i can sort of you know have a board and

47:22a next variable and have them being

47:24shared across different parts of this

47:26the problem is that

47:28i mean first of all i

47:30you know i'm not like trying to

47:32complicate the thing over here i'm just

47:33using something simple that works

47:35right and in this case because i need to

47:38be able to access it from multiple

47:40different

47:41uh

47:42sort of urls in my flask application i

47:45am just declaring them as globals it

47:46makes life easier

47:48ok

47:49now

47:51the

47:52application itself is started like this

47:54i just set a static folder and a

47:56template folder and then i say that take

47:58the slash root that is to say when i

48:00start this application right

48:03and i define a function home page and

48:05all that it does is it renders a

48:06template right which is this file

48:09tick.html

48:11it passes in two variables into it one

48:13is

48:15the board and the other is the next

48:16value

48:17okay

48:18now inside tick.html what do i have this

48:21is

48:21a generic sort of html template right it

48:24has the basic

48:26tags over here

48:28if i look at this part right there is uh

48:30the head part of it just has a little

48:32bit of css styling not too much right

48:35just something which changes the

48:36background color you could get rid of

48:38this it's not really crucial in any way

48:41to how the system works

48:43right

48:44now inside the main body what i'm going

48:47to do is i'm going to have one header

48:48which basically says this is the next

48:50move

48:51right and that next move will have a

48:53little bit of jinja code in it which

48:55basically selects

48:58which

48:58image is to be shown okay so there are

49:00three images that i have stored

49:02somewhere in my system

49:04and depending on what the value of this

49:07next

49:08variable is right if it was minus 1

49:11i will show o

49:13if it was 0 i will show b and if it was

49:161 i will show

49:18x

49:19okay so i have just basically created

49:21one small

49:22array and then just indexed into it

49:25just you know

49:27using a little bit of pythons

49:29writing at com compactly in python

49:31that's all

49:33but then after that how do i actually

49:35display the

49:36x and o grid right for that what i'm

49:39doing is i create a table because that

49:41seems to be a fairly reasonable way of

49:44making a grid

49:46it's not the best way right and in fact

49:48later on we will see a slightly better

49:50cleaner way of

49:52making a grid

49:53but

49:54it works right i mean this is good

49:55enough for what we have

49:57now i have set a few things right i

49:59basically specify the border and then

50:00after that i have a whole bunch of jinja

50:02code over here right which

50:05at least in

50:06my understanding turns out to be

50:08necessary in order to get the logic

50:10implemented properly okay

50:12now could this have been done better

50:14quite possibly right it's possible that

50:16you might have come up with a more

50:18compact way of doing it or you could

50:20even have pushed some of this

50:21computation out into the python code

50:24itself

50:25right and got back something which was

50:26much easier for the ginger to

50:29display

50:30right so it's not my purpose to sort of

50:33and one thing that you need to be very

50:34clear about is i am not

50:36at any stretch claiming that this is the

50:38most efficient or a clean implementation

50:41of the code

50:42okay it's fairly compact good enough for

50:45our purposes but that's about it

50:48and my purpose over here is not to sort

50:50of show that the python style is better

50:52or the

50:53javascript style is better or viewed.js

50:55is better i am just showing them as

50:57different options

51:00so anyway the you know i have a bunch of

51:01jinja code over here i set up the

51:04rows and within that i have another loop

51:06that sets up the individual

51:08table data entries right

51:11and in this you will see that there is

51:12some logic which basically says that if

51:15the current entry

51:16in any square is 0

51:18i will

51:19convert that particular thing into a

51:21link

51:23right and whichever way it is i will

51:25basically display something which

51:26corresponds to whatever is this present

51:29sp class that is or b or x

51:33okay and every

51:35you know ah whenever c is equal to zero

51:37i start a new row and whenever c is

51:39equal to two i end up row right so that

51:42way i will basically get a table with

51:43three rows in it each row will therefore

51:46have three columns

51:48okay

51:49now

51:50let me go back over here sorry in my app

51:53dot py in other words what it says is

51:55with this home page it will render

51:57tick.html let's take a look and see what

51:59that looks like

52:02okay

52:05so

52:07i have my python environment already set

52:09up and what i do is i just run python

52:11app.py

52:13right

52:14and of course it gives me the warnings

52:16this is a development server and so on

52:17and when i

52:18click on that link and open it

52:20it brings up the browser

52:23which basically has you know the

52:24headline as i expected next move is x

52:28and it has created a table

52:30and you will see that each of these

52:31things basically corresponds to a url

52:35okay these are clickable links so in

52:37other words everything over here has

52:38become a clickable link okay

52:40and you will see as i hover over it i

52:42hope you can see the link at the bottom

52:44the top left basically says set slash

52:46zero set slash one set slash two set

52:48slash three and so on

52:50right so each one of these is sort of

52:53going to the set

52:55end point but with a different parameter

52:56zero to eight

52:59right so now let's look at how we get

53:01the functionality for set

53:03and what i'm going to say is i will

53:05define a new function in my python code

53:07set value

53:09i call up the global board and next

53:12variables right i have to declare them

53:13as globals over here because i am

53:15actually going to change their value if

53:16i do not declare this global

53:18i will end up creating a local variable

53:21and modifying its value which is not

53:23what i want in this case right so you

53:25have to be careful to actually

53:26explicitly declare this as global origin

53:29so what i am going to do is very simple

53:31i just say that board of i whichever i

53:34is right set 0 would basically set the

53:36element number 0 board of 0 to be the

53:38value next

53:41and because i chose 1 n minus 1

53:43then next equal to minus next is

53:45sufficient i don't need to check whether

53:46it is currently x and then make it o and

53:48so on right

53:52after that i have this additional

53:54function check state of board i will get

53:55to that later right let us ignore it for

53:57now

53:59now

54:01what it says is and you can sort of

54:03imagine what is happening over here

54:06r is equal to check state of board the

54:08idea is that if r is equal to zero right

54:11as we will see later when we go through

54:13the check state function

54:15i will basically redirect back to the

54:17home page slash

54:19okay so now let me see what that implies

54:22in terms of this let's say i go and

54:24click over here set 0 okay

54:27it goes it immediately changes it to an

54:29x

54:30and now you will see that because of the

54:31jinja template right this is no longer a

54:34link

54:35right you remember there was this piece

54:36of code in tic.html which checked if e

54:40is equal to 0 and only then it allowed

54:42you to make it a link

54:44okay

54:45same way i can go through over here i

54:47have some other options

54:49right

54:50i

54:51do all of this

54:53and now i have something which the

54:55moment i click over here it basically

54:57says congratulations in other words it

54:58has detected that one

55:01right and it also provides me with a new

55:02link for player game

55:05right so how does that part work

55:08i need to define this function check

55:10state

55:11which basically looks through all

55:12possible patterns

55:14where you could have a

55:16winning

55:17order right that is entries number zero

55:19one two three four five six seven eight

55:21these are the horizontal rows

55:23zero three six one four seven two five

55:25eight these are the vertical columns

55:27zero four eight and two four six are the

55:29diagonals

55:30in every one of these patterns it

55:32basically just adds up the values which

55:34are there in that pattern

55:36and if the result is 3 it says

55:40x 1 if it is minus 3 it says o 1

55:44otherwise it sets r equal to 0 right ok

55:46i mean it doesn't need this r equal to

55:48zero it just sort of goes through the

55:50board

55:51if any entry in the board is currently

55:52zero it immediately says game is still

55:54in progress

55:56otherwise it returns two for a draw

56:00okay

56:01now what the set value function does is

56:03it basically checks whether r is equal

56:05to 0 if so the game is still in progress

56:07otherwise it renders the end dot html

56:10template

56:11now was this necessary i could probably

56:13have done it with the same tic.html

56:15itself right i don't think it was

56:16necessary to have a separate end.html

56:19because if you look at it it's

56:20you know more or less the same as what

56:22tic.html had

56:24right so but you know i was being lazy i

56:27didn't really bother to refactor or

56:28reduce that

56:30so this is how i have done it

56:32right now how does that work if i click

56:35on play again

56:36i can then basically go through and say

56:45yeah let me just make sure

56:47unfortunately x1 okay

56:49i need to make sure i can't win this

56:58yeah so

57:00no unfortunately it seems to have got

57:02some kind of a bug it should have shown

57:03that it's a draw

57:05right instead i've got some message

57:06which sort of says that b1 so i've got a

57:09small bit of problematic logic over

57:11there that i need to fix

57:13okay so the bottom line is

57:16let us go back and look at the code

57:17itself board and next indicated the

57:19complete state of the system

57:22right

57:23the application

57:24is created and what it does is it

57:26defines these endpoints there is one

57:28basic home page endpoint and there is

57:31one thing for set

57:32okay and the set is used in order to set

57:35the value of any given

57:37entry in the board

57:39okay

57:40now

57:41let's look at what happens of course i

57:43mean finally this new game

57:45function over here the slash new all

57:47that it does is it basically creates a

57:49new board right and redirects to slash

57:51okay so this is also very simple piece

57:54of code

57:56now the interesting thing over here is

57:58let's say i do this play again

58:00right and i play a couple of different

58:02things

58:03now i am going to reload this page

58:06okay and you can't really see it but it

58:08so happens that you know it reloads

58:10instantly but shows me exactly the same

58:12state as before

58:13now let me do something more interesting

58:15i open one

58:17incognito window right and put it into

58:19that in other words this is some other

58:21browser somebody else is accessing it

58:24i go there and find exactly the same

58:25state of the system

58:28okay and if i continue doing this over

58:30here right

58:32and then after that close this window i

58:33see that there is something else over

58:35here

58:36but when i try clicking on this it

58:38basically you know

58:39it refreshes the page to the state that

58:42is already known by the system

58:45okay and then only allows me to continue

58:47by clicking on the things that are

58:49not already been kicked

58:52okay so in other words by maintaining

58:54the entire state on the server side

58:58the client has almost no

59:00smart functionality right it just has a

59:04set of links that can be clicked

59:06everything is done purely on the server

59:08you can reload the page you can

59:10disconnect you can go away come back

59:12later and you will find that the server

59:13is still in the correct state that you

59:15last left it

59:17somebody else connects to it in this

59:19case of course i mean they will see the

59:20same state

59:21you could change it so that the server

59:23looks at let's say the ib address from

59:24which you are connecting and then shows

59:26you a different game or something of

59:27that sort but the bottom line is

59:29everything is maintained at the server

59:32okay so this is an example of the sort

59:34of most trivial form of implementing

59:37this entire logic using

59:39a

59:41python flask approach

59:44okay

59:45are there any questions on this before

59:46we move forward to the next one which is

59:50a javascript implementation

1:00:02all right sounds good

1:00:04so

1:00:05uh

1:00:07right so now we saw what this looks like

1:00:08in python right

1:00:10let's go forward and look at the next

1:00:14thing which is

1:00:15i'm going to try and do the same thing

1:00:16using javascript over here

1:00:19okay

1:00:20and

1:00:21first things first when we have

1:00:23javascript right

1:00:25what ends up happening is that i need to

1:00:28have

1:00:29an html page

1:00:31right

1:00:32how does javascript work i basically

1:00:34once again have some html you know i use

1:00:36the same sort of

1:00:38styling which was probably not required

1:00:41now the thing though is right in the

1:00:44body part

1:00:45i am doing something slightly different

1:00:48right i basically declare one span

1:00:50and give it the id next

1:00:53okay

1:00:54now that's i could have called it

1:00:55something else i could probably have

1:00:57called it message or something of that

1:00:58sort right but you look at it and you

1:01:01realize that it doesn't actually have

1:01:02any data corresponding to it there's

1:01:04nothing in this in other words if i try

1:01:06rendering this html page by itself

1:01:08nothing is going to come up

1:01:11after that i declare a table

1:01:13and inside the table i find that all

1:01:14that i am doing is declaring a bunch of

1:01:16spans

1:01:18okay each one of these basically is

1:01:20declared like this so in other words the

1:01:22entire table has been put in place

1:01:24explicitly

1:01:25right so you can see that it is a three

1:01:26by three grid

1:01:28but there is no logic there is no

1:01:30content in other words if i just look at

1:01:32this html page

1:01:33on a browser that where javascript has

1:01:36been turned off

1:01:37i will see nothing on the screen

1:01:40okay i could of course have something

1:01:42else maybe which you know has one dummy

1:01:44span

1:01:45where it basically says oh you need to

1:01:46turn on javascript

1:01:48and if javascript is present you know

1:01:50change the content of that span to be

1:01:52empty or something like that

1:01:54okay that would probably be the cleanest

1:01:56way of saying okay you need to have

1:01:57javascript enabled in order to

1:01:59view this

1:02:01obviously the

1:02:03entire work of displaying anything is

1:02:05being handled through this

1:02:07last step over here which is

1:02:10the loading of the javascript file

1:02:12okay so i just put that in at the bottom

1:02:14over here and let me then see what tic

1:02:16tac toy dot js actually corresponds to

1:02:20right

1:02:21so tic-tac-toe.js

1:02:23very similar if you look at it right i

1:02:25mean in terms of the pure functionality

1:02:29pretty much like what was done in the

1:02:31case of python

1:02:32right i have a board declared as a

1:02:34global variable so you see what's

1:02:36happening here i have declared these all

1:02:38these lets up here at the top of the

1:02:40script

1:02:41which effectively automatically makes

1:02:43them globals

1:02:45okay

1:02:47i mean as a general matter of principle

1:02:49now that we are in uh you know

1:02:51es 2020 or whatever is the version of

1:02:54javascript that we are looking at right

1:02:55at least ecmascript 6 and beyond

1:02:59i'm not going to be using var anywhere

1:03:01right it is pretty much either let or

1:03:02const depending on what we are trying to

1:03:04do okay you might find that other people

1:03:06use wire but generally speaking that's

1:03:08to be avoided at this point in time

1:03:11okay

1:03:11so

1:03:12i initialize the board

1:03:14i initialize

1:03:16the next value to be one

1:03:18and i also have one more variable that

1:03:20basically has this thing saying this is

1:03:21the current state of the game

1:03:24okay

1:03:25i have a function that i call reset

1:03:27board okay

1:03:29which

1:03:30in this case you know is basically all

1:03:32that it's doing is once again setting

1:03:34the values of board next and g state to

1:03:36be their initial values

1:03:38and then calling a function called

1:03:40update page

1:03:42right and this update page is the one

1:03:44where all the work actually happens

1:03:46right so it basically looks for this

1:03:48element

1:03:50next

1:03:51and sets the inner html of that to be

1:03:53either next move x or next move o

1:03:56etcetera right

1:03:58and

1:03:59if g state is equal to one that is

1:04:02uh

1:04:03the x one then it will basically say a x

1:04:06one otherwise it will say o one

1:04:08otherwise it will finally say oh that

1:04:10was a boring draw

1:04:12okay

1:04:13and it will finally also at that point

1:04:16alone it will bring up this button that

1:04:17allows me to click on this thing saying

1:04:19play again

1:04:21okay

1:04:22and what i am doing over here is i also

1:04:25have one small piece of logic over here

1:04:27that takes those spans right what were

1:04:29the spans that we had over there we had

1:04:31all of these td 0 td 1 etcetera these

1:04:34pans

1:04:35what do i do with them i get them by id

1:04:38td plus 0 1 2 3 etcetera and set the

1:04:41inner html of that

1:04:43to be either

1:04:45an x or an o depending on what it was

1:04:47and associate an on click entry with it

1:04:50okay

1:04:51and what is on click entry

1:04:53on click do it basically calls update

1:04:55entry of 0 1 2 3 whatever the status

1:04:58value that you have over there

1:05:01now this check state function is exactly

1:05:03the same as

1:05:04you know what was

1:05:06there in the python code just written in

1:05:08javascript this time right and you might

1:05:10notice that you know there is this line

1:05:12over here where i have used one reduce

1:05:13function in javascript right just trying

1:05:16to be clever over here it looks nice

1:05:17that's all you would have done it using

1:05:19a for loop or any other way all would

1:05:21have worked exactly the same

1:05:24but what does this update entry do it

1:05:28checks whether the game is still in

1:05:30progress that is to say g state is equal

1:05:31to zero

1:05:33right and if the current

1:05:35location in the board has a zero entry

1:05:37that is it has not yet become an x or an

1:05:39o

1:05:40if so then it sets the value to next it

1:05:42toggles the value of next and once again

1:05:44calls this check state function

1:05:47right

1:05:48after that after doing all of this it

1:05:50calls update page

1:05:52okay

1:05:53and so what have i done i have basically

1:05:55declared a bunch of functions there is

1:05:57one helper function out here which just

1:05:59returns xor o

1:06:01there is reset board then there is

1:06:03update page

1:06:05there is check state

1:06:07and

1:06:08update entry i have declared a whole

1:06:10bunch of functions and finally i just

1:06:12call this preset board so this is

1:06:14the actual functionality of the board as

1:06:17it happens

1:06:19okay

1:06:20what happens when we try and

1:06:22load this into a browser okay so this is

1:06:25no longer and we are not interested in

1:06:26the python version anymore we are going

1:06:28to look at the javascript version i will

1:06:30directly load it

1:06:33[Music]

1:06:38yeah so this is the javascript version

1:06:40of my

1:06:42same functionality right and as you can

1:06:44see nothing is there i mean i don't see

1:06:45any links i don't the

1:06:47cursor doesn't change in shape nothing

1:06:49of that sort but

1:06:51when i go and click somewhere it

1:06:53promptly updates

1:06:55okay and then i click here it updates it

1:06:57does all of this logic

1:06:59right and the moment i do this it

1:07:01basically says ao1 right

1:07:04and it now provides a button

1:07:06right so that entire span with next in

1:07:08it now has this thing for play again

1:07:10with the button

1:07:12it's possible to have got it looking

1:07:14exactly like the python version but on

1:07:16the other hand i i didn't really want to

1:07:17i mean i've made like slight changes in

1:07:19each one here and there right this is

1:07:21just so that okay the moment i click on

1:07:22this button it once again resets the

1:07:24board and goes back

1:07:26okay if you look at the total amount of

1:07:29code over here it is almost the same

1:07:31because you know you can imagine that

1:07:32the logic for checking the state for

1:07:35example is identical right the update

1:07:37entry is more or less the same

1:07:40the messages that are being generated at

1:07:42the top are

1:07:43you know they are dominated by the

1:07:45message itself that needs to be sent

1:07:47right so nothing really to say that

1:07:50either python or javascript is better so

1:07:52clearly the changes are somewhere else

1:07:55let's see one important change right

1:07:57which is that i've got all this over

1:07:58here and now what i'm going to do is go

1:08:00and click on reload the page

1:08:03okay

1:08:05it's gone right whatever i had over

1:08:07there is gone and it has been reset to a

1:08:08new board right so i go here i do all of

1:08:12this

1:08:12right

1:08:13and at this point once again i reload

1:08:15the page once again everything is lost

1:08:18okay and i do some more over here

1:08:21let's say that i also create one more

1:08:25page and load it right i find that that

1:08:29also that once again starts with a new

1:08:31page

1:08:32right where once again i can start

1:08:33playing

1:08:34some more i go back to the old one i can

1:08:37still continue on it and it remains

1:08:40where it last left off whereas this

1:08:41other one is playing something else

1:08:46okay so i have these two different

1:08:47versions that are effectively you know

1:08:49running in parallel with each other

1:08:51right and it doesn't matter which one ah

1:08:54sort of worked first nothing of that

1:08:56sort i

1:08:57they are effectively playing

1:08:58independently but the moment i reload

1:09:00the page

1:09:02i would find that i get reset to the

1:09:04original state okay so what has happened

1:09:07over here if you look at it there is

1:09:08actually no server at all involved in

1:09:10this

1:09:11right because

1:09:12look at the url up here i have directly

1:09:14loaded it as a file

1:09:16that was enough for it to load the

1:09:18javascript and to execute right and the

1:09:21reason it did that is because there was

1:09:22nothing really

1:09:24potentially damaging out here right you

1:09:26can't really go and like change any

1:09:28values or do anything else with this

1:09:30right so it allows you to straight away

1:09:32run the javascript which is there in

1:09:33that tic-tac-toe.js file

1:09:36right

1:09:38the state is completely contained on the

1:09:40browser

1:09:41which is why when i reload the page the

1:09:43state gets reset

1:09:45okay

1:09:46if i wanted to communicate this state

1:09:48back to the server first of all i need

1:09:50to have a server running right and

1:09:53second thing is i would need to think of

1:09:54some other way by which every time i

1:09:56click over here you know the state

1:09:57actually goes back to the server

1:10:00okay

1:10:01that is

1:10:02actually part of where the power of

1:10:04javascript comes into play or you know

1:10:06the asynchronous loads and so on but we

1:10:08will not be looking at that this week we

1:10:10will look at it later right in terms of

1:10:12how you can implement certain kinds of

1:10:13functionality

1:10:15for now the important part is

1:10:17the basic functionality could be

1:10:19implemented completely in javascript

1:10:21but now the entire state is maintained

1:10:24on the client with no knowledge at all

1:10:26for the server

1:10:29okay

1:10:30now

1:10:32once again time for a small break before

1:10:34we move on to

1:10:35the

1:10:36framework view.js

1:10:38any questions

1:10:43yes

1:10:44go ahead

1:10:45yeah i think you can just go ahead and

1:10:47mute and ask because uh no i

1:10:50yeah good evening sir am i audible yes

1:10:52yes go ahead yeah sir uh this a

1:10:55synchronicity that you speak of of

1:10:57javascript yeah is this something

1:11:00intrinsic to javascript or uh did it

1:11:02did this come about in the later

1:11:04revisions

1:11:06no no so uh i think uh actually i had

1:11:08mentioned this in uh

1:11:10the second week uh lectures right i mean

1:11:13javascript because of its nature the

1:11:16fact that it was meant to be used on

1:11:17browsers

1:11:19right from the beginning people wanted

1:11:21it to be such uh you know written in

1:11:23such a way and rather the language to

1:11:25have features such that it should not

1:11:27block the browser unnecessarily

1:11:30okay so because that was sort of uh

1:11:34important factor to keep in mind while

1:11:36designing the language right from the

1:11:38beginning you will see that this notion

1:11:39of

1:11:40asynchronous

1:11:43interaction was there

1:11:45okay but the whole idea of sort of

1:11:48retrieving data using fetch

1:11:50from urls and so on started becoming

1:11:52popular only around 2004 or thereabouts

1:11:54that's when it really

1:11:56took off

1:11:57which means that from that point onwards

1:11:58javascript had this whole idea of

1:12:00asynchrony

1:12:02okay

1:12:04yeah does that answer yes

1:12:08yeah see the idea of asynchronous

1:12:10operation is not unique to javascript

1:12:12there are many languages especially

1:12:14today that do have this concept of

1:12:16asynchrony right so

1:12:19and they are used in different contexts

1:12:21i mean primarily they need to sort of

1:12:22make use of the fact that

1:12:25anything which is long running

1:12:27versus anything which needs user

1:12:29response or user interaction they should

1:12:31not sort of conflict with each other

1:12:34okay

1:12:35yes i got it thanks

1:12:37all right

1:12:39okay so what i'm going to do next is to

1:12:44look at this framework called view

1:12:46okay

1:12:47so view

1:12:49is v u v right i mean it's pronounced

1:12:52view but it's written v u e

1:12:54and uh it has nothing to do with the you

1:12:56know the view in model view controller

1:12:58although it does follow a sort of model

1:13:01view controller type of

1:13:03approach to how you can update and

1:13:05display things of course i think some

1:13:06people say that it's not model view

1:13:08controller it's supposed to be

1:13:10some variant of that

1:13:11but

1:13:12you can understand it in similar

1:13:14concepts at least okay

1:13:17now the important thing about view is

1:13:19that it is basically you can think of it

1:13:21as a set of extra library functions on

1:13:24top of javascript so it's not a new

1:13:26language by itself

1:13:27it's not something which is

1:13:28fundamentally different

1:13:30what it's doing is it's using some of

1:13:32the core ideas of javascript

1:13:34but

1:13:35providing you with a sort of cleaner

1:13:37interface

1:13:38right that allows you to do certain

1:13:41kinds of front-end development more

1:13:43easily

1:13:44okay so to understand what exactly that

1:13:47is the best thing to do of course is to

1:13:48look at examples right so let me bring

1:13:50up some examples i will close these

1:13:52other windows to avoid any confusion

1:13:55and yes

1:13:56so once again after all view is also a

1:14:00javascript

1:14:02i mean it's based on javascript right so

1:14:03the html file over there looks very

1:14:06similar to what you would have in the

1:14:07case of javascript

1:14:09right now i have got rid of the style

1:14:11over here but you know that's i didn't

1:14:13do that to sort of make it look as

1:14:15though this is a shorter file or

1:14:16anything of that sort i just found that

1:14:18it wasn't very convenient to use those

1:14:20classes so i

1:14:21left it out

1:14:23one thing you'll notice is that

1:14:26in the header itself i am loading this

1:14:28view.js

1:14:31the core library

1:14:33okay and that's pretty much all that is

1:14:35required in order to get view into the

1:14:37system but my actual script is down here

1:14:42right now

1:14:44would it work if both were in the header

1:14:46i am not entirely sure of that i i think

1:14:48that you know the script that gets

1:14:50executed has to be inside the body

1:14:52so

1:14:53i've kept it over there as it is okay

1:14:57now the only you will again find that

1:15:00you know there is a span

1:15:01instead of next i am calling it a head

1:15:03message

1:15:04right and you will notice that i am

1:15:05actually using something new over here

1:15:07something which says vhtml equals head

1:15:09message

1:15:11right

1:15:13we'll get to what that is in a moment

1:15:15but the important thing over here is on

1:15:16this line 10 right i am declaring a div

1:15:20okay

1:15:21effectively the way that view works is

1:15:23to take everything which is inside some

1:15:25specified div in your

1:15:27specific some

1:15:29specified element inside your html page

1:15:32and apply view functionality onto that

1:15:35okay

1:15:36the usual thing is to declare it as a

1:15:39div give it an id

1:15:41and once you have given the id to that

1:15:43particular div you will take over and

1:15:45you know replace everything which is

1:15:46there inside that id

1:15:48now what is there once again just like

1:15:51in the case of the uh

1:15:53you know javascript example i declare a

1:15:55table i have the rows i declare all the

1:15:570 1 2 and so on okay could i have done

1:16:00this better could i have just created a

1:16:02you know written of nested for loops in

1:16:04javascript that generate all the

1:16:06output for you

1:16:08yes i mean bottom line is yes that could

1:16:10be done right

1:16:13in this case it was simple enough that

1:16:14it was not worth the trouble right i

1:16:16mean i can focus more on the remaining

1:16:18parts of it so the table

1:16:21the table row table data all are well

1:16:24known things

1:16:25the stick that we have over here is

1:16:27something new

1:16:29okay so it's not a normal html tag

1:16:32right it is clearly something which did

1:16:33not exist before

1:16:35and it is something which i

1:16:37have written for using view

1:16:40let us take a look and try and

1:16:41understand what it does

1:16:43so that all that is contained inside

1:16:44this tic-tac-toe view.js file right and

1:16:48that file essentially contains a fair

1:16:51amount of logic

1:16:52okay

1:16:53but if you look at it large parts of the

1:16:55logic are essentially just fairly fixed

1:16:58ah you know similar to what was already

1:17:00there in the python and javascript

1:17:02versions

1:17:03okay

1:17:04now

1:17:05let's ignore this initial path this line

1:17:081 to 15 right and focus on line 16 where

1:17:12i am creating the new view app

1:17:15okay

1:17:16and what i do is i specify that it is a

1:17:18new

1:17:19view app

1:17:21there is one element called el

1:17:23right so this is basically look at what

1:17:25is being given here i am passing in an

1:17:27object

1:17:28to the view

1:17:31function

1:17:32right the view constructive right so

1:17:34this new means that i am basically this

1:17:36is a class right view is a class

1:17:38and this new basically means that i am

1:17:40creating a new instance of this

1:17:42particular class

1:17:45associating it with the element which

1:17:47has the id app

1:17:49okay which is what i have over here

1:17:51right the divide equal to app

1:17:53is what i need to specify as the e l out

1:17:55here

1:17:57and apart from that there are a few

1:17:58different

1:17:59sort of uh

1:18:01you know

1:18:02parameters

1:18:03that this

1:18:05object that is passed into view needs to

1:18:06have

1:18:07one of them is called data

1:18:10which is basically the data

1:18:11corresponding to this

1:18:13particular application

1:18:15and as you can imagine that data is now

1:18:17the board

1:18:18and the next value

1:18:21okay whatever we had declared as globals

1:18:23in the python and javascript now are not

1:18:25globals they belong to this particular

1:18:27view instance

1:18:29okay

1:18:31what about the methods inside it

1:18:34now it turns out that methods are things

1:18:36that can be called on this particular

1:18:38view instance

1:18:40right

1:18:40and i will see that you know there are

1:18:42places where i am going to explicitly

1:18:44call this particular method set val for

1:18:46instance

1:18:47okay so when i want to set one

1:18:49particular

1:18:52value right i am going to go in there

1:18:54and ah have this thing basically calling

1:18:58the

1:18:59uh you know set val with i which is is 0

1:19:021 2 3 up to 8

1:19:03ok

1:19:04and what it will do is it will once

1:19:06again check whether something called

1:19:07this dot result

1:19:09is equal to 0

1:19:11right which means that the game is still

1:19:12in progress

1:19:13if it is

1:19:15it will set a check if the particular

1:19:17board entry is 0

1:19:19and if it is then it will basically say

1:19:20this dot board of i is equal to this dot

1:19:22next okay ideally this line should just

1:19:25have been this dot board of i is equal

1:19:27to this dot next

1:19:29ok

1:19:30but you will be wondering ok so why use

1:19:32this particular you know why is this

1:19:34line alone a bit more complicated right

1:19:37ideally i should have had something

1:19:38which looks like

1:19:45right

1:19:45this should have been sufficient in fact

1:19:47this is what i initially wrote and then

1:19:49struggled around it with it for a little

1:19:51while until i finally realized that view

1:19:52does not work with this

1:19:55it turns out that is something to do

1:19:57with the way that view implements what

1:19:59is called reactivity

1:20:01okay

1:20:02view is looking for any changes in

1:20:05variables and it sort of puts in extra

1:20:08logic which says that anytime a variable

1:20:10changes

1:20:11something needs to get updated

1:20:14okay

1:20:15and it turns out that for arrays that

1:20:17doesn't work the way that you would

1:20:18normally expect it to

1:20:20which is why for arrays you need to have

1:20:23this explicit this view.set

1:20:25functionality being called

1:20:28okay

1:20:29it's a small sort of gacha that you have

1:20:32over there that you need to keep in mind

1:20:33right so we will ignore that we will get

1:20:35rid of it

1:20:36right

1:20:37and

1:20:39yeah

1:20:41basically

1:20:42the next thing this dot next at least

1:20:44can just be given as minus this dot next

1:20:46you can use the normal logic that you

1:20:48are used to and it works as you would

1:20:51expect

1:20:52okay

1:20:53now we come to an interesting thing

1:20:54which is these two things called the

1:20:56computed functions

1:20:58okay

1:20:59or computed parameters

1:21:01and what we are saying is that i have

1:21:03two things that are computed one of them

1:21:04is this head message

1:21:07okay where does head message go

1:21:10i can see it over here

1:21:12in my index.html

1:21:14right inside it should come inside this

1:21:16span

1:21:18right whatever is the value of head

1:21:19message should get reflected inside the

1:21:21span

1:21:22and what i am saying is i am declaring

1:21:24it as a computed function which means

1:21:26that

1:21:27if anything

1:21:30over here anything on the system changes

1:21:32right this function will be called

1:21:35and the value of the message that gets

1:21:37returned over here will be updated

1:21:41so when will anything change

1:21:43it will change any time that this dot

1:21:45next changes

1:21:48okay

1:21:49so in other words what view does is it

1:21:51performs what is effectively called a

1:21:52data flow analysis

1:21:54and says that

1:21:56under what conditions can this head

1:21:58message change

1:22:00right it looks through this entire logic

1:22:02which is there inside this head message

1:22:04and says ok look the only variable that

1:22:06i am looking at over here is this dot

1:22:07next

1:22:09which means that any time this dot next

1:22:11changes

1:22:12i need to go in there and recompute the

1:22:14value of head message

1:22:18okay now this kind of analysis saying

1:22:20that i look at what and all is being

1:22:22used inside this function or sorry there

1:22:24is one more thing this dot result is

1:22:26also something that needs to be checked

1:22:28okay so this dot next and this dot

1:22:30result these are the two values that

1:22:32need to be checked if either one of them

1:22:34changes head message needs to be

1:22:36recomputed

1:22:39okay

1:22:40what is this dot result that is one more

1:22:42computed function

1:22:44what does it do it basically checks

1:22:46whether anything on this dot board you

1:22:48know once again i do the summation and

1:22:50check

1:22:51whether

1:22:52x1 or o1 or

1:22:54game is still in progress or it's a draw

1:22:57right

1:22:59essentially anytime the board value

1:23:01changes

1:23:02it will go back recompute this and

1:23:04update the value of result

1:23:07whenever result changes that in turn

1:23:09will go and update the value of head

1:23:10message

1:23:12okay that's all i don't need to say when

1:23:15to compute the value of head message

1:23:17when to compute the value of result

1:23:19i don't need to go in there and

1:23:20explicitly call those functions one by

1:23:22one

1:23:24right

1:23:25view automatically takes care of making

1:23:27sure that the functions get called when

1:23:29required and

1:23:31at no other time

1:23:33right and that is a key thing this is

1:23:35where declarative programming has come

1:23:37into the picture

1:23:39i was able to just specify that result

1:23:42is this function it's a computed

1:23:44function head message is another

1:23:45computed function

1:23:47right

1:23:48and this is the actual data

1:23:50corresponding to my application

1:23:52right and this is my html code

1:23:55automatically view says oh we have

1:23:58i have bound this value cos equal to 0

1:24:01over here

1:24:02right

1:24:04i need to go and update this tick

1:24:06element with something

1:24:08okay and what is that something that is

1:24:10declared up in the top part of the

1:24:12javascript code

1:24:15tick is something called a component

1:24:18right which is basically you can think

1:24:20of it as you know i am defining a new

1:24:21custom html tag

1:24:23all that i am saying is it has a certain

1:24:26property right which is passed in as

1:24:28props

1:24:29which in this case is called pause right

1:24:31the position

1:24:33right which will have a value between 0

1:24:34to 8

1:24:35what does it do it basically

1:24:38outputs some html corresponding to what

1:24:40the

1:24:42component should look like it has its

1:24:44own method one which is called set val

1:24:47which in turn calls the set valve

1:24:49function of the parent

1:24:51which is the actual view app

1:24:53and it also has a computed function

1:24:55which is this imgl which you know it's

1:24:57the image link that needs to go in over

1:24:58here

1:25:01now is this really the most efficient

1:25:02way of writing view code

1:25:04quite frankly no not at all right i just

1:25:07wrote this because i wanted to sort of

1:25:09show that yes you can have the basic

1:25:11ideas of reactivity right this idea that

1:25:14this vhtml will get updated with head

1:25:16message automatically similarly this

1:25:19component will update its value

1:25:21automatically without ever having to

1:25:23call that explicitly

1:25:26okay

1:25:28but after this we will look at a

1:25:29slightly more sort of more view ish

1:25:32manner of writing this code which will

1:25:34make it a bit more clear and you know

1:25:36you can see what the purpose of this

1:25:38whole thing is so let's see what happens

1:25:41when i try loading this page right

1:25:44i can basically go to

1:25:47view index.html now it pretty much looks

1:25:50exactly the same as my javascript

1:25:52code right and once again when i do this

1:25:55behavior wise also it's exactly the same

1:25:58okay

1:25:58and you can see that

1:26:01it pretty much has all the same

1:26:03functionality right the one thing that i

1:26:05left out i had forgotten to implement

1:26:07actually was how do i start a new game

1:26:09right i should have ideally added a

1:26:10button over here which allows you to

1:26:12sort of reset and start a new game i

1:26:14didn't do that

1:26:15instead i can just reload the page and

1:26:17i'll be done with it

1:26:20okay so you know the same kind of

1:26:24functionality as before uh works over

1:26:26here as well

1:26:29and it's a draw

1:26:30okay once again exactly the same

1:26:33constraints as what happened in

1:26:35javascript there is no server side state

1:26:38everything is maintained on the client

1:26:40if i open another page then i will

1:26:42effectively have another game running

1:26:44over there

1:26:45right

1:26:46the only real difference between this

1:26:48and the original javascript version is

1:26:50the fact that i now have this component

1:26:52called tick

1:26:53and some of these elements at least i

1:26:56can see that you know head message

1:26:57result and so on that

1:27:00concept of declarative programming has

1:27:02come into the picture over here i was

1:27:04able to just declare that you know the

1:27:05head message should change whenever

1:27:07result changes

1:27:09right and it will automatically be

1:27:11computed and updated i don't need to

1:27:13tell it that every time next is changed

1:27:15or every time the result changes go and

1:27:17compute head message

1:27:19the framework will find that out for

1:27:20itself

1:27:23okay

1:27:25so

1:27:26this is pretty much everything i am also

1:27:29going to show you the

1:27:30last version using a little bit more

1:27:33sort of you know

1:27:34what we would call idiomatic view

1:27:36right where it means that it is more in

1:27:39keeping with the way of writing a

1:27:42code in the view style

1:27:43okay so that is the next thing if there

1:27:45are any questions we can take that now

1:27:47or i can go and finish that

1:27:55okay so let me go through that you know

1:27:57it's very similar so it's worth sort of

1:27:59looking at that as well

1:28:02two things you will notice one is that

1:28:04now suddenly there is a lot of css

1:28:06styling over here the reason for that is

1:28:08you know nothing to do with view itself

1:28:11it's just that this is a different way

1:28:12of implementing the

1:28:15table or rather you know the output

1:28:18what i am saying is instead of having

1:28:21a table i am going to use a completely

1:28:23different way of rendering the

1:28:26tic-tac-toe grid

1:28:28by using something in css which is

1:28:30called flicks

1:28:31right and essentially what it says is

1:28:33that the board

1:28:35is going to be displayed using some flex

1:28:38parameter

1:28:40it

1:28:41will try and put as many entries as

1:28:43possible within the width of the board

1:28:52within the width of this board and once

1:28:55it fills up within the width of the

1:28:56board what it will do is it will wrap

1:28:57around to the next row

1:28:59okay and what are we going to put within

1:29:01that board i am going to put in a number

1:29:03of different cells right and i am

1:29:05specifying the width and height of the

1:29:06cell

1:29:07also the border around the cell and what

1:29:10you will notice is that the width of

1:29:11this 48 pixels

1:29:13right multiplied by 3

1:29:15plus the borders is just under 156

1:29:18pixels

1:29:20okay so i have chosen this width and

1:29:22height so that i can ensure that after

1:29:24three such cells have been put into one

1:29:26line it will automatically sort of

1:29:29go down to the next line and thereby

1:29:31automatically create a grid without me

1:29:33even having to create a three cross

1:29:34three table

1:29:36right but look at the app the body part

1:29:39of it now this has got simplified even

1:29:41more right even much less than what was

1:29:43there in the javascript i just have one

1:29:45entity called board

1:29:47okay

1:29:48yeah there is a question here

1:29:53oh yeah yeah i mean you know this

1:29:54particular code i will be putting on uh

1:29:57gitlab i mean i have it on gitlab i will

1:30:00be uh sharing it for sure

1:30:04keep in mind that you know these are not

1:30:05necessarily the most optimal codes so

1:30:08what i'm expecting

1:30:10from all of you is that you use this as

1:30:11a starting point use it to sort of get a

1:30:13flavor for how this works but then

1:30:15experiment with it and then go out and

1:30:18learn what are the best ways of writing

1:30:20certain styles of code

1:30:22okay

1:30:23all right let's get back to

1:30:25this

1:30:26so obviously the app itself is contained

1:30:28in this dtt comp right this javascript

1:30:31file

1:30:32now

1:30:33i have defined one component called tick

1:30:36right which has a property called val

1:30:40and it has just

1:30:41that property and a template right the

1:30:43template basically shows some html

1:30:45output

1:30:48and then i have a component called board

1:30:51right

1:30:52where you will notice that i have

1:30:54something which basically says that

1:30:56it has its the board has its own data

1:30:59but instead of the data just being

1:31:00declared as an object that's declared as

1:31:02a function

1:31:03okay

1:31:05why exactly is this done is a little bit

1:31:07tricky it's mentioned in the view

1:31:09documentation right that if you want a

1:31:11component to sort of carry

1:31:14a copy of its own code along with it

1:31:16then you need to declare it as a

1:31:17function

1:31:19okay

1:31:21you need to sort of

1:31:22understand a little bit about how

1:31:24view works internally in order to

1:31:27understand exactly why this happens for

1:31:29the time being we are sort of going to

1:31:30just take it as you know given and move

1:31:32on

1:31:34what does the board do it also has a

1:31:35corresponding template

1:31:37where all that i do is i basically you

1:31:40know create a class board talk inside

1:31:42that class there is this head message

1:31:44and