$30 off During Our Annual Pro Sale. View Details »

Harnessing the power of React in SilverStripe 4

Harnessing the power of React in SilverStripe 4

Presentation given at StripeCon EU 2018 - Enschede, Netherlands

Robbie Averill

September 21, 2018
Tweet

Other Decks in Programming

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: [email protected]
    21st Sept 2018 • Robbie Averill

    View Slide