Modern web development

3,235 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,235
On SlideShare
0
From Embeds
0
Number of Embeds
1,752
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Modern web development

  1. 1. Modern web developmentMaurice de Beijer
  2. 2. 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
  3. 3. Agenda• CSS3 – LESS – Web Essentials 2012• JavaScript – Asynchronous Module Definition – TypeScript – Frameworks/Libraries• Communicatie – MVC met een JSON resultaat – WebApi – SignalR
  4. 4. www.microsoft.com
  5. 5. www.marktplaats.nl
  6. 6. www.ebay.com
  7. 7. CSS 3• Transformaties• Transities• Ronde hoeken• Transparantie• :before en :after pseudo elementen• Media queries
  8. 8. Ondersteuning
  9. 9. Soms is er een prefix nodig
  10. 10. LESS• The Dynamic Stylesheet language• Wordt veel gebruikt voor complexe CSS – Bootstrap – Semantic
  11. 11. LESS is CSS met ...• Variabelen• Functies• Hiërarchie
  12. 12. Web Essentials 2012• CSS3 IntelliSense• LESS• TypeScript• ZenCoding• CSS/JavaScript Minification
  13. 13. demoCSS3 en LESS
  14. 14. JavaScript Ontwikkeling• Asynchronous Module Definition• TypeScript• Frameworks/Libraries
  15. 15. Asynchronous Module Definition• ECMAScript6 module loader – De toekomst• RequireJS – Een veelgebruikte JavaScript module loader
  16. 16. Global Namespace Pollution
  17. 17. Een module
  18. 18. Veel script referenties
  19. 19. RequireJS
  20. 20. demoRequireJS
  21. 21. TypeScriptTypeScript is a language for application- scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plainJavaScript. Any browser. Any host. Any OS. Open Source.
  22. 22. TypeScript• Geeft ons ECMAScript 6 features – Classes – Interfaces – Modules• Een super set van JavaScript
  23. 23. TypeScript• Een type checking compiler• Kan declaratie bestanden gebruiken – Zie DefinitelyTyped
  24. 24. demoTypeScript
  25. 25. Frameworks/Libraries• Backbone• Angular• Ember• Knockout• Sencha Ext JS• ...
  26. 26. 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
  27. 27. Communicatie• Verschillende opties – MVC controller met JSON – WebAPI – SignalR
  28. 28. MVC controller met JSON• Simpel te doen is ASP.NET MVC• Soms goed genoeg voor eigen websites – Hou rekening met caching!
  29. 29. 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
  30. 30. 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) { }}
  31. 31. 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
  32. 32. 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); }}
  33. 33. 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>
  34. 34. demoSignalR
  35. 35. 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

×