Build a High-Performance Mobile App With and Manifold.js

the last few months I’ve been wanting to dive into this new JavaScript
framework since I saw its launch event in October of 2014. includes
an open-source 3D layout engine fully integrated with a 3D physics animation
engine that can render to DOM, Canvas, or WebGL. In short, you can get native
performance out of a web application, largely due to the way handles
the rendering of its content.

Simmons of the Web Platform Podcast recently had CEO, Steve Newcomb on the podcast to discuss the mobile performance and their
upcoming mixed mode. This was perfect timing, as Microsoft had just released ManifoldJS, a tool which allows you to package your web experience as native apps across
Android, iOS, and Windows. I wanted to put these two technologies to the test.

short, I wanted to determine if does actually have great mobile
performance, as well as have an understanding of how straightforward the
process was for packaging my web application as a mobile app.

What Problem Do These Two Things Solve?

web isn’t necessarily known for creating high-performance applications, which
is a shame because it truly is capable of blazing fast interactive apps, but
sadly has been plagued by the DOM. With technologies like the HTML5 canvas,
WebGL, and asm.js, the browser really can be a playground for cutting-edge interactivity. aims to solve this, getting around the bottleneck for most web
applications, which is the DOM, and utilizing WebGL and abstracting your work
from the DOM. More on this later.

aims to make the life of a mobile developer easier than ever by utilizing Web App Manifests, allowing websites to declare app-like properties.
ManifoldJS uses that standard for those platforms that support it, but falls
back to Cordova for those that don’t. Cordova is great, but the W3C also
considers work done at Mozilla (Firefox Open Web Apps), Google (Chrome Hosted
Apps) and Microsoft (Windows 8 had local web apps, Windows 10 extends over to
hosted web apps). With this, we can now wrap websites and create hybrid
applications that can be deployed in the various app stores, while still taking
advantage of many native aspects for each device (contacts, calendar, file
storage, gyro, GPS, etc.).

When we combine the two, we can create applications
at native speed that can be deployed in a number of app stores, utilizing
largely one code base. There is no silver bullet for mobile development, but
this certainly makes the process easier.

Getting Started With has a University page, which provides a great starting point for understanding how the
framework works, as well as offering a few sample projects. I ran through all of
the courses on the University site and came out with a pretty clear
understanding of the framework. They also have integration with other
libraries, such as Angular, but I haven’t had time to dive into that just

I clicked on the link at the top-right corner of the page to download their package of guides and two example projects. This is different from what is found on their GitHub page.

opened the famous-starter-kit folder and navigated to /reference-tutorials and
found folders for /slideshow and /timbre. Slideshow is pretty clever; it grabs
images from Picasa and draws them to the screen as though they came fresh from
a Polaroid camera. You can find a live version of this on my site.

Instant camera image of a dog

of the box, however, it didn’t work.

soon realized what the issue was, though. Their sample pointed toward an invalid Picasa URL. It’s been more than six months since the sample was
released, so I would hope that it would be corrected by now, as I’d imagine
this would be a damper for a number of people learning to use this otherwise
fantastic framework.

I changed the URL in the SlideData.js file, all was fine. What the project does
is grab images from a Picasa album and draw them to screen. With each click,
the camera drops the current image, and a fresh one is ejected from the front
of the camera, and is quickly exposed before your eyes, along with some nice
physics applied to the swaying back-and-forth of the image. The step-by-step instructions for creating this project can be found on the website.

is another project in the /timbre folder, but I wasn’t able to get that to work
either. You can find the associated tutorial on the website, though, and at least walk through the process of
building it yourself.

How Does Work?

not going to spend too much time getting into the details of here, but
if you really want to dive deeper, there’s an article on Medium that gives a great overview.

the website:

Interacting with the DOM is riddled with performance issues.
abstracts away DOM management […] If you inspect a website running,
you’ll notice the DOM is very flat: most elements are siblings of one another.
[…] Developers are used to nesting HTML elements because that’s the way
to get relative positioning, event bubbling, and semantic structure. However,
there is a cost to each of these: relative positioning causes slow page reflows
on animating content; event bubbling is expensive when event propagation is not
carefully managed; and semantic structure is not well separated from visual
rendering in HTML.
promises a rich 60 FPS experience, and to do so, we needed to circumvent these

utilizing the CSS3 primitive -webkit-transform: matrix3d, along
with the hardware acceleration it affords, we can get far greater performance
than we could if we just tinkered with the DOM. Any time you touch the DOM, it
is expensive. Nicole Sullivan, a fantastic web developer known for her CSS
work, gives an excellent explanation of reflows and repainting inside the browser, and how we can avoid
these issues. Fortunately, abstracts all of this away from us.

than write any HTML code, all of our code will be done in JavaScript. Take a look at some of their samples on CodePen to get a good understanding for how little
HTML you actually write (none) and what the JavaScript looks like. In an
upcoming tutorial, I’ll dive far more in-depth with than I do here.

we’re talking my language! Some high-performance applications in the browser!

How Does ManifoldJS Work?

installation process for ManifoldJS is pretty straightforward. Check out their GitHub page for more information. Jeff Burtoft also walks you through the
process of creating a hosted web app at

project will continue to evolve over the coming months. In the last week alone
I’ve seen several additions. On platforms which natively support web
applications, such as Windows 10, Chrome OS, and Firefox OS, ManifoldJS will
create native packages. On platforms such as iOS and Android, Cordova is used,
which allows a developer to write a web application but still access many of
the native features of a device, either through Cordova itself, or the active
plugin community.

the process of creating a hosted web app

Burtoft explains hosted web apps very well on his blog and in his recent //BUILD/ presentation. The video from //BUILD 2015 showcases exactly what you can do
with this technology.

My Setup

doing this tutorial from a MacBook Pro running Yosemite 10.10.3, Visual Studio Code as my IDE, and MAMP as my local web server. I then use Source Tree as my Git
tool of choice, and host my open-source code on GitHub, and
I’ll be deploying to iOS via Xcode.

know, a Tech Evangelist at Microsoft using Apple products and telling you about
open-source tools. What is the world coming to?

Putting It All Together

first thing I did was download the samples from their website. I made
the appropriate changes to their SlideData.js file, as I mentioned above, so
that my project was able to pull in feeds from Picasa. I’ve uploaded it to
GitHub so that you have a sample that works immediately. View the live site, and head to GitHub to download the working project.

I logged in to Azure and created a new website. You can get $200 worth of Azure trial credits, or reach out to me about a free BizSpark membership for yourself or your startup, which grants $150/month of web

I then point this new Azure website to my GitHub repo. Scott Hanselman explains how to do this in a few steps. From there, I have Azure monitor my
GitHub repo for this project, and any changes I push to that repository are
immediately picked up by Azure, and the latest changes can be viewed on the
website and manifest project immediately.

Azure setup page

Generating the App Manifest

up, we need to use ManifoldJS to “wrap” our web app so that we can deploy it to
the various app stores. Firefox OS and Chrome support this natively, but for
iOS, Android, and Windows 8 or 10, we need to utilize Cordova. ManifoldJS will
generate an app manifest file for us, which has all of the information the app
stores need to get our project going.

have two options here: Use the Manifold Web App Generator, which will provide a GUI and step-by-step instructions, or run it
through the command line.

Manifold Web App Generator

for the command line, you need to install ManifoldJS first. Make sure you have NPM installed, and then run:

npm install -g manifoldjs/manifoldjs

me so far? Now we can call ManifoldJS and have it generate a folder for us with
projects for each of the platforms. In the terminal I entered:

ManifoldJS -d /Users/DaveVoyles/Documents/FamousManifold

The path following -d tells ManifoldJS which directory I want it to be stored in. Soon after, you should see the terminal building the project before your eyes.

terminal building the project before your eyes

to where you stored this project, and you’ll find a series of folders there. I
then navigated to cordova/platforms/iOS and looked for the file ending in xcodeproj,
as I wanted to test this out in the iOS simulator. Double click on that icon to
open the project in Xcode.

Navigate to where you stored this project

there we have it, a application running inside of Cordova on iOS.

Famous application running inside of Cordova on iOS

Wrapping It All Up

plan to try out Angular + in one of my upcoming demos, as well as
wrapping that in ManifoldJS to test for performance on iOS. If you’re looking to
debug these apps, might I suggest looking at VorlonJS? It’s platform-agnostic, takes a minute to set up, and in the
link above, I illustrate how I can test apps on a desktop browser, as well as
mobile devices.

I’d really like to stress
test what mobile browsers are capable of when combining a framework like and Cordova, so look for a sample involving those two soon. As the web
continues to evolve, Microsoft will continue to update its site to reflect changes to the new Edge browser.
The most exciting announcement to me, though, is the recent switch from “in
development” to “in edge” tag for asm.js. Soon we’ll be able to run native applications inside of the browser. It’s an exciting time to be working on the

More Hands-On With JavaScript

It might surprise you a bit, but Microsoft
has a bunch of free learning on many open-source JavaScript topics, and we’re on
a mission to create a lot more with Microsoft Edge.

Here are some great resources from my team and colleagues:

  • Hosted Web Apps and WebPlatform Innovations: a deep-dive on topics like manifold.JS
  • Microsoft Edge Web Summit2015: a complete series of what to expect with the new browser, new web
    platform features, and guest speakers from the community
  • Best of //BUILD/ andWindows 10: including the new JavaScript engine for sites and apps
  • Advancing JavaScript without Breaking the Web: Christian Heilmann’s recent keynote
  • Practical Performance Tips to Make Your HTML/JavaScript Faster: a seven-part
    series from responsive design to casual games to performance optimization
  • The Modern Web Platform Jump Start: the fundamentals of HTML, CSS,
    and JavaScript

And some free tools to get started: Visual Studio Code, Azure Trial, and cross-browser testing tools—all available for Mac, Linux,
or Windows.

This article is part of the web dev tech
series from Microsoft. We’re excited to share
Microsoft Edge and the new EdgeHTML rendering engine with you.
Get free virtual machines or test remotely on your Mac, iOS, Android, or
Windows device @