Building Modular Frontend Architectures

Transcript

1. BUILDING MODULAR FRONTEND ARCHITECTURES Steve Kinney Senior Principal Engineer Twilio
2. TABLE OF CONTENTS 01. Defining Modularity 02. Layers of an Application 03. Creating Modular UI 04. Modular Deployment
3. BUT, FIRST—WHO AM I?
4. AND WHO ARE YOU?
6. WHAT DO WE MEAN BY MODULAR?
9. SEPARATION IS NOT MODULARITY
10. MODULARITY DOES NOT HAPPEN BY ACCIDENT.
11. WHAT ARE SOME OF THE MOVING PARTS? • User Interface • State Management • Location Within the Application • Communication with the Server
12. PATTERNS FOR APPLICATIONS • Model • View • Controller
13. PATTERNS FOR WEB APPLICATIONS • Model • View • Controller • Routing • Data Fetching
14. MICROSERVICE VERSUS MODULAR ARCHITECTURES
15. MICRO-FRONTEND VERSUS MODULAR ARCHITECTURES
16. Micro-Frontend One Micro-Frontend Two Build Pipeline Build Pipeline Micro-Frontend One Micro-Frontend Two Application Shell
17. STARTING SMALL
18. SINGLE RESPONSIBILITY A given component or module of your application should have only one reason why you’d need to change it.
19. class CampaignsList extends React.Component { state = { campaigns: [] }; componentDidMount() { getCampaignsFromApi() .then(campaigns !=> this.setState({ campaigns })); } render() { <section> { this.state.campaigns.map(campaign !=> { <Campaign campaign={campaign} !/> }) } !</section> } }
20. class CampaignsFetcher extends React.Component { state = { campaigns: [] }; componentDidMount() { getCampaignsFromApi() .then(campaigns !=> this.setState({ campaigns })); } render() { <Campaigns campaigns={campaigns} !/>; } } const CampaignsList = ({ campaigns }) !=> ( <section> {campaigns.map(campaign !=> { <Campaign campaign={campaign} !/>; })} !</section> );
21. TAKING THIS PATTERN A STEP FURTHER • Tired: Multiple responsibilities • Wired: Separating responsibilities • Inspired: Creating reusable, higher-order components
22. const withCampaigns = (WrappedComponent) !=> { return class extends React.Component { state = { campaigns: [] }; componentDidMount() { getCampaignsFromApi() .then(campaigns !=> this.setState({ campaigns })); } render() { return <WrappedComponent campaigns={campaigns} !/> } } }; const CampaignsList = ({ campaigns }) !=> ( <section> {campaigns.map(campaign !=> { <Campaign campaign={campaign} !/>; })} !</section> ); withCampaigns(CampaignsList);
23. withCurrentUser(withCampaigns(CampaignsList));
24. SEPARATING STATE FROM THE UI
26. Reducer New State State Action User Interface
27. { TYPE: 'MESSAGE_SAVE', PAYLOAD: { … } }
28. const mapStateToProps = (state) !=> { return state.campaigns; }; const mapDispatchToProps = { deleteCampaign, getCampaignStats, }; connect(mapStateToProps, mapDispatchToProps)(Campaigns);
29. WHEN YOU INTERACT WITH THE UI, IT SIMPLY FIRES ACTIONS.
30. REDUX DOES NOT HAVE ANY CONCEPT OF DATA FETCHING.
32. API Data Adapter User Interface Data
34. THE URL IS A FUNDAMENTAL PART OF THE WAY THE WEB WORKS.
35. SINGLE-SENDS/:ID/EDITOR/PREVIEW
36. SINGLE-SENDS/:ID/DELETE
37. routeFor('single-sends'); routeFor('single-sends', id); RouteRegistry.add('multi-sends', '/multi-sends');
38. BUILDING COMPOSABLE COMPONENTS
39. WHAT IS COMPOSABILITY?
43. Automation Design Editor Side Panel Top Navigation Drag and Drop Module Editor Preview Settings Tab Build Tab Tags Tab Desktop Preview Mobile Preview Plain Text Preview
44. PREFER DEPENDENCY INJECTION TO IMPORTING
45. Configuration Component
46. <DragAndDropEditor content={singleSendHtml} onChange={updateSingleSendContent} hasImageManager={true} !/>
47. const configuration = { colorTheme: { baseName: 'FlexDark' } }; React.createContext(configuration);
48. Configuration in Context API Automations Index Page Automations Design Editor Automations Code Editor Design Editor Drag and Drop Modules Design Editor Preview HTML Editor Code Editor Preview
51. BECAUSE WE’VE ENCAPSULATED OUR MODULES AND MADE THEM COMPOSABLE, OUR APPLICATION IS EXTENSIBLE.
52. Flex.Component.Content.add( <MyComponent key="demo-component"!/>, { options } ); Flex.Component.Content.replace( <MyComponent key="demo-component"!/>, { options } );
53. MODULARITY AND PERFORMANCE
54. “NETWORKS, CPUS, AND DISKS ALL HATE YOU. ON THE CLIENT, YOU PAY FOR WHAT YOU SEND IN WAYS YOU CAN'T EASILY SEE.” ALEX RUSSEL, GOOGLE
58. import('./filename') .then(() !=> …);
59. export const Routes = ( <Fragment> <Route routeId="automations" path="/automations" component={Automations}!/> <Route routeId="campaigns" path="/campaigns" component={Campaigns}!/> <Route routeId="contacts" path="/contacts" component={Contacts}!/> <Route routeId="custom-fields" path="/custom-fields" component={CustomFields}!/> <Route routeId="marketing-templates" path="/marketing-templates" component={MarketingTemplates}!/> <Route routeId="notifications" path="/notifications" component={Notifications}!/> <Route routeId="overview" path="/overview" component={Overview}!/> <Route routeId="senders" path="/senders" component={Senders}!/> <Route routeId="templates" path="/templates" component={Templates}!/> <Route routeId="tour" path="/tour" component={Tour}!/> <Route routeId="welcome" path="/welcome" component={Welcome}!/> !</Fragment> );
60. import Loadable from 'react-loadable'; import LoadingPage from '!../LoadingPage'; export default Loadable({ loader: () !=> import('./components/page'), loading: LoadingPage, });
64. THANK YOU + QUESTIONS?