Harnessing the power of React in SilverStripe 4

Transcript

1. 1.

   React in SilverStripe 4 Harnessing its power 21st Sept 2018

   • Robbie Averill
2. 2.

   • Assets • Campaigns • History viewer • Archives •

   Small components e.g. TreeDropdownField Where it's used already
3. 3.

   • SilverStripe form schema • React 15 and Redux •

   GraphQL and Apollo • Reactstrap • SilverStripe's JavaScript Injector What you get
4. 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
5. 5.

   • PHP, SilverStripe and entwine boilerplate • React components •

   GraphQL queries • Injector transformations Example: new history viewer component
6. 6.

   Injecting the component A PHP FormField with a SilverStripe template

7. 7.

   Injecting the component

8. 8.

   Injecting the component

9. 9.

   Don't forget to unmount! • Prevent React components from continually

   mounting into the document by unmounting it
10. 10.

    From here on out, it's all React!

11. 11.

    A "hello world" component example

12. 12.

    Register with Injector

13. 13.

    None
14. 14.

    Cool man… give me a list!

15. 15.

    None
16. 16.

    Obviously I wanted some data in the list

17. 17.

    Scaffolding a GraphQL query

18. 18.

    Test it with GraphiQL

19. 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
20. 20.

    Inject the query into HistoryViewer

21. 21.

    Here's your list!

22. 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
23. 23.

    None
24. 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
25. 25.

    Roadmap: progress since 4.0

26. 26.

    • Content blocks • Improved versioning features • React and

    GraphQL extensibility • Unified CMS search interface • Large UX focus Roadmap: progress since 4.0
27. 27.

    Content blocks

28. 28.

    React history viewer

29. 29.

    Archive area

30. 30.

    React and GraphQL extensibility

31. 31.

    Unified CMS search interface

32. 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
33. 33.

    None
34. 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...
35. 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)
36. 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.
37. 37.

    • SilverStripe forums • GitHub issues • SilverStripe contributing guide

    • SilverStripe DSM • Get involved! How to contribute
38. 38.

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

    Robbie Averill