The new media module for Neos CMS

Presented at NeosCon 2020

Transcript

1. THE NEW MEDIA MODULE ONE MORE THING SEBASTIAN HELZLE - NEOSCON ONLINE 2020
2. THE NEW MEDIA MODULE - NEOSCON 2020 ABOUT ME ▸ Consultant for developing rich Neos applications ▸ Neos core team member since 2013 ▸ @home in 
 Karlsruhe & Cambodia ▸ Father of a cute boy ▸ Bakerman who’s baking bread ▸ @sebobo
3. THE NEW MEDIA MODULE - NEOSCON 2020 AGENDA ▸ It took some time ▸ A new API ▸ A new backend module ▸ A new UI integration ▸ The road ahead ▸ Summary
4. It took some time
6. THE NEW MEDIA MODULE - NEOSCON 2020 THE PAST & THE PRESENT ▸ Current media module since Neos 1.0 👵 👴 ▸ Only minor improvements 🐁 ▸ Hard to extend 🥵 ▸ But the main concept worked well! 😊
7. TEXT IMPROVEMENTS WERE DISCUSSED ▸ Improve extendability ▸ Not scalable ▸ Handle additional metadata ▸ Behave more like the content module ▸ Allow batch actions https://discuss.neos.io/t/rfc-media-module-improvements-extendability/2944 https://github.com/neos/metadata
8. THE NEW MEDIA MODULE - NEOSCON 2020 THE NEW APPROACH ▸ Decision for redevelopment @ Neos sprint Vienna 2019 ▸ We wanted ▸ Improved UX 🤗 ▸ Extensibility 🧩 ▸ Performance 🚀 ▸ Future proof 🤖
9. A new API
11. THE NEW MEDIA MODULE - NEOSCON 2020 GRAPHQL API ▸ Using the t3n/graphql implementation ▸ Public media API for the future ▸ Extendable ▸ Build your own (headless?) apps with it ▸ Respects policies
12. A new backend module
17. THE NEW MEDIA MODULE - NEOSCON 2020 TECHNICAL OVERVIEW ▸ Implemented with 
 TypeScript, React, Apollo GraphQL, Recoil, … 👩🔬 ▸ Using 
 Neos UI React components ♻ ▸ Tested with 
 TestCafe ☕ ▸ Built with
 Love ❤
18. THE NEW MEDIA MODULE - NEOSCON 2020 WHAT HAS CHANGED ▸ Great performance ▸ Optimistic UI ▸ Improved UX ▸ Faster to add new features ▸ Built with future extensibility in mind
19. THE NEW MEDIA MODULE - NEOSCON 2020 IMPLEMENTED NEW FEATURES ▸ Remember UI state ✅ ▸ Improved feedback on upload ✅ ▸ Use the public API for your own apps ✅ ▸ Sticky pagination ✅ ▸ Inspector ✅
20. THE NEW MEDIA MODULE - NEOSCON 2020 NEW FEATURES BEING WORKED ON ▸ Batch actions ▸ Improved media type support ▸ Nested tags & collections ▸ Manage imported assets ▸ Handle EXIF and IPTC metadata ▸ Full responsiveness
21. THE NEW MEDIA MODULE - NEOSCON 2020 PLANNED FEATURES ▸ Improved asset usage calculation ▸ Extensibility ▸ New Collection / Folder / Tag system
22. A new UI integration
26. THE NEW MEDIA MODULE - NEOSCON 2020 A NEW UI INTEGRATION ▸ Plugin for Neos UI ▸ Same codebase as backend module ▸ Compatible with existing inspector editors ▸ Faster & more flexible ▸ Can use more space
27. The road ahead
28. TRY NOW WITH NEOS 5.2 composer require flowpack/media-ui
29. DEFAULT MEDIA MODULE WITH NEOS 6.0
30. DEPRECATE EXISTING MEDIA MODULE UNTIL NEOS 7.0
31. BECOME PART OF THE EFFORT
32. https://github.com/Flowpack/media-ui/projects/1
33. THE NEW MEDIA MODULE - NEOSCON 2020 WHAT YOU CAN DO ▸ Test & review ▸ Give feedback & collaborate ▸ Help with the implementation ▸ Add feature requests ▸ Sponsor the development
34. CROWD FUNDING
35. THE NEW MEDIA MODULE - NEOSCON 2020 MILESTONES & FUNDING ▸ No sponsorship yet ▸ First pre-release version during NeosCon 2020 ▸ Finish basic stable version for Neos 6.0 release 
 - 12.000€
36. THE NEW MEDIA MODULE - NEOSCON 2020 MILESTONES & FUNDING ▸ Permissions - 2.000€ ▸ More fine grained control over privileges in the module ▸ Extensibility - 5.000€ ▸ Add your own components like in the Neos UI ▸ New UI primary editors - 3.000€ ▸ Asset and image editors ▸ Improved cropping, sizing etc…
37. THE NEW MEDIA MODULE - NEOSCON 2020 STRETCH GOALS ▸ Focus point editor ▸ New variant tab & editor ▸ Improved asset usage calculations and UI integration ▸ New Collection / Tag / Folder system
38. Thank you!
39. THE NEW MEDIA MODULE - NEOSCON 2020 AND THANKS TO ▸ Bastian Waidelich ▸ Christian Müller ▸ Daniel Lienert ▸ Johannes Steu ▸ My wife and kid 😘
40. THE NEW MEDIA MODULE - NEOSCON 2020 ▸ Contact ▸ @Sebobo 🐦 ▸ shelzle@neos.io ▸ https://github.com/Sebobo ▸ Involve ▸ https://github.com/Flowpack/media-ui/projects/1