Posts

Posted on

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

Posted on

PCI DSS Developer Curriculum

I finished several online courses last week on the subject of computer application security and how to properly handle sensitive cardholder data.   Very interesting!

The courses were offered through Security Innovation, a company that specializes in cybersecurity standards, education, and assessment.

PCI DSS stands for Payment Card Industry Data Security Standard. These are some common security standards put together by the PCI Security Standards Council, which was formed in 2004 by the large credit card companies: Visa, MasterCard, American Express, Discover, and JCB.

I completed the following courses, offered together in a PCI Developer bundle:

COD 222 – PCI DSS v3.2 Best Practices for Developers
DES 221 – OWASP Top 10 – Threats and Mitigations
ENG 301 – How to Create an Application Security Threat Model
ENG 312 – How to Perform a Security Code Review

Some basic take-aways:

  • build security into an application from the requirements / architecture stage: the very beginning!
  • create a detailed security threat model to identify all security threats and then define appropriate mitigations
  • when transmitting data over an untrusted network, always encrypt data with strong cryptography
  • do not store cardholder data unless absolutely necessary!
  • validate / sanitize all user input!
Posted on

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.

Posted on

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
Posted on

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.

Posted on

React.js

React.js is a JavaScript library created and maintained by Facebook for building user interfaces.  React maintains a virtual “DOM” in memory and makes updates to the real DOM only as needed.

React Native applies the same principles to cross-platform UI development for iOS and Android.

React.js components are typically written in JSX, a JavaScript extension syntax that allows inlining HTML with code, among other features.  JSX is optional and not required to use React.

Thoughts?  I really like how UI elements and state are componentized and non-global.  I don’t like how there are now two DOMs – the real one and the React-managed one.

The React tutorial is a Tic Tac Toe game; here’s my completed version.

Posted on

JavaScript Array.map() and arrow functions

In newer versions of JavaScript (ECMAScript 5 +) we have the wonderful Array.map() method, and in even newer versions (ECMAScript 6+ aka ECMAScript 2015) we have the new arrow function expressions.

This allows for concise and powerful code like the following:

// an Array of integers
var array1 = [1, 4, 9, 16];

// create a new Array from the original Array using a function
const map1 = array1.map(x => x * 2);

// display; expected output: Array [2, 8, 18, 32]
console.log(map1);