Building Modular Frontend Architectures

Slide 1

Slide 1 text

BUILDING MODULAR FRONTEND ARCHITECTURES Steve Kinney Senior Principal Engineer Twilio

Slide 2

Slide 2 text

TABLE OF CONTENTS 01. Defining Modularity 02. Layers of an Application 03. Creating Modular UI 04. Modular Deployment

Slide 3

Slide 3 text

BUT, FIRST—WHO AM I?

Slide 4

Slide 4 text

AND WHO ARE YOU?

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

WHAT DO WE MEAN BY MODULAR?

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

SEPARATION IS NOT MODULARITY

Slide 10

Slide 10 text

MODULARITY DOES NOT HAPPEN BY ACCIDENT.

Slide 11

Slide 11 text

WHAT ARE SOME OF THE MOVING PARTS? • User Interface • State Management • Location Within the Application • Communication with the Server

Slide 12

Slide 12 text

PATTERNS FOR APPLICATIONS • Model • View • Controller

Slide 13

Slide 13 text

PATTERNS FOR WEB APPLICATIONS • Model • View • Controller • Routing • Data Fetching

Slide 14

Slide 14 text

MICROSERVICE VERSUS MODULAR ARCHITECTURES

Slide 15

Slide 15 text

MICRO-FRONTEND VERSUS MODULAR ARCHITECTURES

Slide 16

Slide 16 text

Micro-Frontend One Micro-Frontend Two Build Pipeline Build Pipeline Micro-Frontend One Micro-Frontend Two Application Shell

Slide 17

Slide 17 text

STARTING SMALL

Slide 18

Slide 18 text

SINGLE RESPONSIBILITY A given component or module of your application should have only one reason why you’d need to change it.

Slide 19

Slide 19 text

class CampaignsList extends React.Component { state = { campaigns: [] }; componentDidMount() { getCampaignsFromApi() .then(campaigns !=> this.setState({ campaigns })); } render() { { this.state.campaigns.map(campaign !=> { }) } ! } }

Slide 20

Slide 20 text

class CampaignsFetcher extends React.Component { state = { campaigns: [] }; componentDidMount() { getCampaignsFromApi() .then(campaigns !=> this.setState({ campaigns })); } render() { ; } } const CampaignsList = ({ campaigns }) !=> ( {campaigns.map(campaign !=> { ; })} ! );

Slide 21

Slide 21 text

TAKING THIS PATTERN A STEP FURTHER • Tired: Multiple responsibilities • Wired: Separating responsibilities • Inspired: Creating reusable, higher-order components

Slide 22

Slide 22 text

Slide 23

Slide 23 text

withCurrentUser(withCampaigns(CampaignsList));

Slide 24

Slide 24 text

SEPARATING STATE FROM THE UI

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Reducer New State State Action User Interface

Slide 27

Slide 27 text

{ TYPE: 'MESSAGE_SAVE', PAYLOAD: { … } }

Slide 28

Slide 28 text

const mapStateToProps = (state) !=> { return state.campaigns; }; const mapDispatchToProps = { deleteCampaign, getCampaignStats, }; connect(mapStateToProps, mapDispatchToProps)(Campaigns);

Slide 29

Slide 29 text

WHEN YOU INTERACT WITH THE UI, IT SIMPLY FIRES ACTIONS.

Slide 30

Slide 30 text

REDUX DOES NOT HAVE ANY CONCEPT OF DATA FETCHING.

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

API Data Adapter User Interface Data

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

THE URL IS A FUNDAMENTAL PART OF THE WAY THE WEB WORKS.

Slide 35

Slide 35 text

SINGLE-SENDS/:ID/EDITOR/PREVIEW

Slide 36

Slide 36 text

SINGLE-SENDS/:ID/DELETE

Slide 37

Slide 37 text

routeFor('single-sends'); routeFor('single-sends', id); RouteRegistry.add('multi-sends', '/multi-sends');

Slide 38

Slide 38 text

BUILDING COMPOSABLE COMPONENTS

Slide 39

Slide 39 text

WHAT IS COMPOSABILITY?

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

PREFER DEPENDENCY INJECTION TO IMPORTING

Slide 45

Slide 45 text

Conﬁguration Component

Slide 46

Slide 46 text

Slide 47

Slide 47 text

const configuration = { colorTheme: { baseName: 'FlexDark' } }; React.createContext(configuration);

Slide 48

Slide 48 text

Conﬁguration 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

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

BECAUSE WE’VE ENCAPSULATED OUR MODULES AND MADE THEM COMPOSABLE, OUR APPLICATION IS EXTENSIBLE.

Slide 52

Slide 52 text

Flex.Component.Content.add( , { options } ); Flex.Component.Content.replace( , { options } );

Slide 53

Slide 53 text

MODULARITY AND PERFORMANCE

Slide 54

Slide 54 text

“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

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

import('./filename') .then(() !=> …);

Slide 59

Slide 59 text

export const Routes = ( ! );

Slide 60

Slide 60 text

import Loadable from 'react-loadable'; import LoadingPage from '!../LoadingPage'; export default Loadable({ loader: () !=> import('./components/page'), loading: LoadingPage, });