Tuesday, April 15, 2014

Web Essentials and Visual Studio 2013 Update 2 (RC)

Here are some of the cool new features in the Web Essentials and VS 2013 Update 2 (RC):
  • Create Azure Websites and Virtual Machine from Visual Studio
  • JavaScript code and style analysis via JsHint and JSCS

  • Manage Virtual Machines from Server Explorer
  • Image Previews
  • Create / Update  Image Sprites
  • Minify/Bundle JavaScript & HTML

There are ton of new exciting features. I would recommend to watch this “Fun” filled session presented by Scott Hanselman and Scott Hunter to get a good overview of what is in the release and what’s coming….

Thursday, April 03, 2014

Build 2014 - Day 2 (Notes)


  • 57% of fortune 500 companies are using Azure. More than 300 million active directory users. Over 1 Million SQL Databases.
  • Azure powered the NDC Sochi olympics live media streaming
  • Support for Puppet and Chef infrastructure configuration tools
  • New features on Azure IaaS
    • Create and Manage VM’s from Visual Studio
    • Enable Debugging from VS and attach it to the VM
    • Azure portal now has plugins and agents for Puppet and Chef integrated in the VM Creation wizard
    • Puppet Enterprise Console demo (load a class for microsoft-sysinternals)
    • Speech from CEO of Getty Images. They use puppet and azure heavily.
    • Autocale feature is now available
  • New features on Azure Paas
    • Web
      • Azure websites will now support “Java”
      • Azure websites “Staging” feature
      • Traffic Manager support. Intelligent customer routing. It will work with websties as well virtual machines.
      • New options on the VS ASP.net web project creation screen to create websites directly from there
      • Sync CSS changes from IE DOM Explorer to Visual Studio CSS file. This works in Chrome and IE
      • Sync the editing of HTML tag values with HTML files in Visual Studio. (LIVE !!!!)
      • JsHint integrated for VS JavaScript debugging
      • WebJobs can be simple console applications which can listen to events fro Queue and Blob updates
      • Free SSL certificates for Websites
      • CDN generally available now
    • Mobile
      • Mobile services now support Active Directory
      • New VS Project Template for creating Mobile Service
      • Support for Local and Remote debugging for Mobile Services
      • New Mobile Services .Net API’s which can be used in all apps.
      • Demo of win 8 app with portable library + sharepoint document upload + xamarian to port the app to iOS
      • Demo of “DocuSign” app on iPhone. Built using ,Net and SQL Server.
      • “Offline Data Sync” features for Mobile Services
      • Azure AD Premium offerings
      • Kindle support for Notification Hub
    • Data
      • SQL Azure Database now supports 500 GB + 99.95% SLA
      • Self Service restore feature ( for emergenices like DELETE from tablename Smile) is now builtin
      • Active geo replication feature. Primary and Secondary region data replication.
      • Updates to HDInsight. Supports Hadoop 2.2
      • YARN support
  • Programming Languages & Tools
  • The New Azure Management Portal (https://portal.azure.com )
    • Reimagined modern design with live breadcrumbs to navigate easily
    • Extensible design
    • Integrated TFS Work Items, Check-in views, Code views, Application Insights.
    • Integrated Code Editor for complete DevOps lifecycle
    • Resource Groups (group of resources which are running an application)
    • New Azure Powershell cmdlets to publish resource templates
    • Export the entire script of the resource group in a ,json file. Similar to infrastructure scripts
    • Azure Resource Manager preview available
    • Visual Studio Online GA
    • Screenshots:



  • Part 2 of Keynote
    • Key developer concerns/questions
      • Support Existing Investments
        • Classic Desktop apps. Demo of WPF connected Office 365 Calendar API’s
        • Demo of old VB6 apps transformed to a Web App using WebMap
      • Mobile and Cloud First
        • Demo of geofencing component for foursquare
        • Demo of Heapsylon Sensoria capturning the foot sensor data and showing live feed on a windows phone
        • Launch of new “App Studio” to generate Windows 8 apps from Websites.
        • New Offline support using the HTML5 Index DB to cache the browsed data

Building services for Connected Devices

  • Key Aspects
    • End to end asynchronous data flow
    • Direct HTTP based connectivity and inbound messaging
    • Queue drien message processing
  • General Purpose IoT Architecture
    • Device
    • Protocol Gateway (Ingest)
    • Messaging and Eventing
      • Embedded Devices + Mobile Devices
      • Message Processing
      • Bulk Storage & Latent Analytics
      • More Stuff
  • Sample fast food outlet application
    • Updates published to central server every minute (~5Kb XML files)
  • Solution –> Azure web role as ingest and Message Queue + Azure workerrole
  • Ingest and Protocol Management
    • Device almost always has to initiate connections
      • Firewalls, NATs, dynamic IP, general network weirdness
    • Socket Management, Hold Sockets open, keep alives – latency on push notifications
    • Protocol – HTTP, AMWP, MQTT, TCP, custom (bluetooth etc)
    • Direct connectivity vs concentrator/local gateway
      • Smart Grid / Power meters
    • Message response
  • VS Code demo
    • ServicePointManager configurations for improving latency and concurrent connections with Storage
      • UseNagleAlgorithm
      • DefaultConnectionLimit
      • Expect100Continue
    • Queue “CreateIfNotExistsAsync” method should only be called once. Use factory method which initializes this
    • Unbound concurrency can bring down the system. E.g. Task.Run in a for loop
    • Use a Task.WaitAll outside the for loop. Inside the for loop just add Tasks to a task list.
    • In memory queue –> .GetConsumingEnumerable() API is a friend
    • Managing configuration settings between Worker Role and Web Role can cause issues. Instead of using app.config and web.config use the Role configuration to store the settings.

High-performance web platform

  • The Physics of FAST (Physical factors in performance )
    • Network Utilization and Limits  (bandwidth in mbps)
      • 2G  (0.1)
      • 3G  (1.8)
      • 4G HSPA+ (3.4)
      • WiFi (6.1)
      • 4G LTE  (7.5)
    • We can increase the bandwidth but latency might still be the issue (clap and response clap demo)
    • Speed and Responsiveness
      • CPU Utilization  / Elapsed Page Load
      • Real and Perceived performance
    • Memory Utilization
      • important when targeting low-cost devices with your sites and apps
    • Power Consumption
      • Let it rest !
      • CPU Utilization, GPU Utilization and VSync
      • Thermo mitigation (won’t charge since the device is too hot)
      • 5 Watt for Phone devices
    • Targets Devices Matter
      • Priortize those
  • Web Runtime Architecture
    • Networking cache
    • Parsers
      • creates internal data structures
    • DOM Tree (DOM API, JavaScript, CSS Cascade)
      • JS is sent to a sandbox
    • Formatting
    • Layout
    • Display Tree
    • Painting
      • DirectX services
    • Compositing
      • Handing over to GPU
    • Input / Hit Testing / DMANIP
  • Event Tracing for Windows (ETW)
  • Measuring Performance
    • F12 Developer Tools (UI Responsiveness uses the ETW events)
    • Windows Performance Toolkit
  • Performance in the Real World
    • Network Optimization
      • Navigation Timing (F12 Console –> window.performance.timing)
      • Average Payload
        • 93 resources, 16 hosts
        • 6 requests per host
        • 1.7 MB total size, 46% cacheable (on Mobiles)
        • Majority of the size is around “Images”
      • How to optimize Images
        • Right-size your images
        • Reduce # of downloads (use sprites and minified images)
        • Use a CDN
    • Speed and Responsiveness
      • Defer Script execution (scripts in bottom)
      • Reduce # of Frameworks (single frameworks or libraries)
      • Coaleasce style and layout changes
        • jittering of a control as we scroll
        • instead of updating the screen on every mouse event
        • just use css to paint it after the event is done
      • Use CSS Animation
    • Memory
      • Download size vs Memory Size
        • 557KB image –--->  Memory = width * height * 4
        • Process
          • Download Image
          • Decode
          • GPU Copy  (here the CPU and CPU is not doing anything)
          • GPU render 
        • Image Formats Matter (for both memory and CPU utilization)
          • JPEG is encoded to YCbCr and then decoded by CPU to JPEG for rendering (IE10)
          • GPU’s can render YCbCr so decoding is not needed for JPEG. (IE11 uses GPU for image rendering)
          • Use JPEG when possible instead of PNG (as they are much faster)

Building Services for Mobile Apps using ASP.net Web API 2.1

  • Mysteries of building backend services for mobile apps
    • SOAP ? REST ? ODATA ?
    • which framework ?
    • hosting?
    • security ?
    • consuming ?
    • offline ? notifications ? etc..
  • SOAP is not mobile friendly (If you need SOAP then use WCF)
  • HTTP and mobile – made for each other
    • Ubiquitous
    • Interoperable
    • Scalable
    • Flexible
    • Mature
    • Simple
  • Many faces of HTTP frameworks in .NET
    • WCF Web HTTP (underlying it sends XML so its kind off SOAP)
    • WCF Data Services
    • ASP.net MVC
    • ASP.net Web API
      • A framework for creating HTTP services that can reach a broad range of clients
  • Why ASP.net Web API
    • First class modern HTTP programming model
    • Easily map resources to URI’s and implement the uniform interface of HTTP
    • Rich support for formats and HTTP content negotiation
    • Request validation
    • Enable hypermedia with link generation
    • Separate out cross cutting concerns
      • authorization
      • caching
      • message header
    • Help page generation
    • Flexible hosting
      • can be hosted outside IIS within an EXE
    • Light-weight, testable, scales
    • 2.0 features
      • OWIN Integration
      • Request batching
    • 2.1 Features
      • Global error handler
      • attribute routing improvements
      • BSON formatter
      • Portable query building and parsing
  • Samples and Docs http://www.asp.net/web-api
  • Code at http://aspnetwebstack.codeplex.com
  • REST and OData
    • REST is an Architectural style for distributed sytems
      • Defined by set of constraints (client-server, stateless, cacheable, layered, uniform interface)
      • Induces properties: performance, scalability, evolvability, reliability, transparency
      • Do a the Web does
    • OData
      • Is a protocol for interacting with REST-based data services
      • Solves common issues (querying, paging etc)
  • Web API 2.2 #NEW# features
  • Build client logic as “Portable Libraries” (share code between Desktop, Phone and Windows)
  • Security for Web API’s
    • User Authorization filters (ex [Authorize])
    • Implement your authorization logic
      • derive from authorizationfilterattribute or implement IAuthorizationFilter
  • Make Web API’s secure with OAuth 2.0
    • Authorize requests using OAuth 2.0 Bearer tokens
  • Get tokens from a trusted authz server
    • Host your own
      • MS OWIN for simple server implementation
      • Use thinktecture full server implementation
    • Use Existing one
      • Azure active directory
      • ADFS on windows server 2012
      • Azure mobile services

Windows App Studio (Beta)

Wednesday, April 02, 2014

Build 2014 – Day 1 (Notes)


  • Mobile First / Cloud First vision and strategy
  • Microsoft announced Windows Phone 8.1 and Windows 8.1 Update
  • New personal assistant “Cortana” – Microsoft’s answer to ‘Siri’ comes on Windows Phone 8.1
    • Remind me to ask about puppy when I talk to “blah” next. (reminds when the call arrives)
  • Many new features and optimizations on Windows Phone 8.1
    • Weekly calendar views
    • Swipe keyboard (World records of fastest phone keyboard)
  • New Universal App development approach
    • Share code between ALL Win 8 platforms (Phone, Desktops, Tablets, XBox One) easily with special Visual studio templates
  • WinJS is now Open Source
  • Visual Studio 2013 Update 2 RC available now
  • Windows 8.1 Update available now on MSDN
  • New Nokia 930 and other lumia devices announced

Single Page Application with ASP.net and Angular.js

  • Sample to get started
    • include angular.min.js
    • create a controller js file and include it
    • add the ng-app attribute on the html tag
    • bind the controller to body
      <body ng-controller=”testController”>
    • Sample repeater control
      <div ng-repeat=”card in cards”>
      Card {{card.id}}
    • testController is just a function
      var testController = function ($scope) {
         $scope.cards = [ { id:1 }, { id:2 } ];
  • Bundling and minification may not work as angular needs the name $scope
  • Use either nuget or cdn to get the angular js files
  • keep you app controller js files separate
  • Angular Items
    • Modules
      var mainApp = angular.module(‘mainApp’,[‘testController’]);
      var testController = angular.module(‘testController’,[]);
    • Controllers
    • Dependency Injection
    • $http
      Lightweight API for AJAX requests
    • $resources
    • Filters
    • routing

What’s new in WinJS

  • WinJS 2.1 for Phone
  • WinJS vision is to create a cross platform library for all devices
  • WinJS is now Open Source and accepts contributions from community
  • WinJS can now be used in cross platform Web sites and apps
  • New Pivot Control for Phone
  • Improvements and Support of WinJS controls on Phone
    • Appbar on Phone
    • ListView on Phone
    • Semantic Zoom on Phone  (e.g. grouped listview by alphabets. contacts list)
    • New Animations on Phone
    • User Themes on Phone
  • App bar code automatically adjusts between Phone and PC
  • WinJS Ratecontrol works with Angular and Knockout via 2 way binding
  • http://try.buildwinjs.com/

Large Scale JavaScript with TypeScript

  • Project “Monaco” – full code editor in browser for azurewebsites.
  • JS Code base roadmap for “Monaco”
    • Small – 50 KLOC  (Modules, classes, promises) – 10% typescript
    • Medium – 100 KLOC (AMD, lazy loaded, contributions) – 50% typescript
    • Large – 200 KLOC  (components, API, dependency injection) – 100% typescript
  • Concerns with Javascript
    • organizing a large and growing code base
    • refatoring javascript code is difficult
    • describing API’s
  • TypeScript to rescue
    • Optional and Structural typing
    • Classes, Modules
    • Interfaces (very powerful)
      • interfaces named object types of describing the shape of JavaScript objects
  • Typescript has Generics
  • Typescript Type Definitions project on github (‘DefinitelyTyped’ respository’)
  • Code Organization Pains
    • Modules are open
      • undisciplined name space contributions
    • You can have a cyclic dependencies
      • without noticing
    • Name spaces have no relationship to the code organization on disk
      • renaming files/name spaces is no fun
    • Growing code pains
      • requires ordering of js files
      • dependencies between files
      • eager loading (may load lots of stuff which is not needed)
  • TypeScript External modules for rescue
    • Separately loaded code referenced using external module names
      • implemented in separate source files
      • entities are private unless exported
    • Module Pattern
      • CommonJS
      • Asynchronous Module Definition (AMD) e.g. requireJS
  • Monaco
    • Server uses node.js
    • Client
    • Common module syntax enables code sharing between client and server
  • AMD migration was very good. Self contained modules.
  • AMD Applied
    • Lazy Loading
  • Componentization
    • reuse typescript code as ‘binary’ JS components with a declarations file
    • e.g. 
      • tsc – declarations –out typescriptservices.js typesript.ts
      • generates typescriptservices.d.ts