Building Modular Frontend Architectures

Transcript

1. BUILDING MODULAR FRONTEND
   ARCHITECTURES
   Steve Kinney
   Senior Principal Engineer
   Twilio
   

   View Slide

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

   View Slide

3. BUT, FIRST—WHO AM I?
   

   View Slide

4. AND WHO ARE YOU?
   

   View Slide

5. View Slide

6. WHAT DO WE MEAN BY MODULAR?
   

   View Slide

7. View Slide

8. View Slide

9. SEPARATION IS NOT MODULARITY
   

   View Slide

10. MODULARITY DOES NOT HAPPEN
    BY ACCIDENT.
    

    View Slide

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

    View Slide

12. PATTERNS FOR APPLICATIONS
    • Model
    • View
    • Controller
    

    View Slide

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

    View Slide

14. MICROSERVICE VERSUS MODULAR
    ARCHITECTURES
    

    View Slide

15. MICRO-FRONTEND VERSUS
    MODULAR ARCHITECTURES
    

    View Slide

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

    View Slide

17. STARTING SMALL
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. withCurrentUser(withCampaigns(CampaignsList));
    

    View Slide

24. SEPARATING STATE FROM THE UI
    

    View Slide

25. View Slide

26. Reducer
    New State
    State
    Action
    User Interface
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. REDUX DOES NOT HAVE ANY
    CONCEPT OF DATA FETCHING.
    

    View Slide

31. View Slide

32. API Data Adapter User Interface Data
    

    View Slide

33. View Slide

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

    View Slide

35. SINGLE-SENDS/:ID/EDITOR/PREVIEW
    

    View Slide

36. SINGLE-SENDS/:ID/DELETE
    

    View Slide

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

    View Slide

38. BUILDING COMPOSABLE COMPONENTS
    

    View Slide

39. WHAT IS COMPOSABILITY?
    

    View Slide

40. View Slide

41. View Slide

42. View Slide

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
    

    View Slide

44. PREFER DEPENDENCY INJECTION TO
    IMPORTING
    

    View Slide

45. Configuration Component
    

    View Slide

46. content={singleSendHtml}
    onChange={updateSingleSendContent}
    hasImageManager={true}
    !/>
    

    View Slide

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

    View Slide

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
    

    View Slide

49. View Slide

50. View Slide

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

    View Slide

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

    View Slide

53. MODULARITY AND PERFORMANCE
    

    View Slide

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
    

    View Slide

55. View Slide

56. View Slide

57. View Slide

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

    View Slide

59. export const Routes = (
    
    
    
    
    
    
    
    
    
    
    
    
    !
    );
    

    View Slide

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

    View Slide

61. View Slide

62. View Slide

63. View Slide

64. THANK YOU +
    QUESTIONS?
    

    View Slide