Mobile

CC-Mobile Matrix

#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>
![ionic](http://ionic-forum-static.s3.amazonaws.com/forum-logo.png)

###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>

![super-sonic](http://s3.amazonaws.com/appgyver.assets/global-assets/images/appgyver-universal-logos/logo-supersonic-wide-small.svg)

###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>

![react](https://platzi.com/blog/content/images/2015/04/react.png)

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?

![Imgur](http://i.imgur.com/Ol6a67n.png?1)