React Spotlight 2018 Presentation - Lunch and learn presentation for Taplytics - Talks about notes from conference talks - Webpack and babel optimizations GitHub Presentation Link: https://github.com/xphong/react-spotlight-presentation

1. REACT SPOTLIGHTREACT SPOTLIGHT

2. AGENDAAGENDA
1. Component Testing
2. React && TypeScript
3. Gatsby, React, and GraphQL
4. The Delicate Power of Webpack and Babel
5. Component Library

3. COMPONENT TESTINGCOMPONENT TESTING
Systems are too coupled to be effectively unit tested
(Integration Tests)
Focus on behaviour
Avoid testing third party library functions

4. Unit tests work well in
isolation
Small group of units to
test their behavior as a
whole, verifying that
they coherently work
together
Testing the data layer
with UI
INTEGRATION TESTINGINTEGRATION TESTING

5. INTEGRATION TESTINTEGRATION TEST
updateUser = (body) => {
const { user, updateUser } = this.props
const newUser = {
...user,
...body
}
return updateUser(newUser)
.then(() => {
this.setState({ fetching: false})
})
}

6. INTEGRATION TESTINTEGRATION TEST
it('should call updateUser with first name updated', () => {
const expectedUser = {
firstName: 'Howdy',
lastName: 'Partner'
}
wrapper.instance().updateUser({ firstName: 'Howdy' })
expect(wrapper.instance().props.updateUser).toHaveBeenCalled
})

7. FOCUS ON BEHAVIOURFOCUS ON BEHAVIOUR
export const searchFromList = (searchKey, list) => {
const matchName = (item, searchKey) => {
const actualText = _.isString(item) ? item.toLowerCase() :
const searchText = searchKey.toLowerCase()
return actualText.includes(searchText)
}
const matchTag = (item, searchKey) => {
return !_.isString(item) && item.tags && item.tags.filter(
}
return searchKey.length ? _.filter(list, (item) => matchName
}

8. FOCUS ON BEHAVIOURFOCUS ON BEHAVIOUR
describe('searchFromList', () => {
const canada = { name: 'Canada', tags: ['earth', 'northAmeri
const usa = { name: 'USA', tags: ['earth', 'northAmerica'] }
const mexico = { name: 'Mexico', tags: ['earth', 'northAmeri
const messagingList = [canada, usa, mexico]
it('match name with search key', () => {
expect(searchFromList('can', messagingList)).toEqual([cana
expect(searchFromList('uSa', messagingList)).toEqual([usa]
})
})

10. Less errors due to type
checking
Catch errors early in
editor
Provides clearer vision
REACT && TYPESCRIPTREACT && TYPESCRIPT

11. FULLY ANNOTATED TYPESCRIPTFULLY ANNOTATED TYPESCRIPT
function add(a: number, b: number) : number {
return a + b;
}

13. INTERFACESINTERFACES
interface Person {
name: string;
hobbies: string[];
}

14. const teachers: Teacher[] = [
{
name: 'Ryan',
courses: ['Reading', 'Writing']
},
{
name: 'Simon',
courses: ['Basketball', 'Gym']
},{
name: 'Jordan',
courses: ['Music', 'Art']
}
];

15. REACT PROPTYPESREACT PROPTYPES
EventItem.propTypes = {
title: PropTypes.string.isRequired,
capacity: PropTypes.number.isRequired,
date: PropTypes.Date.isRequired
}
function EventItem(props) (
<div>
<h2>{props.title}</h2>
...
</div>
);

16. REACT PROPTYPES IN TYPESCRIPTREACT PROPTYPES IN TYPESCRIPT
interface Props {
title: string;
capacity: number;
date: Date;
}
function EventItem(props: Props) (
<div>
<h2>{props.title}</h2>
...
</div>
);

17. React-based, GraphQL
powered, static site
generator
JAM Stack
Out of box tools: fast
page loads, service
workers, code splitting,
intelligent image
loading, data prefetch
GATSBY, REACT, AND GRAPHQLGATSBY, REACT, AND GRAPHQL

18. HOW IT WORKSHOW IT WORKS

19. GRAPHQLGRAPHQL

20. THE DELICATE POWER OF WEBPACK ANDTHE DELICATE POWER OF WEBPACK AND
BABELBABEL

22. TREE SHAKINGTREE SHAKING

25. CODE SPLITTINGCODE SPLITTING
Process of taking one large bundle containing your
entire app, and splitting them up into multiple
smaller bundles which contain separate parts of
your app.
Route-based splitting vs. Component-based
splitting

26. Before A er
BUNDLE SPLITTINGBUNDLE SPLITTING

27. COMPONENT LIBRARYCOMPONENT LIBRARY
Reusable NPM Package
Storybook or Styleguidist
Living styleguide
Automated releases and deploys