Embed Size (px)
Citation preview
JavaScript driven operation system, 500 000+ loc
New generations every 2 years
What is next? Android?Easy moving from platform to platform.
We are interested in JavaScript portability and UI abstractions
Compared with iPhone 1 in performance
ChallengingNative.comFast web applications development, profiling and optimization
The state of web vs native
2011: Sorry guys, we fucked up!
2016 Web apps: Performance
is not a bottleneck iOS and Android devices
are fast enough
2016 Web apps: UX is a bottleneck
Users became highly addicted to UX mobile OS provides
Trying to mimic native controls in web?
It is a matter of millisecondsBut they are recognizable
when it is about everyday use
So native controlsWith JavaScript of course!
Because it is cheaperCross platform and easy language
Cheeaaper!
JS because more developers
Easier to hire
Easieeer!
Tools availableTitanium, React Native, Native Script
Poor community, buggy+ a lot of specific things to study
Native ScriptNew API and concepts to study on start,
layouting with specific language
viewLayout.xml
view.js
Sticked to React, new API and concepts to study, layouting with JSX + subset of CSS
All of them force to learn new languagesWhich is good for ambitious, self motivated developerswho want to l/earn a lot
ReactJS = 25 USD/h,HTML/JS = 8 USD/hBut other way around if you hire developers and pay
ReactJS 40k q/a,HTML+CSS 1000k q/aBut other way around if you looking for solutions
ReactJS bootstrap in hours,HTML+CSS bootstrap in minutesBut other way around if you setting up a project
Right tools for a jobSmall applicationscould be cheaper to buildwith right tool
Right tools for a jobSmall applications could be cheaper to buildwith right tool
Right tools for a jobSmall applications could be cheaper to buildwith right tool
Polymer-NativeInstantiate native controls with Web Components
Web Components are custom HTML tags
E.g. <my-component> or <div is=”my-component”>
In browser, web controls iOS native controls
Polymer-Native tagsnative-view, native-image, native-button,
native-input, native-checkbox, native-select, native-router, native-route
How Polymer-Native works?Basically using Web Components lifecycle hooks
created, attached, detached, attributeChanged
We can bridge to native images with help of this
Consider browser see native-button
element createdBrowser informs native iOS view about it
Background WebView
Position,Size,Styles,Attributes
Foreground UIView
<native-button> UIButton
createdCallback
detachedCallback removeFromSuperview()
mutationObserver update()
clicked
changed
focused...
No repaints for web instances
When native copy is created actual button is being hidden to reduce resources usage
The rest is HTML/CSS/JSwhich you know so good
Starting with ordinary index.html
Full CSS stack supportedYeah, you position and style <native-button> as you
would style HTML element in regular web project
native-button selectorYou may use native-button selector as it would be standard tag selector. Web components are first
class citizens.
How to start?
npm install polymer-native -gInstall CLI
polymer-native init project-nameInitialize a project with built-in Yoman template
./ios/project-name.workspaceOpen it in X-Code
Run X-Code projectSee it running in emulator? Good, start editing
./www/index.html and files around as you would do in a web project.
Example 1Basics
Browser, web controls iOS device, native controls
Example 2Styling
Browser, web controls iOS device, native controls
Example 3Navigation
Browser, web controls iOS device, native controls
Rebel routerSimilar to React Router but in Web Components
Example 4Mixing HTML and native
Looks similar, behaves differentlyIs this Apple protecting ecosystem?
Why polymer?Scalability, incapsulation, attributes types,
browser compatibility
<my-component isHappy=”true” count=”3”>
Other frameworks?Hey, buddy, we are just tags!
EmberJS / BackboneJS
AngularJS
ReactJS
Framework agnostic
Cheeaaper!
Easieeer!
What is next?HTML-Native as PhoneGap plugin to
let substitute critical web controls in Web Apps
What is next?Reusing React-Native components since eco-system is rich
http://github.com/pixelscommander/html-native
Questions? Proposals? PRs?
appathon.tv
