Download - Js foo - Sept 8 upload
![Page 1: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/1.jpg)
Famo.us: Javascript’s comeback story on Mobile
Debnath SinhaCo-founder, CoSight.io
CoSight.io
![Page 2: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/2.jpg)
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
![Page 3: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/3.jpg)
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
![Page 4: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/4.jpg)
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
![Page 5: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/5.jpg)
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
![Page 6: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/6.jpg)
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
![Page 7: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/7.jpg)
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
![Page 8: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/8.jpg)
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
![Page 9: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/9.jpg)
CoSight.io
![Page 10: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/10.jpg)
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
![Page 11: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/11.jpg)
App Structure
Business Logic
Presentation Layer
CoSight.io
![Page 12: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/12.jpg)
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
![Page 13: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/13.jpg)
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
![Page 14: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/14.jpg)
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
![Page 15: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/15.jpg)
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
![Page 16: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/16.jpg)
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
![Page 17: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/17.jpg)
But all of this has happened before!
CoSight.io
![Page 18: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/18.jpg)
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
![Page 19: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/19.jpg)
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
![Page 20: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/20.jpg)
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
![Page 21: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/21.jpg)
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
![Page 22: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/22.jpg)
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
![Page 23: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/23.jpg)
CoSight.io
Benchmark: Matrix multiplication
http://attractivechaos.github.io/plb/
2.3
2.6
![Page 24: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/24.jpg)
If Javascript isn’t slow, then where is the bottleneck?
- Browsers are meant to render documents, not apps- DOM is highly inefficient
CoSight.io
![Page 25: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/25.jpg)
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
![Page 26: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/26.jpg)
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
![Page 27: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/27.jpg)
Famo.us
CoSight.io
![Page 28: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/28.jpg)
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
![Page 29: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/29.jpg)
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
![Page 30: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/30.jpg)
Affine transformation
- Linear transformation- Rotation- Skew- Shear
- Translation- Scaling
CoSight.io
![Page 31: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/31.jpg)
Perspective transformation : Seeing it the way the human eye does
CoSight.io
![Page 32: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/32.jpg)
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
![Page 33: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/33.jpg)
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
![Page 34: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/34.jpg)
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
![Page 35: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/35.jpg)
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
![Page 36: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/36.jpg)
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
![Page 37: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/37.jpg)
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
![Page 38: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/38.jpg)
Render tree representation of each transform
- <Combine both the rectangles into a tree structure>
CoSight.io
![Page 39: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/39.jpg)
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
![Page 40: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/40.jpg)
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
![Page 41: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/41.jpg)
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
![Page 42: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/42.jpg)
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
![Page 43: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/43.jpg)
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
![Page 44: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/44.jpg)
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
![Page 45: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/45.jpg)
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
![Page 46: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/46.jpg)
CoSight.io
![Page 47: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/47.jpg)
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
![Page 48: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/48.jpg)
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
![Page 49: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/49.jpg)
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
![Page 50: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/50.jpg)
First rule of using a Physics engine
DON’T OVER-ENGINEER THE PHYSICS!
CoSight.io
![Page 51: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/51.jpg)
DON’T OVER-ENGINEER THE PHYSICS!
Second rule of using a Physics engine
CoSight.io
![Page 52: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/52.jpg)
Third rule of using a Physics engine
DON’T OVER-ENGINEER THE PHYSICS!
CoSight.io
![Page 53: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/53.jpg)
Eye candy + eye candy + eye candy + ….. = Eye sore!
Golden rule of software design
CoSight.io
![Page 54: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/54.jpg)
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
![Page 55: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/55.jpg)
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
![Page 56: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/56.jpg)
DEMO
- Using Famo.us @ CoSight.io
CoSight.io
![Page 57: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/57.jpg)
Looking onwards
CoSight.io
![Page 58: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/58.jpg)
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
![Page 59: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/59.jpg)
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
![Page 60: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/60.jpg)
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
![Page 61: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/61.jpg)
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
![Page 62: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/62.jpg)
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
![Page 63: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/63.jpg)
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
![Page 64: Js foo - Sept 8 upload](https://reader034.vdocuments.mx/reader034/viewer/2022052622/558d4376d8b42a53318b45a9/html5/thumbnails/64.jpg)
Thank You!
CoSight.io