A technical talk, that helps you understand how the ploneintranet stack is structured, and why it works the way it does. Opens with a mini tutorial on Patternslib. Pays special attention to re-usable packages in ploneintranet that you can deploy separately.

1. Plone Intranet
under the hood
Guido Stevens
@GuidoStevens
cosent.nl
Social Knowledge Technology

2. it starts with a vision

3. Once upon a time...
● 2010 Intranet designer at Syslab
● 2011 Created Patternslib
● 2012Mockup forked
● 2014 Plone Intranet Designer
● 2015 Mockup merged
● 2015 Plone 5.0 released
● 2015 Plone Intranet 1.0 released

4. Patternslib Mockup Patternslib→ →

5. Design First

6. Patternslib
● Separate Github organization
● Multipe repositories
● Some patterns live elsewhere
● Provides: Javascript
– markup + CSS only for documentation
purposes

7. Prototype
● Separate repository
● In ploneintranet Github org
● No Javascript
– downloads patternslib bundle
● No Plone
– hand-crafted markup
● Standalone clickable prototype
– Jekyll static page templates
● Provides: CSS, images
● Defines: HTML markup

8. Patterns in action

11. post-box is our most complex frontend element

12. post-box is our most complex frontend element
● pat-content-mirror
● pat-inject
● pat-switch
● pat-subform
● pat-autosubmit

13. pat-content-mirror

14. pat-content-mirror
textarea (invisible)
#mirror-post-box

15. pat-content-mirror
textarea (invisible)
#mirror-post-box

16. pat-inject

17. pat-inject
<form id="post-box"
class="pat-inject update-social status-inactive"
action="/feedback/post-well-done.html"
data-pat-inject="source: #activity-stream;
target: #activity-stream .activities::before
&& #new-post-box"
>

18. pat-inject executes AJAX request
● activated by pat-inject class
● fetches action page URL
● extracts source #selector
● replaces current page target selector
● optionally replaces second && target
selector
<form id="post-box"
class="pat-inject update-social status-inactive"
action="/feedback/post-well-done.html"
data-pat-inject="
source: #activity-stream;
target: #activity-stream .activities::before
&& #new-post-box"
>

19. pat-inject executes AJAX request
● activated by pat-inject class
● fetches action page URL
● extracts source #selector
● replaces current page target selector
● optionally replaces second && target
selector

21. learn more at patternslib.com
● + 2 talks by JCBrand

22. putting it all together

23. ploneintranet/ploneintranet
● single repository
● single egg distribution
● 23 separate packages
– separate GS profiles
– separate test suites

24. separation of concerns (1)
patternslib
● javascript
prototype
● CSS
● markup definition
ploneintranet
● python & Plone
● markup implementation

26. prototype ploneintranet

27. separation of concerns (2)
ploneintranet.theme
● no views or templates
● diazo transforms
● CSS bundle
– from proto
● JS bundle
– compile / download
ploneintranet.layout
● globally used views &
templates
– menu bar
– dashboard
● App protocol
– context sensitive
browser layers
ploneintranet.suite
● no views or templates
● only package that
depends on
ploneintranet.theme
● integrates all other
ploneintranet.*
● robot tests on all
ploneintranet.*

28. customization entry points
ploneintranet.theme
● no views or templates
● diazo transforms
● CSS bundle
– from proto
● JS bundle
– compile / download
ploneintranet.suite
● no views or templates
● only package that
depends on
ploneintranet.theme
● integrates all other
ploneintranet.*
● robot tests on all
ploneintranet.*

29. don't customize, generalize
● it's a product
– not a framework
– highly integrated
● it's an application
– not a website
– minimal branding
● forking is costly
– to build
– to maintain even more
● generalize feature requests
– “good idea” test: useful for others
– high quality generic solution
– share future maintenance
– improve core product
● customize configuration not code
– avoid hardcoding current business
logic
– avoid UX uglification

30. Just A Bunch Of Add-ons – No More!
All pages hand-crafted markup
● No z3c.form generated pages
● No “developer design”...
● Add-on integration requires design

31. Just A Bunch Of Add-ons – No More!
All pages hand-crafted markup
● No z3c.form generated pages
● No “developer design”...
● Add-on integration requires design
This is a product, not a framework
● Consistent, superior UX
● High quality polished product
● Focus on OOTB product re-use

32. how to make money then?
● free != beer
● business analysis
– information flows
– social structure
● configure system
– case workflows
– teamspace structure
● integration
– authentication
– other systems
● enhancements
– build new features
– improve existing features
● deployment
● training
● support
– fix bugs
– upgrades
● analytics

33. re-use opportunities
● whole product
– use as base for client project
– collaborate with partners
– expand roadmap
● library mode
– depend on ploneintranet
– load only individual packages
● network (tagging)
● async
● themeswitcher
● layout (app protocol)

34. stack overview

35. statistics
● 49 contributors
● 6800+ commits
● 835 tests
● 87% test coverage (excl. robot)
● sloccount:
– python: 23.9 k (85%)
– xml: 3.8 k (13%)
● investment ~ € 750 000

36. built on Plone 5
● moved to Plone5 a2 in 2014
● took some initial effort
● smooth sailing since
● now we don't have to port :-)
● now we don't have to support
Plone4 :-)
● we don't expose Barceloneta
– except where we do: themeswitcher

37. package groups
● frontend
– theme
– themeswitcher
● integration
– suite
– api
● sitewide
– layout
– notifications
– messaging
● workspaces
– workspace
– todo
● users
– userprofile
– invitations
● standalone apps
– search
– library
● previews
– attachments
– docconv
– async
● plonesocial
– microblog
– activitystream
– network
– (misc legacy)

39. integration
ploneintranet.suite
● :default loads all package profiles
● :testing creates demo site
● runs all robot tests
– from all packages
– in fully themed site
– on :testing content
ploneintranet.api
● all developers are lazy :-)

40. search
● Solr based
● Elasticsearch future option
● faceted
● “livesearch”
● standalone
– ZCatalog elsewhere

41. “plonesocial”
● status updates
● mentions
● tags
● attachments
– previews
● reply, re-share
● filter by ”following” network
● like

44. personalized data structures
● Btree persistent dictionaries
● Arnold follows Bernard
● Claire likes your update
● Denise endorses Ellen for skill X
● Generic personalized tagging behavior
overrides DC:
<user> tags <object> with <tag>

45. ploneintranet.network
● Btree persistent dictionaries
● Arnold follows Bernard
● Claire likes your update
● Denise endorses Ellen for skill X
● Generic personalized tagging behavior
overrides DC:
<user> tags <object> with <tag>

46. user profiles
● dexterity.membrane
● personalized data
– personal stream
– endorsements
– followers/following
– likes
● import view for management
● assumes AD/LDAP
– but not required
● see talk by Matt Sital Singh

47. team spaces and case management
● based on collective.workspace
● simplify security management
● single trust zone
● document management
● activity stream
● adaptive case management:
– workflowed team space
– todo centered
– see talk by Alexander Pilz

48. document previews
● based on collective.documentviewer
● .* → pdf → png screenshot
● stored as annotations on files
● used in all file listings
– workspace
– activity stream
– search results
● WIP: async conversion

49. async
● super minimalistic
– 478 SLOC
● no ZODB queue handling
– use Celery
– use Redis
● async request dispatch
● handle in browser view
– normal view security
– easy to debug

50. ploneintranet.async
● super minimalistic
– 478 SLOC
● no ZODB queue handling
– use Celery
– use Redis
● async request dispatch
● handle in browser view
– normal view security
– easy to debug
● generically re-usable

52. theme switcher
● fallback to Barceloneta
– control panels
– raw editing
● cms.localhost:8080/Plone
– configurable switch host
● plone.app.theming policy API
● ploneintranet.themeswitcher
implementation

54. ploneintranet.themeswitcher
● fallback to Barceloneta
– control panels
– raw editing
● cms.localhost:8080/Plone
– configurable switch host
● plone.app.theming policy API
● ploneintranet.themeswitcher
implementation

56. context-sensitive browserlayer switching
● Use case
– “Document” in workspace
– “Document” in library
– different default view
– same portal type
● App protocol
– toplevel traverse event handler
– disable “other” IAppLayer
– enable “own” IAppLayer
● Mixin class for easy usage

57. ploneintranet.layout
● Use case
– “Document” in workspace
– “Document” in library
– different default view
– same portal type
● App protocol
– toplevel traverse event handler
– disable “other” IAppLayer
– enable “own” IAppLayer
● Mixin class for easy usage

60. Roadmap
● Content updates
● Notifications
● Mobile Push
● News hub
● Calendaring
● Auto-tagging
● Org charts
● ….

61. learn more
● Product and services: quaive.com
● Developer documentation: docs.ploneintranet.org
● Sources and issue tracker: github.com/ploneintranet/ploneintranet