modern web development

Modern web development

Maurice de Beijer

Wie ben ik

• Maurice de Beijer• The Problem Solver• Microsoft Integration MVP• DevelopMentor instructor• Twitter: @mauricedb• Blog: http://msmvps.com/blogs/theproblemsolver/

• Web: http://www.HTML5Support.nl• E-mail: mauricedb@computer.org

Agenda• CSS3

– LESS– Web Essentials 2012

• JavaScript– Asynchronous Module Definition– TypeScript– Frameworks/Libraries

• Communicatie– MVC met een JSON resultaat– WebApi– SignalR

www.microsoft.com

www.marktplaats.nl

www.ebay.com

CSS 3• Transformaties• Transities• Ronde hoeken• Transparantie• :before en :after pseudo elementen• Media queries

Ondersteuning

Soms is er een prefix nodig

LESS• The Dynamic Stylesheet language• Wordt veel gebruikt voor

complexe CSS– Bootstrap– Semantic

LESS is CSS met ...• Variabelen• Functies• Hiërarchie

Web Essentials 2012• CSS3 IntelliSense• LESS• TypeScript• ZenCoding• CSS/JavaScript Minification

demoCSS3 en LESS

JavaScript Ontwikkeling• Asynchronous Module Definition• TypeScript• Frameworks/Libraries

Asynchronous Module Definition

• ECMAScript6 module loader– De toekomst

• RequireJS– Een veelgebruikte JavaScript module

loader

Global Namespace Pollution

Een module

Veel script referenties

RequireJS

demoRequireJS

TypeScript

TypeScript is a language for application-scale JavaScript

development. TypeScript is a typed superset of JavaScript that compiles

to plain JavaScript. Any browser. Any host. Any OS. Open Source.

TypeScript• Geeft ons ECMAScript 6 features– Classes– Interfaces–Modules

• Een super set van JavaScript

TypeScript• Een type checking compiler• Kan declaratie bestanden

gebruiken– Zie DefinitelyTyped

demoTypeScript

Frameworks/Libraries• Backbone• Angular• Ember• Knockout• Sencha Ext JS• ...

Frameworks/Libraries• Een kwestie van voorkeur– Ember is populair binnen de Ruby

wereld– Knockout is populair binnen de .NET

wereld

• Nuttige vergelijkingen– TodoMCV– The Top 10 Javascript MVC

Frameworks

Communicatie• Verschillende opties–MVC controller met JSON–WebAPI– SignalR

MVC controller met JSON• Simpel te doen is ASP.NET MVC• Soms goed genoeg voor eigen

websites– Hou rekening met caching!

WebApi• Om een REST service te maken– Lijkt sterk op ASP.NET MVC

• Gebruikt content negotiation– Standaard XML en JSON

• OData ondersteuning– Filter, sortering etc

Een WebAPI Controllerpublic class BooksController : ApiController{ public IQueryable<Book> GetBook() { }

public HttpResponseMessage GetBook(int id) { }

public Book PutBook(Book book) { }

public HttpResponseMessage<Book> Post(Book book) { }

public void DeleteBook(int id) { }}

SignalR• Geeft ook push notificatie – Kan erg nuttig zijn in multi user

applicaties

• Gebruikt WebSockets als het kan– Valt anders terug op een ander

protocol

Een SignalR hubpublic class BooksHub: Hub{ public IEnumerable<Book> GetBooks() { var books = _repo.GetBooks(); return books; }

public void UpdateBook(Book book) { var newBook = _repo.UpdateBook(book); this.Clients.bookUpdated(newBook); }}

SignalR JavaScript<script src="~/Scripts/jquery.signalR-1.0.0.js"></script><script src="~/signalr/hubs"></script><script> $(function () { var hub = $.connection.booksHub; hub.client.bookUpdated = function (book) { };

function loadBooks() { hub.server.getBooks().then(function (books) { }); }

$("#updateBook").submit(function (e) { hub.server.updateBook(book); });

$.connection.hub.start(loadBooks); });</script>

demoSignalR

Conclusie• Het web is niet meer wat het

geweest is– Gebruikers verwachten steeds meer

• LESS maakt CSS makkelijker• TypeScript maakt JavaScript beter• WebAPI en SignalR–Maken communicatie beter