 Welcome everybody to my web programming one course. And this is the first introduction lecture for the general video series on YouTube The students at Reykjavik University have their specific introduction lecture, which covers a bit more organizational things But this slide set is just to recap and introduce what this course is really about So it mainly covers organization and course overview, but then we do a bit of web history as an introductory topic And the technology that we will be particularly using in this course Generally on this YouTube level as me as an instructor my name is Grisha Liebl. I'm a Assistant professor at Reykjavik University. I'm originally from Germany and from Germany I've been living in Sweden for about eight years and in my PhD there on the topic of software engineering And now as I said, I'm an assistant professor at Reykjavik University In general my research is actually on the area of software engineering. I'm not a web development person This is of course on the one hand a disadvantage because maybe some things I simply don't know as much about as others on the other hand I see it also as an advantage for this course because I have a bit of an external view and I might have Some better understanding than than experts in this area of what what topics might be difficult to understand So take it as you will. There are other courses of course that are given by complete experts on the area The course is organized as follows We essentially have a bunch of different modules that go from foundation where we really are now and a bit of networking and in Particular the HTTP protocol To front-end topics where we cover the big three languages of front-end development HTML, CSS and JavaScript We then have a series of topics on back-end and that's restful APIs and server-side JavaScript as a more practical part of the lecture Then we also cover at least a bit Testing and debugging of applications. So how do you test or debug client-side applications? How do you test or debug server-side applications and finally we discover ever discuss web security a bit these lecture numbers that are used in the videos are originally from the lecture plan in the 2019 edition of this course and there we had a number of buffer lectures So if you see in the playlist that certain numbers are missing, it doesn't mean that they are coming It's simply that lectures that were left empty to allow for buffer topics or more discussion in depth the learning outcomes are Distributed into knowledge and comprehension into application and analysis and into synthesis and evaluation This mainly applies to the actual course at the university because it includes for example certain practical parts where you have to program for The YouTube part I would you expect that you don't learn as much about actual Application practical stuff as long as you don't really heavily follow the course and do a lot of practical exercises yourself But to quickly go through them, we will look at what the difference is between client and server-side web applications We look at HTTP requests and responses at their methods. So how does HTTP work? And what is the feature or the properties of different methods? We then go into the key language concepts of the three big languages HTML CSS and JavaScript Dive shortly into accessibility. So how do we make websites accessible to a variety of people? for example with different hardware with different personality with different maybe Skills for or with disabilities like being blind or having a color And the inability to see for example red and green the differences then of course given Putting all of that together. It means you should be able to predict how websites look like when looking at the code and how they behave And a specific part of that is asynchronous Java code So JavaScript code an important part of the web functionality So that will be part of it As discussed we look at testing a bit. So what kind of testing techniques are there? They're definitely more comprehensive courses on this topic. It's really just an introduction here And then we dive into rest so Discuss what the rest constraints are discuss in particular how HTTP response status codes should look like for this case and finally our Listing and explaining web security threats and we are following the OWASP top 10 list here Application analysis is very much reflected in the learning outcomes here So essentially looking at the previous slide. You have to be able to somehow do all of these things practically So this course is generally a quite practical course as well of programming As I said in the in the welcome video in the YouTube series Of course the practice sessions are not recorded because they're really live streams from the classroom And then finally on the more transfer level you should be able to propose improvements improve existing code Access code for errors and security vulnerabilities compare testing techniques and so on And then as a last but definitely not least important topic We need to discuss a bit how web applications are slowly, but Well actually rapidly in the in the recent years developing into a societal problem and what the ethical impact Is on our profession really and on the society The literature There is a course book used in this book, which is semi-pure of all learning web app development It's really just a complement to the slides In originally the course is not intended to have a course book Because a lot of resources simply update quickly and there's lots of information on the web So I don't think a book is necessary Nevertheless, if you like to read something from start to end and have sort of a complete reference then this is the book I would recommend there is not a perfect overlap in particular We are just doing plain vanilla JavaScript Whereas the book uses the jQuery framework. So the JavaScript part is actually different there Then on each slide for each lecture, there are literature references and usually it's things like tutorials or smaller articles So you don't necessarily need to read the book And then it's important to mention that I'm in particular Borrowing heavily from the weapon database technology course at TU Delft by Claudia Hoff and Alessandro Boson So that's really a good place to look at if you look at their website on github. They have lots and lots of additional resources My impression is that this course goes much more into depth and is potentially much more difficult As discussed this course is really on a pretty broad level going quickly through the basic stuff And this is also regarding the course book. I've gotten the feedback previously that In the assignments, which of course you will probably not see but I'm generally there's lots of googling involved how to do things And that's actually maybe the key part of learning web development that Lots of things are on Google and in web development. They are simply changing quickly So it is probably the most important skill if you want to stay in this area to be able to find the right information On web development. So this is also Why take why it takes such a big part in this course basically learning to find the right tutorials go through the official documentation and things like that Okay, that's essentially the organizational part. So let's look a bit at Where the web comes from why do we do web programming and where are we? And again, there are probably much better resources for that But this is just a quick run through the history So the World Wide Web in itself was invented by Tim Berners-Lee In 89, but it was then public in 91. The first website in history is actually still accessible So you can click this link in the slide set to see it And it's just hypertext and that's the original idea of having text of having information And the hyper essentially means we are extending this with additional elements And the most important one is probably the hyperlink. So we have text and we can reference other Hypertexts, of course over time this has evolved into what we call hypermedia. So we have Not only text. We also have for example pictures. We have animations. We have different elements that are beyond text So that's what we generally talk about and This is formatted in the hypertext markup language, which is the long form of HTML So that's what we write websites in and these websites are then viewed in a browser So the browser is able to read HTML code and display something that looks more human readable to us That's the idea. Of course, you know how it looks like today This original idea of having an information space and you have some documents that show you different things has evolved quite substantially so the web is pretty much Driving lots of applications lots of functionality that we use as a society on an everyday level I've linked here a couple of websites that say in the old days I would say in the early days of the the internet which goes from for example the the original Netscape website that essentially just shows information to the Lego website for example, which played heavily around with animations gifts showing animated content and From a design perspective today, they are probably quite ugly to look at but that's how it evolved and One important thing just fast forward that I decided to discuss because it's I think important to know for today's status of the internet is that as discussed if we have hypermedia hypertext we look at this in a browser and There are a lot of these browsers nowadays. We're using tools like Firefox or Chrome or Edge But at some point in time We had essentially two of them and that was the Microsoft Internet Explorer and the Netscape Navigator and more or less a war or say conflict erupted around them that they try to essentially win the market and That was done by using different distribution means that for example Internet Explorer was automatically Installed whenever you would install Microsoft Windows It was done by trying to have different costs one was for free the other one was maybe not or by bundling it as discussed for instance with Microsoft Windows or with any kind of CDs that would allow you to access the internet And the problem this resulted in is that the standards didn't develop quick enough So you had websites that were essentially designed for one browser only because they used certain elements of the html language Or certain features that were only present in one browser and this rapidly evolved that he essentially had two sets of valid tags of valid features and Designers developers had to make the decision. How are we optimizing our website? Are we saying you should only watch this you should only visit this website and Internet Explorer and then design it accordingly? This has stopped to some extent so this standardization has gotten much better that things look at least very similar in most browsers But we are still seeing this to some extent that websites are developed that only work in One browser for example the one I'm listing here requires a browser that has web kit Which is one of the technologies and it happens to simply not work on Firefox Ironically, it's a website about web design And this is of course a bit bad practice. So if you go into development of websites think about Compatibility will later talk about accessibility. How do you make sure that your website is actually reaching a Broad audience instead of restricting it So if we learn anything from these browser wars is maybe to not try to use the most fancy feature That we can think of but it only works in a single browser Now why I why should we have a course on web development anyway at the university what's so special and I think there are a number of Topics that we need to discuss here one is that technology changes rapidly so web applications are always Constantly developing. There's lots of interesting stuff to learn there much quicker than for example Embedded software that just simply depends on the hardware It is accessible to Everyone every day and that means you have people using your applications that have no training That have no knowledge or very little knowledge in in it in the internet and computers The interface is playing a very large role So if you can make a website that is well designed that is very usable that works well on different devices and different browsers Then you actually have a large competitive advantage. So that's also an interesting aspect that maybe is not quite the same for other kinds of applications You of course have the potential to directly access a very large user base And if you think about how new companies like Facebook or Google are You see that a large to a large extent their success actually depends on this topic here They quickly got a lot of users and finally web applications are very interesting especially because of the societal responsibility that nowadays comes with it So we are discussing a lot of the topics for example around social networks around Collecting data about people. So this is getting much more important And this is really where the web has come a long way in a good and in a bad sense since the the early days When it was all about sharing a bit of information And then finally, it's of course the worldwide web It's not only an application that runs in your neighbor's computer, but it's really truly worldwide and Finally from a student perspective web programming is very often the entry point to programming so people try or start writing their own websites because It looks nice. It gives quick results before they maybe go into actual programming. So that's why we cover part of that Now the web is evolving quickly and it's getting quite complicated I'm here I have a tweet a recent one that discusses how modern web development looks like and essentially it's It's if you read this statement, it's a bunch of buzzwords of different technologies Of course, these are all made up apart from Chrome but the problem we're slowly seeing in web development is really that the technology stack the amount of different tools we're using is exploding and this requires you to be really up to date To Work in web development and it requires you also to have a pretty broad knowledge to adapt to these things So it's quite an exciting area in a way, but if you look at this statement It's also quite scary and sometimes maybe ridiculous how this is evolving What's interesting in the web is that there are a number of languages that are really core So the three we are teaching in this course HTML, CSS and JavaScript are definitely core technologies You can argue a bit about JavaScript, but at least in the browser It's it's one of the key things that we have today And then there's a lot of surrounding stuff. So if we go to the previous slide That's all these weird words that you see here that will essentially be the surrounding technology For example different frameworks basically different environments that make it easier to write applications and you might have heard of things like reactor node.js Topics like containerization where you might have heard things like kubernetes docker Things to deploy applications or related services Amazon AWS Microsoft Azure and there are a lot more different solutions to store Information like databases MySQL MongoDB firebase The list goes on and then all the tools that somehow surround the development the testing and actually the compilation or Translation of your code and for example, there might be things like VS code. He is lint Babel or webpack and Usually if you're a professional developer you use a combination of all of these things so it's really a bunch of different things that you need to be familiar with and One of the reasons why I have this slide is to you to say This course is supposed to be an entry point give a broad overview And that's why we are mainly located up here So we really do the core and the idea is if you have a core knowledge a good knowledge of these topics Then it's much much quicker to adapt to changing technologies because what you see is that up here the things change Not as quick these technologies have stayed quite similar over the last years. Whereas down here. It's it's almost madness Things change very very quickly So the idea is if you learn this well enough you might have a better time here There are some things where this might not help. So if you go for example into containerization There is maybe more knowledge needed about distributed systems networks Operating systems. So it's a different kind of knowledge here Similar if you want to be really good on persistence, then you definitely need some knowledge in databases, which we don't teach here So this is not everything you'll need, but it's a very good start Now that being said what are we concretely using and with that? I'll wrap up this introduction lecture We use plain HTML CSS JavaScript. So we give you a quick introduction. There's no front-end framework We don't do react here at Reykjavik University. There's a second course on that But if you look at this course through YouTube There are also a lot of good books that actually go into these front-ends But they all usually assume that you have some knowledge here So this course is a good start maybe to go into depth Afterwards on the back-end side So essentially the software that don't doesn't run in the browser, but it runs somewhere on the server in another computer There we use Node.js and Express.js. Those are frameworks It's I don't want to go into the discussion whether these are the best or the most hyped ones We simply use them because they are also using JavaScript. So We don't have to introduce yet another programming language. We can use the same We don't do any persistence in this course. It's an important topic, but it's simply not a part of this course So this is something you'd cover in other courses on databases And then finally we use of course some corresponding tools for example for testing in our case We use the JavaScript testing tools mocha and chai. That's just a Decision I made. There is no proper argument of why this might be better or not than other tools Then in all my examples, I use VS code as an IDE Simply because it exists for different platforms and because it's easy and quick again I don't need to argue whether or not this is the best solution. It's one that works Everything I display and test is usually done in Firefox and Chrome So again, these are probably the two largest ones. There could be other choices. We use those Then at some point when we go to the back end We will use a tool called postman and that's used to send requests without a browser So it's essentially a testing or debugging tool to send requests around Which can be quite complicated if you want to do that through for example Firefox. So At this point in time, you don't really need to understand what this does. You'll see that later in the course And then as already discussed we use Node.js and NPM, which is the environment that comes with node. It's basically used to Install dependencies. So if you want to use a certain library or functionality, you use NPM We will see that a lot later Good That's it for the introduction. So now you should have an idea what this course is about and whether it's something for you or not I'll be happy to get questions from you if there are any Either directly in the videos or through my personal website. You can find my email address as well. So Don't shy away from Writing and the next lecture when we actually start is going into the basics of networking and going into the HTTP protocol so that we have some kind of understanding of how the World Wide Web actually works and how the communication works So that's it for now. Thank you very much for watching