Famo.us: Build native quality apps using HTML5

within a day-Debnath Sinha

CoFounder @ CoSight.io

The following slides are an outline of the talk, and

will be changed for the final presentation

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

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

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

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

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!

So HTML5 is the right way to go, right?

- Happy with the conclusion- Discuss with my team, feeling proud of the analysis- Until...

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

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

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/

Famo.us

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

So what is the hack?- Implement rendering engine in Javascript- 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

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

DEMO

- Using Famo.us @ CoSight.io

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

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

Thank You!