Enterprise React

My Talk from GeeCon Prague 2017 ( biggest Java conference in Czech Republic )

https://2017.geecon.cz/speakers

React in enterprise? You may say: Oh c’mon dude, It’s just a renderer library, how could it be possibly suitable for enterprise where we need so many puzzles for large and maintainable SPA like Dependency Injection, I18n support, Service layer, State Management, Http client, Routing solution, robust Unit testing and E2E solution and many others. In this session I will show you how to get all the pieces together and how we write SPA’s with React at EmbedIT. And yes Typescript is included. P.S.: Pssst, you might be able to ditch Angular after this talk :P

Transcript

1. Enterprise React Enterprise React Martin Hochel @martin_hotell
2. Martin Hochel SE, Prague / Czech Republic @martin_hotell github.com/Hotell ▪ @ngPartyCz meetup founder ▪ Author of ngMetadata ▪ Member of @skate_js ▪ ▪ Hello Prague !
3. I like Backend Developers who switched to Front-End
4. GoF Design patterns
5. Been there. Done that
6. Join me, and I will show you the true power of programing
7. “ Any application that can be written in JavaScript, will eventually be written in JavaScript. Jeff Atwood
8. Jabbva Script
9. Javascript
10. JavaScript - Doesn’t scale ? - Refactoring ? - Type safety ?
11. How do you Javascript?
12. Typescript
13. “ Typescript → JavaScript that scales
14. What Types, little sugar ES Next ES 2017 ES 2016 ES 2015 ES 5
15. How TypeScript file.ts JavaScript file.js TypeScript Compiler Output ES3/ES5/ES2015 compliant code
16. Why function add(a: number, b: number) { return a + b; } function add(a, b) { return a + b; } add(1, 3); add(1, '3'); // 4 // ‘13’
17. Vanilla JS Type checking
18. Building ui that scales
19. GWT Vadin Wicket Building UI Past - JQuery / Mootools / Prototype
20. Building UI Now - Web Apps / SPA - Data driven
21. Scalable App? Let’s use a framework!
23. React
24. “ React A JavaScript library for building user interfaces
25. UI fn() render props state
26. Components
27. import React, { Component } from 'react' import { render } from 'react-dom' type Props = { name: string } class HelloMessage extends Component<Props> { render() { return <div>Hello {this.props.name}</div> } } const mountNode = document.getElementById('app') render(<HelloMessage name="Jane" />, mountNode) Component
28. render() { return <div>Hello {this.props.name}</div> } WTF JSX ? render() { return React.createElement( 'div', null, 'Hello ', this.props.name )} { type: 'div', props: { children: ['Hello', 'Jane'], }, }
29. WTF VDOM
30. Type safety
31. React - Easy to learn - Functional approach - A templating system built right into the language - It’s just JavaScript/Typescript
32. Until you start to build something
34. How (we) to build Scalable Enterprise React Apps
35. The Missing puzzle Bundler/Compiler Task runner Package manager HTTP Client Service architecture State management Router Forms I18n / l10n Date/time handling Design patterns Dependency Injection Unit/Integration testing E2E testing App scaffold Style guides
36. Task runner / package manager
37. Yarn
38. “ FAST, RELIABLE, AND SECURE DEPENDENCY MANAGEMENT.
39. yarn
40. yarn
41. Bundler
42. Webpack
43. webpack
44. Webpack Senior Developer Task Force
45. create-react-app create-react-app my-app --scripts-version=react-scripts-ts
47. Moar Tooling
48. Moar Tooling Prettier "fix things for me, please". TSLint "let me know about problem, so I can fix them". Husky + Lint-staged Commitizen / Conventional Changelog Standard-versioning
50. Releases
51. Architecture Challenges
52. 1. How do we structure components ?
54. Component Architecture Smart Dumb Dumb Dumb Dumb “how things look” “how things work”
55. This scales just ok! Until it doesn’t
56. import httpClient from '../http-client' type State = { results: Array<Repo> } type Props = {} const SEARCH = '//api.github.com/search/repositories' export class GithubRepoList extends Component<Props, State> { state = { results: [], } componentDidMount() { httpClient.get(`${SEARCH}?q=react`).then(({ data }) => { this.setState({ results: data || [], }) }) } } How to unit test this code ?
57. Mocking ! Now you have 2 problems
58. DI
59. <Provider provide={injectables}> <App /> </Provider> const injectables: Injectables = { i18n: new I18n(), httpClient: new HttpClient(), endpoints: { search: '...', }, } type Props = Pick<Injectables,'httpClient'|'endpoints'> class GithubRepoList extends Component<Props, State> { componentDidMount() { const { httpClient, endpoints } = this.props httpClient .get<Array<GithubRepo>>(`${endpoints.search}?q=react`) .then(({data}) => { this.setState({results: data || [],}) }) } } const EnhancedGithubRepoList = inject( ({ httpClient, endpoints }: Injectables) => ({ httpClient,endpoints}) )(GithubRepoList)
60. React DI React context <Provider/> pattern HOC pattern IoC - InversifyJS
61. Done ?
62. class GithubRepoList extends Component<Props, State> { componentDidMount() { const { httpClient, endpoints } = this.props httpClient .get<Array<GithubRepo>>(`${endpoints.search}?q=react`) .then(({data}) => { this.setState({results: data || [],}) }) } } Tight coupling
64. 2. How do we handle state management / data flow ?
65. Redux
66. Redux Store
67. 3. How do we handle Service layer / business logic ?
68. export class AuthService { constructor(private httpClient: HttpClient) {} login({ username, password, rememberMe }):Promise<Account>{ return this.httpClient .post(LOGIN_URL, { username, password, rememberMe, }) } logout(): Promise<void> { return this.httpClient.get(LOGOUT_URL) } } Services / Business Logic
69. 4. How State management communicates with Service layer ?
70. State management layer Rest service A Rest service B Service Logic Epics
71. Redux Observable
72. An Epic is the core primitive of redux-observable
73. Epic fn() Observable<Action> Observable<Action> Reducers
74. const pingEpic = action$ => action$.ofType('PING') .mapTo({ type: 'PONG' }) Simple Epic
75. import { createEpicMiddleware } from 'redux-observable' import { authService } from './auth/auth.service' import { userService } from './user/users.service' import rootEpic from './app.epics const epicInjectables = { authService, userService } createEpicMiddleware(rootEpic, { dependencies: epicInjectables, }) Epics DI setup
76. const fetchUserEpic = ( action$: ActionsObservable<Actions>, store: Store<State>, { userService }: Injectables ) => action$ .ofType('FETCH_USER') .mergeMap(({ payload }) => userService.get(payload.id) .then(response => ({ type: 'FETCH_USER_FULFILLED', payload: response, })) ) Epics DI use
77. 5. How State management / Service layer communicates with Presentation Layer ?
78. State management layer Rest service A Rest service B Service Logic Sandbox Presentation layer A Presentation layer B Presentation layer C
79. Sandbox pattern
80. export const withUserSandbox = compose( connect(mapStateToProps, mapDispatchToProps), inject(mapInjectables), translate(), reduxForm() ) export type UserSandboxProps = {...} Sandboxed HOC composition type Props = {} & UserSandboxProps class UserContainer extends Component<Props>{...} export default withUserSandbox(UserContainer)
81. 6. How do you keep contract with Backend data models ?
82. App
83. 7. Unit testing
84. Jest
85. “ Jest → Delightful JavaScript Testing
86. Jest Snapshots
87. 8. E2E Testing
88. TestCafe
89. “ TestCafe → A node.js tool to automate end-to-end web testing
90. TestCafe
91. TestCafe App E2E PO E2E Test
92. Summary of Our stack Language - Typescript View Layer - React/Preact Bundler/Compiler - Webpack Task runner/Package manager - yarn HTTP Client - facade over Axios State management - Redux + Redux Observable App scaffold/architecture - custom Router - React Router 4 Forms - Redux Forms I18n / l10n - react-i18-next Date/time handling - date-fns Dependency Injection - custom Unit/Integration testing - Jest E2E testing - Testcafe
93. What did we learn today ? React in Enterprise is a thing ! Unidirectional data flow Event driven State management RxJs/Epics reactivity Service Layer / DI Component sandbox Smart/Dumb components
94. YMMV It depends !
96. Thank you ! Martin Hochel @martin_hotell