modern web development
DESCRIPTION
TRANSCRIPT
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: [email protected]
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!