In 2016 mobile web apps are still perceived as slow however performance is not a bottleneck anymore. UX is. Users are highly addicted to UI kits mobile ecosystem provide and it is amazingly hard to mimic native controls. But we can use native controls in our Web apps by placing custom tags <native-button>, <native-checkbox> etc. and still be able to use whole set of CSS to layout and wide subset to style app.

6. JavaScript driven operation system, 500 000+ loc

7. New generations every 2 years

9. What is next? Android?
Easy moving from platform to platform.

10. We are interested in JavaScript
portability and UI abstractions

11. Compared with iPhone 1 in performance

12. ChallengingNative.com
Fast web applications development, profiling and optimization

13. The state of
web vs native

14. 2011: Sorry guys,
we fucked up!

17. 2016 Web apps:
Performance
is not a bottleneck
iOS and Android devices
are fast enough

19. 2016 Web apps:
UX is a bottleneck
Users became highly addicted to UX
mobile OS provides

20. Trying to mimic
native controls in web?

22. It is a matter of milliseconds
But they are recognizable
when it is about everyday use

23. So native controls
With JavaScript of course!

24. Because it is cheaper
Cross platform and easy language

25. Cheeaaper!

26. JS because more
developers
Easier to hire

27. Easieeer!

28. Tools available
Titanium, React Native, Native Script

29. Poor community, buggy
+ a lot of specific things to study

31. Native Script
New API and concepts to study on start,
layouting with specific language

32. viewLayout.xml
view.js

33. Sticked to React, new API and concepts to study,
layouting with JSX + subset of CSS

36. All of them force to
learn new languages
Which is good for ambitious,
self motivated developers
who want to l/earn a lot

37. ReactJS = 25 USD/h,
HTML/JS = 8 USD/h
But other way around if you
hire developers and pay

38. ReactJS 40k q/a,
HTML+CSS 1000k q/a
But other way around if you
looking for solutions

39. ReactJS bootstrap in hours,
HTML+CSS bootstrap in minutes
But other way around if you
setting up a project

40. Right tools
for a job
Small applications
could be cheaper to build
with right tool

41. Right tools
for a job
Small applications
could be cheaper to build
with right tool

42. Right tools
for a job
Small applications
could be cheaper to build
with right tool

43. Polymer-Native
Instantiate native controls with Web Components

44. Web Components
are custom HTML tags
E.g. <my-component> or <div is=”my-component”>

46. In browser, web controls iOS native controls

47. Polymer-Native tags
native-view, native-image, native-button,
native-input, native-checkbox, native-select,
native-router, native-route

48. How Polymer-Native works?
Basically using Web Components lifecycle hooks

49. created, attached,
detached, attributeChanged
We can bridge to native images with help of this

50. Consider
browser see native-button
element created
Browser informs native iOS view about it

51. Background WebView
Position,
Size,
Styles,
Attributes
Foreground UIView
<native-button> UIButton
createdCallback
detachedCallback removeFromSuperview()
mutationObserver update()
clicked
changed
focused
...

52. No repaints for web
instances
When native copy is created actual button is being
hidden to reduce resources usage

53. The rest is HTML/CSS/JS
which you know so good
Starting with ordinary index.html

54. Full CSS stack supported
Yeah, you position and style <native-button> as you
would style HTML element in regular web project

55. native-button selector
You may use native-button selector as it would be
standard tag selector. Web components are first
class citizens.

56. How to start?

57. npm install polymer-native -g
Install CLI

58. polymer-native init project-name
Initialize a project with built-in Yoman template

59. ./ios/project-name.workspace
Open it in X-Code

60. Run X-Code project
See it running in emulator? Good, start editing
./www/index.html and files around as you would do
in a web project.

61. Example 1
Basics

63. Browser, web controls iOS device, native controls

64. Example 2
Styling

66. Browser, web controls iOS device, native controls

67. Example 3
Navigation

69. Browser, web controls iOS device, native controls

70. Rebel router
Similar to React Router but in Web Components

71. Example 4
Mixing HTML and native

73. Looks similar,
behaves differently
Is this Apple protecting ecosystem?

74. Why polymer?
Scalability, incapsulation, attributes types,
browser compatibility

75. <my-component isHappy=”true” count=”3”>

76. Other frameworks?
Hey, buddy, we are just tags!

77. EmberJS / BackboneJS

78. AngularJS

79. ReactJS

80. Framework agnostic

81. Cheeaaper!

82. Easieeer!

83. What is next?
HTML-Native as PhoneGap plugin to
let substitute critical web controls in Web Apps

84. What is next?
Reusing React-Native components since eco-system
is rich

85. http://github.com/pixelscommander/html-native
denis.radin@gmail.com
Questions? Proposals? PRs?

87. appathon.tv