What you will learn in this course

The Guerrilla Modern Web Development course teaches how to develop modern web applications using a combination of JavaScript, jQuery, AngularJS, Ajax, OWIN/Katana, ASP.NET Web API, HTML5 and CSS techniques. You will learn how to apply these various techniques to create modern client side web applications that use the power of the client via the rich document object model and the JavaScript runtime environment the browser provides.

Course highlights

  • Understand the power of JavaScript and how it differs from languages like C# or Java.
  • Discover jQuery for making it easy to work with the DOM.
  • Learn the modern client-side framework AngularJS and see why it’s so powerful.
  • Use Ajax and ASP.NET Web API to transport data between the client and server.
  • What is OWIN and Katana and how it can be used to build and secure applications.
  • Benefit from new HTML5 features such as web storage, offline, web sockets and more.
  • Use CSS and LESS to style your web applications using the Bootstrap framework.

Course outline and topics

Day 1

The JavaScript Programming Language
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.

Functions and Closures
JavaScript treats functions as first-class objects. What does that even mean? This module talks 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. 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.

Objects and Prototypes
JavaScript is a language that's full of objects and yet, seemingly paradoxically, has no classes. Defining constructor functions, inheriting properties from prototypes, and how to manage the elusive "this" reference are covered in this module. We'll see how to simulate classes using prototypes, but will try to reinforce JavaScript's native object model so that those crutches won't be necessary.

jQuery
jQuery is a popular open source JavaScript library used to enhance web pages and improve developer productivity. We will introduce the query and document manipulation capabilities of jQuery.

Day 2

AngularJS Introduction
This module provides an overview of the AngularJS Model View Controller framework. After this module you will have a basic understanding of the different parts of the AngularJS architecture and how to use them.

Building Custom AngularJS Directives
AngularJS ships with an impressive and very useful set of standard directives. In this module you will learn how to enhance and expand the HTML language by creating your own custom directives. These custom directives will let you add behavior to DOM elements as well as create reusable UI widgets. Using the techniques learned in this module you will be able to turn HTML into your own domain specific language (DSL).

Using AngularJS Routing to create SPAs
Traditional web applications perform full page loads when the user navigates from page to page. In this module you will learn how to use the routing features of AngularJS to create an application where this navigation is done only on the client’s machine. This allows us not only to navigate much faster but also to retain state on the client browser between the different parts of our application.

Testing AngularJS Applications
The way AngularJS is architected results in a highly testable application. In this module you will learn the various ways of testing your own application. We will look at both unit testing individual components as well as doing end to end testing of the complete application by automating the browser.

Day 3

AngularJS and Ajax
There are few applications that don’t need to communicate with the server using AJAX calls. In this module we will take a look at the $http and $resource services provided by AngularJS to perform AJAX requests.

OWIN and Katana
OWIN is a fairly new specification for modelling a HTTP server API for hosting web applications. The intent is to decouple the host from the application with the goal of providing a simpler programming model with potentially better performance than traditional web servers. While OWIN is a specification, Katana is Microsoft’s implementation of an OWIN host. In this session we will discuss OWIN, Katana and how to write applications and middleware that take advantage of this new and exciting hosting environment.

ASP.NET Web API
This module provides an introduction to ASP.NET Web API which is the .NET framework for building HTTP-based RESTful services. We will cover the motivation for HTTP oriented services as an alternative to SOAP-based services. We’ll examine the major tenets including the importance of URIs, HTTP methods and status codes, content negotiation and hypermedia all using ASP.NET Web API.

Securing ASP.NET Web API
ASP.NET Web API is the framework for building HTTP-based services and these services will need to be secured. This session introduces how security (confidentiality, integrity and authentication) is typically performed for HTTP-based services. We’ll also look at the modern approaches to authentication and authorization using OAuth and how to implement these approaches in your Web API application using Microsoft’s Katana authentication middleware. Once authentication has been established we'll then turn to authorization and how you can control access to the resources your Web API is exposing.

Day 4

HTML5 Networking
One of the most revolutionary features of HTML5 is the new WebSocket protocol which allows servers to push data to clients enabling almost “real time” notifications. This module looks at the client-side APIs you’ll need to be familiar with in order to use them and some different ways of setting up a server in order to handle the client requests.
 
HTML5 Offline
As strange as it sounds, HTML5 allows you to take your web applications offline. This module looks at the ways you can do this, specifying the resources the browser will need to download in order to be able to do anything offline and what events and methods you’ll need to know about in order to provide a proper, offline experience.

HTML5 Storage
Up until HTML5, the only way to store user-specific data has been to use cookies, but that’s extremely limited and pales in comparison to the features available in HTML5. This module looks at local storage, the embedded SQL database, and the alternative “IndexedDB”, how to detect them and how to use them.

More HTML5
HTML5 includes more new features than any other previous version of HTML. This module tries to wrap things up by covering the “smaller”, but still game-changing features that didn’t fit in the other modules. We will cover features such as the canvas, audio and visual elements, and the geolocation API.

Day 5

CSS3 Introduction
Cascading Style Sheets (CSS) is the presentation language of the web. This module introduces the latest version which is CSS3. We’ll also look at some of the new CSS properties that you can use to enhance the style of your documents.

CSS and LESS
While CSS is quite good at styling HTML, it’s not always very pleasant to work with. This module introduces LESS which provides reuse and a dynamic aspect to an application’s CSS.

Bootstrap
In this final module we’ll examine Bootstrap, a popular CSS framework for building modern and responsive user interfaces.

Automating Development Processes
Automating the process of building, testing, and deploying your application is a huge time saver. The development community is abuzz with tooling and frameworks to make this easier. In this module we’ll discuss some of the modern tools for developers such as Grunt, Bower, and TeamCity.