Caridy Patiño presented on the challenges of building mobile HTML5 applications. Some key challenges include browser fragmentation across devices, network failures, and the need to optimize applications for different runtime environments and adapt them for varying screen sizes and features. Patiño advocated writing applications using a single language, JavaScript, and customizing output per runtime and context while adapting the UI per form factor and feature detection. The goal is to build flexible applications that can run on multiple platforms.

2. Caridy Patiño
Bartender at Yahoo! Mojito Team
Principal Engineer at Yahoo! Search
caridy@yahoo-inc.com
@caridy
#feecbr

4. The challenges of
building mobile HTML5 applications

5. Goal
“to see the big picture”

6. The Web and the mobile revolution

7. 5 ye
ars a
go
“The Web is the most hostile software
development environment imaginable”
- Douglas Crockford

8. But the future was looking bright:
- Javascript libraries getting popular
- ECMAScript 5 on the making
- Chrome Browser on the making

9. But then few things happened:

12. and somehow, we ended up here:

13. @davglass’s lab

14. toda
y
“The Mobile Web is even worse today and
it is not going to get any better anytime soon.”

15. What path to choose?

16. Web Applications

17. “A web application is any application that uses a web
browser as a client.”

18. “A web application is any application that uses a web
browser runtime as a client.”

19. A mobile web application is any web application
that implement a highly interactive UI
specifically optimized for mobile devices.

20. 3 types of mobile web applications
that you can build today

21. WebViews + Local Web App
+
nativ
Native Web
e wr
appe
r

22. - Part of hybrid apps
- Based on WebViews*
- HTML, JS and CSS are bundled with app
- Can work offline
- Mimic native behavior

23. WebViews + Remote Web App
+
nativ
Native Web
e wr
appe
r

24. - Part of hybrid apps
- Based on WebViews*
- HTML, JS and CSS are downloaded over HTTP
- Requires network activity
- Mimic native behavior

25. Expect network craziness

26. Network failures need to be controlled

27. CSS can also fail when loading
web-based apps

28. Initialization needs to be controlled
http://blog.mobtest.com/2012/05/heres-why-the-facebook-ios-app-is-so-bad-uiwebviews-and-no-nitro/

29. Browser based apps
pure
web

30. - Pure web apps
- Require a browser
- HTML, JS and CSS are downloaded over HTTP
- Inherit the freedom of the Web
- Discoverability is inherited as well

31. The total mess of mobile web

32. RIP
form factors

33. Touch screen saves us from
those crazy form-factors

34. The synergy across form factors

35. Fragmentation
3 ye
ars a
go
http://www.adobe.com/devnet/devices/articles/design_tips_mobile_ria.html

36. Fragmentation
http://netmarketshare.com/

37. Android 4 is set to solve
browser fragmentation
we w
i ll se
e

38. Desktop + Mobile form factors

39. Runtimes

40. A runtime is a web engine container that can run a web
application in a form of HTML, JS and CSS

41. A mobile browser, a webview and phonegap are
examples of runtimes

42. Windows 8 has 4 runtimes:
- IE Start Screen Mode (Formerly known as Metro)
- IE Desktop Mode
- WebView (within Native Windows 8 App)
- Native Windows Runtime (Windows Store apps)
https://github.com/yui/yui3/wiki/Windows-8-JavaScript-Runtimes

43. Runtimes allow us to run the same web app
in different contexts

44. Every runtime has its own characteristics, features and
security models

45. Developing for a single runtime is not
longer an option for most products

46. Applications will tent to grow organically
by adding complexity and new logical pieces

48. Reusing UI elements and logical pieces
could be paramount

50. Design specs distribution per device

51. Reusing is the biggest problem of all
in a mobile web application

53. Optimization & Adaptation

54. Optimization vs Adaptation

55. Optimization vs Adaptation

56. Snow Chains to adapt your vehicle

57. Optimization vs Adaptation

58. Optimization

59. Optimization is about customizing the
way your app behaves per runtime

60. It is about producing the right HTML, JS
and CSS per runtime

61. Adaptation

62. Adaptation is about customizing the
UI per screen size, per connection
speed, per feature detection, etc.

63. Adapt per:
- Screen size
- Orientation
- Connection Speed
- Memory
- etc.

64. The Twitter Tale

65. 201
0

66. 201
0
Twitter launched a new version of the web
application that explicitly required javascript

67. http://twitter.com/?_twitter_noscript=1

68. HTML
Javascript
Content
Runtime FE Layer CDN API Layer

69. The problem?
The app was sloooowwwww for
a lot of users, specially mobile users.

70. Less than a year after, Twitter re-architected
the infrastructure to get content upfront

71. HTML
Content
Javascript
More Content
Runtime FE Layer CDN API Layer

72. How can we create web applications
that are flexible enough?

73. Use the same language everywhere!
and that language is JavaScript.

74. Javascript everywhere:

76. Final notes...

77. Build mobile applications on top
of platforms designed primarily for
mobile products

78. The web it’s all about control,
your control

79. write once, run everywhere,
no so easy!

80. Customize per runtime & context,
adapt per form factor & feature detection

81. Build for the future,
don't get locked into a platform.

82. Obrigado
@caridy