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 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 {{}}
    • testController is just a function
      var testController = function ($scope) {
         $ = [ { 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

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

No comments: