JSFoo talk on how CoSight.io uses Famo.us

1. Famo.us: Build native
quality apps using HTML5
within a day
-Debnath Sinha
CoFounder @ CoSight.io

2. The following slides are
an outline of the talk, and
will be changed for the
final presentation

3. 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

5. The 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

6. 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

7. 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

8. Where have I seen this before, part 2
- Early 2000s:
- Yeah, Java is an enterprise language, no way you
would use it for embedded systems
- Why?
- Too slow...garbage collection kicks in at all odd hours
- Azul systems: Java for real-time apps, write their own
garbage collector
- Never bet against the compiler!

9. So HTML5 is the right way to go,
right?
- Happy with the conclusion
- Discuss with my team, feeling proud of the
analysis
- Until...

11. So now what?
- Dig deeper into what exactly went wrong
- The app was slow in obvious ways which had nothing to do with tech, so was
it HTML5 or immature engineering?
- Luckily there are folks in the HTML5 ecosystem with way more resources than
me
-Sencha, with vested HTML5 interests, releases their report on HTML5
Fastbook

12. Sencha Fastbook : or why not to
take your eye off the HTML5 ball!
- Make sure the
DOM depth doesn’t
get too large
- Don’t transfer too
much data,
increases latency

13. LinkedIn Hybrid iPad app: 95%
HTML5
“We always focus on user
experience and app speed as a
number one priority,” he told us. “If
the performance wasn’t there, we
wouldn’t have gone with the web.
“But with the iPad having the faster
processor and being a more
powerful mobile device, we felt like
the web-based version could give us
the performance we needed.”
http://venturebeat.
com/2012/05/02/linkedin-ipad-app-engineering/

14. Famo.us

15. 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

16. 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

17. 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

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

19. LinkedIn moved away from HTML5
to Native only app
- But this time performance was
not the reason
- Tools were
- Or as C programmers would say:
- Its not that gcc is slow
- Its that gdb is not up to snuff

20. Looking onwards
- Phonegap + Android = :(
- Uses default phone browser
- Intel Crosswalk : ships with Google’s Blink
rendering engine
- Famo.us wrapper : working with both
Adobe and Intel on it
- Debugging tools remain painful
- Debugging OOM is still like pulling teeth
out

21. Thank You!