Famo.us: Javascript’s comeback story on Mobile

Debnath SinhaCo-founder, CoSight.io

CoSight.io

Who am I?

- Software engineer : 6 years- CoFounder @CoSight.io: 1 year- Hybrid mobile app developer : 3 years- Previous job: worked on Salesforce Analytics delivering Dashboards as HTML5 components inside their Native app

CoSight.io

Evolution of MVC

Rise of HTML5

Is JavaScript slow?

Famo.us rendering

MVC @ CoSight.io

CoSight.io DEMO

Wrapping up –building for the

future

CoSight.io

Evolution of MVC

Rise of HTML5

Is JavaScript slow?

Famo.us rendering

MVC @ CoSight.io

CoSight.io DEMO

Wrapping up –building for the

future

Server-side processing

jQuery and AJAX help client-side transition

Cross-platform bugs = incorrect results!

Need a common code base

CoSight.io

Once upon a time…..

Model, View and Controller all resided on the server

Example:- Sales pipeline: Lead -> Opportunity -> Account- “Show the sum of all Opportunities for companies with

less than 2000 employees in the SMB segment”- Request goes to server, which computes the results and

sends it back

CoSight.io

AJAX and jQuery eased the MVC transition to the client-side

- Part of the MVC model started moving from the server to the client to make websites more responsive

- But it was still all Javascript

- Example (contd.):– Client asks server for all accounts during the initial request– Filtering it for employees less than 2000 happens on the client alone

subsequently without any further communication with server

CoSight.io

Then came the phones… and platforms…

- Mobile browsers, different languages

- 3G connections actually have very low bandwidth and very high latency

- Users expect phone apps to be much more responsive that their desktop counterparts

- Now a LOT more business logic is moving to the client

CoSight.io

CoSight.io

A simple bug - Sum of Annual Revenues for the SMB market

iOS codebase:

if (#employees < 2000) {sum += annual_revenue

}

Android codebase:

if (#employees <= 2000) {sum += annual_revenue

}

Opportunity Annual Revenue # of employees

Acme Global $1,000,000 3000

Catamaran Holdings $2,000,000 2000

Shaomi Corp $1,000,000 2000

Golden Dragon $3,000,000 1000

Time Tested Industries $1,000,000 4000

$3,000,000 $6,000,000

CoSight.io

Why is this bad?

- Now, you have lost the trust of the customer

- Yes, test should have caught this

- But in reality there are a lot of things tests don’t catch- And mosts tests run on a code base, not multiple code

bases- So who checks for cross-platform correctness?

CoSight.io

App Structure

Business Logic

Presentation Layer

CoSight.io

The need for a common code base

- It’s not just about saving developer cycles- Though that alone is worth it

- It’s about correctness

CoSight.io

2 languages to have a common code base on web, iOS and Android

C/C++- iOS library- Android NDK- Emscripten (C++

=> JS)This is being used by game companies

Javascript

- UIWebView

- WebView

- V8, SpiderMonkey etc.

CoSight.io

Evolution of MVC

Rise of HTML5

Is JavaScript slow?

Famo.us rendering

MVC @ CoSight.io

CoSight.io DEMO

Wrapping up –building for the

future

My HTML5 journey

Never bet against the compiler!

I’ve seen this before -- examples

HTML5 v/s Native wars

CoSight.io

My HTML5 journey

- Native Analytics Mobile App ~2008- Small but loyal user base

- Company push towards one-Salesforce HTML5 app- No time for feature-dev on Analytics app!- 2 ways forward:

- Individual connected apps- Single HTML5 app

CoSight.io

Software engineering rule #1: Never bet against the compiler!

- Javascript is the high level language

- Android/iOS etc. all run ARM

- So when folks complain about the performance, they are really complaining about a bad compiler

CoSight.io

But all of this has happened before!

CoSight.io

Where have I seen this before?

- Previous job @Cisco, low level device drivers- Conversation (imaginary), late 90’s

- Hey, we’re going to write it in C++, OOP should help us structure the code better and save developer cycles

- WHAT?? C++ is too slow for embedded systems- No worries, the compiler will get better!

- Today, no one complains about C++ performance issues

CoSight.io

Where have I seen this before, part 2

- 80’s : Assembler vs Compiled languages- Used to be a >> 1 was faster than a/2- Today the compiler takes care of anything like this

- Never bet against the compiler!

CoSight.io

CoSight.io

HTML5 vs Native wars : Circa 2012- “The biggest mistake we made as a company was betting on HTML5” ~Zuckerberg

- “We always focus on user experience and app speed as a number one priority. If the performance wasn’t there, we wouldn’t have gone with the web.” ~Kiran Prasad, LinkedIn

- LinkedIn has since moved back to a native implementation, but more because of lack of debugging/profiling tools than performance

- Sencha Fastbook : HTML5 wasn’t the problem

- Don’t make the DOM too long : especially for infinite scroll feeds, reuse table cells like Native applications

- Don’t send too much data over from the server, increases latency

Evolution of MVC

Rise of HTML5

Is JavaScript slow?

Famo.us rendering

MVC @ CoSight.io

CoSight.io DEMO

Wrapping up –building for the

future

Benchmark – matrix multiplication

Bottleneck – DOM inefficiency

DOM inefficiency – example

CoSight.io

Question: Is Javascript really slow?

- Used to be true- Google invested a lot in the V8 engine- Went into node.js- Currently used by many organizations as a scalable web server

CoSight.io

CoSight.io

Benchmark: Matrix multiplication

http://attractivechaos.github.io/plb/

2.3

2.6

If Javascript isn’t slow, then where is the bottleneck?

- Browsers are meant to render documents, not apps- DOM is highly inefficient

CoSight.io

Layout thrashing : example of DOM inefficiency

elementA.className = "a-style";

var heightA = elementA.offsetHeight; // layout is

needed

elementB.className = "b-style"; // invalidates

the layout

var heightB = elementB.offsetHeight; // layout is

needed again

elementA.className = "a-style";

elementB.className = "b-style";

var heightA = elementA.offsetHeight; // layout is

needed and calculated

var heightB = elementB.offsetHeight; // layout is

up-to-date (no work)

- Applications should not need to get into this detail

- Very hard to maintain this for very large and complex web apps

- Libraries like React.js from Facebook are trying to create and abstraction here (ShadowDOM)

CoSight.io

Evolution of MVC

Rise of HTML5

Is JavaScript slow?

Famo.us rendering

MVC @ CoSight.io

CoSight.io DEMO

Wrapping up –building for the

future

Core technology

Transformations, translations, and scaling

Render Tree in Famo.us

Advantages with Famo.us

CoSight.io

Famo.us

CoSight.io

Core technology

- Browsers are built to render documents- Browsers were never built to render apps- Games were built to render app- All smooth animations must be GPU accelerated

- faster animations- saves battery

CoSight.io

Transformation matrix: borrowing from video games

- It is possible to project any 3D world onto a 2D plane using a combination of 4x4 matrices, as the human eye sees it

- Computer graphics (and hence video games) have used this since the 70’s

- Painters like DaVinci and Donatello have used this since the Renaissance

CoSight.io

Affine transformation

- Linear transformation- Rotation- Skew- Shear

- Translation- Scaling

CoSight.io

Perspective transformation : Seeing it the way the human eye does

CoSight.io

Example: take a rectangle

- <This transformation matrix is [1,0,0,0;0,1,0,0;0,0,0,0;0,0,0,1]>- Show

<div style="-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">

CoSight.io

Translate the rectangle to (200,400)

- <This transformation matrix is [1,0,0,0;0,1,0,0;0,0,0,0;200,400,0,1]>- Show

<div style="-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 400, 0, 1);">

CoSight.io

Rotate the offset rectangle by theta

- <This transformation matrix is [cos, -sin,0,0; sin,cos,0,0;0,0,1,0;0,0,0,1]>- multiply this with previous matrix and show the div element

CoSight.io

Now take another rectangle

- <This transformation matrix is [1,0,0,0;0,1,0,0;0,0,0,0;0,0,0,1]>- Show

<div style="-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">

CoSight.io

Translate this to (100,100)

- <This transformation matrix is [0,0,0,0;0,100,0,0;0,0,0,0;100,100,0,1]>- Show

<div style="-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 100, 0, 1);">

CoSight.io

Think of these rectangles as Views

- On most UI frameworks, complex Views are written as trees of views- Each view has sub-Views attached at various offsets- Leaf nodes have some Renderables

CoSight.io

Render tree representation of each transform

- <Combine both the rectangles into a tree structure>

CoSight.io

Corresponding concepts in famo.us

- Renderable is a Surface- Transformation matrices are modifers- The render tree is a tree of Renderables and Modifiers chained together

CoSight.io

So what is the hack?

- Implement rendering engine in Javascript- Matrix multiplication in JS ~80% of compiled C

- Use the -webkit-transform:matrix3d API to talk to GPU- Since this is part of the W3C standard, you can expect all

browsers to implement this API- Smooth transitions, faster render, lesser battery

- Expose the physics engine for custom animations

CoSight.io

Famo.us : Advantages

- Imperative programming, rather than declarative programming like CSS- Personal opinion: always harder to debug declarative programs, whether they are CSS or SQL- Simpler to come up to speed

- Very important for a startup since you don’t have the bandwidth to wrestle with technology

CoSight.io

Evolution of MVC

Rise of HTML5

Is JavaScript slow?

Famo.us rendering

MVC @ CoSight.io

CoSight.io DEMO

Wrapping up –building for the

future

How does it all fit together?

Simulating offline access

The 3 Rules of using Physics engines

Need a common code base

CoSight.io

Famo.us , Backbone, MVC : how does everything fit together?

- MVC is a design pattern- Controllers are usually too application specific to have a useful yet generic framework around- Famo.us is all about the layout- It’s the V in MVC- What about the model?- @CoSight, we use Backbone.js for the model, collections etc.

CoSight.io

Create Models, Collections in Backbone

- define(function(require, exports, module) {var Backbone = require('Backbone');

var TaskModel =Backbone.Model.extend({

defaults: {text: 'Edit this task',completed: false

}});

module.exports =TaskModel;});

CoSight.io

Create a Views in Famo.us

- Pass in the Model as an argument

- var task = new TaskView({model: new TaskModel(),collection: this.collection

});this.taskListView.pipe(this._eventInput);

- All events between Models and Collections handled in

Backbone as normal

- Events between Models and Views handled in Famo.us

- Famo.us views listen to Backbone.js events

- this._eventInput.on('editTask', function(task) {

if (!this.sideView.open) {

this.editTaskView.editTask(task);

}

}.bind(this));

CoSight.io

CoSight.io

Offline needs to be engineered

- Doesn’t come out of the box- Biggest problem for people coming from the web world, its an afterthought

- They didn’t need to worry about offline on the web (broadband!)- Offline is NOT an afterthought, it needs to be baked into the app right from the start

CoSight.io

Is it possible to disable the network in iOS Simulator?

- 800 Mhz has a 37 cm (14") wavelength, 1900 Mhz has a 16 cm (6") wavelength.

- http://stackoverflow.com/a/13831212/2448805

CoSight.io

Webworkers: Transfer intensive compute to a different thread

- UI thread need to do nothing other than rendering in order to be responsive- Offload all computation, I/O expensive process to a different thread

- Eg: Trying to save a large data-cube, filtering a large-dataset to find top accounts in a given city

CoSight.io

First rule of using a Physics engine

DON’T OVER-ENGINEER THE PHYSICS!

CoSight.io

DON’T OVER-ENGINEER THE PHYSICS!

Second rule of using a Physics engine

CoSight.io

Third rule of using a Physics engine

DON’T OVER-ENGINEER THE PHYSICS!

CoSight.io

Eye candy + eye candy + eye candy + ….. = Eye sore!

Golden rule of software design

CoSight.io

Golden rule of software design

- If the user has to think about your software, you have failed

- Microsoft Word: User should think about creating their document, not how they get the bullet point aligned

- CoSight.io: User should be thinking about which sales accounts need his attention

- Anything else is a failure of the software

CoSight.io

Evolution of MVC

Rise of HTML5

Is JavaScript slow?

Famo.us rendering

MVC @ CoSight.io

CoSight.io DEMO

Wrapping up –building for the

future

CoSight.io

DEMO

- Using Famo.us @ CoSight.io

CoSight.io

Looking onwards

CoSight.io

Evolution of MVC

Rise of HTML5

Is JavaScript slow?

Famo.us rendering

MVC @ CoSight.io

CoSight.io DEMO

Wrapping up –building for the

futureBetter browser capacity

Wrappers: Blink

Wrappers: Famo.us, Phonegap, CocoonJS

WebGL

Famo.us in a post-WebGL world

CoSight.io

Bridging the capability of older/default browsers

- The first need is for a more updated browser- Phonegap defaults to default Android browser- Issue: Only since KitKat was the default chrome- Lots of Android phones running on 4.2/4.3- The second question is which rendering engine to use

CoSight.io

Wrappers: Blink

- Intel Crosswalk bundles Google’s Blink (Webkit fork) with their version of Phonegap- This gives the latest Android- Now you can use features like WebGL and Web workers- Issue: Blink must be downloaded, increases memory footprint- Salvation: Different apps can share the Chrome browser, so long as they are using the same version- This works on high end Android phones- Does not scale on the new class of low end phones about to hit the market- Users on low end phones check app size before downloading

CoSight.io

Wrappers: Famo.us, Phonegap, CocoonJS

- Debugging should be easier once you have the Blink engine running- It’s all written in C++ anyways, so should be possible to link it to the app- Once we bundle the Blink engine, we should be able to get mobile version of Chrome Dev Tools- Intel isn’t the only game in town, Famo.us is coming up with its own wrapper, Phonegap is trying to improve theirs, Ludei has CocoonJS- So now we come back to the analogy, the Javascript code will be run by the Blink engine- So now we can either render using Blink’s rendering engine or Famo.us- Both recognize that more people are building apps than documents- These worlds are bound to collide

CoSight.io

WebGL

- Javascript API for using GPU for physics engine- Too low level, need a library/framework for writing higher level code

- Famo.us - should be WebGL compatible- Three.js - currently used to make games, should be easy to port apps

- iOS8, Android > 4.1 - Still a year or 2 away from mass adoption- How powerful will the GPUs be on the low end phones?

- For previous generation OS- Package latest Chrome’s Blink engine using wrappers- Use advanced features like Web Workers, WebGL etc.

CoSight.io

Famo.us in a post-WebGL world?

- Famo.us is the framework for creating scenes, it would correspond to three.js- Easier construction of scenes- WebGL is the low level interface to the GPU- Whether it will pull out ahead will depend on community adoption- We expect real advantage in a post-WebGL world to be things like off-the-shelf components which adhere to design paradigms like Material Design and prevalent iOS design- Not scalable for every organization to design their own components for every single component

CoSight.io

Thank You!

CoSight.io