Na een kort nachtje zijn we weer aanwezig bij de tweede dag van de Techdays. Het programma van deze dag is veel gevarieerder. Dus het belooft een leuke dag te worden.
Ook dit keer even een disclaimer: ik type live mee met een Surface RT inclusief toetsenbord op schoot. Ik zit meestal op een te krap stoeltje of zelfs op een kartonnen krukje buiten de zaal als deze al vol is. Excuses dus voor de typos.
HTML5: A Canvas Deep Dive
Christian Peeters
Het Canvas is een element in HTML5. Je kunt er weinig op instellen, alles gebeurt in JavaScript. Denk aan tekenen van lijnen, blokken, cirkels, plaatsjes, etc…
En Het is Fire&Forget. Iets wat getekend is, kan niet meer aangepast worden (zoals verplaatsen, vergroten). Hierdoor is het wel bloedje snel want het canvas hoeft niks te onthouden. De rest moeten we zelf doen.
Het canvas kan goed met 2D omgaan. En sinds de introductie van WebGL kan ook beperkt 3D ondersteunen.
Christian gaf een aantal korte demo’s die standaard gereedschap van het canvas toonde. Leuk was de combinatie van drag/drop/gravity/friction. Maar dit was maar één balletje. Maar het bleef performen tot aan 5000 elementen. Bij 1000 balletjes bleek het scherm nog op 50FPS te zitten. En de tijd ging vooral in het uitvoeren van JavaScript te zitten.
Tip: Teken niet vaker dan de refreshrate van het scherm. Zet de window interval op een deelbare factor van de refreshrate.
Tip: teken niet als het scherm niet getoond is. Pauseer dan. Gebruik hiervoor de RequestAnimationFrame() (let op backwards compatibility).
Daarna vertelde Christian over het gebruik van Sprites. Dus uit een grote bitmap wordt een stuk uitgesneden en getoond. Denk aan een rennend mannetje. Je toont dan enkele deelgebieden van een plaatje met daarin meerdere riddertjes er in. Verbazend hoe makkelijk een springend riddertje tegen een bewegende achtergrond getoond werd.
Tip: voorkom subpixel tekenen. Dit is echt traag, zeker 10 procent. Rond dus posities af of pak slimme getallen.
Tip: voorkom teveel downloads. CSS Sprites zijn slimmer.
Tip: gebruik webworkers. Dit is threading in javascript.
Een webworker is een bestand met een onmessage functie die werk uitvoert en de uitkomst in een postmessage teruig stuurt.
Tip: Tekst/drop shadows tekenen is erg traag! Teken tekst op een subcanvas (soort van prerenderen). En teken dat canvas op het hoofdcanvas.
Tip: Teken een inerte background in een aparte canvas.
Tip: uitvragen van collision kan door transparantie uit te vragen. Zit er geen plaatje dan is er geen collision.
Tip: touch ondersteuning. Zet touch ondersteuning van canvas op None, let bij oudere browsers op nevengedrag. En de OnMouseMove kan vervangen worden door de ONPointerMove. Dit geeft veel meer informatie.
Als je het hele canvas wilt draaien/kantelen/transformeren/scewing gebruik daar css voor.
Dan video, wat kan het canvas daarbij betekenen?
Christian demonstreerde een GreenScreen effect. Erg gaaf.
Ook een webcam was erg eenvoudig te integreren op het canvas. Christian demonstreerde een vorm van motioncaption op het canvas. Heel grappig en eigenlijk heel simpel. Hij trok uit de videostream twee beeldjes van elkaar af.
3D is leuk maar WebGL is niet prettig. Gelukkig ondersteunt Microsoft Babylon. Er was ook een Three bibliotheek demo.
Christian, dankjewel voor de leuke presentatie en de koffie!
Xamarin: mobiele store-ready en native apps voor ios/android in c#
Roland Guijt
Xamarin maakt het mogelijk om met C# native apps te bouwen. Het is gebaseerd op Mono. En het heeft een runtime. Apple wilt geen runtime toestaan. Voor IOS hebben ze dus de app en de runtime voorgecompileerd.
De snelheid is dus net zo goed als een native app. De footprint is wel wat groter, denk aan 2,5 mb.
Capabilities/sensors zijn gevat in c# classes. En ze lijken heel veel op de oplossing van het onderliggende platform. Helaas is dit dus UI specifiek want platform specifiek. MVVM Cross heeft hier een oplossing voor.
Xamarin bouw je in de IDE van Xamarin zelf of met een VS201X plugin. Helaas betekent dit wel een duurdere licentie. Gebruik Git om code te delen tussen de omgevingen.
MSDN gebruikers krijgen een redelijke korting van de (jaarlijkse, persoonlijke) licentie.
Gebruik voor Android de projecten rond de versie Icecream sandwitch. Dan bereik je 80 procent van de markt en je heb de meeste features voor je code. Je kunt ook direct ook veel nuget packages toepassen (denk aan Azure mobile services).
Debuggen? Gebruik bij voorkeur een fysiek device en debug daarop. Emulators zijn er wel maar die zijn traag en niet stabiel. Wellicht heb jij geluk met de X86 emulator. Test anders eens de ARM emulator. Let er bij de emulator op dat je, als je google specifieke zaken gebruikt (zoals Google maps) je de juiste emulator kiest (dus geen kale android versie).
De view binnen Android is gebaseerd op HTML (tegenover xaml dus). Dit is redelijk leesbaar, los van de leercurve. Android kent activities (dit zijn zegmaar de code behind bestanden). Let op de aparte koppeling van schermcomponenten van de code-behind. Schermelementen moet in eigen code gezocht worden op ID en in members geplaatst worden. Gelukkig zijn ID’s als resources beschikbaar.
En intents zijn acties uit te voeren door het os. en die moet ik opstellen en als activiteit activeren. Android kan dan fatsoenlijk binnen de context van de aanvraag de intent uitvoeren (android beslist bv. welke app de kaart mag tonen, etc.)
Sensors moet je aanvragen: …GetBestProvider. Ook hier beslist Android wel provider beschikbaar en het beste is. Lokaties kunnen op GPS gebaseerd zijn, maar ook op zendstation of IP adres.
Voor Apple moet je een Mac tot je beschikking hebben. Roland gaf een demonstratie met een Apple ‘in the cloud’.
MvvmCross kan viewmodel binden tegen verschillende views, op verschillende os’en. Must have dus.
Internet of Things
Anko Duizer
IoT is een hype. Kijk ook naar Internet of People en Internet of Everything. MSFT probeert hier op in te spelen om dit vooral makkelijker te maken.
IoT komt op alle vlakken voor. Zichtbaar zijn de wearables maar het zit ook in auto’s (smart cars), ziekenhuizen. Maar interessant is de latente data. Dus sensors leveren data, heel veel data. Maak daar eens informatie van.
En je kunt sturen op die data en de devices kunnen dus acteren op stuurcommando’s.
In de meeste architecturen komt een gateway voor: sensoren dragen data af aan een tussenpartij of gebruiken de gateway omdat ze zelf geen internet ondersteunen (denk aan bluetooth of nfc).
Maar de backend kan heel goed Azure zijn. Met daarop oa. Azure websites of mobile services.
Het product reijkjavik kan een standaard oplossing worden, los van zelf gebouwde oplossingen.
Dat raakt dit dan: Rx, HD Insight, azure storage, media services. Storm (complex event processing) is ook een interessant onderdeel in de hele keten.
Orleans is een framework bovenop Azure om echt te schalen. Iedere gebruiker wordt in een Actor omgezet. Dit is bij Halo4 al in gebruik.
Waarom in de cloud? Omdat je ontzettend veel connectie moet onderhouden en ontzettend veel data krijgt, inclusief piekmomenten. De cloud is ideaal hiervoor.
Er zijn ontzettend veel devices. Anko toont Windows Phone, Raspberry Pi en Arduino.
Maar ook interessant zijn de devices kleiner dan de gum van je potlood. Als die twee jaar meegaan op een batterij, en aan het internet kunnen hangen, dan heb je een leuke oplossing. Maar denk ook aan prijs, protocol en geheugengrootte. Headless spul met één of een enkele sensor is de grootste markt. Intel Galileo is een goed voorbeeld.
Het .Net Micro framework is een zeer interessante oplossing. Kijk eens naar Netduino want daar staat .Net vooraf al op.
Maar MSFT is onderscheidend met Azure, de backend. En wat zijn de uitdagingen? Denk aan connectivity, security en scale.
Reykjavik onsteunt met communicatie verschillende industrieprotocollen. En onder dat protocol communiceert over een bepaald medium/transportmiddel. De gateway draait in Azure bovenop Servicebus. En ieder device krijgt zijn eigen inbox/outbox (queues). Via topics kun je berichtenstromen samenvoegen en daarna wil je data scheiden van alerts.
Terug kun je ook berichten filteren om specifieke berichten op de outbox queues te zetten.
En je kunt adapters aansluiten op de telemetry. En je kunt een Command host voor commands en notificaties opzetten.
De gehele gateway is op schaalbaarheid gericht. De huidige grens zit op 1 miljoen berichten per seconde.
Nitrogen is open source. Draait op Node.js. Draait op de servicebus. http://nitrogen.io
Later ben ik nog naar de sessie van Maarten Struys geweest, ook over IoT. Deze sessie was ook van prima kwaliteit en de twee sessies sluiten prima op elkaar aan.
Strekking is dat de marktpotentie erg groot is van deze technologie. IoT betekent veel data. Veel data betekent veel informatie. Veel informatie betekent kansen om geld te verdienen.
Maar iedereen heeft een andere definitie voor “Internet of Things”. En hoe zit het met de gevoeligheid van de gegevens?
Prism for the windows runtime
Mike Taulty
Deze sessie gaat specifiek over deze versie van prism, er zijn namelijk meerdere versies, er is ook een WPF versie.
Prism is een MVVM implementatie. Het is een project van het Microsoft patterns/practices team. Het geeft sturing en ondersteuning om kwaliteit applicaties te bouwen. Het is gelaagd opgebouwd. Denk aan navigatie, opslag, schermrotatie, etc.
Prism geeft documentatie, class libraries en source code, quick start tutorials en een referentie implementatie. En er zijn ook project/item templates. De documentatie is gewoon een (pdf) boek, 250 pagina’s en lees deze in delen. Maar lees het! En het is al voor Windows 8.1 klaar.
Package Prism.StoreApps haal je op via Nuget.
Daarna begon Mike met de demo’s… Het is lastig deze in tekst te vangen. Maar dit was erg onderhoudend en ik ga hier zeker op verder voor mijn eigen applicaties.
Ook de referentie app werd getoond. Dit lijkt erg goed bruikbaar voor de gemiddelde applicatie. Oppakken dus.
Samengevat, deze sessie was erg leerzaam en bruikbaar.
http://prismwindowsruntime.codeplex.com
Update:
Het is nog even wachten op de video’s maar ik heb de volgende presentatiesheets al kunnen achterhalen!
Sander van de Velde 