Created
May 19, 2015 14:45
-
-
Save alexmgrant/3c73e2c7d932a580d7f3 to your computer and use it in GitHub Desktop.
Mobile
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#Let's build a native an app with web technology: The Challenge | |
###Why building Native is difficult | |
* compiling e...v...e...r...y... t...i...m...e! Thank you node. | |
* creating views is difficult. Manually compute size and layout of our views. | |
* we're web developers who enjoy the increased productivity that comes with our | |
modern development environment. | |
###Why Native is better | |
* platform-specific UI components, like maps, date pickers, switches, navigation | |
stacks, and gesture systems that we don't have to maintain. | |
* on the web we don't have a sophisticated threading model. We can't get | |
the performance close. CSS3 vs Native transitions. | |
###In the middle | |
* Web views! | |
* Scripting native: We use JavaScript to call into native APIs | |
###The middle is a compromise | |
Scripting native is not easy. If we just synchronously call back and forth | |
between the native environment and an interpreted environment, our UI thread | |
could end up being blocked on JavaScript execution. Things become sluggish | |
and the users don't like it. Also accessibility... | |
#Solutions | |
<br> | |
 | |
###Pros | |
* Angular. We know what we're doing + code reuse | |
* Active open source community (components are maintained) | |
* CSS3 animations are well done and performant. So far... | |
* Standard architecture which allows thinking outside the box/framework to use the | |
tools you want... Reactjs? | |
* Integrated use of Cordova API for easy native component use | |
###Cons | |
* Single web view | |
* CSS3 animations are not native animations | |
* Big data/nice visuals will take their toll. (synchronous thread calls) | |
<br> | |
<br> | |
 | |
###Pros | |
* Multiple web views with native transitions and components | |
* very smooth transitions which are native | |
* asynchronously handle views because they run in background threads and | |
keep/update state | |
###Cons | |
* closed and proprietary | |
* 'Supersonic Data' makes it 'simple', but also has you pass data though a proxy | |
* Core Cordova APIs are 'promisified'. So you'll be using their available | |
plugins as an API or hacking in Cordova yourself | |
<br> | |
<br> | |
 | |
The fundamental base of React is that when any state changes, React takes the | |
current representation of the DOM, compares that with the new representation of | |
the DOM, then finds the minimum number of steps to go from the current representation to the next. | |
React keeps track of these diffs and then makes one batch update to the DOM. | |
This is extremely performant and one of the reasons why React is so fast. | |
The important thing to realize though is that the DOM is an implementation detail of building apps for the Web. | |
React doesn't need to just wrap a DOM. With the fundamental nature of React, we | |
can take our virtual DOM representation. Instead of wrapping the real DOM, we | |
can wrap UIkit for iOS development or the Android equivalent for Android development. | |
React Native not only wraps native components, but it's able to perform the | |
layout on a separate thread, leaving the main thread open for more important | |
tasks, like animation. With React Native, there's no HTML, no browser, and no Web views. | |
-Tyler McGinnis | |
###View | |
'The most fundamental component for building UI, View is a container that | |
supports layout with flexbox, style, some touch handling, and <b>accessibility | |
controls</b>. View maps directly to the native view equivalent on whatever platform | |
React is running on, whether that is a UIView, android.view, etc.' | |
###Pros | |
* Virtual Dom | |
* Fast/performance with little effort | |
* Written using ECMAScript 6 | |
* JSX. All of your state in one place | |
###Cons | |
* JSX. Ew. | |
* Some slower ramp up. Proprietary tech. Hard to find developers? | |
 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment