Harnessing the power of React in SilverStripe 4

Presentation given at StripeCon EU 2018 - Enschede, Netherlands

Transcript

1. React in SilverStripe 4
   Harnessing its power
   21st Sept 2018 • Robbie Averill
   

   View Slide

2. ● Assets
   ● Campaigns
   ● History viewer
   ● Archives
   ● Small components e.g. TreeDropdownField
   Where it's used already
   

   View Slide

3. ● SilverStripe form schema
   ● React 15 and Redux
   ● GraphQL and Apollo
   ● Reactstrap
   ● SilverStripe's JavaScript Injector
   What you get
   

   View Slide

4. ● More of the CMS will be React driven
   ● Slowly phasing out Entwine
   ● A new paradigm for frontend SilverStripe CMS
   development
   Where it's heading
   

   View Slide

5. ● PHP, SilverStripe and entwine boilerplate
   ● React components
   ● GraphQL queries
   ● Injector transformations
   Example: new history viewer component
   

   View Slide

6. Injecting the component
   A PHP FormField with a SilverStripe template
   

   View Slide

7. Injecting the component
   

   View Slide

8. Injecting the component
   

   View Slide

9. Don't forget to unmount!
   ● Prevent React components from continually mounting
   into the document by unmounting it
   

   View Slide

10. From here on out, it's all React!
    

    View Slide

11. A "hello world" component example
    

    View Slide

12. Register with Injector
    

    View Slide

13. View Slide

14. Cool man… give me a list!
    

    View Slide

15. View Slide

16. Obviously I wanted some data in the list
    

    View Slide

17. Scaffolding a GraphQL query
    

    View Slide

18. Test it with GraphiQL
    

    View Slide

19. Make query a Higher Order Component
    ● Use the "graphql" HOC (Higher-Order-Component) from
    the react-apollo package
    ● cms/client/src/state/history/readOnePageQuery.js
    

    View Slide

20. Inject the query into HistoryViewer
    

    View Slide

21. Here's your list!
    

    View Slide

22. Use the React and Redux dev tools
    ● React dev tools let you inspect component structures
    and props
    ● Redux dev tools let you inspect the current state and
    how reducers change it over time
    

    View Slide

23. View Slide

24. ● Base module provides abstract components
    ● It's up to implementations to define the data queries
    ● Use injector to hook it up
    ● Implemented in the CMS and Elemental modules
    History Viewer: summary
    

    View Slide

25. Roadmap: progress since 4.0
    

    View Slide

26. ● Content blocks
    ● Improved versioning features
    ● React and GraphQL extensibility
    ● Unified CMS search interface
    ● Large UX focus
    Roadmap: progress since 4.0
    

    View Slide

27. Content blocks
    

    View Slide

28. React history viewer
    

    View Slide

29. Archive area
    

    View Slide

30. React and GraphQL extensibility
    

    View Slide

31. Unified CMS search interface
    

    View Slide

32. ● SilverStripe 3 supported until Dec 2020
    ● SilverStripe 4 nears its first anniversary (Nov 2018)
    ● New features built as opt-in SilverStripe 4 modules
    ● More clarity on release expectations
    Release Management
    

    View Slide

33. View Slide

34. ● Mainstream use of APIs to decouple CMS
    ● Focus on managing digital experiences
    ● Deeper integrations with other SaaS tools
    Analytics, targeting, campaigns, marketing automation, search, etc
    ● Modernise CMS UI through React+GraphQL
    ● New features into minor 4.x releases
    Coming up in 2019...
    

    View Slide

35. Q 4 ’ 1 8 Q 1 ’ 1 9 Q 2 ’ 1 9 Q 3 ’ 1 9 Near Future
    ✓ ISOLATED BUILDS
    SilverStripe Technology Roadmap
    API FOUNDATIONS
    INTEGRATION OF DIGITAL EXPERIENCE SYSTEMS
    DECOUPLED CONTENT MANAGEMENT SYNDICATED CONTENT
    PLATFORM AUTOMATION & SCALABILITY
    ✓ POPULARISE DECOUPLED
    USE CASE
    ✶ SILVERSTRIPE CONTENT
    API
    ✶ AUTHENTICATED APIS
    ✶ IDENTITY MANAGEMENT
    ✶ API INFRASTRUCTURE ✶ CONTENT SHARING
    ✓ UPGRADE
    PLATFORMS TO PHP 7
    ✶ SURFACE EXISTING USAGE
    ✶ ANALYTICS
    MODERNISE CMS UI TECHNOLOGIES
    SILVERSTRIPE 6
    ✓ CONVERT SECONDARY UIs
    TO REACT
    ✶ BLOCKS ECOSYSTEM
    ✓ REACT GRIDFIELD
    ✓ BLOCKS EDITOR
    ✓ PATTERN LIBRARY
    ✶ CONVERT PRIMARY UIs TO
    REACT
    ✓ STABILISE GRAPHQL ✶ MULTI CHANNEL
    Logging and metrics on SSP
    and CWP
    ✶ CWP CANDIDATES ON AWS
    ✶ EXPERIMENTATION AND
    TARGETING
    ✶ PERSONALISATION
    ✶ MARKETING AUTOMATION
    ✶ LOGGING EVALUATION
    SILVERSTRIPE 5
    ✶ PERFORMANCE
    ✶ MAXIMISE REUSE
    ✶ METRICS EVALUATION
    ✶ AUTOMATED SSL CERT. ON
    SSP (LET'S ENCRYPT)
    

    View Slide

36. ● 20-25 contributors/month
    ● 500 commits/month
    ● 63,936 total commits
    ● Over 11 years (on GitHub)
    ● 583 total contributors
    ● 828,462 lines of code
    ● 879 open, 4,511 closed issues
    ● 69 open, 9,465 closed PRs
    Contributions
    * Graph: OpenHub. Stats: GitHub.
    

    View Slide

37. ● SilverStripe forums
    ● GitHub issues
    ● SilverStripe contributing guide
    ● SilverStripe DSM
    ● Get involved!
    How to contribute
    

    View Slide

38. Thank you!
    Twitter: @robbieaverill
    Email: robbie@silverstripe.com
    21st Sept 2018 • Robbie Averill
    

    View Slide