/Notes

Notes

Mobile Native

Mobile Native section is aiming to align Android and iOS equivalent on all aspects.

Title

iOS

Android

UI

iOS

declarative ui

  1. SnapKit
  1. Stevia
  1. SwiftUI (iOS 12+)
  1. ComponentKit (Facebook)

Android

XML (preferred)

declarative ui

  1. Compose UI https://developer.android.com/jetpack/compose

Depedency Injection

iOS

Android

High Level Navigation

Abstract the navigation and make it easier to handle

iOS

Android

Image Fetching

iOS

Android

API standard / http client

iOS

Android

Resource management

Both

iOS

Android

native resource system should be enough

Debugging

iOS

Android

Functional Reactive Programming

iOS

Android

Lint

iOS

Android

Hot reload

iOS

Android

  • Exist in android studio

Unit Test

iOS

Android

Data Model

Others

Charts

Lottie (Animation)

QR Code

Lifecycle (Rx)

Java8 API

Code conversion

Command line tools

Mobile Security

Code Generation

Memory Leak

React (.js / native)

IDE

Code Styling

https://editorconfig.org/

Import Path

https://code.visualstudio.com/docs/languages/jsconfig

Visual Studio Code

https://code.visualstudio.com/

Shortcuts

  1. Find file CMD + P

  2. Search text in file CMD + F

  3. Search text in workspace CMD + SHIFT + F

  4. Replace text in workspace CMD + SHIFT + H

  5. Vertical select OPTION + SHIFT + SELECT

Plugins
  1. Numbered Bookmarks
  2. Snippetes (React / Angular JS )
  3. Paste JSON as Code
  4. Prettier - Code formatter
  5. Eslint
  6. Debugger for chrome

Debugging

  1. Reactotron https://github.com/infinitered/reactotron

Custom Command with parameters

import { ArgType } from "reactotron-core-client";

Reactotron.onCustomCommand({
  command: "Open Webview",
  handler: params => { 
    const path = params.path;
    // do something
  },
  title: "Open Webview", // This shows on the button
  args: [
    {
      name: "path",
      type: ArgType.String,
    },
  ],
})

  1. Facebook Flipper (Default) https://github.com/facebook/flipper

  2. React DevTools https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

UI Components

  1. Storybook https://github.com/storybookjs/storybook

Networking / Caching

  1. axios https://github.com/axios/axios

  2. React Query https://react-query.tanstack.com/

Testing

  1. react cosmos https://github.com/react-cosmos/react-cosmos

  2. axe-core https://github.com/dequelabs/axe-core-npm/tree/develop/packages/react

State Management

  1. Redux https://github.com/reduxjs/react-redux

  2. Mobx https://github.com/mobxjs/mobx

  3. Relay (GraphQL) https://github.com/facebook/relay

Redux Side Effect Middleware

  1. thunk https://github.com/reduxjs/redux-thunk

  2. Saga https://github.com/redux-saga/redux-saga

  3. Rx Observable https://github.com/redux-observable/redux-observable

React basic life cycle

  1. componentDidMount
  2. componentDidUpdate
  3. componentWillUnmount

React Hooks (modern UI without classes)

https://reactjs.org/docs/hooks-intro.html

useState

function App() {
    // count: reactiveValue
    // setCount: setter
    // 0 here is initial state;
    const [count, setCount] = useState(0);
    return (<div>count</div)>);
}

useEffect

function App() {
    useEffect(() => {
        // trigger as componentDidMount and componentDidUpdate
        alert('hello world')
        // return function trigger when componentWillUnmount
        return () => alert('componentWillUnmount');
    },
    // dependencies, run when array reactiveValue changes
    [])
}

useContext

Context is based on Context API which provide Content with Provider pattern

useRef

mutable value does not re-render UI.

useReducer

useReducer is for redux pattern

function App() {
    const [state, dispatch] = useReducer();
    return <>
        Count: {state},
        onPress: () => { dispatch({type: 'xxx', payload: {}})}
    </>
}

useMemo

cache result of function call, rare case to use

function App() {
    const [count] = useState(60);
    const expensiveCount = useMemo(() => {
        return count ** 2;
    }, [count])

    return <></>;
}

useCallback

useCallback to prevent unnecessary re-render

function App() {
    const [count] = useState(60);
    const callback = useCallback(() => {
        alert('123);
    }, [count])

    return <><button onPress={callback}></button></>;
}

useLayoutEffect

runs after the render but before painting to screen blocks visual updates until your callback is finished

Functional Hook && useDebugValue

Instead of

function App() {
    const [count, setCount] = useState(0);
    useEffect(() => {
        alert(count)
    }, [])
    return (<div>count</div)>);
}

We can

function countFunc() {
    const [count, setCount] = useState(0);
    useEffect(() => {
        alert(count)
    }, [])
    useDebugValue(count ?? 'I am zero')
    return count;
}
function App() {
    const count = countFunc();
    return (<div>count</div)>);
}

Foundation Packages

  1. URL https://nodejs.org/api/url.html
  2. Lodash https://lodash.com/
import _ from "lodash";
  1. React Native Community https://github.com/react-native-community
  2. moment https://momentjs.com/
  3. Crypto JS https://github.com/brix/crypto-js
  4. JWT decode https://github.com/auth0
  5. Query String https://nodejs.org/api/querystring.html

Node.js / JavaScript

Code Formatting (JavaScript, HTML, CSS, GraphQL, Markdown, YAML)

https://prettier.io/

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

Package scan

  1. Bundle size https://bundlephobia.com/

Debugging

https://nodejs.org/en/docs/guides/debugging-getting-started/

// simple one, listen on 127.0.0.1:9229
node --inspect index.js

// Break before code starts
node --inspect-brk index.js

// listen on other ports
node --inspect=[host:port] index.js

// Chrome inspector, in chrome url, open:
chrome://inspect

// Visual Studio Code, start debug mode
Terminal > DropDown > 'Create Javascript Debug Terminal'

CSS

CSS Preprocessor

PostCSS https://postcss.org/

Sass https://sass-lang.com/

Stylus https://stylus-lang.com/

Less https://lesscss.org/

Box Model

Flex Box

Single Columns/rows

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

Grid

multiple columns/rows

.grid {
    display: grid;
    grid-template-columns: 1fr 500px 1fr;
    grid-template-rows: 100px 200px;
    place-items: center;
}

Responsive Layout

Simple way

.size {
    width: 50%;
}

@media only screen and (max-width:600px) {
    .size {
        width: 200px;
    }
}

@media only screen and (min-width: 1200px) {
    .size {
        width: 800px;
    }
}

Advance way:

.size {
    width: clamp(200px, 50%, 600px);
}

Ratio

.ratio {
    width: 100%;
    aspect-ratio: 16/9;
}

CSS Variables

// :root is global scope of variables. To use local scope, declare it inside the selector.
:root {
    --text-color: rgb(255, 0, 0);
    --r: 128;
    --g: 0;
    --b: 0;
    --another-color: rgb(var(--r), var(--g), var(--b));
}

p {
    color: var(--text-color);
}

// override text-color in local scope
h1 {
    --text-color: rgb(0, 0, 0);
    color: var(--text-color);
}

h2 {
    color: var(--another-color);
}

calculation values

width: calc(100vm - 80px);
font-size: calc(1rem * 1.25);
padding: calc(5% + 2px);

// calc X variables to achieve smooth delay
.order {
    animation-delay: calc(var(--order) * 100ms);
}
<i class="drop" style="--order: 1">1</i>
<i class="drop" style="--order: 2">2</i>
<i class="drop" style="--order: 3">3</i>

CSS Counter (State)

:root {
    counter-reset: headings;
}

h1 {
    counter-increment: headings;
}

h1::before {
    content: counter(headings);
}

Focus control

button:foucs-within .dropdown {
    opacity: 1;
    visibility: visible;
}

CSS Units

// Fixed units
h1 {
    font-size: 14px;
}

// Relative units, em / rem
// em relative to parent's font size
// if parent font size is 12px, 2em = 12px * 2 = 24px
// rem relaive to root font size
h1 {
    font-size: 1em;
    padding: 1rem;
}

// character width, ch, definition of character here is width of "0"
// in this example, width is from minimum 45 characters to 75 characters
.card {
    width: clamp(45ch, 50%, 75ch);
}

// relative to viewport, vw / vh, unit is x% of viewport width / height
// vmin / vmax is relative to 1% of viewport's smaller / larger dimension
h1 {
    font-size: 20vw;
}

CSS color format

  1. rgb rgb(255, 0, 0)

  2. hsl hsl(0, 35%, 50%)

Scroll

article {
    scroll-padding: 1rem 0 0 0;
}

Future

content-visibility https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility

Performance

  1. multiple css for media
<!-- style.css contains only the minimal styles needed for the page rendering -->
<link rel="stylesheet" href="styles.css" media="all" />
<!-- Following stylesheets have only the styles necessary for the form factor -->
<link rel="stylesheet" href="sm.css" media="(min-width: 20em)" /><link rel="stylesheet" href="md.css" media="(min-width: 64em)" /><link rel="stylesheet" href="lg.css" media="(min-width: 90em)" /><link rel="stylesheet" href="ex.css" media="(min-width: 120em)" /><link rel="stylesheet" href="print.css" media="print" />
  1. Parallel / in-series call on css files

API

API Clients

Postman

Postman Detail

Insonomia

PAW

API Documentation

https://swagger.io/

Proxy

Charles Proxy

https://www.charlesproxy.com/

Free, easy to integrate with iOS and Android. mock data available.

Fiddler

https://www.telerik.com/fiddler

Wireshark

https://www.wireshark.org/

Proxyman

https://proxyman.io/

DevOps

  1. Web / API Deployment
  1. Mobile Deployment

Pipeline

  • Mac agent support
  • .yaml: to control the steps
  • secure files: store certificate / keystore
  • variable group: to store values whiic are private / public to devs
  • built binary is stored in Artifact

Release

  • Trigger by artifact build
  • tasks to take action on artifact, i.e. upload testflight, appcenter
  • Approver can be invovled between tasks
  • Service connection to setup account information

Fastlane https://fastlane.tools/

Useful tools

Diagram

General Diagram

Sequence Diagram

Cloud diagram

Online Complier

JS

Website Scanning

UIUX Prototype

Design

Font Review on design

Firebug for designers

Data Model

Git ignore file