SlideShare a Scribd company logo
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
demo
CSS3 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
demo
RequireJS
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
demo
TypeScript
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 Controller
public 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 hub
public 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>
demo
SignalR
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

More Related Content

Viewers also liked

From zero to hero with running your asp.net core 1 application in a docker co...
From zero to hero with running your asp.net core 1 application in a docker co...From zero to hero with running your asp.net core 1 application in a docker co...
From zero to hero with running your asp.net core 1 application in a docker co...
Maurice De Beijer [MVP]
 
Is React reactive?
Is React reactive?Is React reactive?
Is React reactive?
Maurice De Beijer [MVP]
 
Supporting large scale React applications
Supporting large scale React applicationsSupporting large scale React applications
Supporting large scale React applications
Maurice De Beijer [MVP]
 
Building UWP apps with React-Native
Building UWP apps with React-NativeBuilding UWP apps with React-Native
Building UWP apps with React-Native
Maurice De Beijer [MVP]
 
The productive developer guide to React
The productive developer guide to ReactThe productive developer guide to React
The productive developer guide to React
Maurice De Beijer [MVP]
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
Robert Nyman
 

Viewers also liked (6)

From zero to hero with running your asp.net core 1 application in a docker co...
From zero to hero with running your asp.net core 1 application in a docker co...From zero to hero with running your asp.net core 1 application in a docker co...
From zero to hero with running your asp.net core 1 application in a docker co...
 
Is React reactive?
Is React reactive?Is React reactive?
Is React reactive?
 
Supporting large scale React applications
Supporting large scale React applicationsSupporting large scale React applications
Supporting large scale React applications
 
Building UWP apps with React-Native
Building UWP apps with React-NativeBuilding UWP apps with React-Native
Building UWP apps with React-Native
 
The productive developer guide to React
The productive developer guide to ReactThe productive developer guide to React
The productive developer guide to React
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
 

Similar to Modern web development

Techdays 2013 NL - Serious Request met Windows Azure
Techdays 2013 NL - Serious Request met Windows AzureTechdays 2013 NL - Serious Request met Windows Azure
Techdays 2013 NL - Serious Request met Windows Azure
Michaël Hompus
 
Sitecore - Onder de motorkop van ParTechIT.nl
Sitecore - Onder de motorkop van ParTechIT.nlSitecore - Onder de motorkop van ParTechIT.nl
Sitecore - Onder de motorkop van ParTechIT.nl
Ruud van Falier
 
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo BruggeHTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge
Pureplexity
 
Nord Toelichting Techniek
Nord Toelichting TechniekNord Toelichting Techniek
Nord Toelichting Techniektjercus
 
Rf meetup 20210412 robo_con
Rf meetup 20210412 robo_conRf meetup 20210412 robo_con
Rf meetup 20210412 robo_con
christiantester
 
Node.js: waarom en hoe
Node.js: waarom en hoeNode.js: waarom en hoe
Node.js: waarom en hoe
Frank Louwers
 
Hoe kies ik het juiste javascript front end framework?
Hoe kies ik het juiste javascript front end framework?Hoe kies ik het juiste javascript front end framework?
Hoe kies ik het juiste javascript front end framework?
Eduvision Opleidingen
 
New and improved ASP.NET MVC 5
New and improved ASP.NET MVC 5New and improved ASP.NET MVC 5
New and improved ASP.NET MVC 5
Maurice De Beijer [MVP]
 
Drupal intro 2010
Drupal intro 2010Drupal intro 2010
Drupal intro 2010
Hans Rossel
 
TYPO3 Congres 2012 - Aan de slag met TYPO3 Extbase en Fluid
TYPO3 Congres 2012 - Aan de slag met TYPO3 Extbase en FluidTYPO3 Congres 2012 - Aan de slag met TYPO3 Extbase en Fluid
TYPO3 Congres 2012 - Aan de slag met TYPO3 Extbase en Fluid
TYPO3 Nederland
 
NL Front-end Guidelines (HTML,CSS,Javascript)
NL Front-end Guidelines (HTML,CSS,Javascript)NL Front-end Guidelines (HTML,CSS,Javascript)
NL Front-end Guidelines (HTML,CSS,Javascript)
Mathijs Jong
 
Unleash the power of raven db
Unleash the power of raven dbUnleash the power of raven db
Unleash the power of raven db
Maurice De Beijer [MVP]
 
Drupal8
Drupal8Drupal8
Drupal8
Hans Rossel
 
Met het achief op het web: 1995 tot 2011
Met het achief op het web: 1995 tot 2011Met het achief op het web: 1995 tot 2011
Met het achief op het web: 1995 tot 2011
Eva Simon
 
Durandal at Team4Talent
Durandal at Team4TalentDurandal at Team4Talent
Durandal at Team4Talent
Peter Morlion
 
PFZ Workshop - Automatiseren van functionele tests
PFZ Workshop - Automatiseren van functionele testsPFZ Workshop - Automatiseren van functionele tests
PFZ Workshop - Automatiseren van functionele testsRichard Tuin
 
Html5 jeugdwerknet
Html5 jeugdwerknetHtml5 jeugdwerknet
Html5 jeugdwerknetHans Rossel
 
Basis Javascript
Basis JavascriptBasis Javascript
Basis Javascript
Maarten Pijnenborg
 

Similar to Modern web development (20)

Excellent rest met de web api
Excellent rest met de web apiExcellent rest met de web api
Excellent rest met de web api
 
Techdays 2013 NL - Serious Request met Windows Azure
Techdays 2013 NL - Serious Request met Windows AzureTechdays 2013 NL - Serious Request met Windows Azure
Techdays 2013 NL - Serious Request met Windows Azure
 
Sitecore - Onder de motorkop van ParTechIT.nl
Sitecore - Onder de motorkop van ParTechIT.nlSitecore - Onder de motorkop van ParTechIT.nl
Sitecore - Onder de motorkop van ParTechIT.nl
 
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo BruggeHTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge
 
Nord Toelichting Techniek
Nord Toelichting TechniekNord Toelichting Techniek
Nord Toelichting Techniek
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overview
 
Rf meetup 20210412 robo_con
Rf meetup 20210412 robo_conRf meetup 20210412 robo_con
Rf meetup 20210412 robo_con
 
Node.js: waarom en hoe
Node.js: waarom en hoeNode.js: waarom en hoe
Node.js: waarom en hoe
 
Hoe kies ik het juiste javascript front end framework?
Hoe kies ik het juiste javascript front end framework?Hoe kies ik het juiste javascript front end framework?
Hoe kies ik het juiste javascript front end framework?
 
New and improved ASP.NET MVC 5
New and improved ASP.NET MVC 5New and improved ASP.NET MVC 5
New and improved ASP.NET MVC 5
 
Drupal intro 2010
Drupal intro 2010Drupal intro 2010
Drupal intro 2010
 
TYPO3 Congres 2012 - Aan de slag met TYPO3 Extbase en Fluid
TYPO3 Congres 2012 - Aan de slag met TYPO3 Extbase en FluidTYPO3 Congres 2012 - Aan de slag met TYPO3 Extbase en Fluid
TYPO3 Congres 2012 - Aan de slag met TYPO3 Extbase en Fluid
 
NL Front-end Guidelines (HTML,CSS,Javascript)
NL Front-end Guidelines (HTML,CSS,Javascript)NL Front-end Guidelines (HTML,CSS,Javascript)
NL Front-end Guidelines (HTML,CSS,Javascript)
 
Unleash the power of raven db
Unleash the power of raven dbUnleash the power of raven db
Unleash the power of raven db
 
Drupal8
Drupal8Drupal8
Drupal8
 
Met het achief op het web: 1995 tot 2011
Met het achief op het web: 1995 tot 2011Met het achief op het web: 1995 tot 2011
Met het achief op het web: 1995 tot 2011
 
Durandal at Team4Talent
Durandal at Team4TalentDurandal at Team4Talent
Durandal at Team4Talent
 
PFZ Workshop - Automatiseren van functionele tests
PFZ Workshop - Automatiseren van functionele testsPFZ Workshop - Automatiseren van functionele tests
PFZ Workshop - Automatiseren van functionele tests
 
Html5 jeugdwerknet
Html5 jeugdwerknetHtml5 jeugdwerknet
Html5 jeugdwerknet
 
Basis Javascript
Basis JavascriptBasis Javascript
Basis Javascript
 

More from Maurice De Beijer [MVP]

Practice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components AppPractice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components App
Maurice De Beijer [MVP]
 
A foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software ProjectA foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software Project
Maurice De Beijer [MVP]
 
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressSurati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Maurice De Beijer [MVP]
 
Build reliable Svelte applications using Cypress
Build reliable Svelte applications using CypressBuild reliable Svelte applications using Cypress
Build reliable Svelte applications using Cypress
Maurice De Beijer [MVP]
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Maurice De Beijer [MVP]
 
Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18
Maurice De Beijer [MVP]
 
Building reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and AzureBuilding reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and Azure
Maurice De Beijer [MVP]
 
Building large and scalable mission critical applications with React
Building large and scalable mission critical applications with ReactBuilding large and scalable mission critical applications with React
Building large and scalable mission critical applications with React
Maurice De Beijer [MVP]
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Maurice De Beijer [MVP]
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
Maurice De Beijer [MVP]
 
Building reliable web applications using Cypress
Building reliable web applications using CypressBuilding reliable web applications using Cypress
Building reliable web applications using Cypress
Maurice De Beijer [MVP]
 
Getting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent renderingGetting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent rendering
Maurice De Beijer [MVP]
 
React suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred HitchcockReact suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred Hitchcock
Maurice De Beijer [MVP]
 
From zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScriptFrom zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScript
Maurice De Beijer [MVP]
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
Maurice De Beijer [MVP]
 
The new React
The new React The new React
The new React
Maurice De Beijer [MVP]
 
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScriptFrom zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScript
Maurice De Beijer [MVP]
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
Maurice De Beijer [MVP]
 
I am hooked on React
I am hooked on ReactI am hooked on React
I am hooked on React
Maurice De Beijer [MVP]
 
Create flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apisCreate flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apis
Maurice De Beijer [MVP]
 

More from Maurice De Beijer [MVP] (20)

Practice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components AppPractice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components App
 
A foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software ProjectA foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software Project
 
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressSurati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
 
Build reliable Svelte applications using Cypress
Build reliable Svelte applications using CypressBuild reliable Svelte applications using Cypress
Build reliable Svelte applications using Cypress
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
 
Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18
 
Building reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and AzureBuilding reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and Azure
 
Building large and scalable mission critical applications with React
Building large and scalable mission critical applications with ReactBuilding large and scalable mission critical applications with React
Building large and scalable mission critical applications with React
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
Building reliable web applications using Cypress
Building reliable web applications using CypressBuilding reliable web applications using Cypress
Building reliable web applications using Cypress
 
Getting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent renderingGetting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent rendering
 
React suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred HitchcockReact suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred Hitchcock
 
From zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScriptFrom zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScript
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
The new React
The new React The new React
The new React
 
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScriptFrom zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScript
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
I am hooked on React
I am hooked on ReactI am hooked on React
I am hooked on React
 
Create flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apisCreate flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apis
 

Modern web development