Modern Web Development

Maurice de Beijer

What are we going to coverHTML MarkupCascading Style SheetsJavaScriptReal Time Web

Who am IMaurice de Beijer.The Problem Solver.Microsoft CSD MVP.DevelopMentor instructor.Twitter: @mauricedb of @HTML5SupportNLBlog:

http://msmvps.com/blogs/theproblemsolver/Web:http://www.HTML5Support.nlE-mail: mauricedb@computer.org

HTML5 Semantic markupNew HTML5 elements

<nav><section><header><footer><article><aside>

Cascading Style SheetsLots of new useful CSS3 featuresPreviously they would require script or extra

markupUsing native CSS3 is much faster

CSS 3Rounded corners

.box {border-radius: 10px;} Drop shadows

.box {box-shadow: 10px 5px 5px grey;} Gradients

.box {background: linear-gradient(Yellow, Lime);}Transforms

.box:hover {transform: scale(1.2);}Transitions

.box {transition: transform 1s ease-in;}

CSS 3Media queries

@media screen and (max-width: 1024px) {     aside  {         display: none;     } }

Multi column textarticle {column-count: 3; }

LESS/SASS = CSS done rightCSS is nice but not perfect

StaticLots of repetition

LESS and SASS try to solve these problemsDefine variablesUse mixinsNest rulesEtc.

JavaScript librariesjQuery is the king!But these are many other useful ones

Underscore.jsFunctional programming support

Backbone.jsModel - View - Controller

Knockout.jsModel - View - ViewModel

Unit testing JavaScriptWe need to test our code

Even more important in a dynamic languageUnit testing is a first mustMany test libraries

QUnit is used to test jQuery

JavaScript is the Assembly Language

for the Web

Compiling to JavaScriptThe list of languages that compile to

JavaScript is longhttps://github.com/jashkenas/coffee-script/wiki/

List-of-languages-that-compile-to-JSSome popular static ones:

Google Web ToolkitWritten in Java

Script# Written in C#

CoffeeScriptTypeScript

The real time webHTML5 introduces WebSocketsSocket communication between browser and

serverFully duplexBut very low level

Several libraries build on top of thisSocket.IOSignalR

ConclusionThe world of the web developer is changing

CSS3 additions mean we write less UI JavaScriptThere are many powerful frameworksLanguages like TypeScript make it easier to

write large applicationsThe real time web will make this even more

responsive

Embrace change!