React Native vs Flutter

Google’s Flutter platform does look very interesting.  In many ways it is similar to React Native.

I would say though that Flutter is not battle-tested yet.

Similarities

  • reactive-style programming patterns for views
  • reactive-style “virtual DOM” for updating “real DOM” (note: in a native app there is not actually a browser DOM, but a tree of UI components; same concept though)
  • backed by big companies (RN = Facebook, Flutter = Google)
  • open source: RN = https://github.com/facebook/react-native, Flutter = https://github.com/flutter/flutter

Differences

  • Language: RN = JavaScript, Flutter = Dart (AOT compiled, strongly typed) [comment: it’s a cool language, but who uses Dart outside of Google really?]
  • UI Widgets: RN = native UI components, Flutter = provides its own customized components drawn on a native canvas (OpenGL or similar), which interestingly is like Adobe AIR or Unity
  • Real World App Examples:
    • RN = Facebook, Instagram, WIX, Facebook Ad Manager, Telsa, Walmart, Skype, Bloomberg, AirBnB, Gyroscope, Myntra, UberEats, Discovery VR, …
    • Flutter = Hamilton, ?
  • Time period since initial release: RN = Jan 2015 (initial release), Flutter = May 2017 (initial release), changed current status from “alpha” to “beta” in Feb 2018 (days ago)

Some Graphics

Google Trends: 5-year comparison of “Flutter” vs “React Native” search terms
March 2018 GitHub repository status for Flutter
March 2018 GitHub repository status for React Native

React Native vs Xamarin

In preparation for a new cross-platform native mobile project, I have been researching cross-platform native app platforms, and topping the list are React Native and Xamarin.  I crossed Ionic off the list because it uses Cordova and a WebView and I want better speed.

Here are some links that have provided insight:

Google Trends: React Native vs. Xamarin

Worldwide. Web Search. 5 years, from Jan 2013 – Jan 2018.

 

Cruxlab, Inc. Sep 20, 2017: Xamarin vs Ionic vs React Native: differences under the hood

Paul Reichelt, Nov 2016: Why I left Xamarin behind in favor of React Native

John A. Calderaio, Feb 2017: Comparing the Performance between Native iOS (Swift) and React-Native

My background in the last 5 years is iOS native and Adobe AIR.  Given that:

  • I currently have more experience in AS3 and JavaScript than C#
  • I just did a ReactJS web project and really liked it
  • Experienced Xamarin developers are moving to and liking React Native
  • React Native is trending better than Xamarin
  • React Native supports hot module replacement (pretty cool!)

I will investigate React Native first and likely go with it for this upcoming project.

Virtual Nile

According to an ancient Egyptian story, party guests would float a lotus flower with a burning candle placed carefully in the middle.

Each person would share a dream hidden in their heart before releasing the lotus flower down the famous Nile river.

It was believed that if the flame continued to burn for the duration of the meal their dream would eventually come true.

Now you can float your own lotus candle down the Nile without going to Egypt.

Portland OR’s Baba’s Mediterranean Grill recently installed a 4-screen “Virtual Nile” in their new Cascade Station location, which officially opened January 6th, 2018.  With the Virtual Nile web app, customers can create a dream and in real time float their very own lotus flower down the Virtual Nile while they eat their meal.

Users’s lotus candles are labeled with their name.  If their candle stays lit all the way down the Nile, according to the legend their dream will come true!

Me at Baba’s testing the Virtual Nile, Jan 2018
mobile web, Jan 2018

Tech Stack:

  • Cloud: AWS API Gateway, Lambda, Dynamo DB, PostgresSQL DB, AWS IoT
  • “Big Screen”: AWS IoT, Adobe AIR, Starling, Feathers
  • Web App: ReactJS, SCSS, Ramda, Axios

Trends: Mobile Web vs Mobile App

From the August 2017 comScore study slides:

  • users spend 87% of their time in apps, 13% in mobile web, however… (slide 5)
  • across age segments, users’ top 10 apps account for 96-97% of their app time (slide 9) – i.e. Facebook, YouTube, Google Search, etc.
  • mobile web gets 2.2x more unique users per month than apps (slide 6)

From this data, it seems that the casual customer would be more likely to visit a mobile website than download and install an app.

A quote from a recent Morgan Stanley analysis:

‘As a crude generalization, the browser is for more casual audiences and apps are for more frequent and loyal customers.’

 
So both mobile web and mobile apps have their place.

Captain McFinn’s Swim & Play

An early-childhood education and entertainment game, including original videos, music, artwork, animations, interactive activities, and a live host! That’s a lot to pack into one app!
Implemented with Adobe AIR; available for iOS and Android.

Download_on_the_App_Store_Badge_US-UK_135x40
en_badge_web_generic

Virtual Aquarium

Multiple high definition displays showcase the Virtual Aquarium world, where users can interact with the live-streaming presenter, create a custom avatar fish and swim it around in the aquarium world, watch videos, and play games / activities.  Users interact via provided built-in tablets or by using their own mobile device.  The live presenter can also see and hear users at different locations, allowing real-time conversations and interaction!

Catapult Crash

A first person physics-based catapult game I helped create with the excellent Flying Rhino team.  Done with Objective-C, Box2D, Cocos2D for the iPad.  The catapult is a 3D model created with Blender.

catapult_screen480x480

Download_on_the_App_Store_Badge_US-UK_135x40