Front-end Infrastructure Basics Flashcards
What is a “module bundler”?
A module bundler will parse through our code, mapping out dependencies as it comes across them, to bundle our application together in a way that the browser can understand, while still allowing developers to maintain modularity and separation in the codebase.
Give examples of popular “module bundlers” tools
- Webpack
- Browserify
What is a “module loader”?
A module loader interprets and loads a module written in a certain module format.
What are the steps a module loader usually performs when you load it in your browser?
- you load the module loader in the browser
- you tell the module loader which main app file to load
- the module loader downloads and interprets the main app file
- the module loader downloads files as needed
What is “CommonJS”?
It is a specification for a module loading API in Javascript. Node.js implements that specification for module loading.
Which specification does Node.js follows for module loading?
CommonJS
How do you import a class “Foo” from foo.js file using CommonJS?
const Foo = require(“./foo.js”)
How do you export a class “Foo” from module foo.js file using CommonJS?
In foo.js:
module.exports = class Foo { … }
How do you import a class “Foo” from foo.js file using ES6 native module spec?
import { Foo } from ‘./foo’
import { Foo as FooRenamed} from ‘./foo’
How do you export a class “Foo” from module foo.js file using ES6 native module spec?
export class Foo {…}
What are linters?
linters allow developers to set rules for how code should be written within the scope of their application, and will throw errors or warnings when those rules/guidelines aren’t being followed.
What is a “polyfill”?
Polyfill is a code that implements a feature on web browsers that do not support the feature. It is a “shim” for web browsers APIs.
What is a “shim”?
shim is a small library that transparently intercepts API calls and changes the arguments passed, handles the operation itself, or redirects the operation elsewhere.
Where will “npm install “ install the module?
In the current directory ./node_modules directory. It will recursively download transitive dependencies in its “node_modules” directories as well.
What are well-know CSS frameworks?
- Bootstrap 4.0
- Bulma
- Materialize (Material Design in React)
- Skeleton (very raw CSS framework)
What is “Yarn”?
It is a “npm” alternative built by Facebook.
What is the package.json file in the root of an web application?
It is npm’s config file. Similar to Maven’s pom.xml.
How does JS arrow function notation deals with this?
Arrow function does not define its own this as creating a function with “function” keyword. It will always use the enclosing context this.
What is node-uuid library?
A library that generates universally unique identifier (UUID or GUID). Which has 128-bit size.
What is Lodash throttle() function?
It is a function that wraps another function and limit the calls to the wrapped function once per the time slot provided.
throttle(myFunc, 1000) // only calls myFunc once every 1000ms
What are the following files used for in a web app?
They are the Web App Manifest and are used to define the behavior and looks of the icon when a user adds a shortcut to the home screen.
What is Font Awesome?
A library of pictographic icons
What is “jasmine” for?
It is a BDD library, that provides functions for structuring test cases and doing asserts.
What is “jest” for?
It is a test runner that integrates easily with React. Comes already bundled if you use create-react-app script.
