React-redux:

Provider, connect in details:

Provider is a component that will inject the redux store into it's children component by using the 'context'.

connect is used to connect the component to the store, it's used with Provider, which is the parent component that will pass the store to it's children, and connect is a function that helps the child component to get the store, it's used to wrap some of the reusable code. Because when you use context in React, you need to set up the contextTypes in children component, suppose without the connect, every time you need to use store, you need to define the contextType for your child component, and every time you need to dispatch an action, you need to use the .dispatch explicitly, and also you need to call .getState explicitly to get the state, so connect help us to reuse all the stuff behind the sense, it will handle the childContextTypes internal, it will do mapStateToProps, and do mapDispatchToProps, so developer do not need to do it on every component, so those kind of code can be reused.

New in React 16:

https://edgecoders.com/react-16-features-and-fiber-explanation-e779544bb1b7

https://auth0.com/blog/whats-new-in-react16/

  1. React 16 is a big change because it's a re-write, and it's using the fiber architecture, and the biggest-feature is async-rendering, which is split the rendering into chunks, so the rendering will not block the main thread. (React computes part of the tree and then will pause rendering to check if the main thread has any paints or updates that need to be performed. Once the paints and updates have been completed, React begins rendering again. )
  2. Priorities, . This allows high priority updates to jump to the front of the line and be processed first. Such as the key input, which is high priority because use need to see the feedback, compared to the low priority such as the API response.
  3. error boundaries, better error handler, so it will show clear message, and will not break the entire application, and if we receive any error state, we can determine what to render for this error state.
  4. return multiple elements,

  5. portal, a child can be inserted into a different location in the DOM via Portals.

  6. 3 X faster server-side-rendering, a rewrite.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

Flux vs Redux:

  1. Flux is a pattern/architecture, Redux is a library
  2. Store, Flux can have multiple stores per appplication, but Redux convention is to have only one store
  3. Action in Flux is just an object, but in Redux with middlewares, actions can be function or promise
  4. dispatcher, Flux has a single dispatcher which is a singleton object, because Flux can have many stores, so the dispatcher is like the single manager for all the stores, so we can not have multiple dispatchers; Redux has no dispatcher, the dispatch API is returned from the store
  5. Flux has the ability to expose part of the data publicly, redux does not

4

5 mins, Janigua

Coding example:

ES5,

ES5 Asynchronous:

  1. callback

  2. promise

  3. event listener

  4. subscribe/publish

ES6 generator:

generator is the asynchronous solution for ES6, it’s like a state machine,

it has yield and return inside the function, and each yield and return is a state,

and when you execute the generator function, it will return an iterator object,

and every time you call the .next() method on it, it will return you an object with the next state and a done that tells you weather it’s finished or not.

redux-saga: saga,

message queue:

when the javascript getting executed, the code will first be inside a call stack, and because JS is single thread, it will execute the code one by one, and once it met the asynchronous computation, such as the setTimeout or the XHRHttp request, it will be handled by the browser and once it's finished it will be pushed into the message queue, and when the call stack is empty, the methods inside the message queue will be pushed into call stack stack and be executed.

pure function:

it will not mutate the arguments,

and it will not have side effect such as getting data from the database.

non-blocking:

event loop of JS never blocks, which means, when the application is waiting for like AJAX response, it can process other things, and once the AJAX response comes, it will be pushed into the message queue,

how do you call 3rd :

  1. if that library has react version, such as the react-redux, semantic-ui-react, you can just npm install it

  2. if does not, you can include it in the HTML script tag, so you can access it anywhere in your code.

what design pattern you use:

  1. Singleton, we use singleton is our analytics, we created a singleton channel, so every one requiring that channel will be the same channel instance

  2. Mixin pattern, to create the superclass, so we can reuse the methods in superclass

  3. Decorator pattern, it’s a function that accept other object/instance , so we can add more methods to that instance, the HOC is kind of like decorator pattern

  4. Facade Pattern, the connect function use that pattern.

  5. Factory Pattern

passing data from parent to children:

  1. props
  2. redux
  3. Context, ---> getChildContext, childContextTypes -----> contextTypes

React:

in which lifecycle we should not call setState,:

  1. shouldComponentUpdate(), this should only be used to compare props, state to determine wether to render or not
  2. componentWillUpdate(), will have infinite loop
  3. render(), should keep it pure

GraphQL:

AEM: for managing website content, take access

form:

we use the redux-form

TTD,: test, state = 0, increment 1, expect

prototype: oranganse for this.:

truth, false:

truth/falsy is the value that evaluated as true/false in a Boolean context, such as the if statement

such as the number 1 or a string will be true in if statement,

录音：

your experience:

when you prefer store or state??

If you have a very large application, I prefer store, because it will be much easier to handle the data, let’s say you want to pass a data to the 4th level children, using the store is very easy,

but if you have a small application, you an definitely just using the state so that you do not need to have extra redux library in your app

role of reducer:

return state

JavaScript:

does it support prototype or class inheritance?

only prototype inheritance, even though in ES6 we have the class keyword, but it’s just a syntax sugar for prototype-based inheritance .

Prototype vs Class:

Person, accept name age params, Employee class company name, how inheritance in prototype:

function Person (name, age){
    this.name = name;
    this.age = age;
}

function Employee(name, age, salary, companyName) {
    Person.call(this, name, age);
    this.salary = salary;
    this.companyName = companyName;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

ES6, class Person, constructor, how to do you call Employee class extends Person class:
class Person {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }

    eat(){
        console.log(‘eat’);
        }
}

class Employee extends Person {
    constructor(name, age, salary) {
        super(name, age);
        this.salary = salary
    }
}

ES5 Inheritance vs ES6 inheritance:

  1. ES5 first create the child ‘this’, then pass it to the parent, but in ES6 it first create the parent ‘this’, that’s why we need to call super() in child constructor otherwise we cannot use ‘this’.

  2. ES6 ‘class’ does not hoist, but the function in ES5 hoist

when do you use prototype inheritance and when to use class inheritance:

  1. JS prototype inheritance is single inheritance

  2. JS prototype inheritance is simply, easy to use

clousures:

new React 16 features: top

different data types in JavaScript, 7, 6 in primitive,

String, Number, Boolean, Null, Undefined, ES6 Symbol, object

undefined vs null:

undefined: variable has been declared but not yet assigned a value

Null: null is assignment value, it’s an object, it’s like a placeholder for an object

you are in for loop, you have 10 buttons in your app: 

var items = document.getElementsByClassName('1');
//console.log(items[0].innerHTML)
for(var i=0;i<5;i++){

var item = items[i];
item.addEventListener('click', function(){
alert( item.innerHTML)
})
}

//result:
// click every button will return 10
// because addEventlistener is webAPI, it’s asynchronous, so the for loop will execute first to the last item, and when you attach the listener to the item,

fix: self invoke

var vs let:

  1. var is function level, let is block level

  2. var declared variable will be hoisted, let const will not hoisted

  3. let declared variable cannot be declared twice, will have syntax error saying has already been declared

  4. when you declare a variable in the global context, using var a = 1, then window.a = 1; but using let a = 1, the window.a will be undefined;

what is the issues declaring variable on the global?:

for loop, i-0,i<10;

debouncing: ensuring a given task doesn't fire too much, it’s used to improve the performance

for example:

  1. in our User Analytics, we use debounce in the scroll event, because scroll event will fire ton of events when you scroll, if you are listening all those event, there is gonna be performance issue, so we debounce it for every 1 seconds, the debounce function we use is from kefir.js which is reaction functional programming library,

  2. we also use debounce in to debounce the AJAX, when we send our analytics data to the backend, we are not sending it every time we got data, we batch them together and send it out in every 3 seconds

Why it is a good idea to wrap the entire content of a JavaScript source file in a function block?

  1. that is used to create the closure, to have a private variable for for function, so we do not pollute the global environment

  2. it also help to create the namespace, so that it will not have name conflict between different modules

What is a potential pitfall with using typeof bar === "object" to determine if bar is an object? How can this pitfall be avoided?

  1. the null will be treated as object, (array also object)

  2. (bar !== null) && (typeof bar === "object") && (a.constructor === Object || a.constructor === undefined);

benefits of including 'use strict’:

  1. stricter parsing and error handling in JS file or function.

  2. Strict mode makes it easier to write "secure" JavaScript.

  3. Strict mode changes previously accepted "bad syntax" into real errors.

  4. As an example, in normal JavaScript, you must use var to define variable, mistyping a variable name creates a new global variable. In strict mode, this will throw an error, making it impossible to accidentally create a global variable.

  5. you can not use future version JavaScript

  6. ES6 modules are always in strict mode.

  7. value passed as this to a function in strict mode is not forced into being an object (Not Autobox to object)

How to handle JavaScript exceptions globally?
automated collection of error reports.
Assign the window.onerror event to an event handler like:
<script type="text/javascript">
window.onerror = function(msg, url, line, col, error) {
// Note that col & error are new to the HTML 5 spec and may not be
// supported in every browser. It worked for me in Chrome.
var extra = !col ? '' : '\ncolumn: ' + col;
extra += !error ? '' : '\nerror: ' + error;

// You can view the information in an alert to see things working like this:
alert("Error: " + msg + "\nurl: " + url + "\nline: " + line + extra);

// TODO: Report this error via ajax so you can keep track
// of what pages have JS issues

var suppressErrorAlert = true;
// If you return true, then error alerts (like in older versions of
// Internet Explorer) will be suppressed.
return suppressErrorAlert;
};
</script>

what is virtual DOM

vDOM is just a plain javascript object that represents the actual DOM, and it’s very efficient because of the Reconciliation the diff algorithm, the complexity if O(n),

And with VD, developer can only focus on the data or model, you do not need to care about how and when to update the DOM manually, React will do that part for you, so it will be much easier to build the UI especially if you have a very rich UI with a lot of data you need to manipulate, think about the old ways without the virtual dom:

  1. if you are plain JavaScript, you will need to set up all the event listeners, and update the DOM by yourself, you will end up with a lot of code that is related to DOM manipulation which will be hard to maintain and refactor.

  2. if you are using other framework or library without VD, there solution is inefficient, for example, you have a list contains 10 items, and you only update 1 of them, most of the framework will rebuild the whole items, so it’s inefficient.

Angular 1 one-way data binding?

in the component, use ‘<‘ in side binding instead of the ‘='

bindings: {

obj: '<',

prim: '<'

},

css- Linear-gradient():
function creates an image which is in a linear gradient colors.
background: linear-gradient(direction, color-stop1, color-stop2, ...);

#grad {

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 to 6.0 */

background: -o-linear-gradient(right, red, blue); /* Opera 11.1 to 12.0 */

background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 to 15 */

background: linear-gradient(to right, red , blue); /* Standard syntax */

}

css default values: a default value is the default behavior for an element, for example, the <div>


css3, browser support

css vendor prefix, how you use it?

Browser vendors add support for new CSS features before those features are fully supported in all browsers.

The major browsers use the following prefixes:

*
-webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)
* -moz- (Firefox)
* -ms- (Internet Explorer and Microsoft Edge)
* -o- (Old, pre-WebKit, versions of Opera)
for example, the linear-gradient:
background: -webkit-linear-gradient(whitesmoke, lightgray);
background: -o-linear-gradient(whitesmoke, lightgray);
background: -moz-linear-gradient(whitesmoke, lightgray);
background: linear-gradient(whitesmoke, lightgray);

what is pseudo class in csS?

pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

for example, the :hover for an button, :focus for an input,

css box model:

the box model is used when we talking about the layout and design, so basically all HTML elements can be considered as boxes. So it’s like a box that wraps the html element, and from the out side to inside, we have margin, border, padding, and content.

And when when we calculate the width or height, we use all values, but usually develops use the box-sizing: border-box/content-box, so when use say your element is 100px width, that 100px will including the width, border and content

do you follow bem?

BEM CSS: Block, Element, Modifier methodology:

popular naming convention for classes in HTML and CSS, help developers better understand the relationship between the HTML and CSS

/* Block component */
.btn {}

/* Element that depends upon the block */
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {} .btn--big {}


<a class="btn btn--big btn--orange" href="http://css-tricks.com”>
<span class="btn__price">$9.99</span>
<span class="btn__text">Subscribe</span>
</a>

  1. What is this project, is it a new one or ongoing one, and what technogiligies they use?

  2. For this project, which part of knowledge do you want me to improve myself?

  3. What they use for the backend?

  4. Is the backend fully separate from the front end? I mean, do we need to work on the backend? And do we have access to the backend??

  5. What is the location of this project?

results matching ""

    No results matching ""