Subscribe: Serge van den Oever [Macaw]
Preview: Serge van den Oever [Macaw]

Serge van den Oever [Macaw]

SharePoint RIP. Azure, Node, hybrid mobile apps


Wappalyzer + PageXray Chrome plugins combined change PUT to GET

Fri, 21 Apr 2017 09:46:25 GMT

I installed at home two Chrome plugins on my Mac to analyze technology used on websites: Wappalyzer and PageXray. When I got on my work this morning and turned on my Windows PC  I started using the application we are developing, but it behaved weird. After a lot of debugging I found that an Ajax PUT request was changed into a GET request! Then I remembered that I installed some plugins at home, and that on startup of Chrome these plugins were installed at work as well! When I disable one of the plugins it started working again as expected. So beware of this deadly combination!!

Zipkin with docker startup script

Mon, 10 Apr 2017 15:17:00 GMT

In a project we use for distributed tracing. During development is is very handy to trace to Zipkin running in a Docker image. The following PowerShell script will help with (re)starting the Docker image on WIndows and open Zipkin in Chrome when it is running.

$runningZipkin = & docker ps -q --filter ancestor=openzipkin/zipkin
if ($runningZipkin) {
"Running Zipkin with id $runningZipkin - will be killed"
& docker stop $runningZipkin
"Starting Zipkin docker image"
& docker run -d -p 9411:9411 openzipkin/zipkin

$ErrorActionPreference = "SilentlyContinue" # We don't want to see failing requests
do {
Start-Sleep -Seconds 1
"Waiting for starting of Zipkin..."
$up = Invoke-WebRequest -Uri http://localhost:9411
} while (!$up)

& "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" http://localhost:9411

SPA Series: Turn our ShowTitle app into a Progressive Web App

Mon, 29 Aug 2016 15:46:27 GMT

In this post we turn our great web app into a Progressive Web App (PWA). "A progressive web app provides an app-like user experience that is low friction and is built using modern web capabilities and hosted on the web and can become an app on the user's system over time." To learn more about the great promises of Progressive Web Apps read Addy Osmani's great overview article Getting started with Progressive Web Apps. Google also has a great entry point to the required information at Getting up to speed with Progressive Web Apps Progressive Web Apps are cool, and in my opinion the future of a whole category of mobile apps. An inspiring introduction to this vision is this presentation by Bruce Lawson. See also For a great overview of other material available on Progressive Web Apps have a look at What do I want to achieve in this blog post In this article we explore how to get the following functionality working in our PWA: Hosting in a SharePoint document library - for authentication, access to data within your company, and freedom of distribution Add to homescreen - so we get an icon between the other apps on your mobile device or between the apps in your browser Splash screen - for direct visual feedback on start of our application Offline support - so we can use our app even if we are not connected to the network The code for our sample Progressive Web App can be found at Generating artifacts For the PWA we need things like a favicon, icons for the different (mobile) platforms, html code to include these icons, and configuration directives for platforms to provide us with PWA functionality. The site can help us out with some of these steps. It generates a zip file with icons and other artifacts based on a single uploaded icon. Because we are creating the amazing "Show Title" app that shows the title of SharePoint site hosting our app, I downloaded an icon of the letter T and used that for the generation. The generator created a zip file with artifacts and the following HTML lines for inclusion in the head of our app page: Because we are hosting in a subfolder of a SharePoint document library and not in the root of a website we need to remove the leading slashes as in: Consuming Javascript libraries from TypeScript without type definition files

Sat, 09 Jul 2016 09:16:00 GMT

There are cases where you need to consume Javascript libraries or, for example, ReactJS components written in Javascript from your TypeScript code. Possible reasons: You find a great library or component "out in the wild" written in Javascript One of your team-members does not know/does not want to write TypeScript You want to consume components from an existing library or component set writen in Javascript Assume the situation where a ReactJS component MyComponent.jsx written in Javascript must be consumed from a component Home.tsx: The file MyComponent.jsx: import * as React from 'react';export class MyComponent extends React.Component {  constructor(props) { super(props); }  render() { return (

Hello from MyComponent

); }} We could import this component in different ways: import {MyComponent} from './MyComponent'; // ERROR: Cannot find module './MyComponent'const MyComponent = require('./MyComponent'); // Warning if used as // see X = require('./MyComponent'); // OK if used as const MyComponent = require('./MyComponent').MyComponent; // OKconst MyComponent = require('./MyComponent').default;// OK if defined as export default class MyComponentconst {MyComponent} = require('./MyComponent'); // OK, it's possible to destructure multiple components For details on how to specify types for desctructured object parameters see destructured object parameters in TypeScript. So if we want to consume the above JavaScript component from TypeScript in the component Home.tsx: import * as React from 'react';const MyComponent = require('./MyComponent').MyComponent;export class Home extends React.Component { render() { return (
); }} [...]

Polymer 1.0 - Polylint - use on project instead of component

Fri, 18 Sep 2015 16:33:00 GMT

The Polymer team just release Polylint, a tool to catch errors in your polymer project before even running your code.

The tool seems to be designed to work in a component, but it faisl in a project that follows the project structure as used in the Polymer Starter Kit.

You can see this structure at

In this structure the folder bower_components folder is located next to the app folder, instead of in the app folder.

To get started:

git clone

cd  polymer-starter-kit

bower install

Now if you run the command polylint --root app --input index.html you will get the following errors:

ERROR finding app\bower_components\webcomponentsjs\webcomponents-lite
Error: ENOENT, open 'C:\p\serge\polymer-starter-kit\app\bower_components\webcomponentsjs\webcomponents-lite'
at Error (native)
ERROR finding app\bower_components\iron-flex-layout\classes\iron-flex-layout.html
ERROR finding app\bower_components\iron-icons\iron-icons.html
ERROR finding app\bower_components\iron-pages\iron-pages.html
ERROR finding app\bower_components\iron-selector\iron-selector.html
ERROR finding app\bower_components\paper-drawer-panel\paper-drawer-panel.html
ERROR finding app\bower_components\paper-icon-button\paper-icon-button.html
ERROR finding app\bower_components\paper-item\paper-item.html
ERROR finding app\bower_components\paper-material\paper-material.html
ERROR finding app\bower_components\paper-menu\paper-menu.html
ERROR finding app\bower_components\paper-scroll-header-panel\paper-scroll-header-panel.html
ERROR finding app\bower_components\paper-styles\paper-styles-classes.html
ERROR finding app\bower_components\paper-toast\paper-toast.html
ERROR finding app\bower_components\paper-toolbar\paper-toolbar.html
ERROR finding app\bower_components\page\page
ERROR finding app\bower_components\polymer\polymer.html

This can be solved by creating a symbolic link bower_components in the app folder to ..\bower_components.

The following script RunPolylint.bat will do this, place it in the root of your project (next to the app folder.

:: RunPolylint.bat - by Serge van den Oever,
:: This script assumes that polylint in installed
:: globally through the following command:
:: npm install -g polylint
:: Polylint assumes that the bower_components folder is located
:: in the same folder as the entry point file as specified with --input.
:: This is the case for a Polymer component, but not for an application
:: that follows the structure of the Polymer Starter Kit.
:: This script solves this issue by creating a temporary symbolic link
:: to the folder bower_components in the folder app
@cd %~dp0
set root=app
set input=index.html
pushd %root%
mklink bower_components ..\bower_components
polylint --root %root% --input %input%
del %root\bower_components

Intel AppFramework create and use your choice of IcoMoon icons

Sun, 19 Jul 2015 23:14:53 GMT

The Intel AppFramework uses a small subset of the IcoMoon icons. This post describes how to make your own selection of IcoMoon icons and use it in your app. There is a free IcoMoon icon set with 490 icons available that we will use to make our selection from. Open the url Open the IcoMoon - Free icon set and select the icons you want to use in your app It is also possible to select all icons (we will do that for now) Select the Generate Font option at the bottom Press settings and select Font Name IcoMoon, select as Class Prefix icon. and select the option Encode & Embed Font in CSS Now click the download button Open the downloaded file and copy the file style.cssto your styles folder as customicons.css Open de customicons.css file and compare with the file appframework/build/icons.css (we need to copy over the appframework specific styles) Remove the first four lines with a file-based @font-facedefinition, we will use the embeded one @font-face { font-family: 'IcoMoon'; src: url('fonts/IcoMoon.eot'); } Replace: .icon { font-family: 'IcoMoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } with (check appframework/build/icons.css for changes): .icon:before { font-family:'IcoMoon'; speak:none; font-style:normal; font-weight:normal !important; font-variant:normal; text-transform:none; line-height:1; color:inherit; position:relative; font-size:1em; left:-3px; top:2px; } li .icon:before { position:relative; width:24px; height:100%; top:2px; line-height:0 !important; margin-right:4px; } { font-size:.7em; } .icon.big:before { font-size:1.5em; } and we are done!  In your main.css file include the appframework css files and your customicons.css file (or include directly in html): @import url(../appframework/build/af.ui.base.css);@import url(../appframework/build/af.ui.css);@import url(customicons.css); [...]

Intel AppFramework installation and documentation

Fri, 17 Jul 2015 22:19:00 GMT

I have written a mobile app with Ionic Framework but I must say that I'm not really font of the AngularJS framework, especially now that you know that version 1.3 as used in Ionic at the time of writing (version 1.0.1) is a dead end and version 2 is on the horizon. For a new mobile app I needed a mobile app UI framework that I can use in combination with ReactJS and that would work on an as wide range of mobile devices as possible. Reapp looks promising, but is still alpha and not very cross platform (for example Windows Phone). I ended up with Intel App Framework version 3, a simple framework with great support for multiple devices. It event tries to mimic the native style on each type of device, I'm not sure yet if i'm that happy about that, but it is also possible to override the ui time to a fixed ui (for example ios) for all devices. Installing Intel App Framework For client framework I normally use Bower. The Intel App Framework in available on Bower as the "intel-bower" package, but that package is not maintained and out of date, so don't use it. There is another reason why you shouldn't use it, it only contains the js and css files, not the samples which you really need due to a lack of documentation. More on that later. My approach is that I add the original appframework Git repository ito my project's Git repository a a submodule: git submodule add  appframework And to update this (an possibly other) submodules in your repository, just execute: git submodule foreach git pull Documentation The documentation available for the Intel App Framework is ... minimal. Your main entry point is at The most important entry in the documentation is, in this list you find some interesting things like: - UI Quickstart  - gives a nice initial introduction on using the Intel App Framework - OS Themes - how to disable custom os themes and specify the one you want to use on all devices (still mentions version 2.1?!) For all JavaScript api's and plugins see The documentation is very minimal (to say the least) about a lot of things. Good example: the section Vector Icons does not mention the available icons, and does not explain how to add your custom icons (I will write about that in a next blog post). One of the most important pages is the appframework/index.html kitchensink example. It is possible to run this page directly within the github repository by translating it's url from: to (see this stackoverflow page for more information on this translation) This is a list of all example pages in the appframework github repository. They are interesting to check out and its source code is one of the best sources of documentation: Kitchensink index.html (github source code) note: sample gives overview of all available vector fonts Kitchensink animbase.html (github source code) note: had to fork the appframework repository and make some changed because JQuery and FastClick were not referenced correctly Angular todo example (github source code) Backbone todo example (github source code) React todo example (github source  code) note: this is a very simplistic React example, I had some more trouble to get multiple panels provided by React rendering working Lancaster demo (github source code) note: had to fork the appframework repository and make some changed because JQuery and FastClick were not referenced correctly Template drawer (github source code) Template form (github so[...]

AngularJS 2 and TypeScript... some work to do...

Sat, 23 May 2015 22:36:09 GMT

After reading a great "First impressions" post on AngularJS 2 ( I headed over to the code repository of AngularJS 2 to see how they write their code now in my favorite front-end language: TypeScript. After looking at some of the code it is clear that the team has still some TypeScript to learn. A little example of something you find in most of the code: for example in the file

export class EventBinding {
fullName: string; // name/target:name, e.g "click", "window:resize"
source: ASTWithSource;

constructor(fullName: string, source: ASTWithSource) {
this.fullName = fullName;
this.source = source;

But one of the features of TypeScript is parameter property declaration and is shorthand for declaring a property with the same name as the parameter and initializing it with the value of the parameter. This would reduce the above code to:

export class EventBinding {
constructor(private fullName: string, private source: ASTWithSource) {

See chapter 8.3.1. of the TypeScript language specification.

And this is a really simple example. The code is full of this kind of initialization code.

Building an Ionic hybrid mobile app with TypeScript

Mon, 26 Jan 2015 13:00:11 GMT

Presentation based on experiences of building a hybrid mobile app using the Ionic framework, Cordova, AngularJS and TypeScript.

The app we have built is for Android and iOS.

src="//" width="476" height="400" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">

Cordova – file-transfer, unzip and present adventures

Fri, 21 Mar 2014 11:40:00 GMT

For a hybrid project I have a very simple requirement: download zip file, unzip it, serve content on a page from artifacts (html text, images). I started with Intel XDK, an environment I did some other work with. A great integrated development environment, but some of its big problems: lagging behind in version of Cordova, fixed set of selected plugins, no possibility to include other plugins. Because I wanted to unzip, I tried it with a Javascript only solution zip. The problem I had was that it worked if I downloaded the zip file over http using importHttpContent(), but I could’t get it working with loading from the local file system. Another problem I had was with where files ended up on different devices: in / on wp8, on /storage/sdcard0 on Android, and on iOS in even another location. I decided to go with plain Cordova, with the command-line commands. That was a good decision. It was now possible to use the latest version (3.4 at time of writing), and use the new file and file-transfer plugins that now support a huge improvement to hybrid development: the cdvfile protocol. Files can now be addressed with respect to one multi-platform root: cdvfile://, rather than through device-specific paths. There is also a great plugin available to unzip that understands the new cdvfile:// notation as well. I ended up with a simple example to showcase the download, unzip and present case. To get it working execute the following commands with a Cordova 3.4 installation: cordova create Cordova-TransferUnzipPresent com.svdoever.tranferunzippresent TransferUnzipPresent cd Cordova-TransferUnzipPresent cordova platform add android cordova plugin add org.apache.cordova.file cordova plugin add org.apache.cordova.file-transfer cordova plugin add Replace code in www\index.html with the code below cordova emulate android Works with iOS platform as well. The zip plugin does not work on wp8 (yet). The code: Cordova Download Unzip Display Sample



It works fine when jQuery is included, but not when you use the AngularJS JQLite implementation.
is used, the code works correctly.

Webstorm – great IDE for web development

Fri, 17 Jan 2014 00:09:40 GMT

I’m really interested in front-end web development, and although Visual Studio 2013 is the main IDE in our company I’m really impressed by Webstorm from JetBrains, the guys behind Resharper. It is a full featured web development IDE for under $50. Although I’m impressed by the better support of Visual Studio 2013 for web development, Webstorm feels like “exactly made” for web development.The reason I favor Webstorm right now is that Visual Studio is pushing you too much into the Microsoft way, with server side code, web.config files etc. I want to build single page apps, front-end (JavaScript and Typescript) code only, talking to services, that can be hosted on any web server, or even drop box, and can also be embedded into a Phonegap mobile application if needed.

And the great thing: it works on OSX and Windows, I have my code on dropbox and can hop from mac to windows without changing a thing.

Check out

Note: I’m in no way affiliated with, or sponsered by, JetBrains, just a happy and impressed user.

Visual Studio Online “Monaco”: the backend is in node

Mon, 09 Dec 2013 11:38:14 GMT

Probably to some surprise for some of you: the backend of Monaco is written in node, and actually a quite new version of node: version v0.10.21 (at the time of writing this post). Because it is running on IIS, it uses iisnode to run the site. The backend uses the following node modules: edge – Edge: run .NET and node code in-process ( express – Sinatra inspired web development framework ( glob - Match files using the patterns the shell uses, like stars and stuff. ( graceful-fs - A drop-in replacement for fs, making various improvements. ( ini - An ini encoder/decoder for node ( jake - JavaScript build tool, similar to Make or Rake ( nake - GNU Make/Ruby Rake like tasks management tool for NodeJS ( npm - A package manager for node ( optimist - Light-weight option parsing with an argv hash. No optstrings attached. ( sax - An evented streaming XML parser in JavaScript ( send - Better streaming static file server with Range and conditional-GET support ( The code base itself consists of the following files: D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/availableLanguages D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/config/db D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/config/home D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/config/logger D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/config/tools D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/config/workspaces D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/config D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/config/config.contribution D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/contributions D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/event/event.contribution D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/event/event D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/event/eventImpl D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/experiment/experiment.contribution D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/feedback/feedback.contribution D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/files/files.contribution D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/files/files D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/files/stat D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/git/git.config D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/git/git.contribution D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/git/git D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/output/output.contribution D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/process/commands/any D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/process/commands/azure D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/process/commands/commands D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/process/commands/expres[...]

Visual Studio Online “Monaco”: supported languages and file types

Mon, 09 Dec 2013 11:05:34 GMT

Diving into Visual Studio online I was wondering which languages / file types are supported. After some hacking I came to the following list: bat, coffeescript, cpp, csharp, css, fsharp, handlebars, html, ini, jade, java, javascript, jshtm, json, less, lua, markdown, php, powershell, python, razor, ruby, typescript, vb, xml. Not all languages will probably be supported out of the box, it probably depends on your msbuild / jake / whatever build script. I based this list on the following “support files” in the Monaco source code: D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/bat/bat D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/bat/bat.nls D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/bat/bat.nls.keys D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/coffeescript/coffeescript D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/coffeescript/coffeescript.nls D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/coffeescript/coffeescript.nls.keys D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/cpp/cpp D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/cpp/cpp.nls D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/cpp/cpp.nls.keys D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/csharp/csharp D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/csharp/csharp.nls D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/csharp/csharp.nls.keys D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/css.css D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/css D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/css.nls D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/css.nls.keys D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/cssWorker D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/cssWorker.nls D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/cssWorker.nls.keys D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/lib/beautify-css.license.txt D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/lib/cssLib D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/lib/cssLib.nls D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/lib/cssLib.nls.keys D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/lib/csslint.license.txt D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/lib/OSSREADME.txt D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/monacoParticipant D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/monacoParticipant.nls D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/monacoParticipant.nls.keys D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/l[...]

Hybrid mobile applications–what is it–what are the tools

Tue, 10 Sep 2013 22:06:23 GMT

As mentioned in a previous blog post I am going to write some observation posts on development tools that can be used to write hybrid mobile applications. What is a hybrid mobile application in my thoughts? I see it as a:

  • platform specific native “shell” application
  • utilizes a browser control as its rendering surface
  • provides an API that gives access to native device functions (camera, contacts, …)
  • makes the API available to Javascript running in the browser control
  • the application functionality is written using HTML, CSS and Javascript in the spirit of building web apps
  • the application specific code can be bundled and ”injected” into the shell application
  • the functionality provided by the shell application can be extended with plugins that are written for the native platform and provides additional API functions to the Javascript running in the browser control

There are many other possible ways to think about hybrid mobile apps, but the slice of approaches I’m most interested in is the one where you utilize web standards to build your mobile applications. There is a great blog post by Udayan Banerjee called Cross-Platform Hybrid Mobile Application Development – a Tool Comparison where he goes into great detail on the huge set of different tools that are available in the broad sense of hybrid mobile apps. He divides the tools into:

  • Mobile Web (JavaScript-CSS library), (see this)
  • Visual Tool (No access to Code), (see this)
  • App Generator (Native application for multiple platforms), (see this)
  • Hybrid App (Leverages embedded browser control), (see this)
  • Game Builder (see this)

I will only discuss tools that are in the Hybrid App space.

See the following post for some of my observations on tools in this space: (not written in the specified order)

  • Cordova (to be written)
  • PhoneGap / PhoneGap Build (to be written)
  • Intel XDK (to be written)
  • Red-gate Nomad (to be written)
  • Icenium (to be written)
  • DevExpress DevExtreme (to be written)

I will update the links when the posts are written.

Developing mobile apps–too many options?

Tue, 10 Sep 2013 15:50:16 GMT

It is unbelievable how many companies jumped on the mobile app development bandwagon.

In the early days life was easy. When you developed for iOS (iPhone, iPod Touch and iPad) you bought a Mac, downloaded XCode and started programming in Objective-C. For Android you grabbed a PC, downloaded the Android SDK and Java was your best friend. And for Windows Phone (yes it still exists) you downloaded a version of Visual Studio, the Windows Phone SDK and you started to hack away in good old C#.

The new trend for mobile apps that don’t ask too much from the platform (say non-game, and non-multimedia applications) is to develop them cross-platform without the need to rewrite the applications multiple times in different languages.

Wikipedia gives a nice overview of some of the available mobile application development platforms at And this overview is even far from complete.

Within the development platforms you see broadly two options for developing your cross-platform mobile apps:

  1. Development in one language for a native UI, where the interaction patterns are phone specific
  2. Development one one language for a cross-platform UI, where the interaction patterns are app specific

Of course there are all kind of mixes of the above two options, for example Appcelerator where you develop your code in Javascript with a platform independent API to create native UI elements, or a lot of JavaScript libraries like PhoneJS en KendoUI where you render web technology widgets using HTML, CSS and Javascript that try to behave like native widgets.

I am very interested in the Xamarin approach where you can use C# as the common app language, but create a native UI per platform. But I am also a strong believer of the “hybrid” development approach where you develop your application using HTML, CSS and Javascript, and wrap your “application” in a host application for packaging and deploying to the app stores.

In some following posts I will dive into a few of the development options for creating hybrid mobile applications using tooling like:

All above options have their roots in the Cordova project.