uladzislau-stuk

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/m/MessageBox",
  "sap/ui/core/routing/History",
  "sap/base/Log"
], function () {
	return Controller.extend("com.sap.fiori.BaseController", {
      /**
       * Convenience method for accessing the router.
       * @memberof com.sap.fiori.controller.Base

uladzislau-stuk

The art of naming variables

Arrays

// bad
const fruit = ['apple', 'banana', 'cucumber']

// okay
const fruitArr = ['apple', 'banana', 'cucumber']

// good

uladzislau-stuk

Basic Types

uladzislau-stuk

Interfaces

uladzislau-stuk

Redux provides middleware designed specifically for asynchronous purposes, called Redux Thunk middleware.

To include Redux Thunk middleware, you pass it as an argument to Redux.applyMiddleware(). This statement is then provided as a second optional parameter to the createStore() function. Take a look at the code at the bottom of the editor to see this. Then, to create an asynchronous action, you return a function in the action creator that takes dispatch as an argument. Within this function, you can dispatch actions and perform asynchronous requests.

In this example, an asynchronous request is simulated with a setTimeout() call. It's common to dispatch an action before initiating any asynchronous behavior so that your application state knows that some data is being requested (this state could display a loading icon, for instance). Then, once you receive the data, you dispatch another action which carries the data as a payload along with information that the action is completed.

Remember that you're passing

uladzislau-stuk

These final challenges describe several methods of enforcing the key principle of state immutability in Redux. Immutable state means that you never modify state directly, instead, you return a new copy of state.

If you took a snapshot of the state of a Redux app over time, you would see something like state 1, state 2, state 3,state 4, ... and so on where each state may be similar to the last, but each is a distinct piece of data. This immutability, in fact, is what provides such features as time-travel debugging that you may have heard about.

Redux does not actively enforce state immutability in its store or reducers, that responsibility falls on the programmer. Fortunately, JavaScript (especially ES6) provides several useful tools you can use to enforce the immutability of your state, whether it is a string, number, array, or object. Note that strings and numbers are primitive values and are immutable by nature. In other words, 3 is always 3. You cannot change the value of the number 3. An array or object

uladzislau-stuk

// Redux:
const ADD = 'ADD'

const addMessage = (message) => {
  return {
    type: ADD,
    message: message
  }
};

uladzislau-stuk

// MORE THAN ONE ARGUMENTS:
// Creates a new array with the arguments as items.
// The length of the array is set to the number of arguments.

var array1 = new Array(1, 2, 3);

console.log(array1); // [1, 2, 3]
console.log(array1.length); // 3
Object.getOwnPropertyNames(array1); // ["0", "1", "2", "length"]

uladzislau-stuk

https://www.jstips.co/en/javascript/use-destructuring-in-function-parameters/

uladzislau-stuk

Best practices

• pascalCase for component file name and folder name
• lowerCamelCase for Higher Order Component file and folder name
• lowercase for all other root directory folders. For example: src, components, assets

Anti-pattern

• anti-pattern to copy properties that never change to the state (just access .props directly in that case)

Note: Using props to generate state in getInitialState often leads to duplication of “source of truth”, i.e. where the real data is.