Modern Web Development 2019 – DEV Community 👩‍💻👨‍💻

I won’t be surprised later when front end become fragmented. IMO, it’s just a matter of time.

https://dev.to/decipherzonesoft/modern-web-development-2019-5g51

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);
    }
}


good summary for react redux thunk

source:
https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3

  1. There is 1 global state object that manages the state for your entire application. In this example, it will behave identically to our initial component’s state. It is the single source of truth.
  2. The only way to modify the state is through emitting an action, which is an object that describes what should change. Action Creators are the functions that are dispatched to emit a change – all they do is return an action.
  3. When an action is dispatched, a Reducer is the function that actually changes the state appropriate to that action – or returns the existing state if the action is not applicable to that reducer.
  4. Reducers are “pure functions”. They should not have any side-effects nor mutate the state — they must return a modified copy.
  5. Individual reducers are combined into a single rootReducer to create the discrete properties of the state.
  6. The Store is the thing that brings it all together: it represents the state by using the rootReducer, any middleware (Thunk in our case), and allows you to actually dispatch actions.
  7. For using Redux in React, the <Provider /> component wraps the entire application and passes the storedown to all children.

https://codeburst.io/redux-a-crud-example-abb834d763c9