Douglas Crockford. Javascript has a good parts

to recap first there was the Big Bang then there is the dawn of man and then there was JavaScript so I was the first person to recognize that JavaScript had good parts that was the first important discovery of the 21st century and when I announced my results they were met with wild skepticism no way there could not possibly be any good parts in JavaScript but it turns out that my results were validated and in fact JavaScript has some very good parts the most important discovery of the 20% of it yeah I do that it's done so give you some historical background at the National Center for supercomputing applications of the University of Illinois urbana-champaign they're a bunch of kids who are developing a client program for the Internet at that time there were a number of protocols that were being considered for the way that the internet was going to deliver information to people there was ways Archy gopher ftp finger and a few others and the world wide web and these guys didn't know which of those was going to win so they wrote a program that worked for all of them and they called the program mosaic and because of the way that they implemented the viewer for the world wide web the world wide web won the thing that they did was they came up with something called the image tag which allowed the web to display images which is something that the other formats couldn't easily do and because the web could display images it could look like what you wanted it to be even if it wasn't what you wanted it to be and that was efficient and that allowed the web to win and everything took off from there a bunch of the people from that project were lured to California where they became part of a company called Netscape Netscape made the first commercial web browser called that scape navigator and it was a huge hit it kind of disrupted everything and they were then planning what to do for navigator to they added a bunch of new features including support for electronic commerce they also want to make it easy for end-user programming they remembered something that had been on the macintosh called HyperCard hypercard was a simple application creation program based on a simple metaphor of stacks of cards and it was an event-driven script thing and it was remarkably easy to use and they wanted something like that in the web browser so they gave that job to this guy this is Brendan Eich very smart guy he'd been a kernel hacker at Silicon Graphics his idea was he would write a scheme interpreter to do this and he was told no don't don't do scheme do a language that people like I'll make it look like Java or Visual Basic something popular this is for the kids so he was given 10 days to create a prototype of this new interactive browser and in those 10 days he designed and implemented a new programming language which is an amazing achievement so from Java he took syntax in fact most of the things that are wrong with JavaScript are things that were inherited from Java there's a language called scheme which is a dialect of lisp that was developed at MIT and scheme has lambdas that's what scheme calls its functions and he took scheme functions and he put them into his language and there's a dialect of small talk called self that was developed first at Xerox PARC and then later at Sun labs self took small talk which was the first modern classical language object-oriented language and made it better both better performance and more expressive easier to to use by removing one feature from small talk it's uncommon where someone makes a new language by removing things from another language usually it's adding more stuff the thing they removed from small talk was classes by removing classes they could make it faster and they could make it much better to probe him and so he took that idea and put it into his language and that scape called it live script now while that was going on there was another language that was being developed by a guy at Sun named Jim Gosling he started with something called green talk he was then moved into a new company that was developing set-top box applications there his language became called oak that company failed so he's brought back into Sun and they try to figure out what do we do with his language now the internet was becoming popular the web become popular they wrote a web browser in this language that browser called hot Java was wildly successful at least for a short time and the language that they wrote it in had its name changed to Java and it became wildly successful so much so that Sun was making noise that that the Java language was going to be the future of software that if you design all of your programs to target the Java Virtual Machine instead of the operating system we can be liberated from Microsoft and that was a wildly successful message and you know Java shoots up like that it is the most successful launch of a new programming language in history it's amazing at Netscape they're making similar claims they're saying if you design your applications to target the web browser it doesn't matter what operating system were on and again we can be liberated from Microsoft now these two companies realized if we're both going after Microsoft we'd probably better work together because if we don't Microsoft will play us off against each other and we'll both lose so they form an alliance and the first thing they agree on is that Netscape adds Java to the web browser and in exchange for that Sun will drop their their hot Java browser which wasn't very complete anyway so check that's easy to agree to step number two Sun says you have to kill live script because that's an embarrassment we're seeing that Java is for programming language you'll ever need you can't then also be introducing another new language you're just making us look at that so kill it netscape refused to kill it for two reasons one is they wanted a language for beginners and java ain't that language you need a lot of specific knowledge about java just to write hello world they wanted something with a much lower barrier to entry but there's also a practical problem they wanted to launch the new browser right away and so the way they put java in was they had java talk to live script through an interface called live connect and so live script could talk to the browser java could talk to live script through live connect if they took live script out java wouldn't work and so in order to get java in there they'd have to delay the launching of the new browser and they didn't want to do that because they were on internet time and they couldn't afford to wait that long so their alliance was at an impasse and almost failed when one of the founders of netscape maybe as a joke suggested that they changed the name of live script to javascript and that they may position it not as a new language but as a subset of java interpreted java which was silly because java was interpreted Jama it was java stupid little brother so they went out and held a press conference in which they lied about the relationship these two languages and echoes of that lies still reverberate pretty loudly through the internet meanwhile Microsoft has noticed that there are these two companies in California that are getting ready to destroy Microsoft and they weren't ready for that yet so Microsoft had completely missed the web and the internet they thought the future of telecommunications was going to be facts in cable TV so they went out they bought a browser company it was another spin-off out of Illinois called spyglass took their thing relabeled it as Internet Explorer and decide we need to get one of these JavaScript things too so they put a team on reverse engineering the first JavaScript engine now it turns out 10 days is way too short a time to design and implement a programming language and there are lots of errors lots of bugs lots of design defects lots of blunders the Microsoft team discovers and carefully documents all of them and replicates them now usually when Microsoft goes to knock something off they can't help doing their own thing to it for example when Bill Gates told them I want a Macintosh they built Windows ok he didn't ask her Windows he asked for Macintosh that's that's how it goes there but on this case they got it exactly right and in fact they were able to keep the write once run everywhere promise that Java was failing to keep in fact had they not done that we wouldn't be talking about this language today we'll get to that later so so but they couldn't call it JavaScript because Sun had claimed ownership of the JavaScript trademark even though they had nothing to do with the development of the language because they claimed to own the word Java in fact they were shaking down coffee companies for daring to have for Java in their URLs this is true so they called it jscript just as they called their implementation of Java a plus plus because they couldn't get a license to use of trademark so now Netscape is alarmed that Microsoft is going to embrace and extend us we're going to lose control of JavaScript what are we going to do we need to make a standard so they went to w3c and said w3c we have developed a programming language for the web we'd like you to help us make it a standard now turns out w3c had been waiting for a chance to tell Netscape to go to hell so they told that scape to go to hell so nuts gate then went to ISO eventually they end up at the European computer Manufacturers Association which is a long way to go for California software company hmm but ACMA agrees yes we'll help you make a standard so they convene a committee Microsoft joins the committee Microsoft dominates a committee basically the standard is based on Microsoft's notes that they made in reverse engineering the original JavaScript interpreter and they insist that all of those bugs all those blunders all those defects remain in the standard where they still exist today so there's a lot that's intentionally wrong which will never be repaired now when they went to publish was what do we call the standard they can't call it javascript because that's a some trademark so they kick around other titles web script net script they can't agree so it's published with the working title Atma script which is maybe the worst name ever put on a programming language and confusion still exists today what's the difference between javascript jscript neckman script there are people out there who think that they are three remarkably similar but different like another three silly names for one silly language so javascript is a standardized language of the edition that is in most versions of ie is the third edition which was published in December of 1999 before that one was finished work began on a fourth edition which went on for ten years and was abandoned in 2009 a fifth edition was published which defines two languages a strict and default we'll talk more about that dialect this afternoon and then recently the six edition was published and which will eventually find its way into browsers we'll talk more about that on this on the third day so where do bad parts come from and I think there are three sources one is legacy a lot of what happens in any language is repeating mistakes that happened in previous languages and most of what is wrong in JavaScript is not unique to JavaScript it's wrong in lots of other languages - for some reason it just looks stupider in JavaScript I don't know why that is the case but it is clearly the case another is good intentions there are a number of features that were added to the language to make it easier which failed to make it easier things like whip semicolon insertion type coercion when implied global variables were all intended to make language easier for people but they actually make it much harder at least for professional programmers and then hast ten days is just way too short a time to design an implement a programming language Brendan did not intend for his proof-of-concept to be shipped as a product but Netscape did that I think that was inexcusable and he has suffered for that it was an unfortunate thing so for the most part to you know give you a comparison maybe the best designed programming language in history was Smalltalk ad Xerox PARC spent a decade designing refining testing improving that language they spent almost as many years as Netscape spent days in designing their language and I think Xerox got it right even though not the community did not agree so for most parts of bad parts can be avoided which is great the problem with the bad parts isn't that they're useless it's not they're dangerous javascript is an object-oriented witch but what it thinks an object is is different than most other object-oriented languages in JavaScript an object is simply a dynamic collection of properties every property has a key string that is unique within that object and that key string will be associated with any value you can get a property from an object by using the dot notation or the bracket notation they can be used in some cases interchangeably if the bracket contains an expression which is a string which is the same as a name then you'll get the same property that makes it possible to dynamically get at things without use of a reflection API you can set properties of an object simply by assigning to those properties you can add new properties or modify old properties simply by assignment and you can also delete properties from an object using a delete operator although I very rarely see this use generally once an object is made it keeps it stuff one design mistake in JavaScript is that the keys must be values it must be strings they it would have been better if they could have been any value but they're not so you can pass any type into the brackets javascript will turn that into a string so it means effectively the values have to be strings we have a very nice object literal notation on JavaScript object little notation was the inspiration for the json data interchange format the world's most loved data interchange format you've got curly braces that identify the object then you've got named fields or properties within the object if you don't have to put quotes around the names if the names are valid identifiers if they are not identifiers then you need to put the quotes around them so most object-oriented programming languages are classical they're all about making classes where objects are instances of classes and classes inherit from other classes javascript has a much simpler much more highly evolved design which is based on prototypes where objects inherit from objects and that's it there are no classes this was the idea that we got from self which was an improvement over small talk but it's a really controversial idea and most people who are writing in this language do not understand how this really works but we're going to talk about it so working with prototypes is actually very easy you make an object that you like using any of the techniques available for making an object you can create new instances they inherit from the object and then you can customize the new instances by assigning new properties or replacing properties the classification impacts on any operations that you have to do in an object system in a classical system aren't necessary which turns out to be a huge win so if you're working in a classical system when you start off you have to classify all the objects you have to figure out what are all the objects what are they composed of how are they related but you make a taxonomy in which you figure out what's going to inherit from what what's going to implement what it's a really complicated hierarchy and usually you're doing that work at the point on the project usually the beginning we have the least understanding of how the object systems actually going to work which means it's almost certain that you're going to get it wrong and the you see that in that things don't compose properly you just care they don't work you'll find yourself wishing you had multiple inheritance because there's no way to get from here to there and as you layer in more and more classes on top you find that that brokenness starts to seep up into all the higher layers and eventually reach the point where it's so broken that you have to refactor which means you have to tear it all apart and put it back together again which is really dangerous because there's a chance that might not ever go back together again and all of that is due to the coupling of classes and if you get rid of classes you don't have to do any of that which is really quite remarkable so the model that JavaScript provides is sometimes called delegation where an object can only do what it can do and if there if it's asked to do something that it can't do it will designate another object to do that work on its behalf this is also called differential inheritance where each object will only contain the material which distinguishes it from the object that it inherits from the primitive in JavaScript for making a new object is object create and we pass it an object which unfortunately is called a prototype and we make a new object that inherits from the old one the word prototype here is problematic because it's so overloaded all it means is this is the object that we want to inherit from so let's not examine this I'm going to make it an object called mother which will have two properties a and B whose value will be one and two and this is the data structure that is created so we've got our key value pairs and we also have invisible pointer to object dot prototype so whenever you make an object literal it will ultimately inherit from object prototype now if I make a daughter object I'll use object.create mothers so I now have a daughter so I've got an empty daughter object which inherits from mother so if I say daughter got B plus two originally there's no value here so we get the inherited value of B then we add two to it and store it in the daughter so storing operations will always go into the topmost object but reading operations can go all the way down the prototype chain and we can have these chains go as long as you want generally chains in this language tend to be very shallow we don't get the deep hierarchies that you tend to see in classical languages but if you want to go deep you can then we can add material to the daughter object which has no relation to the mother object so we can add more stuff so generally the way we will use this is the mother object will be where we put the methods and then the instances will inherit those methods okay we there's also a form object uh create null which will make an object that inherits nothing so you get an object that does not inherit from object prototype this is handy if you want to make something which is just a container of stuff and you don't want to be confused by stuff that you might inherit from object uh prototype so that this will act much more like a hash table everything in JavaScript is an object so numbers bouillon Springs raise dates regular expressions and functions they are all objects so let's look at numbers numbers are objects it's a much simpler number system and you have in Java and that we don't have ants and integers you know I have either of those who just have numbers we make numbers with number literals all of these number literals refer to the same object there's only one number type in JavaScript which is actually a very good thing and there are no integer types which is something you have to get used to but it's actually a good thing to but the problem is that one number type we have is the wrong one it's based on 64-bit binary floating-point from the I Triple E 754 standard which is strangely called double in Java and other languages anybody care to know why it's called double why they pick such a silly name it's something that comes from Fortran Fortran had integer and real and later they added double precision which was two reals put together in order to give you more precision and C took double for trans double precision and shortened it to double and everyone else has been using double ever since then so we don't have int I'm glad we don't have bins because I hate ends in to have some really strange properties for example we can have two ents which are both greater than zero we can add them together and we can get results that are smaller than the original numbers which is insane but inexcusable and how can you have any confidence in the correctness and the perfection of your system if it's built on a number type which can do such insanely ridiculous things so javascript does not have this defect in it which i think is brilliant so one problem with computer arithmetic in general is that the associative law will not hold that's because computer numbers are necessarily finite and real numbers aren't so in many cases we're only dealing with approximations and when the values are approximate then associativity doesn't hold now if you're just confined to the integer space javascript integers go up to around nine quadrillion which is pretty big and my quadrillion is bigger than the national debt so that that's big right that's big so as long as your integers are smaller than nine quadrillion they work out exactly when the integers get above nine quadrillion they don't do the crazy wraparound thing that intz do they just get fuzzy so if I take a number above nine quadrillion and add one to it it's like I added zero to it which is not good but it's much less bad than what in stew and because computer arithmetic can be approximate than their identities that were used to thinking about which don't hold so you need to be aware of that and cautious so the most reported bug for javascript is at point one plus point two it's not equal to point 3 and that's because we're trying to represent decimal fractions in binary floating-point a binary floating-point cannot accurately represent most of the decimal fractions it can only approximate them but it approximates them with infinite repeating bit patterns but we're not allowed to have infinitely long numbers and so they truncate and so they're going to be every number is going to be slightly wrong which is only a problem if you're living on a planet that uses the decimal system but on such a planet you're counting people's money using this and people when you're adding people's money they have a reasonable expectation you're going to get the right sum and we're not guaranteed to get the right sum with binary floating-point which is a huge problem numbers are objects and so numbers have methods you don't have to box them in order to get object behavior every number is already an object every number inherits from number dot prototype so if we wanted to add new methods to numbers we can do that by adding them to number dot prototype this is not something that applications should ever do but it is a useful thing for libraries to do in fact this is how we evolve the language so we can add new methods to new versions of the standard and libraries can backfill old browsers old implementations with the new stuff as long as the new methods can be implemented in JavaScript numbers are first-class objects which means that a number can be stored in a variable could be passed as a parameter to be returned from a function and it can be stored in an object and because numbers are themselves objects they can have methods javascript has made the same mistake that Java made in having a separate map object or map container for keeping the higher elementary functions this was done in Java anticipating that in the future there might be very low memory configurations and they'd want to be able to remove the math functions but that didn't happen because Moore's Law kept cranking on memory capacity so we that turned out not to have been a good strategy but it wouldn't have worked anyway because you'll be throwing away essential things like floor there's no good way to get the integer part of a number if you get rid of the floor function so it couldn't have worked they're also some constant store to the math object as well so one of the worst or one of the things that we get from the I Triple E format is something called Man which stands for not a number it's the result of confusing or erroneous operations for example if you try to divide 0 by 0 the result is Man Man is toxic which means that any arithmetic operation with Nana as an input will have man as an output and despite the fact that man stands for not a number it is a number to ask JavaScript what is the type of man it says number and it's right now the thing I hate about man is that man is not equal to anything including man so man equal man is false which bugs the hell out of me and even worse than that is that man not equal man is true which I hate even more so if you want to find out if something as Man there is a global is man function and you can pass down to it and it will return true which is good unfortunately is man also does type coercion so if you pass it a string like hello world it'll try to convert the string into a number the number that hello world turns into is man so hello world is man which is not true so ever since Fortran we've been writing statements that look like this x equals x plus 1 which is mathematical nonsense so alcohol got this right alcohol came up with an assignment operator so this didn't look so ridiculous and BCPL did the same thing as alcohol which got it right unfortunately thompson liked this better and so we reverted back to it and we have not evolved away from this since so we're stuck with this and it looks crazy right because it looks like an equation but there's no value of x which equals x plus 1 right so it's except it turns out if you're using binary floating-point there's a value called infinity and if you add 1 2 and you get infinity so this actually is an equation there's a value of x for which this is true not just that there's another value called number dot max value which is one followed by three hundred and eight digits so it's a really big number and if you add one to the biggest number that javascript knows you would think that would be infinity but it isn't it'll be max value so it holds in fact that is true for every number above nine quadrillion so there's a lot of values for which this holds but not man even though man plus one is Man Man is not equal to man so I hate that him and Nana I hate that even more Williams they're exactly two billions in this language and they are true in a false so hooray we got that right we have strings does anybody know why they're called strings anyone it change characters it turns out nobody knows the first place I've been able to find in the literature that refers to a specific data type which is a sequence of characters is the Elwell 60 report but there's nothing in that report which explains why they chose the word string the first time you encountered it you must have thought well it was strange because it doesn't look like a piece of string in any way so how that happened I asked John McCarthy who was on that committee he was the inventor of Lisp why did you call it strings he said well Khurana was doing this stuff with strings of symbols he said but that didn't really answer the question because at the time of the alcohol 60 report they would talk about string a block was a string of statements so when did it become specifically a string of characters and he was really annoyed that I was asking the question he didn't know the answer to so that was the end of that conversation and then he died and he was the last survivor of that of the lisp committee so we'll never know or the alcohol committee so anyway we got him we call them strings and and I think we call them strings because there may have been some CPU architecture which linked characters together to make string sequences of characters and you know I think that because what's the operation we do on strings its concatenate but catenate means to form links it's an operation chain making so you would think if it's strings it should be PI or maybe slice or wine or something something that strings do so we've got some mixed metaphors going on and so I'm still searching the literature trying to find out where strings came from but I haven't mountaha so anyway we got them we got strings a string is a sequence of zero or more 16-bit unicode characters it's characters in the sense of ucs-2 not utf-16 because there's no awareness of surrogate pairs at the time that JavaScript and Java were designed Unicode was going to be a 16-bit character set it later grew to a 21 bit character set and JavaScript is not aware of that there's no separate character type characters are represented as strings with the length of one strings are immutable which is good once you make a string it cannot be changed it's fixed for all time you can make new strings by concatenating together bits of old strings but you cannot change a string once it's made similar strings are equal which is great Java got that wrong javascript got that right array for JavaScript string literals going to use single quotes or double quotes with escapement both work exactly the same way no magic quotes or quasi quotes or anything like that but there's no reason to have two ways to make strings but we do so I given that I recommend use double quote for external strings strings that make sense outside your program like URLs and templates and notes to the user that kind of stuff and use single quotes for internal strings like the names of properties and character constants and stuff like that there's nothing that enforces that but I think it's a good convention we can convert a number to a string by using its two string method I prefer instead to use the global string function which does the same thing and will also work better on things that do not have two string methods we can convert a string into a number by using the global number function or by using the plus prefix operator which I prefer we also have a parse int function that I don't like parse into something that was borrowed from Java it will convert a value into a number but it stops parsing at the first non digit character and it won't tell you where it stopped or why it stopped or what was left over and you usually want to know that because that can be important but it doesn't give you any clue there is a big design error in that if the string you are parsing starts with a zero it assumes that you met that to be parsed as base-8 octal and so if you're parsing something like a date or a time which might have an eight and oh nine that will be parsed as a zero because it's you zero goes into base eight it sees the eight so as you are not an octal digit so I stop here and get the zero yeah so because of that I recommend you always include the radix argument which says base ten we're on planet Earth gamut yeah base ten zero to nine strings have a length property which tells you how many 16-bit characters are in the string surrogate pairs will be counted as two characters in that count strings are objects and so they contain a big mess of methods let you look them up offline but there are a lot of them many of them are actually very useful every string inherits from string dot prototype so we wanted to add new strings to assist new methods to strings this is the place where we could do that again this is not something applications can do but this is how we've been growing the language okay is one of the fundamental data structures it's a contiguous series of span of memory divided into equal sized slots where each slot is indexed by number very fast very efficient JavaScript doesn't have anything like that instead what JavaScript does is for the first version of JavaScript forgot to put arrays in and people figured out that when we can just use an object right we can use the bracket notation we can pass numbers and others could turn into strings and it all kind of works like an array sort of and that's still what we do so there is now an array datatype it inherits from object and the indices are converted into strings and used to retrieve in store values the good news is that is extremely efficient for sparse arrays unfortunately we don't do sparse or gray stuff we're almost exclusively doing dense array stuff and it's very inefficient for that one other advantage it provides is that there's no need to provide a length or a type when creating an array we can just say empty angle brackets that's a new array and then you can add as much stuff as you want to it you don't have to worry about out of bounds errors because it's not really an array it's a hash table so every value is in balanced a raise unlike objects have a special length property that property is always one larger than the highest integer subscript which is not necessarily the same as number of elements in the array so we can make an array with an object literal or with an array literal using the bracket notation we could have multiple expressions in there separated by commas each of those will provide a value to an element we can append to an array by assigning to its current length which is really weird-looking but it works so in this case my list at length is 3 so we'll assign to it and the length will now be turned into 3 plus 1 or arrays come with a more interesting set of methods than objects have objects have very little useful stuff coming from object prototype this stuff is all stored in array dot prototype much more useful set we'll look at a couple of these for example there's a sort method where we can take a sort an array of numbers and we can sort it so anybody see what's going on here they but it's morning on the strings so takes each number converts it into a string takes the other one converts it into a string compares them it does that in log times it's awful so fortunately how sort can take a function argument which receives pairs of values and it returns minus 1 0 or 1 based on their relative magnitudes so you can override this terrible behavior but it's stupid by default you can delete an element from an array but it doesn't do what you expect so usually you want to use the splice method to close up a hole so let me demonstrate that so here we've got an array containing four elements and I want to delete element number one that'll leave a hole in it which is identified as undefined value if you try to retrieve a value from an array and it doesn't have that element it returns the undefined value so if you want to get rid of that use a splice method you say go to element one delete one element then you'll get an array that's more like what you were expecting the way it does that is it deletes element one it retrieves element two deletes on the two we inserts it is on that one because the element three reads it deletes it reinsert Siddhas omit - it's not fast there's a look of horror in the crowd okay so because objects and arrays are made out of the same stuff in this language it turns out you can use just one of them most of the time which is a really bad idea because sometimes it matters because it sometimes matters I recommend use the right one use objects when the names are arbitrary strings use arrays when the names are sequential integers don't be confused by the term associative array in JavaScript the associative array is called the object we have a date function which was inspired by Java state class which was not y2k ready when it was introduced in 1995 I don't know if they didn't think the language was going to be around that long or if they didn't see it coming or what the deal was but we survived it okay and it's been fixed so we got that we got regular expressions which were borrowed from Perl for this is a regular expression literal that matches regular expression literals that's what I clean the thing that I hate about this convention is that if you have a regular expression that's longer than an inch or two it's really hard to have any confidence that it contains what you think it contains that it matches and rejects what you think it will match and reject and I will confess I've written regular expression literals that are several feet long and I am NOT proud of that but the language doesn't make it easy to do because they all have to be scrunched together you can't even use whitespace in them to kind of separate the element so you can see what it's doing and all smushed together it's virtually impossible for human to decipher what it is fortunately there's something on the web called regulates and you give a regular expression literal to regulates and it will give you a railroad diagram of what that regular expression does so you can see what it does and you can have a good understanding of how it will behave I will not write another regular expression without running it through regulates highly highly recommend it yeah find yourself writing a regular expression is too many inches long can't just get a smaller string and I thank you for that ahead you're sorry now you didn't have to come so you're probably wondering when do the good parts start I haven't heard any good parts yet functions functions are the good part and we'll talk about those in the next hour so in JavaScript all values are objects except null and undefined these are what are sometimes called bottom values and there's some debate as to whether a language should have any bottom values there's no debate on the question should a language have to bottom values answer is absolutely not that doesn't make any sense but we have to and they act a lot alike but they don't act exactly alike so they're not interchangeable but some people use them interchangeably which is a confusion confusion causes bugs I don't like that so I recommend using only one of them and the one I choose to use is undefined because that's the one that the language itself uses but both of them are used to represent values that are not objects these are the only values in the language that are not objects so if you try to retrieve a value from one of these you're not going to get anything if you try to execute them as functions they'll throw exceptions they're just used to indicate the absence or the end of something so I recommend using undefined undefined is I choose undefined because it is the one that the language itself uses so from only going to use one let's use the languages one so it's the default value for variables and parameters so if you create a variable that you don't initialize it it actually gets initialized for you with the undefined value and if you have a function and you don't pass enough arguments in the missing parameters will get bound to undefined it's a value of missing members of objects and arrays so you try to retrieve a property or an element and it isn't there you don't get a runtime warning don't get a compile-time warning instead you get the undefined value which is actually a very nice thing because it allows you to reflect objects without any effort you just ask you got one of those and if you get value back and you got something like you didn't but you didn't one thing to watch out for though is that you can store undefined into an object and then you can read that undefined back but you can't easily tell am I getting an undefined that was stored in the object or I'm getting an undefined because it wasn't stored in the object they both look the same that's a confusion I don't like confusion there's a type of operator in JavaScript which will return a string identifying what the type of something is for example if you pass it an object it returns a string object which is great it passes a function it returns the word function which is great if you pass it an array it returns object which is well not technically wrong because everything is an object but it's certainly not useful you'd like it to return array because that's what it is so but if you pass it null the returns object which is just wrong there's no excuse for that it doesn't make it hard to detect if something is null because there's only one null value so you can ask are you triple equal to null that's very effective the problem is you're trying to figure out are you an object because if you're not an object there are certain things I don't want to try next and this test fails for that which is really really bad so we we have array dot is array now who's added to the language in es5 well it's extremely ugly looking it does finally allow us to detect if some value is an array or not which is good and this is how it is implemented on older browsers javascript is a bluish language in that every value is true fee or fall C the fall C values are false null undefined the empty string the number zero and man all other values are true P including the string zero the string false all objects all arrays even if they're empty all of those are true P I think this was a huge mistake the purpose of this was to allow if statements to work in a way that's similar to the way C works C is not a strongly typed language and so it uses 0 to represent number 0 and false and null and a few other things end of strings I'm sure there are lots of others so you can just so the condition of an if statement in C is 0 or not 0 and JavaScript wanted to look like that it turns out to be a bad idea we'll see some examples of that tomorrow javascript is a loosely typed language in that any of these types can be stored in any variable or passed as a parameter to any function the language is not untyped because as we've seen we've got a lot of very specific types but it's loosely typed and I contend that this is a good part and although that statement is very controversial the prevailing style in the world is calling for strong typing there are really good arguments for strong typing the argument is that strong typing allows the compiler to find errors very early in earlier we can find errors the more valuable that is and that is true and so when I first start working with JavaScript I was very very nervous because this is a loosely typed language any kind of type can be passed in as any parameter or be stored in any property how can you have any confidence that anything's ever going to work because every got to be prepared for anything at any time was crazy but what I found in working with the language was that to my surprise my testing burden did not go up I thought I was going to have to be watching for all of these things putting in explicit type checks of my own and I very rarely ever had to do that and in fact what I found was that these sorts of dogs that a type checker can find you find instantly anyway if you're doing even the most trivial level of testing those things show up right away type systems provide no help in finding the bugs that keep you up at night and that you end up doing a lot less work because you you know strongly typed language you end up spending a lot of time working against the type system there are things you need to do in order to get your job done in the type system doesn't want you doing those things and so you have to figure out ways to get around it and that's a lot of effort and anytime you cast then that means the type system is failing you and end up casting way too much also it turns out there is a large class of errors which are caused by the type system because the type system is causing you to circumvent it you end up doing a lot of extra work and some of that work turns into bugs and in JavaScript that tends not to happen so I find in JavaScript writing correct programs is not higher than in Java I think it's actually easier and you do a lot less work because you're not managing all the types all the time that's my argument you might not believe me it doesn't matter if you're writing in JavaScript get used to it because that's how it works so until the script objects are are passed by reference not by value which means that objects are not copied in fact there's no way no easy way in JavaScript to make a copy of an object which seems like a surprising omission but in practice I've not found it to be a problem the triple equal operator compares object references so it'll give you true only if both operands are the same object there's no easy test for our two objects very similar now containing the same properties having the same values that again seems like a strange omission but I've not found that to get problem javascript is syntactically a number of the C family we've got identifiers which can start with letters wearing two bars or dollar signs I recommend not starting or ending your property names with hundred bars or dollar signs but on they seem to be really popular dollar son was added to the language for the benefit of machines for macro processors and code generators things that wanted to be able to create names be guaranteed they wouldn't conflict with your names if they could use a dollar sign and that made them safe unfortunately some kids found out that you could have a function called dollar and went crazy with it so dollar functions are all over the place now we have both formats for doing comments I recommend using just view slash slash line format because sometimes we want to use comments for commenting out code and regular expression literals can contain star slash and slash star so weirdness can happen if you're using block comments we have the same set of operators that you would expect to see in AC like language a few of them work a little bit differently need to be aware of one big mistake in the language is that the plus operator does both addition and concatenation this is a bad habit JavaScript learn from genre in Java it's not so bad because it strongly typed so you can predict which one it's going to do JavaScript is loosely typed so it's not until you go to do the plus then it looks at the operands and if they're both numbers it will add them otherwise it will convert them both into strings and concatenate them which is that for example in a web application you might have a form field you ask the user to type a number into the field you then want to take that number out and add it to something forgetting that the value you take out a form element is always a string even though everything around it says it's a number that's a really big source of confusion and you don't get an error you just get extremely bad behavior so we can convert we can use the plus unary operator to convert strings into numbers and so you often want to do that as a defensive thing if you've got a value and you you want to add it and you're concerned that it might not be a number you can coerce it to be a number before you do the addition but if you do that I recommend putting parens around it because otherwise you end up with two pluses next to each other which can look like another problem we don't have integers formally so you can divide two integers using the divide operator but you're not guaranteed to get an integer results so you need to be prepared for that and because it's binary floating-point even the floating-point result you get might not be the one you would expect the % operator is the remainder operator not the modulo operator which is a shame because I think modulo is the more useful one the difference is in which sign it uses we already talked about double equal and the problems with it I recommend you always use triple equal instead just because there's so many weirdnesses in it things that aren't expected there's a meme on YouTube called whack w80 is anybody seen wet yeah it's a crack up right and mostly it's plain fun with this you know they take two things which are wildly different in double equal and says true and they go lap and they get a big laugh so don't use double equal we the logical and operator works a little differently than it does in Java because the operands do not need to be Williams they only need to be bullish so if the first operand is true the--the result is the value of the second operand otherwise it's a result of the first operand it does to the short-circuiting though so the second operand will only be evaluated if the first one was false e and logical or works in a similar way the exclamation point is the logical not operator if the operand is truthy then the result is false otherwise result is true if you have bang-bang twice it'll turn a bullish value into a boolean we have bitwise operators but we don't have ins so the way that works is we'll take the 64 bit binary floating-point turn it into a 32-bit signed integer do the nasty to it and then convert it back so in some languages you'll see people doing a shift because they think it's going to be faster than a multiply you shouldn't do that even in those languages because compilers are spot enough you should write the thing that you intend so that someone reading the program will know what's supposed to be happening the compiler will sort out the fastest way to do it but in this language definitely not getting speed improvement by doing the wrong one we have the same set of statements that you would expect to see in a C language again with some differences we've got labeled break which is good so if you got nested loops and switches and stuff you can break out of innermost things which is good we've got the for statement which we can use to iterate through arrays but I don't recommend using that and yes for es5 we got before each method the map method where you can have a function called on each element of the array that eliminates almost all need for the for loops so I don't use for loops anymore we have a four in statement which iterates through all the names of all the properties of an object unfortunately it also iterates through all the inherited properties which is usually your methods and so your methods get mixed up with your data and kids to be a mess unfortunately we got NES five we got object at keys which takes an object and returns an array of strings which is just the enumerable own properties of the object which are usually the ones you want so I don't recommend using 4 in either we already talked about the problems with a switch statement we one thing about the switch statement though when JavaScript improved the switch statement in one way and that is that the switch value does not need to be a number it can be a string which can be very nice because you can switch on on greater set of values and the case values can be expressions they don't have to be constants so that can be useful in doing internationalized applications that you can case against a function which will return the yes value for this language it could be a nice thing we have exception handling this language which is nice before es 3 we didn't which meant that you had to write programs that never went wrong ever because there is no way to recover from anything those hard so we've got exceptions now you can throw literally any value there's a convention that you throw something that comes from a new constructor which is the same as creating an object that has a name property and a message property but in fact you can throw literally anything so the way that exceptions are used is very different than in Java and so exception handling is very simple because we don't have exception types there's only one catch block and it catches everything and generally it's going to ignore whatever it caught it doesn't care what happened at all it knows is or all it cares about is that didn't work so let's try something else maybe it'll work instead so in Java you tend to see exceptions used to implement a form of computed go to where you can get very complicated control paths that are dictated by whoever through the exception and I think that was probably a big mistake javascript didn't make that particular mistake so we tend to use exceptions properly use them only for failures we've never do normal control pounds using exceptions yeah I've seen the pain of so in total there's a tendency to look out why did this fail right oh you've different reason different cash check stick today should be a fiction yeah exactly it's got a whole bunch of exception cases and yeah so you've got who threw the exceptions deciding how you're going to go through your code and that usually means that you the exceptions are not actually exceptional they're just alternate control pads right and sometimes it's motivated by weakness in the type system that you've got something that wants to return an INT but something else is going to happen which is not exceptional it's just not an INT and amount of values and so you'll throw an exception instead whereas in JavaScript because we're loosely typed you can pass a number or you can pass on finder you can pass a string you can pass an object you can return anything that you need to and so these things are not exceptions they're just more modes of normal processing so your control flows tend to get much simpler any other questions okay so that's the end of this hour so let's take a break and we'll come back they have a quick question for Chet um people are asking why you don't use for loops and then stead favor for each yeah for each app for each is just much nicer that once you get used to it it's more readable in future versions of the language it's going to be paralyzing it's a more modern construct it's more functional it's more composable it's better better in every aspect what about the fact that you can't leave before each with return I'm sorry the fact that you can't leave a for each like stop before each loop again you can start using for each use every and then you can add something return false and then it stops so at three functioning the ultimate you've been wondering when are we going to get to the good parts right because everything has been pretty horrible up until now right hasn't this been kind of tragic so we're going to get to some good parts and the good parts in JavaScript all wrap around the function functions are really powerful bits of stuff in other languages you'll have methods classes constructors modules and JavaScript all you need is functions functions are so powerful they can do the work of all of those things in more just survey Universal stuff for building things we make functions using the function expression or function literal it would return a new function object which could then be invoked a function expression starts with the word function it can then take an optional name which allows you to call the function recursively it also allows for documenting things like the code and stack traces keep passing parameters which are a set of names separated by commas wrapped in parens and it takes a body which is a block wrapped in curly braces a function expression produces an instance of a function object and every time that expression gets evaluated you'll get a new function object function objects are first-class which means they can be passed as arguments to functions they can be returned from functions they may be assigned to variables and it may be stored in objects and arrays this is very different thing in languages where functions are sort of these static things which just kind of exist before the program starts in JavaScript the functions run and add things to the environment as they're compiled and because functions are objects they inherit from function dot prototype we use the VAR statement to declare and initialize variables within functions you don't specify a type in the VAR statement it can accept any type and variables declared anywhere within a function are visible everywhere within the function so we don't have block scope with a VAR statement we only have function scope so the VAR statement is does a really weird thing it gets split into two parts the declaration part gets hoisted to the top of the function where the variable gets initialized with undefined and the initialization part turns into an ordinary assignment statement so here we've got var my var equals zero my var var y bar equals undefined gets hoisted to the top of the function and at the site of the original statement we get an ordinary assignment statement which does the initialization to make things more complicated javascript has a function statement or function declaration which unfortunately looks exactly like the function expression it starts with the word function in this case the name is mandatory you can't leave it out it takes the same parameters and takes the same body so it looks exactly like the other one the function statement is a shorthand for a var statement with a functioning value so function foo expands into var foo equals function foo and that further expands because of hoisting into var few equals undefined and foo equals function foo both of these now get posted to the top of the function it's because of this second hoisting that the language does not allow you to declare a function inside of an F because it the assignment of the function variable is going to be pulled out of the F and moved to the top so that's illegal now it turns out most of the JavaScript engines allow you to do it anyway but because the standard says you can't they all have different opinions on what it actually means I don't recommend doing that so it's really confusing having both function expressions and function statements which both look exactly the same so how do you tell them apart and it depends on where you are if the first token of the statement is function then it is a function statement if the word function occurs anyplace else it's a function declaration so we talked this morning about scope block scope versus function scope and block scope is a very common thing function scope is a very unusual thing which is unique to Java scripts var statement so an function scope is sufficient but function scope looks like block scope or at least the syntax is the same as block scope languages and so you get confusion so in some languages that have block scope you can do stupid things like this we can have two loops both using the same variable name as the induction variable and it works because in those languages each of these will be in a different scope and so they won't interfere with each other it's extremely unwise but legal in JavaScript it is also legal but it's worse than unwise because there's only one high variable created here both loops will be using the same I variable and so they will interfere with each other really badly and this loop will never correctly perform that's because everything in twisted to the topic it's because both var I declarations get hoisted to the top and there is no check to see if a variable has already been declared so if there's a second var declaration for the same name good that's double good it should be an error but it's not because it's not an error you can get into trouble so because of all of this weirdness I recommend declare all of your variables at the top of the function because that's where they're actually being declared and also declare all of your functions before you call them all of this hoisting nonsense was created specifically so that you don't have to do that that you can call a function before it's declared but that requires that all this hoisting weirdness be going on and that you understand what the hoisting is doing and I think that's too much to expect of the people reading your program so instead I think it's much better to say declare the function before you call it that's a that's a much easier thing to understand right Oh amazing the word call where I think you I would call it defining in JavaScript you can lexically call a function to create a clinic I can say oh basically I should say foo Karen and then below that I can say function foo you don't mean say var sum function name and then later on to find the function IRC sermon KC statement there's not this parallel between these two statements but I'm looking for function statements are functions are variables now functions are evaluated selectively stored in variables okay if they mean even anonymous functions can be stored in variables javascript functions have return statements return statement stops the execution of the function returns control to the caller and can also optionally return a value return statement containing can take an expression and will evaluate that expression return its value or you can have a return statement that returns nothing it will actually return the value undefined or if the function falls through the bottom it will return the undefined value I recommend that you not make function objects in a loop it can be wasteful because every new function a new function object is created on every iteration so that could be expensive and it can also be confusing because the new function closes over the loops variables not over their current values and that confusion can lead to bugs for example here we've got a for loop which is going to loop over an array of divs and it's going to add a click handler to each one which when clicked on will alert the ID of the div and this code looks very straightforward but it will fail and the way it fails is no matter which give you click on they will all display the same ID it'll be the last one it's because what's being captured by the inner function is the current value of div ID not the value of div ID at the time that the function was created so the way to get around that is to not use a for loop at all use for each and we'll pass in a function which will receive each div as an argument and we'll alert correctly we invoke functions with the parens suffix operator which will surround zero or more comma separated arguments and each of those arguments will be bound to one of the parameters of the function if a function is called with too many arguments the extra arguments are ignored it is not an error if an argument is called with too few arguments the missing values will be the undefined value if there is no explicit type checking on the arguments on their types or on their numbers so if you really care about that stuff you need to check it yourself generally you don't have to it turns out most of the defaults in JavaScript are right so that if you don't do checking it'll usually do the right thing anyway so in addition to any parameters that are formally defined as part of a function there are also two bonus pseudo parameters that you can also get access to arguments and this I don't recommend using either of them but they're both very popular in the language so I need to describe them both we'll start with arguments when a function is invoked in addition to its parameters it also gets a special parameter called arguments and it contains all of the arguments from the invocation so everything that got passed in the parents are called the function every one of those values will be in the arguments array now one problem with the arguments array is it is not really an array even in the weird way that JavaScript thinks of arrays it is an array like object and that it's an object that has a length property but it's not a magical length property and it doesn't inherit any of the useful array methods so it's a difficult thing to work with you do get arguments that length which will be the number of arguments that were actually passed and there's a weird interaction with the parameters so if you change arguments sub-zero the first parameter also changes if you change for the second parameter of an argument sub one changes for the people who make JavaScript engines this is maybe the most hated feature of the language because they're working really hard to try to make it go fast and you can't go fast when you have to mess with behavior like that so let me show you an example of how you could use it so we've got a simple thumb sum function which will receive some variable number of numbers and it will add the BOP and return the total so we're going to get from arguments dot length and the number of things that we're going to add we're going to loop through N and we're going to get each of those arguments and add it to notice I didn't include any parameters in some because I didn't need to I could have but it wasn't necessary because I'm getting all the material from arguments okay so now this this is a really difficult thing to have in any language because it makes the language hard to talk about it's like pair programming with Abbot and Costello okay so bear with me so this parameter contains a reference to the object of invocation this allows a method to know what objective is concerned with this allows a single function object to service many objects so it's the key to prototypal inheritance there are four ways to call a function in JavaScript the function form method form constructor form and apply form for forms I think in a well-designed language there should be one form but we've got four and the way they vary is in what happens to this so let's start with a method form the method form we say some object dot method name or some object bracket an expression that evaluates to a method name when we call a function this way then this will get bound to this object it allows the method that gets called to know which object it's going to be manipulating in most languages the binding of this happens fairly late but no nobody does it as late as JavaScript JavaScript doesn't bind to this until the moment of invocation then there's the function form which looks the same except we don't have a an object prefix so we just have some function value and we call that in this case this gets bound to the global object it's the thing that is the container evolved with global variables and that's a terrible thing because it's it's leaking way too much capability it's a security hazard its reliability hazard this was sort of fixed in es5 strict mode but not completely NES five strength mode this gets bound to undefined so at least we're not binding it to something dangerous but sometimes it's not what you want either that if you have an inner function inside of a method you want the inner function to help the method do its work but the inner function doesn't get to see this because the inner function gets called as a function and so it's this will be either the global object or undefined so the workaround is in the outer function in the method you create a variable called that assign this to it and then the inner function gets to see that then there's a constructor form it looks like the function form except there's a new prefix and what a function is called with the new prefix a new object is created and will be bound to this and if the constructor function does not have an explicit return value then this will be the return value and this is used in the pseudo classical style which we'll get to in a few minutes then finally there is the apply form in the apply form you call the apply method of the function object and you get to specify what the value of this is going to be in addition you can also provide either an array of arguments or you can provide individual arguments separated by commas so to summarize there are four invocation forms function method constructor and apply and they each vary according to what they do with this again I don't recommend using this at all but that's how most people use the language and I'll show you an alternative in a few minutes so you all know about recursion that's when you have a function that is defined in terms of itself or that can call itself really important thing I don't need to tell you about quicksort that's one of the important examples of using recursion javascript has recursion which is good if you're not familiar with recursive functions I highly highly recommend a book called the little whisper which is been revised it's now called the little schemer it's based on the scheme language but it's not really about scheme it's about recursive functions and everything in that book can be written in JavaScript this webpage will give you the key to doing that translation highly highly recommended this is one of those books that can significantly change the way you think in a really good way there's another book called the principles of programming languages by RC tenet and one of his principles is the principle of Correspondence in which he talks about how variables are like parameters in some languages so here we have two versions of the factorial function and one of them result is a variable and the other result is a parameter otherwise these two functions do exactly the same thing and so this demonstrates the the similarity of variables and parameters based on how the function is constructed the interesting thing about the second function is it's using an immediately in vocal function expression so here we have a function declaration or function expression which is creating a new function object which we then call immediately passing in the one so in general we can take any expression and wrap it in a function that will return that expression and call the function immediately and it does the same thing as expression it's just more verbose but it does the same thing now it turns out this is not true in JavaScript for all values for example this and arguments change their meaning when you put them in a different function so it doesn't work for them but it works for all other expressions it doesn't it works for for statements you can take any bunch of statements and put them in a function and call it immediately and it's as though you would executed those statements except that var function break continual return change their meaning when you put them in another function otherwise you can do this transformation and there are some interesting things that can happen as a result of being being able to do this so this is a feature that you look for in the functional language I promised you some good parts we're finally getting to a good part this is something that you probably don't have experience with it's something called closure it's also called lexical scoping or static scoping it's a consequence of functions that can nest and functions that our first class values and JavaScript has it and is almost completely right in the way it implements them it's maybe the best feature ever put into a programming language the context of an inner function includes the scope of the outer function and the inner function enjoys that context even after the outer function has returned that expects that statement made no sense to you at all and I understand that so I'm going to have to explain this in steps so we'll start with the observation that function scope works like block scope so you're familiar with the idea of block scope so next year we'll probably have let statements in most of our systems and here we've got two blocks one inside of the other and the inner block can see its variables and the variables of the outer block the outer block can only see its own variables so assume everybody is comfortable with the idea of block scope right we've had that since 1960 and it's great so we can do the same thing with functions you can think of a function as simply being a block with a little bit of extra mechanism attached to it so that you can invoke it in the future you don't have to do it immediately and the same relationships apply so we've got the yellow function which can see a and B and the green function that can only see a write exactly the same relationship and we can represent this relationship as sets so this is the set of variables that the outer function can see and this is the set of variables that the inner function can see you know nothing surprising here except that we can describe this relationship in that the set of variables of the inner function encloses the set of the outer function and that's why we call this closure and it's kind of too bad that we call it closure because most people think of closures meaning something else like retribution or vengeance you know have been victimized but I'm giving me some closure it's going to feel good it's not that kind of closure but that's what we're calling it so we're kind of stuck with that and it seems like a simple idea right just have nested functions which have what should be an obvious relationship because of the way that scoped works but it took a long long time for this idea to get developed so you needed a language that had three things he needed lexical scoping he needed nested functions and functions as first-class values and pretty early on we got functions that would have two out of three but we didn't get a function that had all three until scheme scheme was an experiment at MIT and attempt to understand call Hewitt's after model in the early 70s they didn't act the experiment failed and that they never did understand what Karl was talking about but they did discover this new way of programming which I think was the most important breakthrough in the history of computing and like all the really important significant breakthroughs the world took no notice of it whatsoever in fact it took two generations before we finally figure it out but this was a good idea and brought it to the mainstream but it was always a good idea and the reason it took so long was because of this problem so we've got the same thing we had before where we've got an inner function and an outer function but this time the inner function survives the execution of the outer function because the outer function is returning the inner function so we will call the green function it'll allocate a on the stack it will return a new function and exit now we want to call the yellow function that it returned but the yellow function wants access to a but a is no longer on the stack boom it took us 20 years 40 years to figure out what to do about this turns out the solution is trivial don't use a stock allocate all of the activation records on the heap get a good garbage collector done really really easy but it took a long time to figure this out ether fusion yeah don't allocate the activation records on the stack allocate them on the heap get a good garbage collector done so that's it that is that is the whole whole thing so so anyway this idea is discovered in skiing takes a long time for it to finally get to the mainstream anybody happen to know what was the first language to bring this idea to the mainstream was anybody this javascript javascript was the first language to do this it's followed quickly by Python and Ruby c-sharp got it eventually c++ got it PHP does it in a really half-assed way but they got it just last year Java finally got it took Java is having a tough time keeping up with it stupid little brother but it finally got this this idea took so long to get to the mainstream that there was an opinion that well it's not getting to the mainstream because it's not a good idea the proof that it's not a good idea is that it hasn't been adopted but we're now adopting it and we're adopting it because it turns out it's the solution to a lot of the problems that we're having now dealing with distributed systems and asynchronicity and the things that we do now much easier if you get functions working for you and this particular pattern where we have a function that survives another function a function that returns a function is an incredibly powerful important construction it's amazingly useful amazingly powerful and we got it and we got it first proof JavaScript which is amazing demonstrate how this works because I can talk all day about a function that returns a function but if we don't actually mess with it it won't make any sense so let me start with a very simple example we're going to make a function called digit name digit name we'll take a string or take a number and return a string based on what that number is it will do that by returning an element from an array of strings so you can see this is very trivial and unfortunately there's a problem with the way I wrote this and that is I'm using a global variable called means the problem with that is if there's anything else in my system that also has a global variable called names we're going to get a conflict and either my function will fail or there is or fail or maybe we both fail and that's bad and there is no way you can test for that because you can't anticipate all of the code but your code is ever going to have to run with and this is especially a problem in browsers if you have to run with abs because ads come with some of the worst code you've ever seen because they'll pay you to take their crap right and you can threaten them and say we're not going to take your ads unless you clean it up and they say ok we'll give our money just someone else and you said I'm just kidding how it works and they use lots of global variables and eventually you're going to get the call your stuff stopped working because of some add but it's not the ads fault it's your fault so we need to reduce our dependence on global variables so here is another way that I could write this function you have got the digit name function and it has a private variable called names because all variables are private within the function scope so if there is a global variable called names no conflict so that's all really good the bad part is that every time I call digit name I'm going to have to construct a new array put ten things in it just so I can take one thing out of it that's hugely inexpensive hugely expensive now an optimizing compiler might observe that name's as invariant over indications and so might try to optimize that out but optimizing compilers can take many minutes to do their work and on the web we can't take many minutes we have to start instantly so the compilers are always going to be really fast get going quick compilers so they're not going to do this so we need to do it so here's a third way to write this function now I've got digit name I've got a function with the private variable containing the names but this time I'm returning a function and the function I return is going to use the names and I'm calling the outer function immediately which means that what I'm going to be storing in digit name is not the outer function but the returning value of the outer function which happens to be the inner function and that inner function because of closure will continue to have access to the names variable even after the green function has returned this is the most important idea we're going to talk about over these three days so I want to see everybody including you at home nodding like yeah okay I got that okay you didn't get it so let's do it again so let's start over this is the original one okay we've got the global variable we've got our simple digit name function now you're never the thing we just talked about with tenant print is correspondence principle that we can take any value wrap it in a function that will return that value call that function immediately if it's the same thing so I can do that in this case I've got I'm going to assign two digit name result of a function which will return a function got a call immediately so you can see that this and this do exactly the same thing this one is just a little bit more code okay so everybody comfortable with that you show the suit yeah so we've got we're going to assign a value to the variable we're going to assign the result of calling a function that will return that value and calling the function immediately so in this in this example is the main benefit of using this that we're preventing polluting the global stack or what what other than hold up don't forget see we haven't done that yet so these two are doing exactly the same thing so let's go healthy global variable we have we haven't fixed anything yet okay getting set up now you're familiar with the idea that we can have local variables we declare a variable within a function it's local to the function and we've got global variables which all the functions can see but we can have you know so that's two worlds right you can think of it is like the instance world in this static world it's not exactly like that it's kind of like that we got two levels of visibility but we can go much finer because every time we nest a function we get a new place where we can keep stuff being another place where you can get variables and each function will determine the visibility and a lifetime of the variables that are defined inside of it and so it's not just local and global we can now have in between scopes and and they're just scopes so I'm going to make one change to this one I'm going to take this global variable and I'm going to just move it down one line to be inside of the outer function okay so we've introduced a third place where we can keep stuff which is now in the scope of the outer function this is the same result that we had before okay so we've got digit name which will receive a value which is a function which is obtained from a function that we call immediately and that inner function will continue to have access to the names variable of the outer function so this is closure this is the big idea the key idea in functional programming and this is the good stuff this is the good part we're going to spend a lot of time tomorrow playing with this model any questions before we go onto the next one yeah so you solve the global variable problem by moving it in there but you said the solution to this was that basically movie invocation remove everything onto a heat right so now in the heat are you going to have three instances of the names array if you call alert digit name three then four then five Oh No so that's a really good question so you familiar with the idea of an activation record in a programming language so mapped evasion record will contain the return address contain all the input parameters and might also contain local arguments and local variables and stuff like that so in JavaScript or in a functional language like this the activation or a function function object will contain a pointer to the code so it knows what to execute when the function is invoked and the function object will contain a reference to the activation of the function that created it so in this case this function this or the object that's created by that function expression will be linked to the context of the green function that called that created it so through that activation connection it will have access to the names variable not to the value of the names variable that it was created with but the actual names variable itself it will always have access to that and will continue to have it as long as it survives if at some point I said digit name to undefined at that point all of that stuff can get garbage collected but until then as long as the inner function survives and needs that activation it will keep it and the garbage collector will not touch it so when we call digit main we'll be calling this function which will simply go to the array and return about you so we can call it with one two three and we're just calling it and returning three values we're not creating any stuff because we're just calling that little function so let me show you a slightly more complex example this is the fade function the fade function is something we might run in a browser which will we'll pass in the ID of a Dom element and it will change the colors of that element from yellow to white gradually over a couple seconds and so here's the fade function first thing it will do is it will use document get element by ID to look up the ID and obtain a Dom element and it will create a variable called level and it will set it to 1 it will create a function called step and it will then call set timeout which will call step in 100 milliseconds and then it returns so at this point the fade function has finished its returned it's done suddenly 100 milliseconds later the step function runs so the step function will go to its level variable but the actual level variable of the parent function and turn it into a hex character it will go to the Dom element and change its background color it will go to the level variable again if it's less than 15 which will be because it was 1 we will add 1 to it we're not changing the value of the variable in the outer function and we'll call set timeout to do this again and we'll keep doing it until eventually level gets up to 15 and then we stop and at that point the garbage collector can come in and take it all out so you bet you call Spade you would just say fade 75 you don't have to say VAR x equals fade 75 you just paid 75 all right well we probably give it a name if boogie garbage-collected we don't give it a name no I mean I mean that the arguments to say we'll probably because we're talking to a Dom I'm sorry you stand or tippy the string Soviet rocket booster yeah but yeah so we could do that so suppose there are two Dom elements and we want to fade them both simultaneously so we call theta if a B immediately will there be any conflict between them answer is no because every time we call fade we get a new Dom variable we get a new level variable and a new step function and they will not interfere with each other they're all within their own function scopes and will be completely unique so one of the nice things about this construction is that we get that separation so that we can have lots of complex behavior going on without those behaviors interfering with each other each time you call fading step timeout pass is a new instance of the step function to DOM they're correct and so the Dom doesn't garbage collect the step those step functions until after it's invoked the timeout after it's called that function well the the dog is only involved in that resulting or rural campus style of change the counter otherwise the Dom is not aware that any material except I now is our it's a bullet cut up is doesn't actually belong to JavaScript it does belong to the browser the browser also has it yeah so the each time we call fade we will make a new step function and we'll pass that step function many times to set timeout until we finish I was just trying to get my head around why step doesn't get garbage collected it's because the browser but Gazzara is holding it at its timer queue okay intelligent and as long as anything in the system is aware of something it's rooted in the garbage collector dwarf time okay thanks yes the initial value of H slinging declarative first time actually was great one and then what is she saying sixteen sixteen fifteen sixteen means to make a hex character so this will give us from 1 to F and then then we add them to here so the final color will be pure white so it'll be F F F F F let's get into object-oriented programming what do you say so when Brendan Eich designed JavaScript he was very strongly influenced by a paper that he read about the self project and the self project was into prototypes not into classes and he thought wow that's pretty neat so he decided to put that in his language but he didn't fully understand it or have confidence in it so he came up with something kind of intended to be more classical thinking that the classical guys would like it better so this is the original intended model for how you were supposed to use javascript so we're going to make a gizmo that's our gizmo constructor function we'll pass in an ID and we'll create a property of the object with and that is named ID which will get that value and we want our gizmos to inherit a two-string method so the way you do that is you say gizmo dot prototype dot 2 string equals function and that function implements the to string method and the Java programmers looked at this and said what the hell is that this is this is awful looking that you know what's going to stop prototype crap why are you leaking your stuff and nothing's contained in anything right it you want to have your class have some integrity like it's wrapped in something and this has it's got spilled all over the place this is just really awful but this is how Brendan thought the language was going to work so let me diagram this for you so you can see what's actually going on so this is that code put up on the screen of new gizmo is how we make the instance so this is the instance of the gizmo we see the ID property that the constructor put in it this is the gizmo function because of this language functions are objects so they can also have properties every function is born with a prototype property just in case it's going to be used as a method or as a constructor and the gizmo dot prototype is this object this is gizmo dot prototype and it contains these fields this is the two string method that we assigned there and the system also has the object function that's the constructor of all objects and we've already talked about object dot prototype that's the thing that all object literals inherit from so we can add a constructor link here the constructor property contains a reference to the constructor so gizmo dot prototype dot constructor is gizmo and similarly object dot prototype dot constructor is object you can go around that loop as many times as you want and but the important thing is the delegation link the inheritance link so our instance inherits from gizmo dot prototype and gizmo dot prototype and here it's an object uh prototype so if I ask my instance for an ID ID we find it here we return the string if I ask my instance for its two string method those I don't have one he's got one so we returned this function as though it were part of this object and if we ask for its foo property he doesn't have one he doesn't have one he doesn't have one it's undefined okay so that's how Brendan thought you're going to use this language and there are some good ideas in here but it's kind of a mess but you know you got some idea about what javascript is actually doing now so of the new prefix if it had been implemented as a method instead of as an operator this is what it would do it would create a new object which inherits from the functions dot prototype property and will then call the method passing in that object binding it to this and getting a result and that result is probably what's going to get returned and again this is kind of a mess so but we haven't inherited much yet so let's we examine this thinking about inheritance so if we replace the original prototype object we can then inherit another object stock so that made no sense so let's look at an example try to figure this out so we're going to make a who's it who's it is something that will inherit from gizmo okay so we've got our who's a constructor like before and we're going to replace whose it dot prototype with an instance of gizmo and then we'll add an additional method we're going out a test method to our new prototype and what Java guys looked at this and said what the hell is that I mean we thought the other one was dad but holy cow that's how you write extends are you serious this is just this is horrible it is absolutely horrible so let's let's diagram it it's ok what's actually going on here so here's our instance of who's it this is the gizmo function that we had before and gizmo dot prototype here's our whozit function and who's at that prototype but we replace who's a dot prototype with this new instance of gizmo so when we add the delegation links we've got that inheriting from that which inherits from that and that will inherit from object prototype that I left that one out so if we ask our new instance for its ID we get there if we ask for its test method no there is we turn that method if we ask for its to string method go no no there it is we'll return that one if we ask for its constructor property we'll go no no yes accept it to gizmo oops um so which i think is not that bad because you should never ask anything what it inherits from you should only be asking what can you do and we should judge our objects playing the character of the contents so um you know again it's it's that that's how it works and one source of confusion is that sometimes we consider this to be the prototype link but this one is also called prototype so having two pointers which are designated as the prototype pointer which are completely different indistinct is certainly a source of confusion as well but this is how most of the people who are writing the java script are using the language they are doing this and they are miserable they're hitting their lives and they're hating JavaScript and they're angry and bitter and wishing that their favorite language was doing better because you know why have they come to this writing classes in JavaScript it's just awful so um yeah so putting them together it's just it's there's awful stuff here like you know there's just the horrendous ugliness and the lack of soothing syntax we're not getting enough code reuse for example both constructors create an ID property but they both have to repeat that that that's not code reuse so there are lots and lots of JavaScript libraries in the world and most of them recognize that there's something seriously lacking here and so they'll provide some mechanism for sugarcoating this pseudo-classical system in order to make it a little bit nicer for example they might do something like create a function called new constructor and I'll it will make constructor functions and I will pass into it the thing that I want to inherit from so I want to extend object I want to extend gizmo and I'll pass in a constructor function and I'll pass in an object containing the methods that I want the instances to inherit so you know it doesn't look like Java but at least you can recognize the components right and so there's something nicer about this and the surprising thing about this function is that that's the entire function so javascript is such an amazingly expressive language such a powerful language that one little piece of code can radically transform the appearance of the language which is pretty extraordinary like the not a lot of languages can do that do I recommend this approach no I don't even though this is clearly better than using the language as intended you're still stuck in this classical paradigm except you're trying to do classical programming in a language without a type system and that is really really hard that classes provide a lot of brittleness and without the constant type checking to keep you honest it's really easy for things to go bad and in JavaScript things go bad very quickly all the time that's why people who are trying to write in this model in JavaScript are so angry at the language they're constantly in a sentence of rage I think we can do better than that and I think the way we do better is by going back to the module pattern that we can take any bunch of stuff and put it inside of a function and invoke it immediately and it does the same thing except that in this space we're not creating global variables this stuff is not leaking out in creation where it's a danger and a hazard so we can make stuff using this pattern for example I want to make a singleton I want to make one instance of an object containing two methods first method and second method and I want those two methods to share private variables and private functions in JavaScript there is no easy way to get privacy except when you're doing this stuff with with module or function modules because each function has a function scope which is a really effective container for keeping stuff that nothing leaks out of function scope ever there's no force in the universe that can force a function to leak what is held in its scope and we can take advantage of that and it's a very nice pattern so what I'm going to store in singleton is not this outer function because I'm going to invoke that function immediately what I'm going to store will be its return value which is this object containing two methods and those two methods will close over the private state and those two methods will share that private State if one changes one of those private variables the other next time he looks at that variable he will see the change now before we figured out how to do this stuff with functions in JavaScript the private variable and probably function would it gain global variables and there's no privacy there and one nice thing about this you know compared to a classical language in a classical language if you want to make a single thing you still have to make a class which is a lot of work just to make one thing whereas in JavaScript none of these are very much work and there are lots of variations on this pattern for example I might have instead of returning an object I want to have a global variable which is going to be the container of everything in my application it's going to be this one object which is the root of everything and I want to enhance it I want to add a methodical property to our global object that has these two methods in it which share this private state and we can do that easily so we don't have to make a class just make one of and again there are lots and lots of variations on this pattern it's a very rich pattern and again this works B works because we're invoking the function immediately but if we don't invoke the function immediately then we can hold on to that function and make lots of instances so let's do that this Marvel pattern is easily transformed into a powerful constructor pattern so here's the recipe step one we're going to make an object using all of the techniques any of the techniques available for making objects we can use an object literal we can use new we can use object.create we can call another of these power constructors any way we can get an object we get an object step two we will define some variables and functions these will become the private members of our object step three we will augment the object with privileged methods a privileged method is a publicly available method of an object which closes over the private stuff and step four we return the object so it's a pretty simple recipe it's way too abstract to make sense out of it right so we need to go a little deeper so let's turn it into a template so step one I'm going to make a constructor function and I'm spelling constructor now with a lowercase C instead of an uppercase C because this form of of constructor does not care about the new prefix if you call this function with a new prefix it will run a little bit slower but it will still do exactly the right thing so this way we don't have to worry about people forgetting the new prefix because nothing can go wrong and I'm going to recommend passing at a specification object the way you normally write constructors is you'll just pass in some number of things Ephrata by commas some years ago I I designed a constructor that had ten arguments in it which was a problem because nobody could remember what order they went in so it was really hard to use and then it turned out nobody used the third parameter but we couldn't take it out right because if we take that argument out then all of the code would break and so people had to use the third parameter unnecessarily forever that was really awful and brittle so what I would do instead is say pass in an object using an object literal so by just adding two more characters we can now have named parameters I can give each of the parameters a name so the call is self-documenting so we can see what's getting passed in we can have them in any order if we leave things out we can have nice defaults if it turns out some parameters become unnecessary we simply ignore them we have lots of power in the way that we can manipulate objects so I would take advantage of that also if we could get the specification object from a JSON payload so we might have some store and we want to use the constructor to reconstitute to the object we can do that as well or two because the creation of objects across the network using specifications that get passed over the wire through JSON then I'm going to call another constructor to make an object and I'm going to pass the same specification object to him as well so maybe that that other constructor will make use of some properties in a specification object that I don't need but that makes sense to him and if there's anything we both need we're sharing it I used to call this parasitic inheritance where we're going to call another constructor and we're going to take credit for its work I was inspired by a wasp that lays its eggs and the bodies of live spiders so the spider does most of the work is making its concerns but the wasp gets all the credit is going to do something like that and then I'll take the result of what the other maker did and put it in variable called that I can't put it in something called this because this is a reserve cord then I can create my member variables I can create as many member variables as I want and because they're going to be held in the function scope they're not visible outside of the object and only visible inside the object I will create my private methods and my private methods will have access to the specification object to the member variables and to the other methods as well I do not use this in here don't need this so the codes going to be a little bit smaller and cleaner and any of these methods that I need to be public I simply assign them to the outgoing object and the last step I return the object and that's it and there's it's a very flexible pattern there are lots and lots of variations on this but this is the basic core idea that we're taking use of closure in order to provide private State within the object so let's compare this to the pseudo-classical model so you remember this it's just awful those stuff hanging around so this is the same thing now in this functional model and the code gets a lot cleaner for one thing we don't have the dot prototype stuff hanging off the end everything is nice and neat and contained within there so the gizmo constructor very simple it's simply returning a new object notice the curly braces around the right so this is going to work perfectly instead of saying fist ID equals ID we simply say ID : ID and we're done similarly then our who's it is going to make a new gizmo and we're going to add to that function our test method or add to that object or test method return the object in its top so the code got a lot simpler as well yeah I think about 10 minutes ago you're saying not to use this or you didn't recommend it or you don't write it yeah that's the next step okay so let's suppose we want to have privacy which is something that I think is very important to have an object systems so that we may have a goal where the only way to get access to the ID is through the methods of the object that we don't want anybody to be able to access ID except through the methods JavaScript doesn't provide any way of having privacy in the classical model in the pseudo classical model because everything you attach to an object is visible to anybody who gets access to the object so there's no privacy there but the functional model because we have function scope and closure we do so let's say we want to hide the ID so you can only get ID through the two string and test methods the code actually gets simpler so instead of saying this thought ID here we simply say ID and we're getting it from the closing / vid variable that got passed in so it's it's private it's completely private and this code got simpler - we got this ID and which again we're getting through closure and code got smaller and simpler yeah aren't the functions copy no than for each instance right so there is a cost to this model that in the prototypal model we're saving memory because we only have one out of each method per instance in this one we're going to have lots more function objects being created and we'll talk more about this on Friday but it turns out that that's significant only if you've got millions of instances that memory has become so expansive you've got gigabytes of RAM in your pocket making important architectural decisions based on memory conservation is not a good way to go now and I would contend that if you are worried about millions of instances maybe this is not the language you should be using but for most of what we do the number of objects are you going to make is going to be relatively small and performance wise this is going to be great so we're going to spend a little bit more in construction but we're going to spend a lot less in execution so I think it's a win that fact that you create an instance of that function for each instance of the object yes that's because of closure right yeah we can't have closure without that that's right okay yeah we because of closure we're willing to pay that cost right and it's not much of a cost if you look at what is in a function object there's basically an object with two extra pointers in it one for the pointer to the code in one the pointer to the activation of the creating function there's not much else in there there'll be a link to the prototype object which is a waste because we're not going to use that that's it so there's not much memory in those things not a lot of work to initialize them so it's very lightweight everybody else so this also solves a another problem that we have in the language which is related to this binding so this is the old use of the original pseudo-classical who's it suppose we want to take the test function out of the object which we can do because you can copy any object reference out of an object and put it in a separate variable and then call that variable as a function that call will fail because when we call test and a function this will be bound not to the object that it came from but to something else either to the global object or undefined either of which will cause this test to fail but in the new form because our constructor because our methods do not have this in them we can take those functions pull them out of the object and call them independently and they still work exactly the same way because they don't depend on this so no matter how those methods are called they will always work correctly all the fragile nests of this is completely avoided just so I'm clear in this in the middle one there in your function where you're taking the test ID you have access to ID because it was pushed onto the heat and it hasn't been garbage collect again because it's routed somewhere right okay nothing seems routed by that object for again I got nothing as long as that method survives the context it needs will also survive okay episode 4 the metamorphosis of Ajax all the world's a page and all the men and women merely pointers and quicker 's so we're going to start this hour with Sir John Harington poet court here the saucy godson of Queen Elizabeth the first of England he is best remembered today as being an inventor and he he invented one of the fundamental inventions which make civilized enca tea necessary for technolog technological achievement great move forward so this is a picture from his book of his invention can anybody identify it it it is a flush toilet indeed weekly just civilization couldn't work without them the Romans had flush technology but it was lost when the Empire collapsed but Harrington rediscovered it and he built one of these devices for the Queen and installed it in her residence and as usually happens with the really important inventions she refused to use it she complained that it made too much noise she didn't want everybody in the castle knowing when she was going about her royal business so it never got used but he published a book about it and eventually other inventors saw it and improved it over the next couple hundred years people added other essential elements to it including the float valve and the Ostrava siphon and eventually regarded this so I caught fish in my toilet of course you do yeah so he wrote a book and the title of the book was the metamorphosis of Ajax which he published in 1596 he called it the Ajax will now flash forward a little bit this is Jesse James Garrett he was a designer and consultant in San Francisco he was on a project where he was consulting with the engineers of the company and they told him that they had found this way of writing applications for the browser now instead of doing a page replacement each time the user clicks instead they will send a little bit of data for the browser to the server the server will then send a small response back javascript in the browser will then display it on the screen so that they can get much better user experiences using this technique and it worked the problem they were having was they couldn't convince their own management that this was an acceptable thing to do so they asked Garrett if he could please explain to management that this was a good idea so Garrett goes off and thinks about this problem and thinks about how do we present this this idea and he says the solution came to him when he was in the shower I think it would have been a better story if he had been on the throne going about his royal business but he says he was in the shower when it occurred to him that he had to give it a name in the name he gave it was asynchronous JavaScript and XML or Ajax and he published a memo about this on his company's website in 2005 and it went viral almost overnight everybody was talking about Ajax and writing Ajax applications for the web and it completely transformed the way we think about browsers and JavaScript so to give some historical context for this the web comes from word processing and word processing historically comes in two very distinct schools there's the binary proprietary school which started with standalone equipment two men shared logic and eventually personal computers which was dominated at various times by companies like IBM Wang and today Microsoft then there's the textual open school in which everything is represented as text all the time one of the first examples of this is a program called run off it was developed by MIT and run off was intended for producing text that could be sent to various printers so here we've got an example of a run off file if a line starts with a period in column one that means it's a command so in this case we'll skip one line and then we'll tab for will offset for and so on and then the text between the commands will be filled into the margins and this was a very popular program it was ported from one mainframe to another it moved all over the place eventually I got the Bell Labs where its name was shortened to ruff and other versions of it were created including Enron tear off tear off was the way the UNIX community did typesetting made books for a long long time meanwhile there's an attorney at IBM at IBM named Charles Gould farm who thinks he can do this stuff better so he begins a project called generalized markup language this is an example of a generalized markup language kind of midpoint through its evolution the markups got a little bit more complicated now he's got a colon in column 1 followed by cryptic command and then if the command is followed by a dot he can then have content on the remainder of life so you're starting to mix up the commands and the content and if you're familiar with HTML some of these commands might be eerily familiar to you and that's not accidental and in fact HTML comes out of this heritage all of them except for AOL but you can probably guess what that one means in fact as EML went through its evolution we got : e and then colon colon and then finally angle brackets and so you know and you know what happened after that so if you ever looked at HTML entities we've got it an ampersand and cryptic code and a semicolon wondering what bizarro universe doesn't make sense to have a piece of random fluctuation and then a code and another random piece of punctuation where did that come from this is where came from he ran out of angle brackets there was no other way to make it look nice so he went with the awful looking thing so where the angle brackets come from the angle brackets were inspired by scribe Brian Reed was an amazingly bike guy at Carnegie Mellon who made scribe which he called a document compiler this is the first time someone got the separation between content and formatting right scribe was a brilliant piece of work a scribe could take documents and put them to all sorts of output devices and they had an extremely nice language that was one reserved character which was the outside you'd say at than the name of an environment and then you'd have some quoted stuff which would be affected by that environment and he had six sets of quoting characters so you could pick the one that's guaranteed not to interfere with the content that you're putting inside and he could nest these things as deeply as he wanted and if nesting got too deep he had special forms would begin and end so that you didn't care about things accidentally matching so for long things like chapters and sections you could enclose them like that and Goldfarb looked at this and went whole angle brackets I didn't know you could do angle brackets that's great so he stole some ideas from this unfortunately didn't steal enough ideas that um so one of the things that scribe could do was bibliographies now since it was developed in a university it has to be able to deal with with academic papers and such so here we've got a description of a tech report in a book and I believe that this is the very first time that a document format was being used as a representation for data because it looks like Jason right it's key value pairs separated by commas and it's really reasonable looking I mean even things like the details like year equals 1972 there are no quotes around the year because requiring quotes around numbers would be insane right it's just really good so the GML community got the idea of attributes from this but they didn't copy enough of the good stuff and it's a shame that Tim berners-lee hadn't been more knowledgeable about text processing systems because if he had based the web on scribe instead of on sgml our lives today would be so much better but he didn't do that so you know we can see that runoff conspires GML inscribed and scribe helps inspire s PML but not enough and eventually that leads to HTML HTML was not state-of-the-art when it was introduced in the late 20th century it was intended for simple document viewers it was not intended to be an application delivery platform we insisted on using it as an application delivery platform because we needed one and that was the best thing available so we used it but it was not well-suited to what we wanted to do a lot of people looked at it in the beginning and thought it didn't have what it takes and they were right but we went ahead and did it anyway so since then the web standards were grown from a naive hypertext system under intense highly unstable competitive pressure as Netscape and Microsoft attempted to destroy each other by manipulating web standards it wasn't designed to do all of this Ajax stuff its success is due to a lot of very clever people we found ways to make it work despite its design limitations now HTML was a huge improvement over sgml primarily in that it was much simpler anytime you take something that's too complex and turn into something that simple you generally are making it better unfortunately they also made it more resilient when one of the rules in sgml was if you don't I if you don't recognize a tag then total failure nothing happens and they thought that was too much for the web so instead on the web the rule is if you see a tag and you don't recognize it ignore it and keep keep parsing and it works and that's actually been good for the web because it meant that we could upgrade we could have forward and backward compatibility because the browser's would be ignoring the differences as they enter and leave the standards unfortunately the dark side of that is up there were maybe still are incompetent webmasters who could not correctly write HTML and the browser's would do heroic stuff to try to make sense out of the stuff that they were writing which turned into security exploits which we'll talk about on the 3rd day so in the original formation of HTML authors had virtually no control over presentation and the thing didn't anticipate applications beyond simple document retrieval which is a very small part of what we're doing now it's not internally itself consistent for example it provides two ways of writing out lines one is nested one is not it's not consistent and the thing that we call a web page is not a page it's a scroll I'm hoping someday we invent pages because pages are great pages were a big step forward in the march of civilization maybe someday the web will catch up to that so the sgml community hated HTML they thought it was an abomination they did not like the way it was simplified even more than that they did not like the way it was so much more popular than sgml so eventually they took over w3c and started changing things to be more to their liking for example they change the way P word P had originally been a separator they turned it into a container they started the thing about semantic markup which turned out to be a colossal waste of time and they also created the xml fiasco the idea was that they would create xml which would be the successor of sgml which would be used as the new document format replacing HTML and be used as the world's data interchange format it failed at both of those things HTML it turned out refused to die and it is still the the web's document format and the the world's data interchange format is Jason all right you said you're going to talk about mystical semantics no I I have not to be talking about genetic marker don't have to find someone else to tell you about that now I'm curious in some way it didn't pay off how we sell a lot of time on it and we didn't get anything for it you only can point folks we run to that like it our disabilities who want the semantic markup to provides an extra bit of information for long I have a lot of sympathy for people with disabilities who are trying to use the web I don't think that was the solution um but I can understand being desperate enough that you know compared to what the web delivers that anything else might look to be better than what you got I could talk about CSS but I just start ranting and you don't you don't need to hear me rant do you anyway it's just you know the energy is up so it's talking to someone who's finally gotten good at CSS I mean it's hard to step up to CSS is really hard and difficult eventually designers get there and once they've done it this Stockholm thing seems to happen to them if it's kind of like watching a domestic dispute on cops you know CSS in bed you just don't understand it like I do you know yeah yeah yeah anyway if all there was to the web was HTML and CSS it would have been replaced by now web would be gone and we would be working on something else and this is the proof of that Georg call me the chairman and CEO of Forrester Research was saying another software technology will come along and kill off the web just as it killed news gopher at all and that judgment pay will arrive very soon in the next two to three years so he was predicting in 2000 now by 2003 the web would be dead replaced by what he called the X Internet which was an app the executable Internet it was an application delivery system that he thought that the web was deficient because all I could do was dispense documents and fat is not what the web what the world needed this quote is no longer on the Forrester website archive.org has it though you can go to our gorg it's right there so a lot of people heard this message a lot of people believed it including Microsoft so when that's cape self-destructed Microsoft said good we didn't want the web in the first place so they disbanded the IE team and put them to work on the X Internet so they start up the dotnet project they put people on Avalon it got moving on that stuff so the surprise was that the web didn't die and the reason it didn't die was because of JavaScript that what colony was arguing for correctly was that the world needed an application delivery system the things he didn't recognize was that the web already was one because JavaScript was in all the browsers now the Java community remembers this differently the Java community is really angry at javascript for being in the browser and thinks it's completely unfair that javascript was the language in the browser had Java been in the browser things would have been different except that's not the way it was Java was the first language in the browser and Java applets failed Java applets were the biggest failure in the history of software in total out there in public huge scale flat on your face biggest failure we've ever seen in software with Java applets they were supposed to write once and run everywhere and do everything and they didn't total failure on the other hand the browser is still in existence because javascript was there to save it so a lot of people who used or everybody hates javascript they're people who don't know javascript to hate it because they should know it the people who do use javascript and hate it actually hate the Dom the Dom is the API that the browser presents to script and it is one of the worst api's ever invented it's just really awful it was designed also by Brendan Eich he designed at the same week that he designed Java's presbytery there was a busy week he was handed Danny Goodman's hypercard Bible which is a book that's 2 or 3 inches thick about hypercard he had never used hypercard never used a scripting system very smart guy very quick study he read the book very quickly and thought he got the sense of it you know how do you apply the HyperCard model to the browser and he came up with the dom and it's just awful it's just awful there have been many other people over the years who have improved it for example one of the most important contributions was Scott Isaac's of Microsoft he was on the IE 4 team and he looked at the very peculiar model that that Netscape could come up with and normalized it in a really good way in the original Netscape model not all elements were scriptable and those that were scriptable were only scriptable in a way that matched what was in the HyperCard book and Isaac said let's make them all work the same way which made dom programming significantly easier but they never finished the reason they never finished was because Forster said it's done so they said ok and they were all put on other projects and after ie6 it was just left and I was giving the story so they knew it wasn't finished they never intended to leave it at that state it's just web was done so they would often did other things so as a result it's this incomplete API that's at the wrong level of abstraction that's just horrible to use so this is a flowchart of a browser this is how the original web browser worked you can think of it as a snake you put URL to one side you get pixels out the other side so you feed it with a URL that goes to the fetch engine which will then go out on the internet and find the thing and bring it back and put it in the cache then it gets given to the parse engine which will parse it and turn it into a tree a tree being the data structure which represents the document the tree is then given to the flow or layout engine which will figure out all of the components on the page how big they are and how they are all located relative to each other and create a display list and then the display list gets given to the paint engine which will then turn it all into pixels which you can then send to the screen or to the printer and that's all browsers still do essentially that when work started on the mosaic browser they added the image tag so this is the hack that they came up with for making the image tag work when they got to the parse engine and we get an image tag it stop and sneak back to the fetch engine say go get that picture and we wait for it to come back and then they'd resume parsing they were on whether the world's fastest university networks so that was working really well for them but mosaic got loose got into the world and at that time we were still on dial-up modems anybody remember dial-up modems can anybody sing the dial-up modem song yeah yeah and so the experience of running mosaic on those modems was that you would wait until every image got loaded and then everything would display so it could take a long time to get a webpage going so when the those kids then move to Netscape their goal is to kill mosaic they want to create a monster that kills mosaic so they make a Mozilla and Mozilla works a little differently so when the parse engine gets to an image tag it goes to the fetch engine and says go get it but they then resume parsing they put a placeholder in the tree to represent the picture and they continue to parse and if they see another image tag they'll tell the fetch engine get that one too and put a second placeholder in the tree and they continue parsing and then at the end they will display what they've got so far and so you would see little placeholders in the thing but you saw text right away and then as the fetch engine delivers the images they then repeat the flow and the paint to incorporate the new things and so there'd be an animation effect we go boom boom boom boom as the images would appear so overall this could take longer than it did on mosaic but the user experience was much better because they would see things immediately pencil is a hit it was very successful and all browsers today are essentially doing that shells are networks are going so fast that we don't see the placeholders anymore so in that scape navigator 2 they added scripting so there is now an event loop in the browser which looks something like this will do the layout will do the painting will then wait for an event which could be something happening with a UI someone moving a mouse or typing on a keyboard or it could be something coming from the fetch engine something happened on the network or could be a timer cue saying some time has elapsed and something happens whatever it is it will cause some script to run and that script will run to completion it will it's guaranteed it will not be interrupted by the next event which is a good thing because it makes the scripts much easier to write the script will probably mutate the tree in some way that the event probably caused something to want to be displayed or modified which means will then do another flow another paint and then we'll get the next event and so on and that's basically what browsers do now this is way oversimplified there are some mutations of the tree which will cause flow to happen immediately so it's not in these very clean phases necessarily but this is pretty much how they work this is this is the way of the browser they all do that gentleman invented the script tag because he had the problem where do you put the scripts that go on the page and since HTML was a text format he decided to deliver the programs to the browser in text form which was unusual because most languages will deliver an executable to the execution site JavaScript delivers source to the execution site and it was because of this problem so one of the very first things they found when they started writing pages to take advantage of JavaScript was that when you display those pages on Navigator 1 and on mosaic the script would show up as text it was because of the HTML rule if you see a tag and you don't recognize it just keep going and that was hugely embarrassing and there is no way they could go back in time and tell those older browsers not to do that so they came up with this terrible hack they wrap the script in HTML comments and as long as you're not using a - - then the script will be hidden and no one will see it I still see people doing that so if you see anybody doing that tell them this hasn't been necessary since 1996 so knock it off Microsoft added a language attribute because they intended to kill off jscript and replace it with their own VB script VB script being a dialect of Visual Basic that didn't happen and it and the irony is the reason it didn't happen was because they did such a good job on jscript if they've done their usual thing then jscript would not have gotten critical mass and JavaScript probably would have failed and they had a chance to steal the market but they didn't so as it turned out javascript was the only language that ran reliably on all browsers and so that was the language everybody used the only people I've seen using vbscript are criminals and advertisers everybody else is using javascript they added the source attribute which was a really good idea because it turns out you should not put script tags onto pages if you put scripts into separate files then they can be minified they can be gzipped they can be cached all of which are extremely good for it for page startup performance which is critical if you put them on the page you don't get any of those benefits so everything should be in separate files then finally w3c didn't like the language attribute because they didn't make it up so they replaced it with their own thing and they say that's required but it turns out if you're using a source attribute and you should it is the server that is authoritative on what the mind type of the asset is not the tag that requested it so the browser's are required to ignore it w3c says it's required I say leave it out it's not necessary it's just a waste of space so um document dot write is I hope the worst idea Brendan Eich ever has the way he thought that interaction with the browser was going to work was that um JavaScript would run as the page is being loaded incrementally and that JavaScript as its running can insert new HTML text into the document as it's being parsed which was kind of awful so I don't see it being used very much anymore except by criminals and advertisers I think I see advertisers use this a lot in the early days of web advertising there is a huge amount of fraud and all the ad companies we're ripping each other off you know misreporting image views and other things so they came up with this agreement that the way an ad placement can work is you put some ad script on your page it will do a document dot write of a script tag going to an observer and that one will then return code which will do a document write of a script tag going to another server and they can do several of those things going off to different places and allows all of these different companies or agencies to separately count the thing so they can all agree on what actually happened but one of the consequences of that is they can add huge delays to the rendering of the page because everything has to wait until all those add three directions get finished and it's also a huge security vulnerability because any of those servers can be sending anything they want and if they send something nasty bad things happen and there's no way to defend against it so that's all pretty awful so I don't recommend anybody use it ever again so unfortunately where you put a script tag on a page can have a huge impact on the page loading time it's a correct place to put script tags should be in the head because it's meta right scripts are not content they're meta so that's what the head is for unfortunately browsers are extremely incompetent at script loading and so if you put scripts in the head then all parsing blocks until the scripts load compile and execute which means that if there are any images in the body that need to get loaded they don't even start to load until all the scripts have finished that's not good so Steve Souders figured out that we need to move all the scripts to the bottom of the body instead which is great for performance but terrible for reliability but that's what we do now he also recommended that we minify in gzip the script files which is very good advice he also recommended that we reduce the number of script files as much as possible by needing them all together and there are really good reasons to recommend that because HTTP is incredibly incompetent at loading script files and so the serial delays in HTML requests transactions really hurt you badly there so Schneider is recommended that you concatenate all of your script files together and turning them into one big file in that way you avoid some of that HTTP overhead unfortunately that leads to other problems it completely breaks caching because every page will have a different combinatorial set of scripts it's going to load so the likelihood that one combined script file is going to be reused again is extremely low it also introduces bugs because there are certain errors that can happen which are not correctable if you put lots of files together for example you might have one file that's written by an incompetent idiot who depends on semicolon insertion and that concatenated onto someone else's file and the place where the semicolon would be inserted is no longer a insertion site because of the concatenation and now the file fails I've talked about parsing and making trees so this is some HTML text this is a tree that it expands into and there's some interesting things to observe about this one is first we got lowercase here in uppercase here so when the web first started the first generation of webmasters typed their markup all in uppercase because they wanted it to stand out they want to make it really obvious what was markup and what was content and writing it all in uppercase made that clearer after a few years of that that got tired of leaning on the shift key and they decided I'll what the hell and it's all lowercase now that transition happens just as Brennan was designing the dom and so the so the dom had to pick a convention and the convention was let's go with uppercase because that's what people were using at the time so everything that's lowercase here you've shifted up to uppercase there and you need to be aware of that because sometimes it doesn't matter but sometimes it does matter so you need to be aware then there are features in the tree that are not in the text for example I did not specify a head tag but there is a head tag in the tree so it'll add extra bits to the markup another place will do that is in a table if you don't specify a tea body it'll stick a tea body in there for you and that can get you into trouble if you're trying to parse around things and you'll find levels of content that you didn't expect to find then the other thing here is that this is the ideal Microsoft tree so Microsoft ie6 would make a tree like this one w3c under the influence of the sgml community said no you need to have more stuff than that for example the white space between here and here which you would ordinarily ignore if that has to go into the tree Microsoft correctly decided no we shouldn't do that because that's just a waste of space but everybody else did and now Microsoft it everybody does that but I went with Microsoft tree because the real tree is too hairy and it's hard to talk about sewing I'm going with the simpler tree instead some there's some implied hierarchy in this for example we've got H 1 H 2 and it kind of looks like the H 2 is subordinate to H 1 but and the puppies are subordinate to that but but they're not they're all at the same level in the tree so you need to be aware not then on the JavaScript side in the browser there's a global variable called document which is the root of the tree and document dot body is a shortcut for getting to the body node there's also a shortcut for getting to the HTML node which is called blocking development which is your thing can be called HTML right because it goes to that one the reason it isn't is because at the time that document element was created w3c was planning to kill HTML and they didn't want to leave that evidence in the Dom so they went with the longer name so that no one would know but that plot didn't work so this is a subset of the same tree I turned it sideways to demonstrate the next thing so each node has pointers to other nodes for example each node has a first child and a last child node which point to the children these are the neglected middle children they don't get pointers then on each of this P node only has one child so both pointers point to the same element then there are sibling pointers I'm exiting a previously linked when at that way the body will have a sibling relationship with the head tag these guys are cousins and you'll be glad to know there are no cousin pointers then there is the parent node pointer which goes up for the body will have a parent node going to HTML HTML will go up to the document root and you might be going learning that's a lot of pointers so if I edit this tree do I have to update all those pointers that could be kind of hairy and the answer is no that in fact you cannot edit the tree these are all read-only from your perspective you have to use the Dom API if you want to edit this tree and I'll show you that API in a moment now if it turns out all you want to do is traverse the tree for example if you want to visit every node in display order you don't need all these pointers right if you understand how recursion works you only need a binary tree right we can make that with two pointers so I can use first child and next sibling with a walk the Dom function that's recursive function which knows how to do that traversal and that allows me to do things like implement get elements by name by passing in a function which will look for names and compile things into a list in addition to all of those pointers each node also has a list of child nodes which is kind of like an array which will have all the children in it you can get a note by retrieving the way I prefer to do it is get document that get element by ID you can also get things by name my tag name you can do CSS queries and things like that there's quite a lot of ways of getting access to a node now once you have access to a node you can manipulate it so these are the standard properties of an image tag if you have access to an image tag you can change any of these properties the most interesting one to change is the source if you replace the source with a different URL then suddenly a different picture will show up and JavaScript provides a very convenient way of doing that just say no dot property name equals whatever value want to have and it works these are the standard properties of an image tag every browser will have additional properties that are unique to that browser I recommend stay away from that stuff because it's a trap you want to stay to the common part so you'll work everywhere um w3c was not happy about JavaScript surviving in the web after they'd rejected it they thought that was going to be the end of it but it didn't and there was a lot more sympathy for Java at w3c than for JavaScript and so over the years they've been trying to replace the API with something would be more friendly for Java than for JavaScript even though Java has never lived in browsers in this way so they didn't like the old-school way of doing things so they added this one we even call get attribute and set attribute this form having the obvious advantage that's a lot more typing and people like that another thing you can do when you've got hold of a node is style it so you've got lots of options for styling one is you can get at its class name which is a this main thing it should be dot class but it's not it's called class name even though it can be several class names it's still class name more interesting as you can get at the style object and change attributes of the style Microsoft added a really nice thing called current style that sometimes you want to know what is the current attribute for something and I want to know how big something is or where it is or what color it is currently something like that and Microsoft provides a very nice way of finding that out that w3c said nah that's not the way we want to go instead we'd rather have you write document dot default view dot get computed style mode get property value style name right this is obviously a Java API right I mean nobody who knows JavaScript would write that no this is clearly designed by somebody who did not know anything about JavaScript and I don't know what happens with people in the Java world but they want to write stuff like this but that's kind of the way things happen so I need to rant for a moment so the CSS and the Dom were both designed about the same time and each project was aware of the other the guy who design CSS was aware that someday programming languages were going to manipulate style sheets not that was a certainty and yet he chose to use the minus sign as a - knowing that most of our programming languages want to do subtraction with it and that this creates a syntactic difficulty for all of you he did that anyway meanwhile at Netscape they're working on the DOM and they see what just happened to CSS and ago okay what are we going to do about that what they could have said was well that's annoying but we'll just say you take the brackets and you put the string in and that's that so you have to type for extra characters but it's completely compatible or they could have said well minus signs are a problem so we'll just change them to underbars so you know minimal change search and replace can pick no they went with the least compatible way of writing these names and and it matters because you need to be aware of which space and I in right now am I in CSS space or am i and Dom space it's really easy to get confused about where you are if you pick the wrong form it's total failure they could have made this work like a system you know they could have made this work well for you and they chose not to and it's still there that's never going to get fixed anyway so another thing you can do with nodes is you can make nodes you can make brand new nodes so you can call document create element pass in a tag name like a divs or something and you get a new element that new element is not visible yet and it won't be visible until you paste it into the tree we'll do that next you can make text nodes the same way you pass a string to create text node and it will make you a text node which you can then attach to some other node another way you can make nodes is by cloning nodes that you already have a Crone is not a perfect copy for example a node might have event handlers on it but a cloned node will not but otherwise it's pretty similar and if you pass through to clone node then if the node has children you'll get clones of the children as well so if you want to make it visible you have to stick it into the tree so you can call the a node and say append child the new node and so the new node becomes the new last child of that node and you can also insert things before and you can replace a node with a different node and again this is a Java API right because you have to say old twice I could just say node replace yourself with this now you have to tell the nodes parent replace that child with that one and the way you find the parent is with the node itself why do you have to write old twice like why did Java people do that can anyone in any way you have to remove children and so you can call node not remove child but again you don't tell the node tree remove itself you have to tell the parents to read move it so you have to do it twice there's a particular hazard here for garbage collection if you're on one of the older ie browsers so anybody supporting ie6 7 8 oh you're breaking my heart really okay so I was hoping I wouldn't have to say this anymore but I do so there is a design error in ie8 that if you attach event handler to a node that node will not get garbage collected and the event handler and everything that it's holding on to will not get garbage collected even if you remove that mode from the tree so the requirement is that you have to remove all of the event handlers from the node before you remove the node from the tree which is too much to ask of anybody but that's what you have to do it was supposed to it was identified by e6 it was supposed to be fixed in iu7 it wasn't it was supposed to be fixed in ie8 and it wasn't I believe it finally did get fixed in ie9 so sometimes what you want to do is take a fragment of HTML text and incorporate that into a document somehow and w3c in their API provided no good way to do that their model was you would write an XML parser in JavaScript and have it parsed the text and then you would call all the methods that I just showed you and have it build the structure the Microsoft side now that's way too much work so they came up with a property of a node called inner HTML which is a terrible name but it works so what you do is you assign an HTML text fragment to that and it will parse it and turn it into a tree and stick it into the document do all that very nice unfortunately it's a security hazard anytime you have any manipulation of HTML text particularly by concatenation but also by templating there's a good chance that an attacker can exploit that so you need to be really really cautious with this stuff so which way is better is it better to build or clone elements and append them to the document or is it better to compile an HTML text using our HTML to realize it generally these sorts of questions I want to answer in terms of what gives you cleaner code and better maintenance now what best matches the way you make the application that you should only favor performance in cases where it really matters and the cases where it really matters you want to use enter HTML there's one of the few things that browsers are really good at is parsing HTML they can do that really quickly and they can get the whole thing done in one transaction whereas messing with the Dom every time you touch the Dom you're going to pay a big-time penalty at state 2 we add an event model which is still in all the browsers the browser has me event-driven single threaded programming model which is one of the best things about the browser every event will be targeted at a particular node and the events cause the invocation of event handler functions unfortunately the composition of events is really sloppy from my perspective there is compute there's layer confusion there are some events which are intended for widgets you know low level components and some intended for applications higher level components and the design of the Dom mixes them all up so you've got application level things like click and double-click completely mixed up with widget level things like Mouse down and mouse blue now it turns out there the silver lining here is because everything was exposed to everybody it was possible for the libraries to come in and clean things up and impose order on it and and that worked because everything was available but it would have been much better had they not even been necessary if the Dom had just been designed correctly in the first place very similar layer confusion in the input events you got application level things like blur change in focus and key press and widget level things like key up and key down again it's all mixed up and because it's all mixed up I see applications mix it up now that you'll see people doing all of those things all the time everywhere because it's available so there are three ways of adding an event handler to a node there's the original Microsoft model where you could say no dot on click assign a function to it done and that still works everywhere that's pretty nice Microsoft decided that it should be a method so you say no dot attached method on quick function ok WC said that's not enough typing so let's make it add event listener type F false and it's false is kind of weird normally if you leave a parameter off that mic the browser will replace it with undefined which is falsely but in this case it really has to be false or it's going to fail and a minute I'll explain how the false is used so an event handler takes an optional event parameter which is how the event knows what happened Microsoft unfortunately didn't do that instead they had a global event variable which was a bad thing so because of that this is the standard template for writing event handlers where you either use the event that was passed in or you use the global variable and the target is either going to be the events target variable or property or the events source element why are two names I it doesn't make any sense and then after that you can do your normal thing no I I don't recommend that anybody use any of what I've just shown you you don't want to use any of that because it's painful and it's it just doesn't work very well you want to be using libraries instead but so there were two models for how to do event propagation there's the trickling model that was done at Netscape and there was the bubbling model that was done at Microsoft so with trickling you would start with the top of the tree and you would descend down to the tree until you get to the target node and any node along the way down can capture the event and say I'm taking care of it don't pass it down Microsoft on the other hand started with the bottom and they go up parent parent until they get to the top and any node along the way you can say I'm interested in this event I want to handle it it turns out Microsoft got it right and bubbling up is the correct way to do that so when w3c went to standardize say well we need to come up with a standard for how we do the event propagation do we do the trickling down or the bubbling up they could have said let's do the one that's right how the would they do that right so if they instead was we'll do it both ways well require that the browser's trickle down and bubble up so they do both will first do a trickle down phase and we'll do a bubble up phase and that false that was on add that listener tells you on which phase you're doing it false will be on the bubble up space so why do you even care like why do they have this bubbling stuff at all it was to solve a problem that's probably not a problem anymore so suppose you're making a catalog page and you've got a hundred things and you can drag any of those things from a reservoir and put them onto a page and so that's how your you've got this nice offering package that you're writing and so you've got 100 draggable elements that means you need to add a set of event handlers to each one of those have been Mouse down mouse mouse mouse move and so on so that's hundreds of sets of event handlers in 1995 that took a long time browsers were a lot slower than javascript was a lot slower again it would take time to do all of that work so instead what you would do is add one set of the event handlers to the common parent of that hundreds and that common parent would intercept all of the events and move all the children as needed I don't think it matters anymore the systems has gotten so much faster if I have to the noise but it's still in the models you still need to be aware of it one thing you have to do is cancel bubbling so at some point some node has taken care of everything and it says please don't tell my parents it's under control and and there are two ways to do that and you need to be able to do it both ways and then sometimes you want to prevent the default action after everything is done then the browser itself may want to do something well may want to submit a form or or give focus to something if you don't want that to happen you prevent that and there are three ways to prevent that from happening and you have to do all of those as well is a huge problem in working with the Dom every time you touch a node you pay a huge time penalty restyling has a big cost REE flowing has a big cost repainting has a big cost random things like node lists can have a huge cost a node list looks like an array except every time you touch it it can repeat the query that caused it to come into existence which can be wildly expensive now it turns out in most applications javascript has a very small cost so if you took all the time it's being spent on the browser and saying this much is parsing this much is marshaling this much is rendering and so on javascript will be like that much when I see people going after their code trying to shrink it down more and more and more when it's all this other stuff it's taking the time trying to optimize that if javascript engines were infinitely fast most web applications would run about the same speed no one would notice any difference so you can't optimize for performance unless you have good tools unfortunately we now have some good tools for example there's speed tracer on Chrome it will it records micro guides as your application is running in the browser and when it's done you can then do a post-mortem analysis and it will show you all the hot spots in the code and what is consuming time and with that information it is possible to them optimize the application Microsoft has a similar thing called performance dashboard which I think starts becoming available on ie 11 optimization will help good performance data is a waste of time so it turns out that a small amount of JavaScript can transform the Dom which is one of the world's office KPIs there's something pleasant and productive so Ajax libraries are fun and easy to make which is why there are so many of them and you absolutely should be using one they provide portability because the browser's have are hugely inconsistent and so you need a library that will deal with those inconsistencies for you so you can be working with a much better model they provide correction of errors that are in the defecation of the Dom they provide a much higher programming model something where you can be much more productive and they also provide sets of widgets which can simplify your development work so how do you choose there are so many libraries out there it would take longer to do a complete evaluation of all the existing libraries than to build a new one from scratch I don't recommend that anybody build a new one from scratch so some years ago the Ajax Ian suggested just throw dart because just picking one at random they're all pretty good and they're all much better than talking to the Dom directly so you can't lose just pick one at random the problem with that is that each one is a trap that they are all extremely incompatible with each other in fact some are incompatible with themselves from one version to another that point one of something might be completely incompatible with point two of something and once you get into one of these things you are stuck it's made of tar and everything you write is going to be dependent on this thing and getting loose from it and on to something else is extremely expensive and painful so how do you decide what to do some years ago I predicted that the market could not tolerate having so many of these libraries around that there is going to have to be a shakeout and I predicted that they would all disappear that'd be maybe two winners one of them was probably going to be Microsoft because one of the winners is always Microsoft and one would be something else why you wired dojo or jQuery or something that turned out to be completely wrong the number of libraries has only increased since then and the first library to fail and completely leave the market was Microsoft's Atlas which was so bad even they couldn't use it and they switched to jQuery so how do you decide it's a really hard problem and I do not have a solution and we find more libraries coming online all the time more platforms more ways of doing stuff and I thought I can't keep keep up with this stuff so how do you choose I have no good advice accept this for what it's worth ask Jaz lint take any candidates that you're considering run through Jaz lint that's an objective measure of code quality they'll give you some indication how well the things written maybe that's meaningful to you one more thing about living in the browser is the problem of division and labor because we're now doing client-server programming and for some people working with a browser this is the first time to be doing client-server programming and that means you're writing distributed application where half of the application is running in one machine in half of the application is running in another machine how do you design divide the work how do you decide what goes in which machine and I've seen people make mistakes in every possible to mention for example early on in the web everything was in the server the browser was treated as a terminal specifically as an IBM 3270 terminal and you know you would send information to the server and the server would generate a new view and send it out and I was hugely inefficient and it was recognition of that inefficiency which got the Ajax thing so popular so when Ajax started it went the other way people started putting the entire application in the browser and we were treating the server as a file system and I saw people trying to basically replicate their database in the serve in the browser page saying take everything we got because who knows if we need it or not and they send everything over and then they complain why does it take so long to send all that data that turns out not to be a good way to do it either so what's the right way it's to seek the middle way that you want to create a pleasant dialogue between specialized peers you want to minimize the volume of traffic you want to be sending stuff on a just-in-time basis you don't need to send the browser everything that might ever need to know you just need to send it what it needs next and it's usually a much smaller set of data something you can send very very quickly particularly as our networks have gotten so performant and that's the end of the browser any questions about that I'm just curious what your thoughts are kind of a virtual Dom approach like dipping and I don't know if you have in the opinions or um oh yeah I got opinions I don't know if they're useful opinions so generally kadam is a horrible model and propagating that horribleness on to the other side of the network I think just keeps you stuck in that off the model for longer I'm hoping someday we figure out a way to liberate ourselves from the Dom because it really is dreadful and the thing that's encouraging to me about the libraries is that they provide a way of doing that but now for example jQuery is so much superior as a an API for addressing graphical elements on a page to what the Dom provides I would like to see us get better that Cambridge super wraparound Dom it is okay but it turns out you don't need much rapid make the columns significant the dog is so horrible I recommend don't use anything that I showed you in the last hour don't you see a Calif iid ever refused to rewrite some library I'm not recommending jQuery or necessarily but it's not monetary every library is better than the Dom I'm happy to say that even I don't know what the worst library out there is whatever it is it kept the happen status Adamas how key creatures called get element by ID how can how can using a jQuery CSS selector people didn't get on that I already deciding that stuff for you it's adding a level of abstraction is it's adding about the direction so you're not thinking in terms with the Dom does you're thinking more entrence what you need to do okay that's very effective it not like other libraries are - okay so other question I kind of up the Dom was the browser how the browser worked without a Dom because you think there was HTML and then right around the same time that HTML was going to ball caps to lowercase the Dom was invented well how would you have a brother - without a doubt well before the words javascript there was no need for a talk right oh it was no modeling of the job but the Dominic this isn't some good book the supervisor had a tree but it had no API for the world to get access to that okay all right yes oh I guess listening to just the two of everything and maybe not question but what everything is funneled into what it is right now this seems like things are pretty stable e moving in a very succinct way and then when I listen to your stories of like how this came from this and this came from this and in all of these languages came from all these other languages do you have like a opinion or an answer to what why why such as a mine you like how come everything it just is focused so much like how come there is so much of this development of these different ideas like just say it like you're saying like the the idea is like having a returning of function it took a year to figure that out like why because that's still going on and like what's going on why why they're slow it has always been slow and we'll talk about this on the third day we think of ourselves as being the most innovative of industries and maybe we are but we're also humans and humans tend to be extremely change averse and the people who are the last to recognize the value of new technology are often the people who would most benefit from it and there are lots of examples of that in software technology and we'll look at those atma script 5 the new parts so complete implementations of the fifth edition are now in all the web best web browsers and also in IE 10 so it's almost everywhere so again to review the history of the standards the third edition was ratified in December of 1999 work on the fourth editions started almost a year before that the fourth edition was attempting to solve some problems I think we're unnecessary and eventually it got so big and so complicated that it was not completed that project slipped a year per year for 10 years so it was eventually abandoned and instead we did the fifth edition which started with a working title yes 3.1 indicating that it was going to be a much less ambitious attempt at adding goodness to the third edition and it adds two languages or describes two languages the default language and the strict language and of the two I recommend not using the default language but using the strict language exclusively and we'll talk later about what's in the strict language so that the goal of the atmos crypt 5 project was to make a better java script there are a lot of people who wanted us to not make a better java script but to make a different language and there are certainly good arguments for doing that but I think standardisation is not the correct place to try to do that so instead of trying to do a big thing we tried to do a lot of little things we tried to make the standard conform better to reality there are some cases where the standard said implementations must do this and none of the implementations did that so it's not okay well the standard is obviously wrong we should make the standard conform to what people actually do we should try to make the browser's conform better to each other rare cases where three browser makers would do things one way and Microsoft would do things another way Microsoft very generously agreed to do what everybody else was doing knows a very nice thing in cases where all of the browser's disagreed where every browser did something different we took that as license to fix something deep in the standard that we assume that the web doesn't care if every browser does something different in that case we can go in and do deeper changes as a result of all of this work interoperability is improved javascript was already very good at write once run everywhere with es5 it gets even better so our number one goal for es 5 was don't break the web and that's a really difficult goal to keep because anytime you change anything something will break and and we did break some stuff with the s5 we tried really hard not to now you could argue as I did there's a lot of stuff out there which deserves to break and and but we tried not to break even that stuff we wanted to improve the language for the users of the language most of the critics of javascript are people who do not use the language and would not use it even if we did everything they told us to so we tried not to listen to them too much not always successfully we tried instead to listen to you we paid a lot of attention to third-party security or mashups we want to make it possible for you to add someone else's code to your page and have it not violate your your security or your customer security we decided not to try to protect stupid people from themselves because that is just too hard so how so the in fact added new ways that stupid people can do outrageously stupid things and we'll get to that a little bit later and we decided to have no new syntax and the reason for that is that at the time that we were doing this work ie 6 was still the dominant browser and our concern was that if we launched a new version of the language and if IU 6 is still dominant then if the value of that new language depended on its syntax when it's going fail because every new feature means total failure and that's not helping you at all so we tried to add as much value to the language as we could without changing the syntax of the language hoping that eventually we would solve the ie problem and then later editions of the language would be able to be freer with syntax we couldn't resist adding some new syntax so we did it not too much and I warned you all of these are fatal errors in browsers before ie 9 so you're still in IE 8 please ignore the following so we added trailing commas in array literals to object literals which is not useful I don't recommend you use it the reason we did that was because we fixed the way trailing commas worked in array literals it turns out arrays always allowed that dangling comma but they disagreed on what it meant so in some browsers that array would have the length of 2 on ie browsers it had a length of 3 when you have that kind of disparity bugs can happen so we changed it so the rule is now the dangling comma is ignored so everybody will agree that it has a length of 2 we fixed a terrible reserved word policy javascript original reserved word policy said that you could not have a reserved word in main position in an object literal or in dot position and there's no reason for that so we fix that so everything that's yellow now used to be an error that's all now ok so so that's good in fact the reason that Jason requires quotes around its names was because of this design problem in ES 3 we added getters and setters these are access or properties so that when you go to retrieve a value from an object or go to store a value into an object instead a function will be called which will either consume your value or return a value and that allows some new forms of programming so here we've got a temperature constructor which has a Celsius property and a Fahrenheit property you can read either one and you can set either one so you you don't know how it works but it just works that's a pretty nifty thing now it turns out you can do some really stupid stuff with this because it if you use this correctly then these methods will be very limited very restricted in what they do but there's no actual restriction on them they can do anything they can change everything in the world and so you can simply by reading a property of an object you can cause things to happen over there I don't recommend you do that because it's stupid I'm sure somebody's going to do that and I'll bet nobody thought that you can do that and we'll go and do that we actually did think about that just hoping nobody does not go here we talked about the multi-line string literals I still think this was a mistake oh this is great so it used to be infinity damn and undefined were not constants they were global variables which meant you could change them you could say today infinity is 5 let's see what happens I know that security experts were very worried about someone redefining undefined and what the consequences of that could be I'm not aware of any exploits that actually happened as a result of that but it is something that was worried about so they are now read-only variables so that's fixed we fixed par skimp so that no longer defaults to octal when the first character is 0 I still recommend putting in the radix argument anyway but at least the default behavior is not nearly as bad as it had been regular expression literals now will produce a new regular expression object every time Li valuated so they work the same way that functions do the reason we did that originally the compiler would only create one regular expression object for each regular expression literal and the problem with that is that they contain state for example they contain a a last what is it last position or last anybody remember what the thing that exec uses to remember where the last match happened no one knows anyway there's this variable that's in there which if everybody is share it then you can't have multiple execs happening because Phil interfere with each other so we fixed that well this was awful so I told you earlier about the object function it gets called every time you make an object and the array function gets called every time you make an array it turns out you could replace those functions with your functions so you get called every time someone makes an object or an array and that's a huge security violation right you don't want some code to be able to take those things over so the specification will now say as if by the original object function or array function but you can still replace them but you don't get the security hazard I'm happy to report that Jason the world's best love data interchange format is now built into the language so we've got a JSON object that provides a parse function and a string apply function those names are my fault completely my fault I probably should have said encode or decode or something like that but I didn't so when we're stuck with those so you're welcome if you're using Jason to j/s then it works exactly the same except Jason to J's knows to get out of the way if the built one built-in one is there so it'll just get faster which is what you want we added a lot of new methods because new methods allow us to provide new functionality without new syntax and so that's where most of the attention went we added function got bind which was something that jQuery has been promoting it allows you to turn a method into a function so you can use it as a callback we added string string trim so we now have a method which will remove the extraneous whitespace from a string this should have been in the funk in the language from day one right it's just it shouldn't have taken this long to get that we've got digit trim on both sides or install socks we didn't fight enough demand to do the individuals the left and right versions and I haven't heard anybody complain about it if anybody does maybe a kid in to7 yeah don't you just showed some chance to trim and now is that what it's doing underneath it's actually just more junior or is it written to the lower level it depends on the implementation it could be written in it in a lower level so this was called poly filling it's also been called monkey patching it allows you to insert code into the system so when Brendan originally designed the language you know he only had ten days to do this this prototype he was told that or he expected that if his demo didn't work that Netscape would have done something much stupider I don't know what it would have been I can't imagine what that would have been but that was his race so he only had ten days and he was pretty confident that he wasn't going to get everything right in ten days they're probably going to need to be some tweaks in the field so he left almost everything exposed unlocked so things which in a properly design language would be locked down are completely open so you can add things to object uh prototype for example in a real language you couldn't even be able to see object on prototype and all that stuff should be sealed and he did that probably correctly because he figured he did get everything right and someday people are going to need to patch the system in real time in order to make it work which is exactly what happened so there's all this stuff in the language which is exposed including this so this if you take this code and run it on an ie6 browser or IU 7 or IE 8 browser then they will work the same way as IE 10 with respect to string trim now IE 10 might have its own implementation of this it might be a native implementation so it might run faster so this version of ie6 runs slower I think that's great that's exactly how it should be we added a large new set of array methods and I really like these methods but design wasn't perfect but they're they're good enough that we can use these so most of these work the same way in that you'll pass you'll call a method on an array and pass in a function and that function will get called for each element of the array and things will happen based on what method you provide so the any method will keep doing that behavior until a function returns false and one or function returns false that it stops doing that so that allows you to loop for a time and then bail out similar to what break might be might be doing in a for loop filter will take all of the return values if the return value is true then the original element of the array will be copied into a new array so now allows you to take a big array and produce a smaller array based on what happens for each element for each is the thing that replaces a for loop it just goes and visits every element I like for each index F will do a search so you can do a search in an array similar to the searching you can do on strings last of searches the array from the back end map is maybe the most powerful of them it will take every return value from that function and store it into a new array so you can do transformations you can do selections and lots of new things using Map Reduce we'll take an array and reduce it down to a single value and it will do that by you pass it a function that function gets called for pairs of values from the array for example if you pass the add function to reduce you will get a total function if you pass a multiply function to reduce you'll get a product function when there is reduce right which reduces from the other end of the array I have not found any reason for that I don't know why we did that it but it's in there some is similar to every except it uses the opposite boolean value we added date got now so it used to be if you wanted to get the real time clock you'd have to do what this is doing you would make a new date object with the default configuration and then extract its time so usually when you're getting the time it's because you want to measure something but this process of getting access to the time adds a lot of latency and so you can now call date now directly and it will give you the current value of the real-time clock now browsers still add a lot of latency and operating systems also add a lot of latency so it's not proven that this actually does a better job but it's not so much Java scripts fault now so that's gotten better when the first standard was made Netscape and Microsoft could not agree on the language and the standard for describing how date parsing works there's a date constructor that can take a string and it can then attempt to turn that string into a date object but they couldn't agree on the details for how that worked so instead incorrectly they agreed to disagree by leaving it completely unspecified so there is no language of the standard that gives you a guarantee that if you pass it this form that it will parse which is kind of bad now since then ISO has come up with a an international date format which is pretty nice sometimes called ISO text or ISO dates or ISO strings which you have a year that - in the month in the - and so on so the date object will now produce strings in that form and the date parsers are now guaranteed to accept that form so we now have at least one date format which is guaranteed to be acceptable so this is the first one we'll try if that one fails them they'll fall back on the under specified proprietary ones but at least there's one that's guaranteed to work question about so soon yeah so the ISO format slide before this everything was getting UTC times whereas this one before so if you do to ISOs during your being and everything based on UTC time if you date time dot now are you going to get server time or the time of the machine that the code is running on things it is you get a date object which UTC yeah the same object has some fundamental time that's independent of the current times owners it's located alright okay so you're getting that that core okay thank you we added array dot is array to the language we tried to fix type of and couldn't there's too much in the web that was dependent on the broken behavior type of so instead we added this horrendously ugly thing but at least we got into that language and Brenda actually counted the keystroke so this is smaller than the type of form so even looks a lot worse it's actually a little bit smaller I managed to add object at keys which will give you an enumeration of all of the own properties of an object so you don't get the inherited method names you only get the data members which are the thing that you're probably most concerned with and it returns it in the form of an array which means you can then do for each on it and so that's pretty nice you propose that yeah I proposed that cool I use it all the time I'm going to do like that link just to see like how big this object is you're welcome and you can be completed and use your circle early there some okay so any yep if somehow that different think ease he does an array some is for looping on an array it's the opposite of every every gives you all the values some gives you all every give you everything as long as the function was a returning true and some keeps working as long as everything is returning false oh it's still recovering the values at the keys on the return values that are based on the bumpiness processing the key yes that kind of dates there there's a question about are there any plans for immutable date objects the immutable data object yeah I don't know any means whether we're going to get to freeze you can freeze any date object was up what he wants and wait and I'm just going to ask for clarification as a strong okay I also managed to get object.create countess this country it is the primitive which makes a new object that inherits from another object in a prototype ol language this should have been in the language from day one so instead we had the weird thing with new and dot prototype dot so this gives us a direct way of doing prototypal inheritance which is good we added a meta object API to give us more control over the attributes of the properties of objects so we can get much finer control over what's going on so we now have two types of properties we have data properties which are the things we've always had or it's just some data that you can store in the object can retrieve and we have access or properties I showed you an example earlier with the temperature object where we can have accesses and that's a there actually have always been access to properties in the language but they were never exposed to you so you couldn't make them so there are things in the Dom like dot innerhtml is an accessor property that's why you can assign something to it and then something happens and so there was a lot of interest in allowing you to write stuff which is as crappy as the Dom and we succeeded so there's no limit on the crap you can write now so we've got objects objects are composed of properties each property is composed of attributes every property has four attributes if you're a data property your attributes are value writable enumerable and configurable if you're an accessor property you're your attributes are innumerable configurable get consent so value is the actual value of the property writable is a boolean that determines if you can read it or write or if you can write it so if writable is false it's read-only it turns out the language has always had read-only properties but it was never exposed to you so you couldn't create only the language could create them so now anybody can in enumerable means it will show up in a four in loop or will show up in object keys if you turn that off it means it's not going to show up in enumerations which means you can hide it a little bit better then it will get dredged up all the time configurable means you can delete it or you can change it into an accessor property if it was one the data property ket is a function that will be called if you try to get the property and set as a function that will be called if you try to set the property so having that we've got two versions of the statement the first statement is the way you could create an object literal in es3 and the second one does exactly the same thing in es5 and you might be thinking thank you very much for that that that's huge so the thing is we wanted to be able to add this functionality but we were constrained that we couldn't add syntax so we wanted to make it possible but we couldn't make it nice so but at least possible is better than impossible which is where we were so this means that a library can now construct objects and can have control over what's going on so an object can designate what it wants to inherit from it doesn't have to inherit from object up prototype it can inherit from anything or nothing that's never been an option before now we can do that and it can say this property is not writable it's not enumerable it's not configurable so we can allow you to lock those things down and once you set one of those things to false it can never be turned back to true again so that gives you some control that if you want to lock your object down you can now do that so we added a new method object dot get property which allows you to take advantage of this stuff so this shows an example of creating an access or property without using new syntax so this does something similar to what we did before but it's only using method calls and the advantage of this form is that you can put an if around this and you won't get a syntax error if you're trying to run it on a browser that doesn't have it whereas with the syntax form you can't put in if around a syntax error so if you try to run it on an older browser it will simply fail so the meta object API contains object not defined property which I just showed you object not defined properties which will allow you to define several of these at once and also object get owned property descriptor which will return an object which describes the attributes of a property I should point out that this system was clearly designed by committee you've got things like object create and you've got things like get home proper you scriptor committees do stuff like that right there's no consistency on how the names work we added a couple of methods that you'll probably never get to use get on property names get property of we added these for the purpose of security libraries that want to run before everything else and lock down everything that Brendan intentionally left unlocked so that the environment is now safe for a third-party code to run in your environment and in order to get at everything that needed to be locked down it needed special access ports drilled into the language so if you get at this stuff so what it's going what those libraries are likely to do is take these use them then destroy them so that nobody else can easily so having all of this stuff it becomes possible to do things that we couldn't do before for example this is the replace prototype function it makes a perfect copy of an object except that it now inherits from a different prototype that's something that people have been asking for for years and there is no until now there was no way to accomplish that now there is so the function itself is an ugly-looking function but you can wrap that in a name and now you can provide that in your library and anybody can now make an object that's got a different prototype it used to be the case that you could add a new property to any object at any time simply by assigning to it and you can now turn that off if you call object not prevent extensions and pass it an object that object will now refuse to accept new properties if you if you attempt to give it a new property it'll throw an exception instead and we can go even further than that we can freeze the object freeze prevents extensions and also makes every property read-only and non configurable which means it is now an immutable object that has some nice properties it means that future versions of the language may be able to make some interesting optimizations because they can make assumptions that this object cannot change that means we can be smarter in the way we generate code for that object it also means that we can take a frozen object hand it to a third party and be confident that the third party cannot corrupt or tamper with the object and that's an extremely valuable thing particularly as you know we're doing more and more complicated stuff with more parties we added a strict mode language because there are a lot of things in the language that were clearly wrong that we wanted to repair but they would be bracing changes and so we wanted we needed to have some kind of opt-in so you'd say yes I'm prepared for the breakage this might cause because I want to be using the better language the difficulty we had in specifying this was how do you say I want the strict mode without introducing new syntax because we wanted older browsers to simply ignore the fact that we're in strict mode and work the way they always have so we spent a lot of time trying to figure out how to do that and eventually we came up with a terrible hack we used the the useless expression statement that I was complaining about earlier to specify the pregnant so if the first line first statement of a function or a file is the string use correct semicolon that puts that file or that function into strict mode and on older browsers that simply ignored and does nothing so that works we've got the file form which is good if you're on node if you're on a browser I recommend you only use the function form the reason for that is Steve Souders will tell you to concatenate all of your files together and that means that all of your files will have the same strictness as the first file and that could be bad in any number of ways so in browsers we recommend you only use the function form strict mode adds a number of new reserved words so far I'm only aware of let and yield being used in the next edition of the language the others may or may not be used in other editions this is the list of things that are provided by strict mode unfortunately it's on it's a boring list so I'm just going to read the boring list there are no more implied global variables within functions this was a huge design error in JavaScript so now if you forget to declare a variable in a function it's going to be a syntax error it's it's not going to default to global variables so that's that's good this is no longer bound to the global object by the function form so if you call a method as a function this will get bound to undefined and not the global object that turned out to be really important for security the call apply methods no longer default to the global object so it used to be if you called the apply method and passed in null or undefined meaning you don't want this to get down to anything JavaScript will go oh you can't mean that you probably need the global object and would do that substitution it doesn't do that anymore we got rid of the width statement if you try to assign to something which is not writable you will now throw an exception it used to fail silently which is really bad for integrity because the code may have made a change assuming that it succeeded in making the change and if the change failed and it isn't notified then it could become inconsistent we did a similar thing with deleting non configurable properties we put restrictions on eval I haven't talked at all this week about eval I'm not going to eval is the most misused feature of the language and I don't recommend using it and the implementation of it in the old language was really quite horrible that it gave extreme powers to whoever provided a string to it and so we put some limits on email the thing that complained about with arguments getting bound seriously to the parameters that's been fixed we got rid of arguments dot caller and arguments dot Kali in getting rid of those was surprisingly difficult because arguments caller had never been in the standard so we couldn't simply go to a line of the standard and delete it instead we had to add caller to the language and then poison it we got rid of octal literals because we found that they are confusing to humans most people in school learned that a leading zero in front of a number is not significant but Java Script said it was and turned you into pace eight so we fixed that and that got us a lot of complaints from a node community apparently the node guys are still using octal literals for setting file permissions I didn't know anybody was still doing that but they are so es6 added octal back in but in a slightly less awful way and then duplicate names in an object literal or function parameters are now syntax error so if you say function foo a comma a they'll now recognize that the second a is an error we fix the new operator so forgetting to use the new prefix in strict mode will now throw an exception and not silently clobber global variables so that's good there are a few things that we know did break because of strict mode for example if you call add eventlistener in a browser intending to add an event to the window object that accidentally worked in the old language the reason it accidentally worked was in the browser the window object is the global object just and just happened to be the same thing and when you call a function as a function this gets bound to the global object which happens to be the window object so it worked it was never intended to work it just accidentally worked so now in strict mode you have to be explicit if you want to add an event listener to the window you have to say window dot there's nothing in the language that will tell you if you are in strict mode or if strict mode is available but you can write either these little functions and they will tell you exactly what you need to know the design of strict mode was informed by Jazz lint but they're not entirely the same because jeaious lint is forced to do a static analysis and strict mode can do some things dynamically but if you're using jeaious lint and you should and you should be very happy with strict mode a lot of the work that we did was motivated by the problems of mashups mashup is where you've got code representing two parties that wants to work together in the same page for the benefit of the user without one being able to corrupt the other that turns out to be a very difficult problem so we don't have a complete solution to that but but we are on the road to solving that so the design of the the mashup the solutions that we put into the language were derived from google's kaha project in my own ad safe project and by fixing things like the binding of this and some of the other problems we can now get security solutions which provide all the benefits of both of these which should be a good thing so any questions about any of this stuff about es5 or anything about anything today or anything at all just in the discussion we're all talking about a year six and stuff like that but we'll get it yet six on the third day yeah that's with it yeah you had that in the schedule so okay anybody else you talked about how pervasive certain constructs are out in the web and figure and how much you'd break and stuff like that how did you gather that those metrics it's really hard some of it was just I think somebody did something because I heard about a guy who did something you know a lot of it was that some of it was mining Google code Microsoft also had an extensive database of code and we would mine against that I'm not confident how effective our tools were in all cases because some of the patterns were looking for really complex and some code is so badly written that you might not necessarily be able to recognize the patterns but we tried as much as was possible given the technology available to match stuff against what the web was doing

Channel: deliciouspops

Views: 16,414

Keywords:

Id: DogGMNBZZvg

Length: 229min 34sec (13774 seconds)

Published: Sun Jun 11 2017