liveBookmanning.com

What you will learn in Build a Frontend Web Framework (From Scratch)

by Ángel Sola Orbaiceta

Read it on liveBook Get the book at manning.com

Chapter by chapter

Concepts explained in this book

• stateThe data representing the current conditions and values of a running application.
• virtual DOMAn in-memory representation of a user interface tree that a framework associates with rendered HTML and updates dynamically.
• reconciliationThe process of finding differences between two virtual DOM trees.
• handlerA programmatic callback that responds to an event raised by a user interface or other software component.
• frameworkA software framework that provides reusable structure and mechanisms for building the user-facing portion of web applications.
• Document Object ModelThe standardized tree-like representation of an HTML or XML document that scripts and browser APIs can inspect and modify.
• viewThe rendered interface that represents an application's current state to the user.
• HTMLThe markup language used to structure documents and elements displayed in web browsers.
• componentA modular application unit that can load data, execute lifecycle logic, and produce part of a user interface.
• JavaScriptJavaScript used without a frontend framework or other abstraction layer.
• documentThe browser API that exposes a document's structure and enables scripts to create and manipulate its HTML elements.
• DOM elementThe browser API interface representing an element in the document tree.
• propComponent input values passed from a parent component to a child component.
• commandA command is a representation of an intended application operation, typically carrying the information needed to process that operation.
• render functionA JavaScript function that produces a representation of user-interface content.
• state managementA state manager is a software mechanism that stores application state, processes state changes, and coordinates updates to dependent views.
• patchDOMpatchDOM is a book-specific function that compares virtual DOM trees and applies the required changes to a parent real DOM element.
• React keyA key prop is a virtual-node property that uniquely identifies an item or component so its corresponding interface node can be tracked across updates.
• stateful componentA user-interface component that owns and updates its own state over its lifecycle.
• lifecycle methodA lifecycle hook is a component callback associated with a defined moment in the component's lifecycle.
• pure functionA function that produces the same output for the same inputs and has no observable side effects.
• eventAn event is a notification that an action or occurrence has happened, optionally carrying additional information but not requesting an action itself.
• dispatcherA dispatcher is an entity that maps commands to handler functions and executes those handlers when the commands are dispatched.
• reduction operationA reduce function is a function conceptually applied to accumulated input to produce a result, providing the name's functional-programming origin for reducers.
• React.FragmentA virtual DOM node that groups multiple children without adding a parent element to the rendered document.
• childA component nested within and managed as part of another component.
• pipelineAn operation sequence is an ordered collection of array-editing operations that describes a transformation from one array state to another.
• single-page applicationA web application that updates its displayed content and navigation within one initially loaded document rather than requesting a new page for each route.
• patchingPatching is the process of updating existing browser DOM nodes to reflect differences between virtual DOM trees.
• move methodA move operation represents relocating an existing array item to a different position while preserving its original index.
• arraysdiffsequencearraysDiffSequence is a function that computes the sequence of removal, no-op, addition, and move operations needed to transform one array into another.
• event loopThe JavaScript runtime mechanism that coordinates execution of synchronous code and queued asynchronous tasks.
• nextticknextTick is a book-specific asynchronous function that resolves after pending component lifecycle or rendering work has had an opportunity to run.
• add operationAn add operation represents inserting an item that is present in the target array but not yet present at the relevant position in the working array.
• no-opAn array transformation operation representing an item that requires no explicit action because it reaches its final position naturally.
• remove operationA remove operation represents deleting an item from the working array because it is absent from the target array at the relevant position.
• rendererThe part of a user-interface system that converts state or an interface representation into updated browser views.
• emitA book-specific component function that dispatches an event or command to the application's dispatcher.
• routingA client-side application component that maps URLs to views or components and manages navigation without a full page reload.
• schedulerA scheduler is a mechanism that queues deferred callbacks and executes them according to an ordering policy.
• after-command handlerAn after-command handler is a callback that runs after the handlers for a dispatched command have completed.
• text nodeA browser Document Object Model node that contains textual character data without attributes or child nodes.
• afterEveryCommandafterEveryCommand is a book-specific function that registers a handler for execution after every dispatched command and returns an unsubscription function.
• server-side renderingA rendering approach in which the server generates the HTML for an application before sending it to the browser.
• dispatchA dispatcher operation that sends a command for handling, executing its registered handlers and after-command handlers.
• defineComponentA book-specific JavaScript function that creates component definitions with configurable initial-state initialization and rendering behavior.
• component virtual nodeA virtual DOM node representing a component, its component prototype, and the information needed to update its component instance.
• mountMounting is the process of creating browser DOM nodes from a virtual DOM tree and inserting them into a parent element.
• unmountingA component method that destroys the rendered view by removing its DOM content and associated subscriptions.
• setAttributesA book-specific function that applies virtual-node attribute values to a DOM element, with special handling for class and style.
• parent elementA component that contains another component in the component hierarchy.
• attributeA named property of an HTML or DOM element that carries a value describing or configuring that element.
• CSS classA CSS class is a reusable label assigned to elements so stylesheet rules can select and style them.
• patchAttrspatchAttrs is a book-specific function that updates DOM element attributes to match virtual-node properties.
• patchClassespatchClasses is a book-specific function that synchronizes an element's CSS classes with virtual-node class data.
• patchElementpatchElement is a book-specific function that updates an existing DOM element to match an element virtual node.
• patchEventspatchEvents is a book-specific function that synchronizes DOM event listeners with virtual-node event handlers and returns the attached listeners.
• patchStylespatchStyles is a book-specific function that synchronizes DOM element styles with virtual-node style data.
• onMountedA component lifecycle hook invoked after the component has been mounted into the browser DOM.
• keyed listA list-rendering pattern in which items are identified by keys so that their corresponding interface nodes can be tracked across updates.
• extractPropsAndEventsA book-specific utility function that separates component properties from event handlers and removes the key property from the properties passed to a component.
• updateStateA book-specific component function that merges new state into current component state and updates the corresponding DOM.
• h functionA framework function that constructs a virtual DOM node representation from an element description and its properties and children.
• microtask queueA microtask queue is the event-loop queue that stores microtasks for execution after the current synchronous code and before later task processing.
• insertBeforeA DOM Node method that inserts a new node immediately before a specified reference node in the same parent.
• subscribeA dispatcher method that registers a handler for a specified event or command and returns a function for removing that registration.
• custom comparison methodA custom comparison function is a function that determines equality according to criteria defined for the compared values rather than relying on reference identity.
• ArrayWithOriginalIndicesArrayWithOriginalIndices is a wrapper around an array that stores each item together with its index in the original array.
• nodeValuenodeValue is a DOM Node property containing the character data or other value associated with that node.
• component hierarchyA tree-shaped arrangement in which user-interface components contain and render descendant components.
• DOM patchingThe recursive process of applying differences between interface representations to the browser's DOM.
• DOM manipulationThe programmatic inspection or modification of the browser's Document Object Model.
• mount methodA mount method is an application API operation that attaches an application's rendered interface to a specified DOM element and starts its lifecycle.
• root componentThe topmost component in a component hierarchy from which the application's interface is rendered.
• mountDOMA book-specific JavaScript function that converts a virtual DOM representation into browser DOM content and attaches it to a document.
• component classA class whose instances represent frontend components and can own state, render views, and manage their DOM lifecycle.
• depth-first searchA tree traversal technique that visits a node and recursively processes its descendants before moving to the next branch.
• lifecycleThe sequence of stages through which a user-interface component is created, updated, and removed.
• templateAn HTML-based representation of a component’s structure that a frontend framework transforms or interprets to create its view.
• two-way bindingA synchronization technique in which changes to application state are reflected in the user interface and changes to the interface are reflected back in the state.
• destroydomA book-specific function that removes a virtual node and its corresponding DOM representation, including recursively destroying its descendants.
• areNodesEqualareNodesEqual is a book-specific function that determines whether two virtual DOM nodes satisfy the framework's equality rules.
• thisThe JavaScript binding that determines the object supplied as the this value during a function call.
• updatePropsA component method that updates the component's props and triggers its re-rendering.
• component offsetA component offset is the number of elements preceding a fragment-based component view in its parent element, equal to the index of the component’s first element there.
• hStringA book-specific JavaScript function that creates a text virtual node from text content.
• addEventListenersA book-specific helper function that registers multiple event handlers described by an object on a DOM element.
• browser repaintThe browser rendering operation that redraws pixels after a document or style change.
• createAppA book-specific JavaScript function that creates an application instance from initial state and a top-level view.
• objectsDiffobjectsDiff is a book-specific JavaScript function that compares two objects and reports their added, removed, and changed properties.
• host componentA component instance supplied to DOM patching to provide the positional context of a nested component.
• extractchildrenA book-specific recursive function that produces a flat child-node array by expanding fragment nodes.
• patchchildrenA book-specific function that applies the differences between the child collections of two virtual nodes to the corresponding DOM content.
• arraysdiffA book-specific JavaScript function that compares two arrays and identifies items removed from the old array and added to the new array without treating order as significant.
• bundlingThe process of combining source modules or related assets into fewer output files for delivery.
• deployment pipelineThe process of transforming application source code and assets into files prepared for delivery to users.
• directiveA framework-specific instruction attached to markup that changes the behavior, rendering, or processing of an element.
• JSXA JavaScript syntax extension that allows markup-like expressions to be written in JavaScript code.
• minificationA source transformation that reduces file size by removing unnecessary characters and shortening identifiers without changing behavior.
• single-file componentA frontend component whose markup, styles, and script code are stored together in one file.
• static servingThe delivery of files directly from storage without generating or modifying their contents for each request.
• template compilerA compiler that transforms component templates into JavaScript code capable of creating the component view in a browser.
• v-if directiveA Vue directive that conditionally includes or displays an element based on application state.
• createComponentNodeA book-specific function that creates and mounts a component from a component virtual node.
• hFragment functionA JavaScript function that creates fragment virtual nodes from an array of child nodes.
• application instanceAn application instance is an object representing a running frontend application and connecting its state manager with its renderer.
• presentation componentA user-interface component whose output is determined by inputs and which does not maintain its own mutable state.
• factoryA function that creates and returns objects or other constructed values according to a defined creation procedure.
• element destructionDestroying is the process of removing the browser DOM nodes created from a virtual DOM tree and detaching their event listeners.
• hydrationHydration is the process of associating server-rendered HTML with corresponding client-side virtual DOM nodes and attaching event handlers so the page becomes interactive.
• execution context stackThe runtime stack of active JavaScript execution contexts used to track currently executing calls.

These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.