Building Next Generation Web Apps…

Here are the slides from my internal talk presented at Neudesic Office Day:

https://speakerdeck.com/jomit/building-next-generation-web-apps

Some of the code for the talk can be found at:

https://github.com/jomit/Node-Cloud

https://github.com/jomit/Node-ES6-Trials

Resources:

• Tomorrow's World of Web Development :  https://channel9.msdn.com/Events/FutureDecoded/Future-Decoded-2015-UK/19
  
• Created front end with ASP.net 5 on Service Fabric : https://azure.microsoft.com/en-us/documentation/articles/service-fabric-add-a-web-frontend/
  
• Introduction to NoSQL - Martin Fowler : https://www.youtube.com/watch?v=qI_g07C_Q5I
  
• Flipkart Lite Video : https://www.youtube.com/watch?v=MxTaDhwJDLg

 

s

Trying out PhoneGap Desktop App on Windows 10 for Windows Phone Apps

 

PhoneGap Desktop app is basically a visual interface for developing phonegap apps easily. For this post I am using the the latest beta release 0.1.11 from github.

I followed the step-by-step instructions from here but it did not work for me. I had to do some additional steps and use the old PhoneGap CLI to make it work.

Here are the high level steps I performed to make it work on my Windows 10 machine

• Install PhoneGap Desktop App (download beta release 0.1.11 from here)







• Install Mobile App
  
  

• Create New App using Desktop App

  
  
  

  

• Run the App

  
  
  
  
  
  

• Resolve the Issue

• Disable Virtualbox or VMWare Network Adapters
  
  

• Run CLI   (You can install the CLI from here)
  
  

• App Working

• Connecting the Mobile App
  
  
  
  

• Editing it in Visual Studio Code and Live Update
  
  
  
  

 

Enjoy JavaScripting on any device…

.

.

Resources that helped me start learning Node.js

 

• Pluralsight Course -  “Node.js for .NET Developers”

• MVA Course – “Building Apps with Node.js Jump Start”

• Understanding node.js event loop

• Hands on Tutorials at Nodeschool.io

• node weekly to keep up with all the latest updates in node.js world

 

Enjoy JavaScripting !!!

.

.

Useful resources to write better Angular Code and get ready for Angular 2.0

 

• Angular Style Guide By John Papa  (Absolute must read for everyone before writing angular 1.0 code)
• Day 1 Keynote of ng-conf 2015 talking about the past and future of Angular
• Starting with Angular 2.0 : https://angular.io/ 
• Road to NG2 : http://devchat.tv/adventures-in-angular/048-aia-the-road-to-ng2 

ECMAScript 6 is bringing lot of goodnes and the JavaScript in future might look a lot different than what we see today.

Frameworks like Angular, Backbone, Ember provide a nice wrappers to fill the gaps but ultimately we should keep our eye on ES6.

Here is how you can try ES6 today using compilers like babel and tracer today: http://jomit.blogspot.com/2015/02/trying-ecmascript-6-javascript-6.html 

 

Enjoying Javascripting….

New App type, CORS support and Office 365 API's with vanilla-js

Few months back Microsoft introduced several new API’s for Office 365 for which spun across SharePoint, Exchange, Lync, and rather than having the developers learn each of the platform they simplified the general concepts and also introduced a new type of app - “Office 365 external Apps”

These apps look similar to “Provider Hosted Apps” but the have some key difference in the way you register them and launch them. For more details visit: http://www.sharepointnutsandbolts.com/2014/12/office-365-apps-and-sharepoint-apps-comparison.html

Along with this new type of Apps, Microsoft has also enabled cross-origin resource sharing (CORS) support for Office 365 API’s.
Which means we do not need any special client libraries to authenticate or access these API’s.

Let’s see how we can register this new type of app and then integrate it using vanilla-js.

Step 1 – Register your App

• Sign in to Azure Management Portal
  
• From Active Directory node select the Active Directory linked to your Office 365 subscription
  
  
  
• Click “Applications” tab from the top navigation
  
  
  
• Click “Add” from the bottom of the screen and select “Add an application my organization is developing”
  
  
  
• Provide the app name and select Web application and/or web API as Type
  
  
  
• Provide the Sign On URL of your web app in which you are integrating the API’s
• Provide any unique ID of your App in App ID URI
  
  
  

Step 2 – Configure permissions for App

• Open the application and click “Configure” tab from the navigation
  
  
  
• Scroll down and click “Add Application” under “permissions to other applications”
  
  
  
• Click “+” next to Office 365 SharePoint Online and save.
  
  
  
• For Office 365 SharePoint Online, open delegated permissions dropdown, select appropriate permissions
  and save the application
  
  
  

Step 3 – Configure the App to allow OAuth implicit grant flow

• On the configure tab, click on “Manage Manifest” button from the bottom and download the manifest
  
  
  
  
  
• Set the value of "oauth2AllowImplicitFlow" to true and upload the manifest file.
  
  
  
  
  
• The application registration is complete now…
  

Step 4 – Integrate it with a Web Page

• Authenticate
  
  
  
  
  
• Call the REST API with Authorization Token
  
  
  
  
  
• Fetch document list from SharePoint
  
  
  
  
  

See complete code on github..

Other Resources:

• Setup Office 365 dev environment
• ADAL JS & CORS with Office 365 API’s
• Key skills for SharePoint/Office 365 developer
• .Net and JavaScript client libraries for Office 365 API’s
• Office 2013 modern authentication public preview

.

.

.

Trying ECMAScript 6 (JavaScript 6) Features

 

I have been working with JavaScript for over 5 years now. In the last 3 years, I have written more JavaScript code than C# code. And still there are parts of the language that amaze me. Who would have thought that 10 days of work could give rise to the assembly language of the web.

What is ECMAScript 6 ?

ECMAScript 6 is the upcoming version of the ECMAScript standard. This standard is targeting ratification in June 2015. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009. See the draft ES6 standard for full specification of the ECMAScript 6 language.

See detailed list of all the features (along with examples) here : https://github.com/lukehoban/es6features 

Which JavaScript Engines are implementing these features ?

Pretty much every browser vendor have started implementing some features, if not all.
Here is a live compatibility dashboard : http://kangax.github.io/compat-table/es6/

And as of today, IE is ahead of everyone in the ‘Desktop Browsers’ category.

How can I try some of these ES6 feature today ?

Here are your options:

• Within Browsers
• IE Technical Preview (using Azure RemoteApp)
  

• Firefox (30.0 or greater…)
  
  
• Chrome (40 or greater)
  First enable the the new JavaScript features using chrome flags:
  
  
  The Arrows feature is still not available in chrome but there might be other features that you can play around…
  
  
  
• Using Compilers/polyfills
• Traceur : https://github.com/google/traceur-compiler 
• Babel : https://babeljs.io/docs/learn-es6/

Whether you like it or not, JavaScript is here to stay and will play a key role in pushing the web forward..

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….

Build 2014 - Day 2 (Notes)

Keynote

• 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 ) 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
  • .NET compiler platform (“Roslyn”)
    • It is Open Sourced now. http://roslyn.codeplex.com/
    • Demo of adding a new language feature
    • New .Net Foundation launched. (www.dotnetfoundation.org)
• 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
  • Model aliasing
  • functions
  • enums
  • model query annotations
  • $format
  • Etags
  • Singletons
  • containment
  • See details on http://blogs.msdn.com/b/webde/
• 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)

• Now available at http://appstudio.windows.com

Cross Domain AJAX Calls and SharePoint Apps on Office 365

To give a bit of background, I have been exploring architectures and various components needed to create a multi-tenant SharePoint App. So far I have settled on using SharePoint only, as a frontend layer and using external services to drive the entire backend, including storage.
Given this high level design the first interesting item that I came across was while posting data to the backend Service from a SharePoint Hosted App. The classic client side Cross-domain security issue. Here are some of the solutions out there for this issue:

• Using the JSONP hack
  • Due to its nature, this only works for ‘GET’ requests and I wanted to do a ‘POST.
• Using the default SharePoint 2013 Web Proxy
  • I was able to make the ‘GET’ requests work with this approach but not the ‘POST’ requests.
• Creating a Custom Proxy
  • Worked but involved quite a few hoops and a remote web page, which I did not want to create.
• Enabling Cross Origin Resource Sharing (CORS) in WCF Services
  • Worked perfectly !!!

For simple requests we can enable CORS by setting some response headers like Access-Control-Allow-Origin, Access-Control-Allow-Methods and Access-Control-Allow-Headers with the value ‘*’. 
But all requests from Office 365 contain special headers and hence they are ‘Preflighted’, which means they would first send an http request with “OPTIONS” method to check the domain and then send the actual request. (More details on Preflighted requests here) For Preflighted requests we need to write some extra code along with adding the response headers. Here is a good article with sample code that explains this and below is the snap shot of the code:



And here is the snap shot of the sample app working on Office 365:


Additional Resources on CORS and Multitenant Applications with Azure:

• Enabling CORS
• Developing Multi-tenant Applications for the Cloud, 3rd Edition
• Designing Multitenant Applications on Windows Azure
• Building Big: Lessons learned from Windows Azure customers - Part I