Web Development: Intro To UI Frameworks And Libraries

bootstrap uses a _ column grid system that can be fluid or fixed

12

what are the four steps of reconciliation

Step 1: The virtual DOM is updated. Step 2: The virtual DOM is compared to the previous version of the virtual DOM and checks which elements have changed. Step 3: The changed elements are updated in the browser DOM. Step 4: The displayed webpage updates to match the browser DOM.

responsive grids

allow web pages to adapt their layout and content depending on the device in which they are viewed.

react fiber architecture

allows React to incrementally render the web page. What this means is that instead of immediately updating the browser DOM with all virtual DOM changes, React can spread the update over time. React can optimize when and where updates occur to the browser DOM to significantly improve application performance and responsiveness to user input. Think of it as a priority system. The highest priority changes, the elements visible to the user, are updated first. While lower priority changes, the elements not currently displayed, are updated later.

the purpose of a bundler is to

automatically combine files into a single file

hybrid grids

both fluid width and fixed width components

flexible grids are made up of

columns gutters margins

the bootstrap grid system always has a

container, row, and column

spa has two methods of delivering resources, which are

delivering all resources immediately or delivering resources dynamically as required

dependency tree

dependencies that also depend on other libraries and frameworks

static content

files that the server transfers just as they are stored on the web server

fixed grid

fixed content with that doesn't change in a specific breakpoint range while the flexible margins occupy the remaining space on screen.

fluid grid

flexible content width that goes edge to edge as per the screen size -the columns either grow or shrink to adapt to the available space

responsive design is a combination of three techniques

flexible grids fluid images media queries

react

focused on working with components, which makes it simple to build functional user interfaces on web and mobile. library

dynamic content

generated when the http request is made the web server communicates with another kind of server called an application server or a back-end

what does the application server do

generates the dynamic content that the web server sends back to the users browser run application logic, communicate with the database, and check permissions

view

in a spa different pages are broken into templates each view will have HTML code that can be updated by the application

package manager

is a tool that automatically downloads and installs dependencies (packages)

what are the two approaches SPA use to serving code and resources

lazy loading or code splitting bundling

what is one problem of traditional applications?

most websites were implemented as multi-page applications. his makes traditional applications resource intensive to web servers because sending entire web pages for every request consumes excessive bandwidth and uses CPU time to generate dynamic pages

most common package manager for front end development is

npm

single page application

only one HTML page that gets sent from the server to the browser, but that page will update its content as your users interact with your website allows the user to interact with the website without the application needing to download entire new web page of content -rewrites the current web page as the user interacts with it

bootstrap

popular framework for building responsive mobile 1st sites collection of prewritten code chunks in CSS and JavaScript that allows you to create websites more quickly than if you had to create every bit of code from scratch

reconciliation

react checks to see if the html components in the virtual DOM matches the browser DOM. if a change is required, the browser DOM is updated

virtual DOM

representation of the browser DOM that is kept in memory

components

small pieces of reusable code that allow you to build websites quickly

dependencies

something that your application depends on

lazy loading

the browser requests the application, and the server returns only the minimum HTML, CSS, and JavaScript needed to load the application. large application can be split into multiple bundles that are loaded as required by the application

the resolution of your screen refers to

the number of pixels it contains often expressed as the number of horizontal pixels multiplied by the number of vertical pixels

breakpoint

the point at which a websites content and layout will adapt to provide the best possible user experience

if all resources are delivered when the application is loaded

the spa must include the views for every page on initial load

if resources are loaded dynamically

the spa requests the views as required and stores views in the browser for the next request.

gutter

the space between the columns

margin

the spaces between the content and the left and right edges of the screen are called margins

caching

the web server keeps a copy of dynamic content if the content is requested again, the web server can immediately send this cached version instead of passing the request again to the application server on the first request for dynamic content, the web server checks if the content exists in the cache. if it does not exist the content is requested from the application server and stored in the cache the web server then sends back the dynamic content to the browser

component hierarchy

tree of components starting with the root or app component

responsive design

web page can automatically stretch or shrink depending on the screen its displaying on

bundling

when the browser requests the application, the server returns and loads all necessary HTML, CSS, and JavaScript immediately. assets, code and dependencies are bundled into a single file and loaded by the application