A Tour of JavaScript & React Patterns - FrontendMasters

Learn JavaScript and React patterns to improve the architecture of your web apps with this FrontendMasters course. Explore traditional design patterns, such as Singleton and Proxy, as well as React patterns like Hooks and Higher Order Component. Enhance performance and rendering with practical patterns. Available as part of the Frontend Masters video subscription

Gain proficiency with a set-up of design patterns to further develop the code architecture of your web apps! You'll get an outline of more customary design patterns with JavaScript, for example, the Singleton and Proxy patterns. Then, at that point, see React patterns, for example, the Hooks and Higher Order Component patterns. In conclusion, we'll cover Performance patterns and Rendering Patterns.

This course and others like it are accessible as a feature of our Frontend Experts video subscription.

 

Chapter by chapter list

Presentation

00:00:00 - 00:02:13

Presentation

Lydia Hallie starts the course by sharing the course website and momentarily depicting how to consider integrating JavaScript design patterns into an application. Practices inside the course website utilize implanted StackBlitz models so no tooling or climate arrangement is required.

JavaScript Patterns

00:02:14 - 00:06:21

Module Pattern

Lydia makes sense of that ES2015 presented worked in JavaScript modules. The module pattern divides bigger records into more modest reusable pieces that are imported with a content tag by adding the type="module" quality. In Node.js, modules can utilize the .mjs document expansion or utilize the .js augmentation with type="module" added to the package.json record.

00:06:22 - 00:09:22

Module Pattern Arrangement

Lydia exhibits the answer for the Module Pattern challenge.

00:09:23 - 00:16:32

Singleton Pattern

Lydia makes sense of the singleton pattern confines the launch of a class or object to one example. The example is unmodifiable and can be gotten to worldwide all through the application.

00:16:33 - 00:22:37

Singleton Pattern Arrangement

Lydia shows the answer for the Singleton Pattern challenge. Inquiries concerning the professionals/cons for launching from a class versus an item and ES2015 default singleton modules are likewise shrouded in this fragment.

00:22:38 - 00:29:53

Proxy Pattern

Lydia exhibits how the proxy pattern is utilized to catch solicitations to a designated object and choose whether or not to advance on those solicitations. Intermediaries make it simple to add usefulness like approval, logging, designing, notices, and troubleshooting.

00:29:54 - 00:45:40

Proxy Pattern Arrangement

Lydia codes the answer for the Proxy Pattern challenge. Inquiries concerning higher-order capabilities, making intermediaries for settled articles, and utilizing the Reflect.set strategy are likewise canvassed in this section.

00:45:41 - 00:54:21

Observer Pattern

Lydia makes sense of the observer pattern comprises of a detectable item and endorsers that will be told by the noticeable article. This makes a productive detachment of worries in light of the fact that the recognizable article has no information on the supporters. The supporters don't know about the hidden execution that prompts the warning.

00:54:22 - 00:56:40

Observer Pattern Arrangement

Lydia codes the answer for the Observer Pattern challenge.

00:56:41 - 01:06:42

Observer Pattern back and forth discussion

Lydia addresses inquiries regarding when to utilize the observer pattern, when to withdraw, subordinate supporters, Rx.js, and utilizing different observables.

01:06:43 - 01:08:54

Factory Pattern

Lydia makes sense of the factory pattern is a capability that profits an item. The capability might acknowledge boundaries and utilize those boundaries to make more properties on the brought object back. This pattern is valuable while making various items that share similar arrangement of properties.

01:08:55 - 01:14:03

Factory Pattern Arrangement

Lydia exhibits the answer for the Factory Pattern challenge. The distinctions between factory works and classes are likewise talked about in this section.

01:14:04 - 01:21:04

Prototype Pattern

Lydia frames the prototype pattern which is more memory productive than the factory pattern since it evades the duplication of shared properties and strategies by raising them up the prototype chain. The prototype pattern can be utilized with the Object.create technique or with ES6 classes.

01:21:05 - 01:24:01

Prototype Pattern Arrangement

Lydia codes the answer for the Prototype Pattern challenge.

React Patterns

01:24:02 - 01:28:19

Container/Presentation Pattern

Lydia makes sense of how the container presentation pattern upholds a partition of worries by abstracting the view from the application rationale. Presentational components center around how the information is displayed to the client. Container components are answerable for the information passed to the presentational component.

01:28:20 - 01:31:28

Container/Presentation Pattern Arrangement

Lydia codes the answer for the Container Presentation Pattern challenge.

01:31:29 - 01:35:17

Higher-Order Component Pattern

Lydia shows how higher-order components pass reusable rationale down as a prop in React applications. This pattern is valuable for keeping a different of worries, notwithstanding, naming crashes can happen and it very well may be hard to comprehend what component is liable for specific usefulness.

01:35:18 - 01:37:57

Higher-Order Component Pattern Arrangement

Lydia codes the answer for the Higher-Order Component Pattern challenge.

01:37:58 - 01:41:12

Render Props Pattern

Lydia presents the render props pattern and makes sense of why it is more adaptable than the higher-order pattern. With the render props pattern, a component is passed as props and can get props. These props are unequivocally passed so they are noticeable in the contention rundown and designers can without much of a stretch see what the component anticipates.

01:41:13 - 01:44:52

Render Props Pattern Arrangement

Lydia codes the answers for the Render Props Pattern challenge. An inquiry concerning the performance of rendering when there's an adjustment of state is likewise examined in this section.

01:44:53 - 01:51:15

Hooks Pattern

Lydia shows that React hooks are unique sorts of capabilities that can add state to a useful component, reuse stateful rationale among numerous components, or deal with a component's life cycle. Hooks work on components by abstracting stateful rationale.

01:51:16 - 01:59:12

Hooks Pattern Arrangement

Lydia codes the answer for the Hooks Pattern challenge.

01:59:13 - 02:05:52

Supplier Pattern

Lydia makes sense of how the supplier pattern utilizes React's Setting Programming interface to divide information among components. This dispenses with the need to "prop drill", or pass props from parent-to-youngster whenever a common setting is required. Components will re-render at whatever point a worth changes so designers will need to be cautious what components are consuming the unique situation.

02:05:53 - 02:13:31

Supplier Pattern Arrangement

Lydia codes the answer for the Supplier Pattern challenge.

02:13:32 - 02:19:55

Compound Pattern

Lydia presents the compound pattern and looks at it to the supplier pattern. With the compound pattern, numerous components cooperate to play out a solitary undertaking. The covering component can be carried out either with a Supplier or utilizing the React.Children.map Programming interface.

02:19:56 - 02:30:32

Compound Pattern Arrangement

Lydia codes the answer for the Compound Pattern challenge.

Performance Patterns

02:30:33 - 02:44:47

Packaging and Assembling

Lydia gives some foundation data about performance instruments like bundlers, compilers, minifiers, and tree-shaking methods. These devices can lessen the size of the code base, split the code base into pieces, and eliminate segments of code that are not being utilized.

02:44:48 - 02:55:35

Static and Dynamic Imports

Lydia makes sense of the distinction among static and dynamic imports. Static imports are quickly accessible in the application group and are not difficult to advance and tree shake. Dynamic imports give a quicker beginning burden however can prompt design shifts or a diminished client experience on the off chance that they are not stacked when they are required. The React useInView snare and course based parting are additionally shown in this portion.

02:55:36 - 03:00:45

Program Clues: Prefetch and Preload

Lydia exhibits how program hints illuminate the program about basic assets. The prefetch hint advises the program to get and store assets that will be utilized soon. The preload clue can be utilized to get assets that are basic to the ongoing page route.

Rendering Patterns

03:00:46 - 03:03:09

Center Web Vitals

Lydia presents the center web vitals which incorporate the opportunity to first byte, first contentful paint, biggest contentful paint, time to intuitive, combined format shift, and first information delay.

03:03:10 - 03:11:44

Client-Side and Static Rendering

Lydia shares the advantages and tradeoffs of client-side and static rendering. Client-side rendering just requirements a solitary solicitation from the server and permits content to be promptly intuitive. Static rendering uses the server to pre-render the html which is more valuable for Search engine optimization and cachability since the client isn't hanging tight for any extra demands to the backend.

03:11:45 - 03:19:19

Steady Rerendering and SSR

Lydia makes sense of that static rendering could prompt long form times assuming pages should be pre-rendered. Gradual static age permits engineers to just pre-render a subset of pages. In the event that the client demands a page that hasn't been pre-rendered, the page get server-rendered and afterward stored by the CDN. Server-side rendering and streaming server-side rendering are additionally examined in this section.

Wrapping Up

03:19:20 - 03:30:02

Wrapping Up

Lydia finishes up the course by sharing a few assets and responding to crowd inquiries concerning static versus server-side rendering and estimating performance.

Useful links:

1. FrontendMasters (https://frontendmasters.com/): FrontendMasters is a popular online learning platform that offers comprehensive courses on front-end web development, including JavaScript and React patterns.
2. JavaScript Design Patterns (https://addyosmani.com/resources/essentialjsdesignpatterns/book/): This is a free online book by Addy Osmani that covers various design patterns in JavaScript, including the module pattern, singleton pattern, and observer pattern.
3. React Official Documentation (https://reactjs.org/docs/react-component.html): The official documentation for React, which provides in-depth information about various React patterns, including container/presentation pattern, higher-order component pattern, and render props pattern.
4. MDN Web Docs (https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/React): The MDN Web Docs provide detailed guides and tutorials on web development topics, including React patterns, with examples and explanations.
5. Frontend Masters YouTube Channel (https://www.youtube.com/user/frontendmasters): The official YouTube channel of FrontendMasters, which offers free videos on web development topics, including JavaScript and React patterns, presented by industry experts.