Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

Stripe con 2021 UI stack

Download to read offline

Discover how the Silverstripe CMS UI is put together and the basics of how to customise it.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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!

Discover how the Silverstripe CMS UI is put together and the basics of how to customise it.

Views

Total views

34

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×