Class Inheritance: instances inherit from classes (like a blueprint - a description of the class), and create sub-class relationships. Instances are instantiated via constructor functions with the new keyword.

Prototypal Inheritance: instances inherit directly from other objects. Instances are typically instantiated via factory functions or Object.create(). Instances may be composed from many different objects, allowing for easy selective inheritance.

Functional Programming vs Object Oriented Programming

OOP

Pros

Easy to understand the basic concept.
Use an imperative style rather than a declarative style.

Cons

Depends on shared state.

FP

Pros

Avoid any shared state or side-effects
Favor declarative and denotational styles
Make use of pure functions is easy to scale up without resource conflicts and race conditions.

Cons

Large compositions can reduce readability
Steeper learning curve

Prototypal Inheritance

Delegation (i.e., the prototype chain).
Concatenative (i.e., mixins, Object.assign())
Functional (A function used to create a closure for private state).

"favor object composition over class inheritance"

It means that code reuse should be achieved by assembling smaller units of functionality into new objects instead of inheriting from classes and creating object taxonomies.

In other words, use can-do, has-a, or uses-a relationships instead of is-a relationships.

Two-way Data Binding vs One-way Data Flow

Two-way data binding - UI fields are bound to model data dynamically such that when a UI field changes the model data changes with it and vice-versa.

One-way data flow - The model is the single source of truth. Changes in the UI trigger messages that signal user intent to the model. Only the model has the access to change the app's state. The data always flows in a single direction, which makes it easier to understand.

Monolithic vs Microservice Architecture

Monolithic architecture

The app is written as on cohesive unit of code whose components are designed to work together, sharing the same memory space and resources.

Pros

Have cross-cutting concerns, such as logging, rate limiting, and security features.
Performance advantages, since shared-memory access is faster than inter-process communication (IPC).

Cons

Tightly coupled, difficult to isolate services for independent scaling or code maintainability.
Hard to understand for many dependencies, side-effects.

Microservice architecture

The app is made up of lots of smaller, independent applications capable of running in their own memory space and scaling independently from each other across many separate machines.

Pros

Better organized
Decoupled services are easy to recompose and reconfigure to serve the purposes of different apps.
Performance advantage to isolate hot services and scale them independent.

Cons

Performance overhead caused by IPC and network communication
Cross-cutting concerns
Deployed on their own VM or containers, causing a proliferation of VM work.

Asynchronous Programming

Asynchronous programming means that the engine runs in an event loop. When a blocking operation is needed, the request is started, and the code keeps running. When the response is ready, an interrupt is fired, which causes an event handler to be run. In this way, a single thread can handle many concurrent operations.

rogerxu commented 7 years ago

Pure Function

Promise is not a pure function because it is eager to run. But we can wrap a function to return a function that returns the Promise object. This function is pure.

const getInfo = name => () => jQuery.get(`https://www.example.com/${name}`);

const fetch = getInfo('foo'); // this function is pure
fetch() // t his function is not pure
  .then(id => console.log(id))
  .catch(handleErrors);

rogerxu commented 7 years ago

Preparing

[ ] Preparing for a Front-End Web Development Interview at Top Tech Companies by David Shariff

rogerxu commented 6 years ago

Cracking the front-end interview – freeCodeCamp

Front-end concepts

HTML and CSS

CSS animations
CSS sprites
Pseudo classes
Grid systems
Semantic markup
CSS preprocessors
CSS naming conventions
- BEM
- OOCSS

JavaScript Concepts

Prototype inheritance
Scoping
Closures
The event loop
Event bubbling
Apply, call and bind
Callbacks and promises
Variable and function hoisting
Currying

Design Patterns

Decorator
Factory
Singleton
Revealing module
Facade
Observer
MVC, MVP, MVVM
React + Redux

Computer science concepts

Data Structures

Linked lists
Hashtables
Stacks and queues
Trees (binary trees and heaps)
Graphs
- depth-first
- breadth-first

Sorting

Binary search
Bubble sort
Insertion sort
Merge sort
Quick sort
Selection sort

rogerxu commented 1 year ago

Resume

如何写一份有效的技术简历？ - 阮一峰的网络日志 (ruanyifeng.com)

rogerxu / rogerxu.github.io

Front-End Interview #47

Interview Questions

Library

Questions

Programming Paradigms in JavaScript

Functional Programming

Classical Inheritance and Prototypal Inheritance

Functional Programming vs Object Oriented Programming

OOP

FP

Prototypal Inheritance

"favor object composition over class inheritance"

Two-way Data Binding vs One-way Data Flow

Monolithic vs Microservice Architecture

Monolithic architecture

Microservice architecture

Asynchronous Programming

Pure Function

Preparing

Front-end concepts

HTML and CSS

JavaScript Concepts

Design Patterns

Computer science concepts

Data Structures

Sorting

Resume