Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Harnessing the power of React in SilverStripe 4
Robbie Averill
September 21, 2018
Programming
0
110
Harnessing the power of React in SilverStripe 4
Presentation given at StripeCon EU 2018 - Enschede, Netherlands
Robbie Averill
September 21, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
legalforce
PRO
0
640
naokioouchi
1
300
mizotake
2
320
danilop
1
740
xrdnk
0
120
minamijoyo
3
510
prof18
0
1.4k
grapecity_dev
0
180
suzukiot
0
290
afilina
PRO
0
150
selcukusta
2
110
bkuhlmann
2
310
Featured
See All Featured
lynnandtonic
272
16k
marktimemedia
7
400
malarkey
119
16k
shlominoach
176
7.5k
scottboms
251
11k
jonyablonski
19
1.2k
jlugia
217
16k
pedronauck
652
110k
ufuk
56
5.4k
tanoku
86
8.6k
kneath
294
39k
chriscoyier
683
180k
Transcript
React in SilverStripe 4 Harnessing its power 21st Sept 2018
• Robbie Averill
• Assets • Campaigns • History viewer • Archives •
Small components e.g. TreeDropdownField Where it's used already
• SilverStripe form schema • React 15 and Redux •
GraphQL and Apollo • Reactstrap • SilverStripe's JavaScript Injector What you get
• More of the CMS will be React driven •
Slowly phasing out Entwine • A new paradigm for frontend SilverStripe CMS development Where it's heading
• PHP, SilverStripe and entwine boilerplate • React components •
GraphQL queries • Injector transformations Example: new history viewer component
Injecting the component A PHP FormField with a SilverStripe template
Injecting the component
Injecting the component
Don't forget to unmount! • Prevent React components from continually
mounting into the document by unmounting it
From here on out, it's all React!
A "hello world" component example
Register with Injector
None
Cool man… give me a list!
None
Obviously I wanted some data in the list
Scaffolding a GraphQL query
Test it with GraphiQL
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
Inject the query into HistoryViewer
Here's your list!
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
None
• 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
Roadmap: progress since 4.0
• Content blocks • Improved versioning features • React and
GraphQL extensibility • Unified CMS search interface • Large UX focus Roadmap: progress since 4.0
Content blocks
React history viewer
Archive area
React and GraphQL extensibility
Unified CMS search interface
• 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
None
• 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...
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)
• 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.
• SilverStripe forums • GitHub issues • SilverStripe contributing guide
• SilverStripe DSM • Get involved! How to contribute
Thank you! Twitter: @robbieaverill Email: robbie@silverstripe.com 21st Sept 2018 •
Robbie Averill