Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to...
Transcript of Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to...
![Page 1: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/1.jpg)
Brandon WilliamsAmazee Labs
Introduction to React Design Patterns
![Page 2: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/2.jpg)
Before We Begin
![Page 3: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/3.jpg)
React
Declarative
Flexible
Library
Design Patterns
Design patterns are formalized best practices that the programmer can use to solve common problems when designing an application or system.
But these are just my opinions.
![Page 4: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/4.jpg)
Brandon WilliamsLead Developer
Amazee Labs
image
Drupal 8 sites since Alpha
React projects since 2016
SPAs, Interactive Touch Displays, Embeddable
Widgets, Improved Filtered Search
GraphQL Module
![Page 5: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/5.jpg)
DesignPatterns
![Page 6: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/6.jpg)
Presentational/Container Components
Presentational Container
How things look
Little to no state
Receive all data via props
Functional component
Same use case as Twig templates
How things work
Render presentational and container
components
Provide data and behavior
Stateful
![Page 7: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/7.jpg)
Presentational/Container Components
Presentational Container
const Commentlist = comments => (
<ul>
{comments.map(
({ body, author }) =>
<li>{body}-{author}</li>
)}
</ul>
)
class CommentListContainer extends
React.Component {
componentDidMount() {
loadComments("/my-comments.json")
}
render() {
return <CommentList
comments={this.state.comments}
/>;
}
}
![Page 8: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/8.jpg)
Presentational/Container Components
Why? Difficulty
Separation of concerns
Reusable
Testable
Style guides
![Page 9: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/9.jpg)
Stateless Components + Functional Programming
Pure functions
No side-effects or shared state
Declarative
Composition over inheritance
Immutable state
const SubmitButton = ({
label,
onSubmit,
disabled,
}) => (
<input
type="submit"
disabled={disabled}
value={label}
onClick={onSubmit}
/>
);
![Page 10: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/10.jpg)
Stateless Components + Functional Programming
Why? Difficulty
Declarative programming for declarative
library
Immutability helps avoid render errors
Easier to reason about component
dependencies
Fun vocabulary: map, reduce, functor,
monad, currying
![Page 11: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/11.jpg)
Higher Order Components/Functions
A function that returns a
component/function
Wraps functional components
Recompose library for React integration
Same use case as PHP Traits or OO
Decorator pattern
const withHideLoading = (BaseComponent) =>
(props) => (
{props.loading &&
<BaseComponent />}
)
const ButtonWithLoading =
withHideLoading(<SubmitButton
label="Submit"
/>)
<ButtonWithLoading loading={true} />
![Page 12: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/12.jpg)
Higher Order Components/Functions
const withDisabledState = withState(
'disabled',
'setDisabled',
false);
const withDisabledOnSubmit =
withHandlers({
onSubmit: ({ setDisabled }) =>
() => setDisabled(true),
})
const SubmitButton = ({
label,
onSubmit,
disabled,
}) => (<input
type="submit"
disabled={disabled}
value={label}
onClick={onSubmit}
/>);
const ButtonWithDisable = compose(
withDisabledState,
withDisabledOnSubmit,
)(<SubmitButton label="submit" />)
![Page 13: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/13.jpg)
Higher Order Components/Functions
Why? Difficulty
Keep code DRY
Keep functional components pure
Separation of concerns
![Page 14: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/14.jpg)
Render Props/Function as Children
Alternative to HoC Difficulty
const HideLoading = (props) => {
if (props.loading) {
return null;
}
return this.props.render();
}
<HideLoading
loading{true}
render={() => (
<SubmitButton label="submit" />
)}
/>
![Page 15: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/15.jpg)
Flux
DifficultyPattern for managing data
All state flows in one direction
All state managed in the store
State changes cause re-renders
Redux
![Page 16: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/16.jpg)
CFP Open! 2018.texascamp.org
![Page 17: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/17.jpg)
Join us forcontribution sprints
Friday, April 13, 2018
9:00-18:00Room: 103
Mentored Core sprint
First timesprinter workshop
Generalsprint
#drupalsprint
9:00-12:00Room: 101
9:00-18:00Room: 104
![Page 18: Introduction to React Design Patternsrocketeerbkw.github.io/slides/drupalcon/... · Introduction to React Design Patterns. Before We Begin. React Declarative Flexible Library Design](https://reader033.fdocuments.in/reader033/viewer/2022042710/5f69ed816f43390dbe5c8899/html5/thumbnails/18.jpg)
Questions?Brandon Williams
@rocketeerbkw