Sorry this is taking so long. Something might have gone wrong. Please try reloading.


Solid Web Development

5 Days
Web, Patterns, JS Frameworks, .Net

Description

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.

Modules in Solid Web Development:

Web Fundamentals

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.

Introduction to JavaScript

This module introduces the JavaScript programming language - its history, syntax, built-in data types, and control flows will be covered. The parts of JavaScript that developers should avoid will also be discussed but still covered so that you'll know what to do when you encounter them. Even though this module doesn't assume any prior JavaScript knowledge, it doesn't treat you like you've never programmed before and even developers who've worked with the language should be able to walk away from this module with a much more solid understanding of JavaScript fundamentals.

Functional JavaScript

JavaScript treats functions as first-class objects. What does that even mean? We talk about the refreshing nature of functions in JavaScript and how closures enable a style of expressiveness that can seem completely alien to developers who have only worked with strictly imperative languages. We also look at the way JavaScript objects work with regard to prototypical inheritance. To developers from a strictly OO world this, again, is an unfamiliar concept. By the end of this module, you'll be familiar with, and confident in, using functional programming techniques to take your JavaScript skills to the next level. 

JQuery

Being able to interact with the DOM from your JavaScript code is a key aspect of developing web applications. When JQuery was developed it took away much of the 'heavy lifting' and provided a far more concise and powerful way of accessing and changing the page content dynamically. We look at how JQuery works and show how, although these days we tend to use it less directly, it is the foundation upon which many modern JavaScript libraries are built.

Introduction to AngularJS

In this introductory module we will present the core parts of AngularJS leading to a simple first application. We show how to make an HTML page Angular aware; how angular directives are involved in determining the page structure and how to use expressions to display data on the page. We will look at controllers and how they are used to get data, from your JavaScript into your HTML page. We will also touch on filters and how to write and use them.  

JavaScript Unit Testing

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.

Bootstrap

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.

Getting data from the server

If our webpages are getting their data dynamically from JavaScript rather than rebuilding the page, we must have a way to expose the data and functionality from the server in a JavaScript-friendly way. The REST architectural style of building back-end services fits the bill nicely. It goes beyond using the traditional GET and POST verbs of HTTP to embrace HTTP as a full blown application protocol. We will look at what comprises a RESTful service and we will see that one option is to move data over HTTP as JavaScript Object Notation (JSON) – a format easily consumed by JavaScript. There are many frameworks we can use to build RESTful services and we will look at two: ASP.NET WebAPI and NodeJS. 

Securing the Web

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.

Consuming data from server

Once we have established how to securely expose functionality and data on the server, we need to explore how to consume those services from JavaScript. This module will look at Ajax, JQuery, the angular $http and $resource services and how to build your own custom angular services. 

Single Page Application

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
mechanism to determine when different parts of the UI should be displayed; with so much content and JavaScript loaded we need to pay attention to memory issues – both in terms of footprint and memory leaks (which traditionally disappear during a page refresh). We introduce SPAs, the benefits they bring and how we solve the associated issues.

Server notification

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. 

CSS

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. 

LESS

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.