Building native apps with web components
0 likes314 views
The document discusses the evolution and challenges of web applications compared to native apps, particularly focusing on JavaScript portability and UI abstractions. It reviews tools like Polymer, React Native, and NativeScript, emphasizing the need for developers to adapt to new languages and the efficiency benefits of using the right tools for small applications. The author poses questions about future developments, including the potential for HTML-native solutions and reusing React Native components.
Building native apps with web components
- 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
- 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
- 66. Browser, web controls iOS device, native controls
- 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
- 76. Other frameworks? Hey, buddy, we are just tags!
- 78. AngularJS
- 79. ReactJS
- 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
- 87. appathon.tv