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