Successfully reported this slideshow.
Your SlideShare is downloading. ×

Stripe con 2021 UI stack

Ad

Silverstripe CMS UI Stack
Stripecon 2021

Ad

About me
Principal developer
Silverstripe Ltd
Core Committer on
Silverstripe CMS project

Ad

Overview ● A brief history of the Silverstripe
CMS 4 UI
● Embracing the weirdness
Disclaimer
This is NOT a WebPack, React,...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 31 Ad
1 of 31 Ad

More Related Content

Stripe con 2021 UI stack

  1. 1. Silverstripe CMS UI Stack Stripecon 2021
  2. 2. About me Principal developer Silverstripe Ltd Core Committer on Silverstripe CMS project
  3. 3. Overview ● A brief history of the Silverstripe CMS 4 UI ● Embracing the weirdness Disclaimer This is NOT a WebPack, React, Redux, GraphQL crash course.
  4. 4. A brief history of the Silverstripe CMS 4 UI
  5. 5. Let’s go back to March 2018 ...
  6. 6. Retrospective ●
  7. 7. Silverstripe CMS UI was mismatch of legacy technologies ● JQuery ● Entwine ● SS templates ● undocumented REST API Speaking of kinks
  8. 8. ● Webpack + Babel ● React ● Redux ● Redux/Forms ● GraphQL ● Bootstrap/Reactstrap ● SASS/CSS The shiny new thing
  9. 9. Fast forward 3½ years ...
  10. 10. ● Legacy stack is still around ● Our modern stack is dated Meet the new stack, same as the old stack
  11. 11. Small wins ● Elemental Area ● CMS Page history
  12. 12. ● New features trump refactoring old code ● Repeated some of the same mistake ● More urgent priorities came along What went wrong?
  13. 13. ● Shock ● Denial ● Anger ● Bargaining ● Depression ● Testing ● Acceptance 7 stages of UI stack development grief
  14. 14. ● Complete CMS UI refactor is not going to happen ● The Silverstripe CMS UI stack is weird Coming to terms with reality
  15. 15. Embracing the weirdness
  16. 16. ● Shipping a front end client inside a modular PHP application ● Customising JS is hard Where the weirdness comes from
  17. 17. 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
  18. 18. silverstripe/admin ● LeftAndMain bits ● Core UI components ● Common helpers ● Shared libraries Every other module ● Feature specific components ● Feature specific libraries ● Relies on admin
  19. 19. Sharing is caring The magical tale of @silverstripe/webpack-config and the expose-loader
  20. 20. Sharing is caring Registering resources with the Injector
  21. 21. Sharing is caring Accessing resources with registered with the Injector
  22. 22. Demo time
  23. 23. ●  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
  24. 24. What did we learn today?
  25. 25. ● 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?
  26. 26. Thank you!

×