Talk at Plone Conference 2020 about Plone 6 and Volto

1. Víctor Fernández de Alba
Timo Stollenwerk
Plone 6 Volto
:
Past, Present, and Future

3. REMOTE

4. NUMBERS

5. IMPOSTER

7. RETROSPECTIVE

8. VOLTO

9. DECISIONS

10. COMPETITORS

11. CLASSIC CMS

12. MODERN CMS SOLUTIONS

13. STATIC SITE GENERATORS

14. HEADLESS CMS

15. VOLTO

16. Thanks

17. Most important milestone in Volt
o
this year?
Critical Mass

18. What is
Plone?

19. “Plone has evolved from being an standalone
product to be a contract, the knowledge and wisdom
that we, the Plone community, achieved during the
last 20 years building a world class enterprise CMS”

20. “Implementations may change
overtime, values do not”
Plone Classic
Plone REST API
Volto Volto
Guillotina
Other frontend
Other compatible API
backend

21. “Through the freedom that they provide, Volto
blocks are a foundation for innovation that
enables Plone to step in line with the latest state
of the art for web development.”
@tiberiuichim

22. “We not only built a new UX and UI
for Plone, but also a framework
where to build new exciting things”

23. Design principle
s
https://docs.voltocms.com/design-principles/
Approachabilit
y
Developer experience firs
t
Customization and extensibility firs
t
Volto UI/UX is Pastanaga U
I
Do not overengineer thing
s
Each feature has only one way of doing it
Frontend and backend are meant to be decouple
d
Focus on the UI/UX implementation and upcoming challenge
s
Semantic versioning

24. Volto, Today

25. Stats
203 release
s
58 contributor
s
1253 Pull request
s
3024 commits
Current release: Volto 10.3.0

26. Which areas is Plone 6 better than
Plone 5 today?
Blocks engin
e
Authoring experienc
e
Volto Dexterity Schema and Layout edito
r
Listing bloc
k
Direct access to the full JS/React ecosyste
m
Performanc
e
as a bonus, Volto still works with Plone 4 as API backend

27. Volto Tea
m
https://plone.org/community/volto-team
Timo Stollenwer
k
Rob Gietem
a
Tiberiu Ichi
m
Alin Voine
a
Andrea Cecch
i
Piero Nicoll
i
Nicola Zambell
o
Giulia Ghisin
i
Víctor Fernández de Alba

28. Volto Early Adopters Meeting
Monthly, last Friday of the mont
h
Open for everybody interested!

29. Volto 4.0.
0
(maturity release
)
March 2020
Sidebar introduction and new mobile first toolba
r
New Object Browse
r
New blocks chooser and future proof blocks definition
s
Listing, TOC, Lead Image block
s
Internal improvements and library updates

30. Volto 4.0.
0
(maturity release
)
March 2020
Tiberiu Ichim talk: Volto blocks development patterns
Wednesday - 15:55
Improved blocks developer experience

31. Volto 4 to Volto 1
0
9 months
!
March 2020 - December 2020
Multilingual suppor
t
Improvements to Contents vie
w
Unauthorised, Forbidden, NotFound improvement
s
and related HTTP proper responses

32. Volto 4 to Volto 1
0
9 months
!
March 2020 - December 2020
Support for using a completely different CSS framework
Nicola Zambello talk: Theming Volto without SemanticUI: is it possible?
Wednesday - 15:00

33. Huge improvements in extensibility
Nilesh Gulia talk: Volto: A journey towards personalisation
Tuesday - 16:50
Volto 4 to Volto 1
0
9 months
!
March 2020 - December 2020

34. New generato
r
Based on Yeoman
create-volto-app will be deprecated (soon)
@plone/generator-volt
o
npm install -g y
o
npm install -g @plone/generator-volt
o
yo @plone/volto

35. Add-on architecture
Volto Add-on ProjectAdd-on
…
"addons": [
“@plone-collective/volto-myfancyaddon”
],
package.json

36. Add-on architecture
Volto Addon ProjectAddon
…
Development experience
mrs.developer
yarn add @plone-collective/volto-myfancyaddon

37. Add-on architecture
Awesome Volt
o
https://github.com/collective/awesome-volto
Volto Addon ProjectAddon
…

38. Add-on architecture
Volto Addon ProjectAddon
…
Alok Kumar talk: Building Volto Addons
Tuesday - 17:30

39. Improvements in the
shadowing engine
export Icon from '@plone/volto/components/theme/Icon/Icon';
export Icon from ‘./theme/Icon/Icon';
Works for add-ons to
o

40. Volto
API Block Transforms
Storage
API
Transform
(Deserializer)
Transform
(Serializer)
Inbound
Outbound

41. API Block Transforms
@adapter(IBlocks, IBrowserRequest
)
@implementer(IBlockFieldDeserializationTransformer
)
class TextBlockDeserializer(object):
order = 100
block_type = "text"
def __init__(self, context, request)
:
self.context = contex
t
self.request = reques
t
def __call__(self, block):
entity_map = block.get("text", {}).get("entityMap", {}
)
for entity in entity_map.values()
:
if entity.get("type") == "LINK"
:
href = entity.get("data", {}).get("href", ""
)
entity["data"]["href"] = path2uid(context=self.context, link=href
)
return bloc
k

42. API Block Transforms
@implementer(IBlockFieldSerializationTransformer)
@adapter(IBlocks, IBrowserRequest)
class ResolveUIDSerializer(object):
order = 1
block_type = None
def __init__(self, context, request):
self.context = context
self.request = request
def __call__(self, value):
for
fi
eld in ["url", "href"]:
if
fi
eld in value.keys():
value[
fi
eld] = uid_to_url(value.get(
fi
eld, ""))
return value

43. Lazy load support
Nilesh Gulia talk: Bundle splitting in Volto
Monday - 16:50
import loadable from '@loadable/component';
export const EventView = loadable(() =>
import('@plone/volto/components/theme/View/EventView'),
);

44. Volto Dexterity Schema and
Layout editor

46. Volto Dexterity Schema and
Layout editor
Alin Voinea talk: Volto Dexterity Schema and Layout editor
Tuesday - 18:10

47. Copy/Paste blocks
Current page and between other page
s
Multiselection support

49. Page composition enhancements
Object Browser widge
t
Relations widge
t
Link widget (soon)

50. Listing blocks
Variations suppor
t
Removal of the listing container object from the results

51. Event type support
Recurrence widget

52. Future

53. Slots
Mix between Viewlets and Portlet
s
Evolution of the Plone/Mosaic Tiles concep
t
Inheritabl
e
Far more lightweight than Portlet
s
will contain block
s
Assigned statically and/or backend defined

54. Form builder
Janina Hard talk: Form Block / Formbuilder
Tuesday - 18:50

55. Slate adoption
https://www.slatejs.org
https://github.com/eea/volto-slate

56. Plone 6 install/migration tooling
Buildout recipe
s
CLI suppor
t
Templates generato
r
Migration steps

57. Block Variations support
Enhance existing blocks with
• Different template
s
• Additional block data
from the block definition

58. Showcase

59. https://forest.eea.europa.eu/

60. https://biodiversity.europa.eu/

61. http://www.stradanove.it/Coming soon!Coming soon!

62. Coming soon!

63. https://medice.com

64. https://jobfamilie.medice.de

65. https://studyguide.jyu.fi/2020

68. And one more thing…
Albert Casado’s send his greetings
…
😉

69. Style Guide