skip to main |
skip to sidebar
Keynote:
- 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}}
</div>
- 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’,[]);
angular.controller
ng-app=”mainApp”
- 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
- 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
- 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:
Post a Comment