Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Harnessing the power of React in SilverStripe 4
Search
Robbie Averill
September 21, 2018
Programming
0
280
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
AIのメモリー
watany
11
1.1k
QA x AIエコシステム段階構築作戦
osu
0
210
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
470
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
PHPカンファレンス関西2025 基調講演
sugimotokei
5
1k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
170
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
7
1k
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
520
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.5k
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Navigating Team Friction
lara
187
15k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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:
[email protected]
21st Sept 2018 •
Robbie Averill