lecture_transcript

lecture_transcript.txt

Hello, everyone, and welcome to this course 
on Modern Application Development.
 
So, what we are going to do now is to have a sort 
of lightning overview of the topic of JavaScript.  
So I want to be very clear about one thing. This 
is not meant to be a tutorial on JavaScript. It  
is not sufficient to really get you to the point 
where you can write code in JavaScript. I will not  
even be showing you how to run a JavaScript 
piece of code in a browser, for example.
 
But JavaScript as a language is 
sufficiently similar to other  
programming languages that you can pick 
up, the syntax itself through other means.  
The main focus over here is going to be on sort of 
what are its capabilities, what can you do with it  
and why is it needed in the first place.
So, let us take a moment to understand what  
is JavaScript, to start with. So if you go 
look at the Wikipedia page for JavaScript,  
for example, you will see that it is a high level 
language. What does high level language mean?  
For those of you who have done some amount of 
programming you would know that you can have  
languages at different levels.
In particular there is the so called assembly  
language, which is used, which is pretty much the 
direct machine instructions used by a processor.  
Above that you have languages 
like C, which are usually called  
low to intermediate level languages. So 
C is not really a low level language,  
assembly is a low level language. C is still 
called a high level language but it definitely  
ranks a bit lower on the scale than some 
other languages like Python for example.
 
Why is that? Because there are many 
things that are very strict about C.  
I mean it allows you to only, you have to 
declare variables in a certain way, you have to,  
you are directly sort of manipulating pointers in 
the memory of the system and so on. The good part  
about it is it gives you fine grain control 
over what is happening inside the system.
 
The bad part is very often you should 
not have that kind of fine grain control  
because it is not good, it does not 
play well with an operating system  
it makes it difficult for someone else to write 
with, work with your program and so on.
 
A higher level language would be something like 
Python or MATLAB where we are talking about  
much higher levels of abstraction. I 
can actually think about arrays or lists  
as being a first class data type in Python. 
I do not even think about int versus float  
and so on. They are all there inside 
Python but I just talk about numbers.
 
I can declare a variable or rather I can use 
a variable without even needing to declare it,  
and the Python interpreter will 
pretty much figure out what type it is  
and do whatever is needed in order to make things 
work. So that something called dynamic typing.
 
So, Python, for example, is a 
high level programming language  
it also has object orientation. You 
have this concept of classes and so on.  
JavaScript in that sense is very similar. It 
has dynamic typing it has object orientation.
 
This object orientation in JavaScript is based 
on something called prototypes rather than  
the regular class based 
inheritance that we talk about.  
It is not necessary to know too much detail 
about that to start with. If you are interested,  
of course, you can read more about it 
but it does not make too much difference  
to how you use the language unless you 
start getting into details of that.
 
So, the bottom line is it is a high 
level programming language. JavaScript,  
similar to Python, has concepts of lists or 
arrays, it has dictionaries so that you can have  
what are called associative arrays or dictionaries 
or maps, which make it very easy to create  
really complicated data structures.
So, once you have that it means that you can  
very easily start constructing things like trees 
or graphs or various other things just by having  
different kinds of objects 
referencing each other.
 
Now in addition to that the Wikipedia page 
also says that JavaScript is a multi-paradigm  
language. So what does multi-paradigm mean? 
A paradigm is a way of thinking about things.  
And what that means is a programming 
language like C usually falls in this  
class of languages that are called imperative.
And imperative means that you pretty much write  
out functions to do each and every step that you 
want, and you call those functions one by one,  
you basically specify each of them in the order in 
which it is to be done. So a C program you pretty  
much read it from top to bottom and that is pretty 
much the order in which it gets executed.
 
Now that is essentially one way by which you 
can use JavaScript. You can directly define  
functions, you can define procedures, 
you can call them one after the other,  
and yes, JavaScript will work fine that way.
On the other hand, there is also this concept of  
what is called functional programs, and in 
functional programs they are based on sort  
of the mathematical theory of functions. 
There are a whole bunch of languages that  
are designed around this. One of the most famous 
original ones was called Lisp. And nowadays you  
might come across terms like Haskell or Ocaml, 
which are also strongly functional languages.
 
Now it is not just that those languages 
are a fact, they fundamentally change the  
way you think about the problem. So rather 
than just sort of writing loops to sort of  
perform computations, you try and write the 
mathematical equations that define a certain  
computation and the compiler or the interpreter 
then figures out the best way of executing it,  
which means that from the programmer’s point of 
view, potentially, there are like really powerful  
ways of looking at the problem and leaving 
a lot of the grunt work to the compiler.
 
And more importantly having some knowledge 
of functional programming can actually change  
the way you even think about a program 
or how you to solve a problem. So that  
functional is also one of the ways in which 
you can look at JavaScript programs.
 
Why is that? Because you can do things like you 
can essentially treat a function as a first class  
object in JavaScript. You can basically 
assign it into a variable, you can pass  
functions around, you can create a function of 
a function, higher order functions and so on,  
composition of functions, so all of that 
allows you to do some slightly more advanced  
type of coding than you would otherwise do.
Once again, do not get into this just for the  
sake of doing it. You need to sort of try and 
understand what is meant by functional programming  
first before you get into trying something of this 
sort with JavaScript or any other language.
 
And one other important paradigm as far as 
JavaScript is concerned is this notion of  
being event-driven. Now event-driven basically 
means that you respond to events. So you can have  
different functions, different parts of your 
code which are all present and available, but  
rather than calling all those functions one after 
another what we say is if something happens then,  
one function will get called, or if something 
else happens another function will get called.
 
Now this is pretty much perfect for GUIs in 
general or for interacting with let us say a  
webpage because what happens on a webpage, I 
display the page and after that I am waiting  
for user input. If the user clicks on a button, 
call a specific function, if they click on a link,  
call some other function, if they click on another 
button, call a third function, if they select some  
part of the text, maybe call another function.
All of those are events. Clicking, selecting,  
all things of that sort are events that 
the user is providing to the program.  
And rather than sort of going on saying okay, 
what did the user do, what did the user do,  
what did the user do, you let the functions 
be bound to certain events. And anytime the  
event happens automatically the system takes 
care of calling the appropriate function.
 
A very powerful way of thinking about reactive 
systems, that is to say interactive systems in  
general, and fits the model of the web perfectly. 
JavaScript also happens to be relatively easy to  
learn. Especially if you have familiarity 
with something like Python, you should not  
find JavaScript too difficult.
Now, one thing to keep in mind is  
except for the name, it has very little connection 
with Java. It came about because Java was  
brought in as a language that could be used to 
create applets that would run inside browsers.  
And JavaScript basically said forget applets 
we will just run directly inside the browser.  
And that is the only real 
connection between the two.
 
There are some syntax that are vaguely 
similar between the two in a few places,  
but you will probably find that there is more 
similarity between JavaScript and Python than  
JavaScript and Java, so to say. So there 
is no direct relationship. So it is not  
as though knowing Java will help you with 
JavaScript. You need to think of it differently,  
and you need to understand why it is relevant 
for use in the context of the web.
 
So, why is JavaScript useful? The main reason 
is that most web browsers today have a dedicated  
engine just for running JavaScript programs. 
It is designed from the ground up, the language  
JavaScript was designed from the ground up for 
the web. Now why do most web browsers have this  
engine? Because historical reasons.
People found that JavaScript was useful  
therefore a web browser without JavaScript would 
not see as much popularity, so everybody started  
adding JavaScript to their browsers, over time 
it became a necessity, you had to have it or  
else nobody would use your browser.
Now the great thing about JavaScript is,  
actually speaking, it is an interesting language, 
it does not have any notion of input output,  
unlike, let us say, Python, where you can 
directly read from a file or write to a file.  
In JavaScript you do not have the 
basic capabilities for doing that.
 
The reason being on the web you do not really 
have a way of getting input or giving output  
directly to a user or through files. On the other 
hand, there is, I mean so there is no native IO,  
no file access etc, but even that can be provided 
through the use of APIs. So everything about  
JavaScript ultimately comes down to APIs.
And the browsers tend to support APIs for  
a very large number of different kinds of 
functionality. So this is not part of the  
core JavaScript language, but in general, it is 
something that you can expect that a JavaScript  
runtime, that is to say, JavaScript in a 
browser, is most likely going to support.
 
So, manipulating text, strings, dates, regular 
expressions which are used for various kinds of  
pattern matching, which you may have heard 
of, you may have used in different contexts  
but sort of beyond the scope of what we have 
here, this is supported again, using APIs.  
It has many standard data structures, 
dictionaries, lists and so on, which you  
can directly use, and you, using those you can 
create much more complex data structures.
 
A very important part of JavaScript 
is the API for manipulating the DOM,  
the document object model, which basically 
means this is ultimately how you are  
manipulating the browser, you are able to 
directly modify what shows up on screen.  
And that is a large part of where 
the power of JavaScript comes.
 
At the same time, like I said it does not 
have native input output capabilities,  
no file access for example, but even 
that can be provided through APIs,  
and there are ways by which the browser can 
give you controlled access to different parts  
of the file system. Now the maximum power of 
JavaScript, of course, comes when it is used for  
DOM manipulation and that is where you will find 
the majority of JavaScript code being used.
 
So now, what I am going to do is to actually sort 
of look at a few examples that are already there  
on the web because ultimately the best way to 
sort of learn JavaScript is by writing code.
 
So, there is no point in giving you a complete 
sort of overview of what is the syntax, what are  
the ways in which you can write JavaScript and 
so on. You should probably do that if you are  
interested, and go through, there are any number 
of resources online that would help you with this,  
but the thing to keep in mind over 
there is that which one do you go to.
 
One generally good set of links is 
provided by the Mozilla developer network,  
so developer.mozilla.org or there is also MDN, 
Mozilla developer network. Why Mozilla? Well,  
Mozilla makes Firefox. It is one of the most 
powerful browsers, most popular browsers.  
Maybe not in terms of share numbers at this point 
but at least most people know of Firefox.
 
And the reason for that is because the Mozilla, 
that group has been involved with web related  
technologies pretty much from the start of 
the web. The very first web browser that was  
sort of publicly used was Netscape navigator, and 
that is where Mozilla has sort of evolved from.
 
So, they have a lot of useful information 
on their developer website, and what I am  
going to do is just look at a few examples. 
So like I said I cannot go into the details  
of the syntax of the language or give you too much 
information about how to use it. So this is more  
sort of first steps, just a flavor of the 
language. Hopefully it will get you interested  
enough to learn more of it on your own.
So, the, what is JavaScript page on the  
Mozilla developer network? It gives 
you a lot of information, it talks  
about high level definition of JavaScript, 
scripting or programming language, etc.
 
The interesting thing is the way that they 
look at it, it essentially looks at, at html,  
CSS and JavaScript as sort of, I mean they 
talk about it as three layers of a cake, but  
ultimately these are the three sort of defining 
technologies of the web as we know it today.  
It is not that this is something fundamental. It 
is just that over the past several years it has  
grown to be, to this point. And these are the main 
sort of pillars of the web as it stands today.
 
Html and CSS, you have a reasonable 
understanding of, at this point.  
JavaScript, like I said, a full, sort of in-depth 
discussion of JavaScript is beyond the scope of  
this course but what we are going to do is 
at least try and get a flavor for it.
 
So, let us take a look at this example. So what 
we have over here is, you have one small piece of  
html code, with just one paragraph,  , and 
it basically says some text inside that, Player  
1 : Chris. And then you add some CSS styling to 
it, which basically says what font family to use,  
some Helvetica something, letter spacing.
Transform the letters to upper case, which  
means that even though the name was given 
as Chris, it will be typeset displayed as  
capital letters. Align in the center, create 
a two pixel solid border, make the background  
some kind of I guess a purplish color.
So, all of this information, bottom line is  
this is what it looks like, this Player 
1 : Chris, that you can see here, this  
sort of violet color display that is 
there towards the bottom of the screen.  
So what do we have? We had html and we had css. 
Combining those two gave us this display.
 
And now, we add a little JavaScript in order 
to implement dynamic behavior. So what does  
the JavaScript look like? Let us first take a 
look at the language itself. So we have one line  
out here that says const. So const, it is sort 
of like a constant declaration. The const int  
that you could declare in a language like C.
Essentially what you are trying to say is that  
para is something that you want to use like a 
variable but on the other hand you do not want  
it to be changed later. That is, in other 
words, once you have declared para, I do  
not want it to ever change anywhere else in my 
code, which is why you declare it as a const.
 
What happened if you did not declare it as 
a const? Nothing much. It will still work.  
The point is somewhere else in your code 
you might accidentally write para equal to  
something else and then you might change things 
and not be able to debug what is happening.
 
By declaring it as const at least the engine 
knows that you do not want to change it in future,  
and probably it will signal some 
kind of an error, maybe not on the  
web page but at least somewhere internally.
Now, so that means that para essentially is a  
variable. It contains some pointer or something. 
Now, how are we assigning a value to it?  
We call a function. What function is it? There 
is an object called document which is part of the  
basic JavaScript. And document.querySelector, 
this is exactly like you would do in Python,  
so there is an object and query 
selector is a method on that object.
 
So, document.select, querySelector(‘p’), 
in other words, what it is going to do  
is it is going to select the p type element, a 
paragraph element present inside the document.  
And now look at that. So what it has done is? It 
has basically now got a variable called para which  
has got assigned whatever came out of this 
function call. So the document.querySelector  
is a function call. A method call on an object 
which is basically ultimately a function call.
 
Now, what type does it return? Does it 
return a number? Does it return a string?  
What it actually returns is some kind of, you 
can think of it as a pointer, or a handle.  
That is a different sort of term that we use. 
Ultimately the point is this itself is a object  
that comes back, which means that it has its own 
methods associated with it, which means that I  
can call something like para. something which is 
a method associated with the para object now.
 
So now para, in other words, hopefully after the 
first line has run, has selected some paragraph  
object that is present, and para.add 
event listener is now going back to,  
you remember we talked about paradigms, this is 
the event-driven paradigm. What it is saying is,  
if you perform a click event, click is one of 
the, sort of predefined events inside JavaScript,  
call this function updateName().
So, add event listener basically says that if  
the click operation is performed on the 
para, which after all came about as the  
result of query selecting on the p tag, if, 
in other words, you click on a paragraph,  
call the function updateName().
What is this function update name? Here,  
this is how you define a function. In Python you 
would have used the word def, over here you use  
function. In Python there would have been a colon 
followed by indentation and so on. Instead of  
that, this is a bit more like C or Java. It uses 
curly brackets to start and end the function.
 
So, function updateName(), simple enough. Let, 
let is a different way of again defining a  
new variable. It is essentially what, let does is 
it means that it is now scoped meaning that the,  
this variable name exists only within this 
function. And once you go out of the function  
there is no longer a variable called name. You 
can get into scoping later when you actually start  
programming. For the time 
being, it is just a variable.
 
Name = prompt, which means that it should 
pop up something on the screen asking you  
to enter a new name. And once you have 
entered that name the para.textContent,  
so this is not exactly a function call, this is 
more like an attribute. So the para.textContent  
will change to Player 1: whatever you enter 
over here. And they have got that right here.
 
So, what has been displayed over here is a 
paragraph, exactly similar to this Player 1  
Chris, that was there earlier, but now 
with this JavaScript code added to it.  
What happens when I click on this? It pops up 
this query which says an embedded page blah,  
blah, blah says enter a new name.
And what do I do?  
I can basically enter some, some name.  
So I enter some name, click OK, and immediately 
the text changes to Player 1 : SOME NAME.  
So what happened? This para had selected the p 
type html element, it added an event listener  
to it, the event listener would call the function 
update name anytime that a click happened on that  
para. And update name would ask you for a 
new name and update the text content.
 
I can do it again. I can go 
here and type one more name,  
and it changes accordingly. So 
this, in other words, is a very  
simple and clean way of adding 
functionality to a web page.  
So you can already see the power of JavaScript 
in the context of the web coming in.
 
Now, let us look at another example of JavaScript 
being used for some additional functionality.  
Right now, we used it in order to 
replace the text content of a paragraph.  
You can do a little bit more. You could 
actually have some kind of JavaScript  
code which is there right inside your html as 
part of a script which is somewhere there.
 
You define a function, which basically says 
create paragraph. What does it do? It creates a  
new element, a p element, sets the text of this, 
and to document.body, so document remember, was  
the object corresponding to the entire document, 
document .body is part of that DOM, the document  
object model, which says it is the body content of 
that particular tag, of the particular document,  
appendChild(para).
So now normally if I run this in the  
context of this web page, the document body should 
be the entire web page. But the way that this has  
been written on this particular website is that 
this text that you have over here is sort of an,  
what they call an Iframe, an inline frame. It 
is a separate webpage of its own, which is just  
loaded and displayed over here, and just contains 
this function and this piece of text over here.
 
So, what does this piece of html do? It generates 
a button, which on click will call this function  
createParagraph(), and the text of the button 
says click me. So it basically looks like this.
 
So, the bottom line is, now what we are seeing 
over here below this, you can try this version  
of our demo below, immediately below that is 
something which is actually a separate web  
page altogether, because otherwise if I went and 
clicked on this, it should do this append to the  
entire document, which means that at the bottom 
of this webpage, and it might not even show up.
 
On the other hand, because it is doing 
it in this I-frame, whenever I go and  
click here, it says you clicked a button, 
you clicked a button, you clicked a button.  
I can keep doing it and after sometime it 
keeps on adding more and more text out here.  
I can do this as many times as I like. 
So, these are sort of instances of how  
you can get basic JavaScript, and 
add functionality to a webpage.
 
Now, a little bit more about JavaScript, 
a bit more of the basics. So for example,  
you have something which is a variable. So you 
have this concept of a variable in JavaScript.  
And as you can see over here, this is 
yet another example, what it says is  
I might want to have some kind of functionality 
which happens when I press this button.
 
How do I do that? I basically say that I 
will query the document to find out button A.  
Query the document to find out heading A. 
So both of these have been given some kind  
of names or IDs somewhere in the text. So 
you can see this ,  
which is why when I query the document for hash 
button A, it finds this particular button.
 
Similarly, , means that it 
will query and find that particular heading.  
And then I can say button A dot on click. And 
look at this. This is a slightly interesting  
way of doing things. I am straight away saying 
button a dot on click equals a function.
 
So, you remember what we said about JavaScript 
functions themselves being first class  
objects. I mean, I can basically take a 
function, assign it to a variable and so on.  
buttonA .onclick, onclick is an attribute of 
this button, which means you can think of it  
as a variable inside button. And I am creating a 
function without giving any name to that function,  
and just assigning that whatever I get out of 
the function over here, directly into onclick.
 
Now this, what I have done here, I have basically 
created a function without giving it a name,  
is something called an anonymous function, and 
is something that you will find a lot of in  
JavaScript. It is one way of writing code. There 
was, the previous way that we showed where you  
explicitly wrote out a function and then did the 
assignment of the update is also perfectly fine,  
but this is a sort of clever and compact way 
of doing things and therefore you are likely  
to encounter this in several places.
What it does is basically once again it  
comes up with a prompt for the name, it does 
an alert and then afterwards it basically does,  
it is able to use this text content welcome plus 
name and directly create this. So the variable  
that you declared over here can be used.
Press this thing, and I just enter  
My Name, and click on OK. And the first thing 
it does is it runs the alert which says,  
hello My Name, nice to see you. And when I 
click OK, it now puts in the heading as well,  
headingA.textContent=welcome My Name.
So, all of these are basically examples of  
directly changing. The interesting thing over here 
is you will notice that you, you have actually  
gone and changed the html content of the page. 
There is no way of really differentiating this.  
The one thing that happens though is if you 
look at the page source you will not find  
My Name anywhere in it because that came 
about only after you modified the page.
 
On the other hand, if you 
inspect using the sort of this  
F 12 button usually in Chrome, if you press that, 
then you will find that you can actually dive  
deeper into this. You can get into this part of 
it, where it sort of says I can go into the div,  
inside the page wrapper and 
inside the main article.
 
And I have this div over here which 
corresponds to this part over here,  
the example with the variable comes up over here,  
and as I look at the final output, I actually 
see that this corresponds to an I-frame,  
which, when I look inside it tells me whatever is 
actually running out here, and being displayed.
 
So, if you really want to find out which part 
of your page is being displayed according to  
what part of the code, you need to be able 
to use this webpage inspector. Once again,  
out of scope of this course but making use of 
it, if you basically go to the menu of any,  
of your browser usually, out here in the corner 
you would find that there are certain things like  
the more tools and you will find developer 
tools. That is how that thing comes up.
 
It is well worth playing around. It sort of 
shows you how different parts of the document  
are being displayed and so on. But you get 
into it when you are sort of getting into  
the details of how to actually design a page, 
how to have more control over different parts,  
what kind of JavaScript to write and so on.
Similarly, there are many other ways of you what  
you can do with variables you can declare 
variables, you can initialize variables,  
there are some differences between var and let 
so on, which I am not getting into right now.
 
Instead, there is again on the same page, a 
set of an overview of the basics of JavaScript,  
which sort of tells you, first of all, how you 
can include a JavaScript into an html file,  
and inside the html file, you could have 
some extra information which basically says  
how do you write code, how do you declare a 
variable how do you assign a value to it.
 
And as you go through you will find that there are 
a couple of things to keep in mind. Anything in  
/*, or //, this is basically exactly like what you 
would find in C, C plus plus, at least, or I think  
Java also. And this is how you define comments.
There are operators, +, -, *, etc just like you  
would find in pretty much 
any programming language.  
There are conditionals. You can have if some 
condition do something, else do something else.  
And most importantly there are functions, 
which you can call, as we have already seen.
 
So, document.querySelector is a function, alert 
is a function you can define a function in this  
way similar to the def syntax in Python and 
then call the function by giving arguments. And  
there are events. So this whole on click, 
for example, can be used in order to  
update how the page responds to your inputs.
So, all of these are useful and if you look at  
this JavaScript basics they basically 
go about creating a page like this  
as a demo, and show you how each of the steps 
works. You can go and click on this change user,  
and say New User, whatever it is. At that 
point it says Mozilla is cool, New User.
 
And there is one more piece of JavaScript on 
this page which you might not even notice,  
which when you click on this image, 
it basically changes the image.  
So all that kind of functionality has now become 
like so smooth and fluid. It does not reload the  
page, nothing changes except the page itself 
as it is displayed, which means that the user  
interaction is a lot more smooth and clean.
So, there are a lot of learning resources for  
JavaScript. In particular, what I said about the 
Mozilla developer network, has a lot of useful  
information. They also recommend, there 
is a learn JavaScript dot online, which  
is, the first few parts of it are free 
but then some parts of it are paid.
 
The important thing I would suggest is rather 
than going in and saying that I need to  
pay and take a course, the best way to 
learn any language including JavaScript  
is ultimately through example. Try 
programming, try something out on your own.  
That is the best way to really 
learn the language well.

Hello, everyone, and welcome to this course on 
modern application development. So, so far we have  
looked at a high level overview of JavaScript, 
and we now come to the most important part,  
why did we bring JavaScript into the picture? 
We were talking about HTML to start with. And  
the reason why JavaScript comes into the picture 
is because we want to define custom elements. 
 
So, what are custom elements? Now, XML, as we 
saw earlier, allows arbitrary namespaces and  
tag definitions. But HTML5 does not use the 
same approach. What it does, is that, it has  
specific requirements for elements, meaning that, 
there are elements like title, h1 and so on. And  
HTML or rather, let me rephrase that. HTML5 
has specific elements, like title, h1, etc.  
But if I am allowed to define an arbitrary 
custom element, then should I really be  
allowed to say my-button? And what is the 
browser supposed to infer from that? 
 
Just because the word button is there inside 
it does it automatically infer that, yes,  
this is a type of button or does it say, 
this is a tag, I have no idea what it means.  
Is it a heading? Is it a list item? Is 
it a button? Is it a link? Is it just a  
picture that's displayed on the screen? 
Nothing is clear from the name. 
 
As a human being when I read the name 
my-button, I think it must be a button,  
but there is no real need. There is no nothing 
compulsory about that. On the other hand,  
there is another part to a tag element, which 
is to say, how should a tag be shown? This is  
the part that JavaScript can actually solve best 
for you. It basically gives you display details.  
In other words, if you provide a tag, then how 
should that tag get displayed on the screen? 
 
Now, elements could also have states. I mean, 
in general, HTTP is a stateless protocol,  
but that does not mean that there are, you 
cannot have certain elements on the screen  
that have a state associated with them. The 
simple example is a checkbox. So, on screen,  
I might have a form where I have something to 
be checked off or a radio button or a checkbox.  
A checkbox or radio button has state associated 
with it. Is it checked or is it not checked? 
 
Now, if you are defining a new custom tag of 
your own, maybe, it is something similar to a  
checkbox or maybe it is something else. The point 
is, it might have some custom state of its own.  
How do I sort of keep track of that state? How 
do I use that state in a useful manner? That  
is also part of how you define an element. 
And finally, a question that we could ask is,  
should I restrict my customization to only taking 
built-in elements like headings or list items and  
adding functionality to them or should I be 
able to build a completely new autonomous custom  
element, meaning that, it has no relationship 
to any elements that are already defined  
or at least, it is not directly related to any of 
them and is completely standalone, in some sense.  
Now, the full details on how to use 
this is specified at this webpage. 
 
We have this this particular webpage is what I 
had referred to earlier, this is the HTML living  
standard. And within that living standard, 
what we are looking at over here is section  
4.13 which refers to custom elements. So, 
this HTML living standard, you can see that  
it actually shows, this was last updated on 
thirtieth. September. I am recording this  
on the first of October, which literally means 
that this document was updated yesterday. 
 
On other days, it is not that it is 
updated every day, it might actually  
have been changed a few days back. And if you 
go look at this thing, you will find that, yes,  
there are a number of updates, all the changes 
are recorded and tracked, so you can go back  
and find out what it looked like at a different 
point in time. But the ultimate thing is that  
whatever exists as of now is what you need 
to take as the living standard, so to say.
 
Now, one issue with this document is that in 
pretty much every section you will find this  
disclaimer saying that this 
section is non-normative.  
Normative generally means, it is actually part 
of a standard. And when you say non-normative,  
it means, that it is potentially subject to 
change. Now they have to do that because part  
of the reason for being a living standard is that 
you cannot really say that this is a standard,  
it is not going to change from onwards, but it 
also means that you always have that concern that  
is this really what I should be following? 
Anyway, the point is, this is the standard that  
is followed today, and it is a good sort of 
document. It is also a somewhat dense document,  
not very easy to fully understand, but it is worth 
sort of at least skimming through to start with.  
It gives you a lot of useful information about how 
you can create an autonomous custom element. So,  
for example, I could create something called a 
flag icon a tag that does not exist in HTML. 
 
Now, what would this do? When I read it as a 
human being, I think, most likely what is going  
to happen is I will take the country, I will find 
out what flag that should be there, get a picture  
of that flag and display it somewhere. But how 
does a browser really know what to do about it?  
That is where you basically have to go 
and declare everything in JavaScript.
 
You have to say that there is a class 
FlagIcon, which extends HTML element.  
It has certain attributes, it has callbacks, blah, 
blah, blah. And the most important thing is, it  
also tells you how to update the rendering, that 
is to see what should be displayed on the screen.  
In this particular case, it does not actually 
tell you what to do so you cannot use this piece  
of code. But you could sort of imagine 
that, maybe I would need to go find one  
central location where the flags of all countries 
are there, find a picture corresponding to the  
flag of whichever country I need to display 
and put that image on the screen. 
 
Once you have that piece of JavaScript, I 
can just call this customElements.define.  
It is a function called, it is basically 
calling the custom elements API,  
the application programming interface. So, the 
custom elements API, which is present inside  
any browser, that supports JavaScript allows 
you to define saying that flag icon this new  
tag will call this JavaScript function, or this 
class corresponds to this class FlagIcon.
 
Which means that from there onwards, you 
know, after you have done all of this,  
you can then go there and directly 
have a piece of HTML in your code,  
which shows  . So, this document, in other words,  
gives you the basics of how that is supposed 
to be done. But it is not very easy to, I mean,  
it is not like a tutorial. You cannot really 
read this and understand how to use it. 
 
So, what people did is, rather than just sticking 
to the custom elements API, which is present over  
there within JavaScript, they said, let 
us try and make this a bit more useful.  
Add some more components to it, and they came up 
with something called a web component definition.  
So, a web component is something, which makes 
use of three aspects of HTML essentially. One  
is the use of custom elements, which we already 
saw how you can define as part of the HTML5 and  
JavaScript APIs. It is basically a JavaScript API 
that allows you to create custom element tags. 
 
But on top of that, let us add some 
more thing to make it easier to use  
because, if I am adding a new tag I probably 
want to display something on the screen.  
And it means that I should be able to control 
which parts of the screen are going to change.  
I do not want a style change that I make over 
here to suddenly go and affect the entire page.  
I would like to be able to affect 
just the part that I am interested in.  
That is done by using another API called the 
Shadow DOM, Shadow Document Object Model. 
 
And essentially, what it does at a high level, 
high enough level, you can think about it,  
it allows you to keep the styling of 
the component that you are defining  
separate from the rest of the page. 
It is sort of an encapsulation.  
And finally, there is this concept called 
HTML templates. Template and slot were two  
new tags that were introduced in HTML5, 
that allow you to basically do something  
at a high enough level, you can think of it like 
Jinja templates, it is not exactly the same thing,  
but in principle it is just allowing you to 
replace some text with something else. 
 
It does not have like the kind of 
templating language that Jinja has,  
but you can do it in other ways because after 
all, you have access to JavaScript over here.  
So, the template tag basically allows you to 
say that, this is roughly what a template for  
displaying something should look like, use that 
in order to actually display certain things.
 
Now, probably the best way to explain this is 
once again through examples, and csstricks.com  
website actually has a couple of good examples 
that I am just going to walk through here. So,  
this webpage an introduction to web components 
has some nice examples that you can look at,  
right? And in fact, you can play around with. 
So, the first example that we have here.  
And what we can do, the nice thing is you can 
actually open it on this website called codepen.  
And code pen essentially allows you to have 
something like this, which is basically a  
snippet of HTML, and CSS and JavaScript and it 
displays the final output for you down here.  
So, let us look at our HTML, it just has one line, 
which is just basically the new component that you  
have defined you have got this thing called my 
component and it shows you what that is. 
 
Now, what is my component, I have this line at 
the bottom down here saying customElements.in,  
the JavaScript side of things, I have this thing 
saying customElements .define my_component, and it  
will call the class my component with capital 
M and capital C. And what does my component  
itself do? It just basically adds the text or 
rather, it says, this.innerHTML =hello world. 
 
Now, let us try playing around with it a little 
bit, I am going to add some text over here.  
I am going to try some more text.  
And it automatically goes in and displays whatever 
is there in the text. So, what you can see is  
that it has basically taken the inner HTML of 
the page that you have, wherever you had this  
mic component and replaced it with the 
text, hello world, which means that, now  
what you get corresponding to the my component 
is this hello world that is present out here.
 
And then after that, you have basically added 
on this some more text. Now, what happens if I,  
so what you can see is I have some text 
before that. I have my component over here,  
and I have some more text. I can also go 
further and make another copy of that.  
So, I will just basically make two 
more copies of this my component.  
And as you can see, it renders again down 
here, and it basically shows it three times.  
So, what did this do? This was just basically a 
very simple example of the most basic element,  
basic part of a web component, the fact 
that you can create a custom element.
 
It goes further and says how you can use the 
Shadow DOM. Now the Shadow DOM is a little  
bit more tricky to explain what it says over 
here. And in fact, the example that you have,  
sort of shows that there is some text out here,  
with a div in the HTML part, which basically 
says this will use the CSS background,  
and then there is a button that says not 
tomato which you can see down here
 
Now, what does a JavaScript itself do? If 
you look at the HTML text, what it said was,  
I mean, if you think about it, what it should have 
displayed was this will use the CSS background.  
That is all. But what the JavaScript does is, 
it basically goes and modifies that slightly,  
adds background tomato as the 
style. It also adds the text tomato  
and it basically converts this entire thing 
that you had out here into a button. 
 
So, in other words, what it has done is, 
it has managed to add some extra styling,  
and also convert the whatever 
you had out here into a button  
without affecting the rest of the page itself. In 
other words, this shadow route that we created out  
here using these commands, restricted itself only 
to this part. So, this style that we created even  
though we gave the background tomato, that button 
background did not go and modify this button.  
So, the not-tomato remains as it is.
The fact that I went and modified the button  
background class the button background style over 
here to tomato applies only to the first button  
not to the second one. A little bit tricky 
to understand, but it is worth understanding  
how it works if you are planning to get 
into this in more detail, at least. 
 
And finally, there is this notion of HTML 
templates. So, what does an HTML template do?  
You know, the example that they are given 
out here basically shows you that you  
might have information where you let us say 
you have a piece of JavaScript, which contains  
a list of books and each book basically has a 
title and an author. Now the question becomes,  
how are you going to display it.
And what is being done over here, is there  
are like templates that are created out here. And 
in fact, the demonstration can be shown right now.  
The way that it is showing it right now is 
basically it shows the title of the page  
puts a dash, and shows the author of the 
page. And now, by just clicking on this one  
radio button that says template two it changes 
around and says, F. Scott Fitzgerald's classic  
novel, The Great Gatsby, Ernest Hemingway's 
classic novel, Farewell to Arms, and so on.
 
In other words, it has changed the template, the 
template now became the title of the book, space,  
classic novel or rather the author's name space 
classic novel space the title of the novel.  
So, just by making a change in 
the template, you were able to  
modify the way that this got displayed. 
Ultimately, what happens, as a result is that,  
you can have more and more complicated 
word, such web components that are built up  
and start composing an entire webpage out of 
such components. So, once again, the Mozilla  
Developer Network, they have this GitHub page 
that contains a number of different examples. 
 
So, this, in fact this MDN, the github.com/mdn, 
they contain a number of web components examples  
which you can also see live. You can actually see 
what it looks like. So, in fact, some of them are  
quite instructive and useful to sort of see how 
they work. So, let us just dive into one of them,  
which is a very simple example. What it says 
is, the JavaScript corresponding to this,  
it looks a little bit long, but it is quite 
small compared to most of the other JavaScript,  
it is worth just understanding what it does. 
It is now defining a new class, which extends the  
HTML paragraph element. So, interesting, what it 
is doing is it is sort of creating an extension  
on top of an element that already exists, 
it is not defining a new element by itself.  
All this part about the constructor and 
so on is just like the initialization,  
the init function that you call in Python.
The important part is, it creates a shadow root  
and it is trying to create the text 
corresponding to that root. And what is the  
text? It is going to be equal to some variable 
called count. And what is this variable count?  
It is going to be by running this function 
count words, which is defined out here. 
 
So, what does count words do, it 
basically takes the node.innerText  
split it on whitespace and basically takes the 
length of that. In other words, it splits on  
one or more spaces, gets all the non-space 
characters grouped together and count how many  
such groupings were there. A very trivial 
way of counting words, but effective.
 
So, this function count words has been defined 
in order to count the number of words in a  
given piece of text, in fact, specifically in 
the inner text corresponding to a given node.  
Which means that, I can then call count words 
on the parent of this node, which I get again  
from the JavaScript over here, set that as 
the text of something that I want to display  
and also set it so that every 200 milliseconds, 
I will update this word count. 
 
And finally, I define a custom 
element. The word count is defined as  
calling this class capital word count and it 
extends p. It was defined as an extension of  
HTML paragraph element and here we say that it 
extends p. That is to say, the p element type. 
 
What does the index.html look like? It is 
like fairly regular HTML up to this point.  
It just declares the content editable 
article. You can ignore that for now,  
it basically means it is sort of like a text 
area that you can type text into. It has some  
random text generated in there. And this last line 
17 that you see or hear basically says there is  
a word-count paragraph. In other words, it is a p,  
element of type p paragraph, but with the 
extension word-count applied to it.
 
What does this look like when you actually go to 
a page like that, it basically says word count  
rating widget. And when I click somewhere 
there, I find that I can actually edit it.  
Now look at this number down here saying 
words:2012. Let me go and start typing  
something more here. And you can see 
that as I type, it starts changing  
this number of words that have become 216. 
And I can actually go in there and now, perhaps,  
add some more text. All of this works, but you 
will realize that, you cannot actually select this  
words:220 and delete it, it 
is not part of the paragraph,  
it just sits over there, because it was created by 
the JavaScript, it is not something you typed in.  
So, no matter where else you type, it will 
automatically add this at the end. 
 
So, is this useful? Think about it. Let us say 
that you are creating an editor for somebody to  
fill in a form you create one standard widget 
like this, which basically takes an HTML area  
where you can type text and puts a word count 
at the bottom. It may not just be a word count,  
it might even be something which if you go beyond 
a certain value will actually raise an alert and  
stop you from typing or you could have something 
which basically puts a timer out there. And after  
you have typed for a certain amount of time it 
counts down and says, stop. All that functionality  
could have been added in just by modifying that 
main.js, which defines the web component. 
 
Now, where this becomes really useful is 
think about how the web component was defined,  
it was just done in this main.js, which 
basically had this class wordcount,  
which extended paragraph element. It did not 
have any relationship to this particular website,  
it did not have any other dependencies on what 
is being done over here, which means that,  
I could have taken it, put it on my website, you 
could have taken it, put it on your website. 
 
Somebody could have installed it on GitHub or some 
other place, and I could have just referenced it  
from there and it would work, which means, 
it becomes reusable. And that is sort of the  
key behind web components. The fact that you are 
creating reusable user interface components. 
 
So, to summarize, what is the point of web 
components? It basically is an API that can allow  
you to extend HTML5 element or tag capabilities. 
It uses something extra called the Shadow DOM,  
which restricts the scope of styling 
and allows you to create self-contained  
encapsulated units and it uses templates that 
allows you to write no reusable code. 
 
You combine all these three together and you 
have this definition of something called web  
components. And the primary goal of this is reuse 
of widgets. Widget is just a generic term for  
something that you might want to use in different 
parts of your screen of your user interface.  
So, one of the biggest problems, of course, with 
this entire approach is this, unfortunately,  
the web component part is not standardized. 
And if you think about it, you can understand,  
why because, the API is standardized, 
how to create a new custom element,  
but how should I use a shadow DOM, how should I 
use templates and so on is largely a matter of  
subjective interpretation. So, there is a very 
good chance that people might object and say,  
look, that is not the way I think about it. 
That is not how I want to do it. 

Hello, everyone, and welcome to this course 
on modern application development. So, with  
all of this web components and so on in place, 
it finally leads us to the topic of frameworks  
frontend frameworks as they are called. 
So, the first thing that we would ask is what  
is the purpose of a framework? We are looking 
at some kind of a context where some kind of  
basic functionality is already available. So, the 
Python programming language can already, it has  
as part of its standard library, it has 
like network interfaces, it can create  
a function that will listen on a 
port. It can manipulate strings.  
So, it can append strings together, it can create 
new strings, it can even do some kind of basic  
templating and filling in text and so on. 
Similarly, JavaScript has the functionality for  
extending elements. So, custom element is already 
defined and it has the DOM manipulation APIs.  
So, that sounds great. It means, that in 
principle, I can already create any kind of  
web-based application using Python or I can create 
any kind of web component using JavaScript. 
 
The problem is, there will be a lot of code 
reputation and this word boilerplate is something  
that you would have probably come across in 
multiple places. Boilerplate basically means  
it is a standard repeating thing. It is the same 
thing that you are going to do multiple places.  
So, for example, you might find 
that anytime you are writing a new  
Python program, the first thing you need 
to do is import a bunch of things. 
 
And to some extent, you might find that it is 
so repetitive that look why do not I just have  
sort of boilerplate starter code, which allows 
me to get started without having to type in  
all those inputs one by one. I know that I am 
always going to be importing the same things.  
So, that is boilerplate code repetition, 
we would like to avoid it if possible.  
It also means, that there will be 
a lot of reinventing of the wheel,  
because people have different coding styles, 
they have different coding techniques,  
and ultimately, that results in many different 
ways of creating components, using components,  
mixing them together, and so on. 
So, the solution, that it is not unique to  
JavaScript or Python or anything else of that 
sort, it is a standard technique for you try and  
identify standard techniques for solving common 
problems, and this ultimately, is related to the  
concept of design patterns that I have been 
talking about repeatedly through the course.  
Model view controller was, in some 
sense, a form of design pattern.
 
Ultimately, all that it comes about is there is 
experience that people have come up, come up with  
over years of trying to do things in a certain 
way, they try and distill that and take out the  
essence of it, and put it in a form that can then 
be reused by others. And when that is done nicely,  
it is really powerful and a lot of people tend to 
use such things. That is what a framework is. And  
flask, for example, is a framework for 
creating Python web applications. React  
is one of the frameworks that is available 
for creating JavaScript components. 
 
Not exactly JavaScript web components. There 
is a difference between react components and  
JavaScript web components. Once again, it is 
partly different styles of doing things, but  
they are all trying to solve similar problems, 
react focuses only on the user interface,  
whereas, web components does a bit more slightly, 
including the state of the system and so on. There  
are some differences, there are some similarities 
as well. Once again, you can see that,  
it ultimately comes down to is it popular? 
Is it easy to use? People will use it. 
 
Now, in the context of JavaScript a lot of the 
frameworks that have come up are built around  
this concept of single page applications. And 
many JavaScript frontend frameworks are focused  
on enabling this in different ways. Part 
of the reason for the popularity of single  
page applications is because the single page 
application effectively becomes an app by itself,  
which does not need like multiple different web 
pages that you need to navigate through. 
 
All the sort of communication happens in the 
back with JavaScript, a lot of the computation  
may also happen with JavaScript, which means, 
that the user experience becomes a lot more  
smooth than if you need to keep on clicking 
on pages and waiting for a web page to load.  
And that was the focus of many of the JavaScript 
front ends, at least at least to start with.
 
So, one example that I am just going to use in 
order to demonstrate a little bit about how you  
might use a framework is react. It is one of the 
most popular ones that are available today. But  
like I said this is I am sure there will be like 
very strong opinions in other direction saying  
that look not react, you should use angular or 
you should use view or you should use something  
else or all of these are a bad idea.
So, I do not want to get into the whether  
it is a good idea or a bad idea I am 
just saying this is one possibility.  
It is a library, which has its primary 
purpose as building user interfaces.  
It is declarative. Remember 
SGML and declarative syntax,  
once again, you try and specify what you want, 
rather than how to draw it on the screen. The how  
to draw also has to be specified, but the react, 
once you have defined a bunch of react components,  
it allows you to basically say what 
you want to create with them. 
 
And the components themselves contain internal 
details of how to go about getting that result.  
They are different from web components, but 
somewhat similar ideas, different techniques for  
achieving sort of similar results. Web components 
tend to be more imperative, they actually  
attach the functionality that needs to be done 
directly as functions inside the component,  
whereas, react is more declarative,  
it focuses on composing a user interface by 
putting different components together. 
 
Not a trivial thing to understand, but 
fairly straightforward when you get into,  
I mean, there are differences and both can 
be handled in different ways. Let us take a  
couple of examples of react, which is directly 
available from their main webpage itself.
 
So, this is the main react webpage. And you can 
see that it contains all the information about it.  
It also has a very nice demonstration of 
how react works. And in fact, all of these  
are basically some kind of react components that 
are being used in order to display all of these  
demo applications. And you can actually go in 
here and make changes directly in the code. 
 
And you can literally see that, as you type 
instantaneously, it is updating on the site.  
It is not even like the code pen examples 
where the HTML, CSS JavaScript, and then it  
will go and update, the react components are 
pretty much instantaneous. You type and the  
reaction is immediate. That is because of the 
fact that they are using react on both sides,  
whereas, the code pen page was a more generic 
sort of solution. It allows you to type in  
certain things, and then update later. 
So, what we have over here is that you have  
a component, you modify it, and it immediately 
goes and changes something out here. And what has  
happened is, basically, by creating this class, 
hello message, which extends react.component,  
has told you what needs to be displayed that it 
should be a div like this. And within that div,  
I could go and add more information.
I could just go in there and  
type some more text, and I could, for example, say 
put a line break. And all of that immediately gets  
rendered on the other side, because it is all 
being done in JavaScript on your browser, there  
is no going back to the server out here. Now, we 
also have something which is a stateful component.  
So, for example, this timer out here it started 
out by initializing the value of seconds to 0.  
Ever since then, every second 
this number is ticking away. 
 
And all that this component does is it just 
basically displays the state dot seconds.  
And of course, like before, I can add more text 
through here and it would update the screen.  
And you can see that all, but the interesting 
thing is, as soon as I made a change over here,  
effectively, the component was reinitialized,  
which is why the seconds went back to 0, 
and started counting again, from there.  
So, that is one thing to keep in mind. 
I mean, this is not normally the way that  
you are expected to use it. You do not change 
the component and expect it to update. Whenever  
you make a change in the component, yes, 
it has to reevaluate from scratch. 
 
It is even more powerful. I mean, I can actually 
create something like a to do list right here.  
I can just basically say item 1, item 2, something 
else and so on and it is just basically adding all  
of that out here. Now, is it actually creating a 
to do list? No, it is not saving it to a database,  
it is not connecting somewhere else. 
It is not sort of allowing you to delete or  
update or anything else with the to do list, but 
you can see that as far as the user interface is  
concerned, it is very clean, it is very fast and 
it has a nice way of basically just encapsulating  
the functionality that you need. And there are 
other. So, for example, you could even directly  
have markdown as one of the components 
over here, you could have this text.
 
And, as you can see, it renders the output 
by actually calling a markdown processor. So,  
what is the bottom line? I mean, why is all this 
useful? Because ultimately, what react is allowing  
you to do is to create these kinds of components. 
I have a to do app, which extends react component,  
it has certain properties, it has state, and 
so on all of which are coded properly into the  
JavaScript out here. But once you have that, 
it just is able to create this entire list and  
allow you to use that for the user interface. It 
does not tell you anything about the backend. 
 
It can be combined with other 
kinds of backends. In fact,  
you could potentially even combine a react front 
end possibly with a PHP back end if necessary.  
Although, there are also ways of doing it such 
that even the backend is handled by other things,  
which are similar in JavaScript itself. So, all 
of that are different in that all of those things  
are different ways of handling the separation 
between the front end and back end. React as per  
their definition, at least they try and stick 
as much as possible just to the front end.
 
So, react is one of the more popular frontend 
frameworks that's available today. Is it the only  
one? By no means there are plenty. Numerically 
it is probably the most popular at present.  
Angular with its origins from 
Google is also very well supported.  
It has a lot of capabilities similar, in 
terms of creating reusable components.  
EmberJS is something which both provides 
components as well as a service framework. 
 
So, it also allows you to define 
services and routes and so on.  
Vue is another way, so EmberJS, is probably a bit 
more than just a frontend framework, it also does  
a little bit of the some of the backend part. Vue 
view, for example, is something similar to react,  
it is very often it comes up as an alternative 
to react, which is supposed to be simpler in  
some ways, and so on. It also has sort of 
a lot of commonalities with Angular.
 
Many of these things, what you will find is that, 
the initial versions have certain functionality,  
they tend to get more and more complicated. 
And then there is a sort of simplification  
that happens and people come up with new designs 
that are simplified or faster versions of what was  
there before. And that is part of the natural 
learning process, if you think about it. 
 
Once again, the Mozilla Developer Network does 
have a lot of information about these things,  
including tutorials on how to build certain 
kinds of apps using this using several different  
frameworks, so you can even compare the different 
frameworks by trying all of them out. 
 
So, to summarize, everything that we have so far, 
HTML5 ultimately has sort of settled as a kind of  
living standard. There will be no major changes 
in the standard, but is going to be continuously  
adapted as time goes on. So, minor changes in the 
document that maintains the living standard are  
always going to be there. 
Now, the adaptation layer that allows you to  
sort of put in new functionality or extend the 
functionality of HTML5 comes from JavaScript.  
And JavaScript basically means that HTML 
plus CSS, for styling, plus JavaScript,  
you can pretty much create any kind of app that 
you want. Basic, raw HTML plus CSS plus JavaScript  
can be difficult to code in by itself, which 
is where frameworks come in to fill in the  
gaps. They provide ways of taking out a lot of 
the boilerplate, making certain things easier,  
while at the same time providing their own 
opinions on how certain things should be done.
 
Now, ultimately, what this means is that 
this is probably the way to go in terms of  
the frontend development, if you want dynamic 
applications, things that are highly responsive  
to users. And because a lot of the work is 
done by JavaScript at the users end itself,  
before even requiring a network communication. The 
network very often ends up being the slowest part  
of the entire chain, which means, that if 
you can do a lot of work using JavaScript  
at the users end then it simplifies it. 
Now, this does not mean, that you should try and  
overuse JavaScript and you do not make it 
very fancy web pages with a lot of animations.  
As far as that is concerned, you still need 
to go back to the basics of UI design and  
aesthetics and all of those principles that we 
have already discussed multiple times in the past.  
So, HTML plus CSS plus JavaScript is probably 
the basis of frontend design. It is the basis  
of frontend design today and very likely to 
remain so for quite a while in the future.