Front-End Interview

[rogerxu]

Front-End interview questions · Front-End Developer Handbook 2018

Twipped/InterviewThis: An open source list of developer questions to ask prospective employers

• Promise
• async/await
• Closure
• Prototype
• Functional programming
• Object composition over class inheritance
• Event loop
• HTTPS
• HTTP Cache
• Web Sockets

[rogerxu]

Interview Questions

Library

• 前端进阶之道
• 大前端面试题库-面试刷题
• BFE.dev - practice Front-End skills get dream offer.
• 大厂面试题每日一题 (shanyue.tech)

Questions

• 一名【合格】前端工程师的自检清单
  • C2015/fed-learnList: html css Javascript learn list
• Front-end-developer-interview-questions by h5bp
• yangshun/front-end-interview-handbook: 🕸 Almost complete answers to "Front-end Job Interview Questions" which you can use to interview potential candidates, test yourself or completely ignore
• The Definitive JavaScript Handbook for your next developer interview
• 10 JavaScript concepts you need to know for interviews - DEV Community 👩‍💻👨‍💻
• Top 10 JavaScript Interview Questions - YouTube
• 30 seconds of interviews
• Front End Web Development Quiz By David Shariff
• front end Interview
• JavaScript Web Development Quiz By David Shariff
• PerformanceJS | The Best Frontend JavaScript Interview Questions

JavaScript Front End Interview Questions. – Medium

来自掘金的你——挖 "掘" 淘 "金" 之 前端闯关历险记学习资料汇总 · Issue #4 · jawil/blog

Front End Developer Questions - Markyun

30 Interview Questions and Answers (Frontend Engineer) – Medium

25 Essential Questions Asked in Top JavaScript Interviews | Toptal

21 Essential JavaScript Interview Questions | Codementor

Top 85 JavaScript Interview Questions & Answers |

JavaScript Interview Questions | Coding Interview Help | Interview Cake

[rogerxu]

• Master the JavaScript Interview: What is a Closure? – JavaScript Scene – Medium
• Master the JavaScript Interview: What’s the Difference Between Class & Prototypal Inheritance? – JavaScript Scene – Medium
• Master the JavaScript Interview: What is a Pure Function? – JavaScript Scene – Medium
• Master the JavaScript Interview: What is Function Composition? – JavaScript Scene – Medium
• Master the JavaScript Interview: What is Functional Programming? – JavaScript Scene – Medium
• Master the JavaScript Interview: What is a Promise? – JavaScript Scene – Medium

[rogerxu]

10 Interview Questions Every JavaScript Developer Should Know – JavaScript Scene – Medium

Programming Paradigms in JavaScript

• Prototypal inheritance
• Functional programming (closures, first class functions, lambdas (anonymous function))

Functional Programming

Functional programming produces programs by composing mathematical functions and avoids shared states and mutable data.

• Pure functions
• Simple function composition
• Lisp, Haskell, Erlang, Clojure, Elm
• first class functions, functions as arguments/values

Classical Inheritance and Prototypal Inheritance

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]

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]

Preparing

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

[rogerxu]

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]

Resume

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