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

10. Retrospective
●

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

20. Embracing the weirdness

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

25. Sharing is
caring
Registering resources with the
Injector

26. Sharing is
caring
Accessing resources with
registered with the Injector

27. Demo time

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?

31. Thank you!