SlideShare a Scribd company logo

Stripe con 2021 UI stack

M
MaximeRainville1

The document summarizes the history and current state of the Silverstripe CMS user interface stack. It describes how the stack originally used a mismatch of legacy technologies like jQuery, Entwine, and templates. It then overhauled to use modern technologies like Webpack, React, Redux, and GraphQL. However, the legacy stack is still in use alongside the modern one, resulting in a hybrid "weird" stack. The document advocates embracing this weirdness and focuses on incremental improvements within these constraints.

Technology
1 of 31
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Stripe con 2021 UI stack
Silverstripe CMS UI Stack Stripecon 2021
About me Principal developer Silverstripe Ltd Core Committer on Silverstripe CMS project
Overview ● A brief history of the Silverstripe CMS 4 UI ● Embracing the weirdness Disclaimer This is NOT a WebPack, React, Redux, GraphQL crash course.
A brief history of the Silverstripe CMS 4 UI
Let’s go back to March 2018 ...
Stripe con 2021 UI stack
Stripe con 2021 UI stack
Stripe con 2021 UI stack
Retrospective ●
Stripe con 2021 UI stack
Silverstripe CMS UI was mismatch of legacy technologies ● JQuery ● Entwine ● SS templates ● undocumented REST API Speaking of kinks
● Webpack + Babel ● React ● Redux ● Redux/Forms ● GraphQL ● Bootstrap/Reactstrap ● SASS/CSS The shiny new thing
Fast forward 3½ years ...
● Legacy stack is still around ● Our modern stack is dated Meet the new stack, same as the old stack
Small wins ● Elemental Area ● CMS Page history
● New features trump refactoring old code ● Repeated some of the same mistake ● More urgent priorities came along What went wrong?
● Shock ● Denial ● Anger ● Bargaining ● Depression ● Testing ● Acceptance 7 stages of UI stack development grief
● Complete CMS UI refactor is not going to happen ● The Silverstripe CMS UI stack is weird Coming to terms with reality
Embracing the weirdness
● Shipping a front end client inside a modular PHP application ● Customising JS is hard Where the weirdness comes from
The UI stack Modern Stack Legacy Stack Dependency Yarn Manually managed + yarn Build system Webpack+babel Rendering React JQuery/Entwine SS template State management Redux Nothing UI Library Bootstrap/Reactstrap Bootstrap + JQuery UI Data communication Apollo+fetch JQuery Data layer GraphQL+REST REST CI Jest / Enzyme Nothing
silverstripe/admin ● LeftAndMain bits ● Core UI components ● Common helpers ● Shared libraries Every other module ● Feature specific components ● Feature specific libraries ● Relies on admin
Sharing is caring The magical tale of @silverstripe/webpack-config and the expose-loader
Sharing is caring Registering resources with the Injector
Sharing is caring Accessing resources with registered with the Injector
Demo time
●  composer install --prefer-source  ● Remove packages first ● Do for silverstripe/admin as well ●  yarn install  ● On admin as well ●  yarn pattern-library  ● On admin only ●  yarn dev  ●  yarn watch  ●  yarn test  ●  yarn build  Cheat sheet
What did we learn today?
● Don’t read the doc! ● Read Adrian’s blog post on how to create React Form Field ○ https://blog.jar.nz/posts/new-field-in-silverstripe ● Fork our module template ○ https://github.com/silverstripe/silverstripe-module ● Require maxime-rainville/recipe-react ○ https://github.com/maxime-rainville/recipe-react What’s next?
Thank you!

More Related Content

PDF
Silverstripe CMS 4.9.0 release and beyound
MaximeRainville1
 
PDF
React vs angular (mobile first battle)
Michael Haberman
 
PDF
Isolated React Js components
Abe García
 
PDF
Angular 2 vs React
Iran Reyes Fleitas
 
PDF
Angular 2 vs React. What to chose in 2017?
TechMagic
 
PDF
ReactJS or Angular
boyney123
 
PDF
AngularJS + React
justvamp
 
PDF
The WordPress Performance Team
Felix Arntz
 
Silverstripe CMS 4.9.0 release and beyound
MaximeRainville1
 
React vs angular (mobile first battle)
Michael Haberman
 
Isolated React Js components
Abe García
 
Angular 2 vs React
Iran Reyes Fleitas
 
Angular 2 vs React. What to chose in 2017?
TechMagic
 
ReactJS or Angular
boyney123
 
AngularJS + React
justvamp
 
The WordPress Performance Team
Felix Arntz
 

What's hot (20)

PPTX
React in production (react global summit 2021)
Souvik Basu
 
PDF
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...
rtCamp
 
PPTX
Lagom framework
명주 김
 
PDF
JHipster, modern web application development made easy
Raphaël Brugier
 
PPTX
React native - React(ive) Way To Build Native Mobile Apps
Jimit Shah
 
PDF
Tabtale story: Building a publishing and monitoring mobile games architecture...
Tikal Knowledge
 
PDF
Introduction to React Native
dvcrn
 
PDF
Node & Express as Workflow Tools
FITC
 
PDF
React vs angular
500Tech
 
PDF
React.js - and how it changed our thinking about UI
Marcin Grzywaczewski
 
PDF
VueJS Best Practices
Fatih Acet
 
PPTX
Reactjs workshop
Ahmed rebai
 
PPTX
001. Introduction about React
Binh Quan Duc
 
PPTX
Gdg makurdi
Nishu Goel
 
PDF
React server side rendering performance
Nick Dreckshage
 
PPTX
Angular CLI : HelloWorld
nikspatel007
 
PDF
Reactjs workshop (1)
Ahmed rebai
 
PDF
React + Redux for Web Developers
Jamal Sinclair O'Garro
 
PDF
WordPress as a Headless CMS - Bronson Quick
WordCamp Sydney
 
PPTX
Async js
Alexandr Skachkov
 
React in production (react global summit 2021)
Souvik Basu
 
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...
rtCamp
 
Lagom framework
명주 김
 
JHipster, modern web application development made easy
Raphaël Brugier
 
React native - React(ive) Way To Build Native Mobile Apps
Jimit Shah
 
Tabtale story: Building a publishing and monitoring mobile games architecture...
Tikal Knowledge
 
Introduction to React Native
dvcrn
 
Node & Express as Workflow Tools
FITC
 
React vs angular
500Tech
 
React.js - and how it changed our thinking about UI
Marcin Grzywaczewski
 
VueJS Best Practices
Fatih Acet
 
Reactjs workshop
Ahmed rebai
 
001. Introduction about React
Binh Quan Duc
 
Gdg makurdi
Nishu Goel
 
React server side rendering performance
Nick Dreckshage
 
Angular CLI : HelloWorld
nikspatel007
 
Reactjs workshop (1)
Ahmed rebai
 
React + Redux for Web Developers
Jamal Sinclair O'Garro
 
WordPress as a Headless CMS - Bronson Quick
WordCamp Sydney
 
Async js
Alexandr Skachkov
 
Ad

Similar to Stripe con 2021 UI stack (20)

PPTX
Progressive Web Apps and React
Mike Melusky
 
PDF
"Crafting a Third-Party Banking Library with Web Components and React", Germa...
Fwdays
 
PDF
Integrating React.js Into a PHP Application: Dutch PHP 2019
Andrew Rota
 
PDF
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
Zach Lendon
 
PDF
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Zach Lendon
 
PDF
Modern UI Development With Node.js
Ryan Anklam
 
PDF
ReactJS - frontend web developing reactjs
ducpvcontact
 
PDF
Server side rendering with React and Symfony
Ignacio Martín
 
PDF
Making sense of the front-end, for PHP developers
Lewiz
 
PDF
React in Action ( PDFDrive ).pdf
almako2
 
PPTX
React Django Presentation
Allison DiNapoli
 
PPTX
Isomorphic JavaScript – future of the web
Sigma Software
 
PDF
Having Fun Building Web Applications (Day 1 Slides)
Clarence Ngoh
 
PDF
Intro to react_v2
Feather Knee
 
PDF
Frontend as a first class citizen
Marcin Grzywaczewski
 
PDF
Integrating React.js Into a PHP Application
Andrew Rota
 
KEY
Architecting single-page front-end apps
Zohar Arad
 
PDF
react hook and wesite making structure ppt
arunkumarn100
 
PDF
Exploring MERN Stack and Tech Stacks: A Comparative Analysis
IRJET Journal
 
PDF
Introduction to Functional Reactive Web with Clojurescript
John Stevenson
 
Progressive Web Apps and React
Mike Melusky
 
"Crafting a Third-Party Banking Library with Web Components and React", Germa...
Fwdays
 
Integrating React.js Into a PHP Application: Dutch PHP 2019
Andrew Rota
 
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
Zach Lendon
 
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Zach Lendon
 
Modern UI Development With Node.js
Ryan Anklam
 
ReactJS - frontend web developing reactjs
ducpvcontact
 
Server side rendering with React and Symfony
Ignacio Martín
 
Making sense of the front-end, for PHP developers
Lewiz
 
React in Action ( PDFDrive ).pdf
almako2
 
React Django Presentation
Allison DiNapoli
 
Isomorphic JavaScript – future of the web
Sigma Software
 
Having Fun Building Web Applications (Day 1 Slides)
Clarence Ngoh
 
Intro to react_v2
Feather Knee
 
Frontend as a first class citizen
Marcin Grzywaczewski
 
Integrating React.js Into a PHP Application
Andrew Rota
 
Architecting single-page front-end apps
Zohar Arad
 
react hook and wesite making structure ppt
arunkumarn100
 
Exploring MERN Stack and Tech Stacks: A Comparative Analysis
IRJET Journal
 
Introduction to Functional Reactive Web with Clojurescript
John Stevenson
 
Ad

Recently uploaded (20)

PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
PDF
CIFDAQ's Market Insight: SEC Turns Pro Crypto
CIFDAQ
 
PDF
Approach and Philosophy of On baking technology
30anthuong17
 
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
PPTX
A Presentation on Artificial Intelligence
memembruh336
 
PPTX
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
SHREYAS PHANSE
 
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 
DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Jian-Hong Pan
 
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
PPTX
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PDF
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
CIFDAQ's Market Insight: SEC Turns Pro Crypto
CIFDAQ
 
Approach and Philosophy of On baking technology
30anthuong17
 
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
A Presentation on Artificial Intelligence
memembruh336
 
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
SHREYAS PHANSE
 
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Jian-Hong Pan
 
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 

Stripe con 2021 UI stack

  • 2. Silverstripe CMS UI Stack Stripecon 2021
  • 3. About me Principal developer Silverstripe Ltd Core Committer on Silverstripe CMS project
  • 4. Overview ● A brief history of the Silverstripe CMS 4 UI ● Embracing the weirdness Disclaimer This is NOT a WebPack, React, Redux, GraphQL crash course.
  • 5. A brief history of the Silverstripe CMS 4 UI
  • 6. Let’s go back to March 2018 ...
  • 12. Silverstripe CMS UI was mismatch of legacy technologies ● JQuery ● Entwine ● SS templates ● undocumented REST API Speaking of kinks
  • 13. ● Webpack + Babel ● React ● Redux ● Redux/Forms ● GraphQL ● Bootstrap/Reactstrap ● SASS/CSS The shiny new thing
  • 14. Fast forward 3½ years ...
  • 15. ● Legacy stack is still around ● Our modern stack is dated Meet the new stack, same as the old stack
  • 16. Small wins ● Elemental Area ● CMS Page history
  • 17. ● New features trump refactoring old code ● Repeated some of the same mistake ● More urgent priorities came along What went wrong?
  • 18. ● Shock ● Denial ● Anger ● Bargaining ● Depression ● Testing ● Acceptance 7 stages of UI stack development grief
  • 19. ● Complete CMS UI refactor is not going to happen ● The Silverstripe CMS UI stack is weird Coming to terms with reality
  • 21. ● Shipping a front end client inside a modular PHP application ● Customising JS is hard Where the weirdness comes from
  • 22. The UI stack Modern Stack Legacy Stack Dependency Yarn Manually managed + yarn Build system Webpack+babel Rendering React JQuery/Entwine SS template State management Redux Nothing UI Library Bootstrap/Reactstrap Bootstrap + JQuery UI Data communication Apollo+fetch JQuery Data layer GraphQL+REST REST CI Jest / Enzyme Nothing
  • 23. silverstripe/admin ● LeftAndMain bits ● Core UI components ● Common helpers ● Shared libraries Every other module ● Feature specific components ● Feature specific libraries ● Relies on admin
  • 24. Sharing is caring The magical tale of @silverstripe/webpack-config and the expose-loader
  • 26. Sharing is caring Accessing resources with registered with the Injector
  • 28. ●  composer install --prefer-source  ● Remove packages first ● Do for silverstripe/admin as well ●  yarn install  ● On admin as well ●  yarn pattern-library  ● On admin only ●  yarn dev  ●  yarn watch  ●  yarn test  ●  yarn build  Cheat sheet
  • 29. What did we learn today?
  • 30. ● Don’t read the doc! ● Read Adrian’s blog post on how to create React Form Field ○ https://blog.jar.nz/posts/new-field-in-silverstripe ● Fork our module template ○ https://github.com/silverstripe/silverstripe-module ● Require maxime-rainville/recipe-react ○ https://github.com/maxime-rainville/recipe-react What’s next?