![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](https://image.slidesharecdn.com/jsfoo8sep-140908055258-phpapp02/85/Js-foo-Sept-8-upload-32-320.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](https://image.slidesharecdn.com/jsfoo8sep-140908055258-phpapp02/85/Js-foo-Sept-8-upload-33-320.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](https://image.slidesharecdn.com/jsfoo8sep-140908055258-phpapp02/85/Js-foo-Sept-8-upload-34-320.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](https://image.slidesharecdn.com/jsfoo8sep-140908055258-phpapp02/85/Js-foo-Sept-8-upload-35-320.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](https://image.slidesharecdn.com/jsfoo8sep-140908055258-phpapp02/85/Js-foo-Sept-8-upload-36-320.jpg)
Js foo - Sept 8 upload
- 1. Famo.us: Javascript’s comeback story on Mobile DebnathSinha Co-founder, CoSight.io CoSight.io
- 2. 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
- 3. 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
- 4. 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
- 5. 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
- 6. 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
- 7. 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
- 8. 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
- 9. CoSight.io
- 10. 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
- 11. App Structure Business Logic Presentation Layer CoSight.io
- 12. 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
- 13. 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
- 14. 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
- 15. 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
- 16. 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
- 17. But all of this has happened before! CoSight.io
- 18. 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
- 19. 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
- 20. 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
- 21. 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
- 22. 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
- 23. CoSight.io Benchmark: Matrix multiplication http://attractivechaos.github.io/plb/ 2.3 2.6
- 24. If Javascript isn’t slow, then where is the bottleneck? -Browsers are meant to render documents, not apps -DOM is highly inefficient CoSight.io
- 25. 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
- 26. 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
- 28. 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
- 29. 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
- 30. Affine transformation -Linear transformation -Rotation -Skew -Shear -Translation -Scaling CoSight.io
- 31. Perspective transformation : Seeing it the way the human eye does CoSight.io
- 32. 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
- 33. 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
- 34. 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
- 35. 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
- 36. 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
- 37. 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
- 38. Render tree representation of each transform -<Combine both the rectangles into a tree structure> CoSight.io
- 39. 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
- 40. 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
- 41. 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
- 42. 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
- 43. 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
- 44. 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
- 45. 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
- 46. CoSight.io
- 47. 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
- 48. 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
- 49. 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
- 50. First rule of using a Physics engine DON’T OVER-ENGINEER THE PHYSICS! CoSight.io
- 51. DON’T OVER-ENGINEER THE PHYSICS! Second rule of using a Physics engine CoSight.io
- 52. Third rule of using a Physics engine DON’T OVER-ENGINEER THE PHYSICS! CoSight.io
- 53. Eye candy + eye candy + eye candy + ….. = Eye sore! Golden rule of software design CoSight.io
- 54. 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
- 55. 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
- 56. DEMO -Using Famo.us @ CoSight.io CoSight.io
- 58. Evolution of MVC Rise of HTML5 Is JavaScript slow? Famo.us rendering MVC @ CoSight.io CoSight.io DEMO Wrapping up – building for the future Better browser capacity Wrappers: Blink Wrappers: Famo.us, Phonegap, CocoonJS WebGL Famo.us in a post-WebGLworld CoSight.io
- 59. 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
- 60. 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
- 61. 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
- 62. 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
- 63. 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