Web programming is fundamentally different from developing traditional applications: there is a different state management regime and the technologies in play are not under the control of any one vendor. Web development has also undergone considerable change in recent years as technology has evolved and matured. This course is designed to take people with little or no web programming experience and introduces them to the way web applications are built now. We introduce the protocols, languages and libraries that make up the current state of web development.
Web browsers interact with websites using the HTTP protocol so it is a fundamental aspect of web programming. We investigate the HTTP protocol, how it’s used and the resulting implications. We will also explore HTML 5 semantic markup, the HTML boxing model for layout and how styles affect your site’s appearance. Finally we will look at modern browsers, the
browser cache and Content Delivery Networks. Along the way we will see that understanding the developer tools in the browser itself becomes a key skill for a web developer.
Automated unit testing has become a common discipline for software developers generally. But with dynamic languages it becomes even more important as there is no compiler to pick up syntax errors and other issues that are immediately apparent in statically typed languages. We discuss how comprehensive tests can assist you and we look at some common testing frameworks and techniques. We also look at some of the issues that AngularJS adds to the mix.
Good web design is hard; and many web developers do not have a good eye for colors, layout and fonts. Initially developed by Twitter, Bootstrap provides templates for layout and styling that allow even the most “design challenged” developer to create websites that look clean and coherent. We will illustrate how to take advantage of the out-of-the-box Bootstrap experience but also how to take as much control as you need to customise it. We will also show you how to build responsive, mobile-first websites.
Websites must pay close attention to identifying users, both to ensure that only authorised users can use sensitive parts of the site and also to provide them with a customised view of the functionality. Fortunately we do not have to start from scratch; there is already an established infrastructure to help us secure web applications: certificates, HTTPS, HTTP authentication, token based authentication and claims based authorisation. This module will look at how we can use these building blocks to implement security ourselves.
One increasingly popular way to structure a web application is to have a single HTML page that dynamically changes to display the content needed by the application. This can give a very fluid experience for the user but comes with its own issues: care needs to be taken with the HTML to ensure you don’t get issues such as id collision; the application needs an internal routing
For a truly dynamic feel to an application we need some way for the browser to become aware of changes of state on the server without the browser polling in the background. Over the years a number of techniques have been developed to solve this problem: Long polling, forever frames, server sent events and web sockets. We look at these technologies and we will see that not all of them are available on every browser. However, there are server side frameworks that simplify the use of these technologies and we will look at two: ASP.NET SignalR and NodeJS socket.io.
While using styles inline in an HTML element can give you the desired appearance, to truly achieve your layout and style goals in a manageable way requires a solid understanding of Cascading Style Sheets (CSS). Initially we look at various selectors – instructions to the browser about which elements to apply a style to. We will see that there are two concepts that determine the final resulting style of any element: style inheritance and the CSS cascade. Finally we look at how to can ensure that an element picks up the desired style by looking at the concept of specificity.
Although CSS is the core skill in creating the look of a website, it is missing some features that developers are used to working with – for example we find ourselves having to repeat “magic numbers” for things like widths, colors and margins. LESS is a CSS preprocessor that adds “programmability” features to CSS such as variables, functions, nesting and mix-ins.