This post was created on our new K8 cluster!
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.
- 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
- 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)
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!
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
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 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.
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!
- 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.
AWS CloudFormation and Terraform
Infrastructure as Code – use a single code template to create, update, or delete multiple cloud resources. CloudFormation and Terraform are two valuable tools for achieving this on AWS.
CloudFormation – covers all parts of AWS
Terraform – covers main parts of AWS and other (non-AWS) services as well
A good comparison of the two services is here on Cloudonaut.io.
React Native applies the same principles to cross-platform UI development for iOS and Android.
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.
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);
Intro to Node.js
It’s easy to get started: download Node.js and install it so that it runs from your command line.Continue reading “Intro to Node.js”