Js foo - Sept 8 upload

Famo.us: Javascript’s comeback story on Mobile
DebnathSinha
Co-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
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

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 acode 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
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
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";
varheightA =elementA.offsetHeight; // layout is needed
elementB.className ="b-style"; // invalidates the layout
varheightB =elementB.offsetHeight; // layout is needed again
elementA.className ="a-style";
elementB.className ="b-style";
varheightA =elementA.offsetHeight; // layout is needed and calculated
varheightB =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
Core technology
Transformations, translations, and scaling
Render Tree in Famo.us
Advantages with 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)
-Show
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
-Show
CoSight.io

Translate this to (100,100)
-Show
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
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) { varBackbone =require('Backbone');
varTaskModel= 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
-vartask =newTaskView({ 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

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

Second rule of using a Physics engine
CoSight.io

Third rule of using a Physics engine
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

DEMO
-Using Famo.us @ CoSight.io
CoSight.io

Evolution of MVC
Rise of HTML5
Is JavaScript slow?
Famo.us rendering
MVC @ CoSight.io
CoSight.io DEMO
Better browser capacity
Wrappers: Blink
Wrappers: Famo.us, Phonegap, CocoonJS
WebGL
Famo.us in a post-WebGLworld
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

Js foo - Sept 8 upload

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (11)

Similaire à Js foo - Sept 8 upload

Similaire à Js foo - Sept 8 upload (20)

Dernier

Dernier (20)

Js foo - Sept 8 upload