bhaskarmurthy

React Native principles

October 28, 2020

https://reactnative.dev/blog/2020/07/17/react-native-principles

• Our top priority for React Native is to match the expectations people have for each platform. This is why React Native renders to platform primitives. We value native look-and-feel over cross-platform consistency.
• In order to match the look-and-feel of native apps, we must also match their performance.
• Great user experiences are created iteratively. It should only take a few seconds to seeing the result of code changes in a running app. React Native's architecture enables it to provide near-instant feedback during development.
• Teams can easily leverage the fast-growing ecosystem of high quality open source packages. Teams can also share business logic between Android, iOS, and the web. This helps them ship updates faster and reduce organizational silos between platform teams.

bhaskarmurthy

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

bhaskarmurthy

Libraries

• formik - Build forms in React, without the tears
• mobx - Simple, scalable state management
• mobx-react - React bindings for MobX
• mobx-state-tree - Model Driven State Management
• react-apollo - React integration for Apollo Client
• serializr - Serialize and deserialize complex object graphs to and from JSON and Javascript classes
• styled-components - Visual primitives for the component age

UI

bhaskarmurthy

package com.netflix.experiments.rx;

import java.util.HashMap;
import java.util.Map;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import rx.Observable;
import rx.Observable.OnSubscribe;

bhaskarmurthy

{ fontWeight: '100' }, // Thin
{ fontWeight: '200' }, // Ultra Light
{ fontWeight: '300' }, // Light
{ fontWeight: '400' }, // Regular
{ fontWeight: '500' }, // Medium
{ fontWeight: '600' }, // Semibold
{ fontWeight: '700' }, // Bold
{ fontWeight: '800' }, // Heavy
{ fontWeight: '900' }, // Black

bhaskarmurthy

<link rel="import" href="../topeka-elements/category-images.html">
<link rel="import" href="../core-icon/core-icon.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icons/av-icons.html">
<link rel="import" href="../paper-fab/paper-fab.html">

<polymer-element name="my-element">

  <template>
    <style>    

bhaskarmurthy

<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {