commonJS vs ES Module

for nodeJS, the server side is by default using commonJS for moduling.

//export data data.js
exports.staffs = [{
   name: "Bush",
   id: 1,
}, 
{
   name: "Forest",
   id: 2
}
];

//default export from module, default.js
module.exports = {name: "Gump"};

//then corresponding import
const { staffs, .... } = require('./data')
const anything = require('./default')


while client side is using ES modules:

//export
export const log = winston.createLogger({....});

//import 
import log from './logging/logger';

JS Frameworks

This crazy race has no winner at all since it is neverending. That’s it! Yesterday you were learning Backbone.js, jQuery, Knockout.js, Ember.js, then AngularJS and now ReactJS, Next.js, Vue.js, all Angular flavors. Today, up comes Ext JS and Aurelia, the new ones. And tomorrow another will come up. The framework array list is endless.

https://dev.to/blarzhernandez/why-you-should-learn-javascript-principles-first-not-the-hottest-frameworks-kb9

ES6 destructing and spread

http://www.typescriptlang.org/docs/handbook/variable-declarations.html#destructuring

destructuring is to auto map the source to the assigned variable, whether being array or object or tuple.


const [a,b,c] = ...

const {a,b,c} = …

const [a,b,c]= …

spread is to auto map any number of items in the array to a spread variable, vice versa. basically to repsent array as one (spread) variable.


const [a, ...b] = ...
const x = [a, ...b]

and in order to destruct array of objects

let o = [
{
a: "foo",
b: 12,
c: "bar"
},
{
a: "test",
b: 20,
c: "check"
}];

let [{a}] = o ====> “foo”

let [{a: a1},{a: a2}] = o ====> “foo”, test

timeout on android emulator

i was keep encountering this exception while pushing the code to android emulator:

47856057-7f798400-ddfb-11e8-9897-3c3914be463d
Annotation 2019-06-27 150813
similar to this
https://github.com/react-community/create-react-native-app/issues/144

turned out the solution was due to the firewall. after having added all android apps (android studio, emulator.exe, abd, avd etc) on the exception list of the firewall, the issue was sorted out.

react render empty

according to react doc

Booleans, Null, and Undefined Are Ignored

falsenullundefined, and true are valid children. They simply don’t render. These JSX expressions will all render to the same thing:

https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored

so



class x extends Component{
     render(){
       return(null);
    }
}


Android React native app

Have played around react native, and published an android app earlier.

some thoughts:

  1. navigator

    this would normally be the entry point, which define the landing page, and how routing to different pages works.


<Navigator
    initialRoute={{ title: 'Tap Scene', id: 'default' }}
    renderScene={this.navigatorRenderScene}
/>

 

Scene

2. For each scene, its a Component, where the life cycle of constructor, componentDidMount, componentUnmount, can be used to trigger specific actions. on each scene, you can use JSX to create the page/view, which could link to functions, like normal js binding:

onActionSelected
onIconClicked
handleClick() {
    if(!this.state.favnumber)
        LocalToastAndroid.show('Please set up your favorite number first', LocalToastAndroid.SHORT);
    else
        LocalToastAndroid.call(this.state.favnumber);
};

Additional actions

3. native react native modules wont cover all functions you request, to create custom module, you can register additional

ReactContextBaseJavaModule

then exposing the method to JS

@ReactMethod
public void call(String number){
.....
}
module.exports = NativeModules.CustomizedModule;

here is the app: https://play.google.com/store/apps/details?id=com.best2lwjj