We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

EEA Faceted Navigation and Plone 6

00:00

Formal Metadata

Title
EEA Faceted Navigation and Plone 6
Title of Series
Number of Parts
44
Author
License
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language
Production PlaceNamur, Belgium

Content Metadata

Subject Area
Genre
Abstract
EEA Faceted Navigation is one of the most popular Plone add-ons for more than a decade now. It started with Plone 2, then added support for Plone 3, Plone 4 and Plone 5. Is Plone 6 the end for EEA Faceted Navigation or it is a new beginning?
Turtle graphicsPortletPerfect groupRight angleFiber bundleRepository (publishing)Web pageWebsiteDemo (music)NeuroinformatikType theoryGroup actionProfil (magazine)Multiplication signCodeVulnerability (computing)Bootstrap aggregatingMathematical analysisPlastikkarteSoftware testingContent (media)Query languagePlanningClient (computing)Equaliser (mathematics)Default (computer science)Plug-in (computing)VideoconferencingStress (mechanics)Integrated development environmentOpen sourceRepresentational state transferThumbnailMetropolitan area networkWave packetDifferent (Kate Ryan album)Moment <Mathematik>Slide ruleScaling (geometry)Object (grammar)Canadian Mathematical SocietyEmailFreewareGoodness of fitTemplate (C++)Connectivity (graph theory)Block (periodic table)Core dumpYouTubeSemantics (computer science)Classical physicsImplementationInstance (computer science)Traffic reportingRevision controlSoftware bugInstallation artCloningOnline helpConstraint (mathematics)DemosceneComputer fileValidity (statistics)VoltmeterUniform resource locatorMereologyWeb 2.0Module (mathematics)Digital photographyContext awarenessBuildingComputer configurationSubject indexingLibrary catalogMessage passingSet (mathematics)MetadataSchwerpunktsystemToken ringRule of inferenceCoefficient of determinationSmartphoneElectronic mailing listConfiguration spaceWebdesignAlpha (investment)Moment (mathematics)Physical systemProduct (business)Musical ensembleFilter <Stochastik>Speech synthesisEndliche ModelltheorieGraph coloringWhiteboardHTTP cookieLibrary (computing)Presentation of a groupSimulationReal numberGoogolExpert systemMenu (computing)Game controllerLevel (video gaming)GravitationEnterprise architectureSystem callComputer animationLecture/Conference
BootingMoment (mathematics)Lecture/ConferenceComputer animation
Meeting/Interview
GEDCOMMach's principleBootingFile formatForm (programming)Computer animationMeeting/Interview
Moment (mathematics)Multiplication sign
Slide ruleMoment (mathematics)
Multiplication signPresentation of a groupLecture/ConferenceMeeting/Interview
OvalSpeech synthesisExpert systemLecture/Conference
Human migrationForm (programming)Product (business)Classical physicsComputer configurationComputer animationMeeting/Interview
Digital filterFilter <Stochastik>XMLComputer animationLecture/Conference
Digital filterLecture/Conference
Software developerClient (computing)Meeting/InterviewLecture/Conference
Cloud computingIntegrated development environmentGroup actionCodeMathematical analysisSoftware developerDefault (computer science)Computer animationLecture/Conference
Cloud computingIntegrated development environmentGroup actionCodeMathematical analysisPlug-in (computing)Mathematical analysisVulnerability (computing)Computer clusterCodeBootstrap aggregatingMultiplication signGroup actionIntegrated development environmentPlastikkarteComputer animationMeeting/Interview
PlastikkartePortletType theoryWebsiteProfil (magazine)Demo (music)Lecture/ConferenceComputer animation
Software bugPlastikkartePortletInstallation artWeb pageContent (media)Computer animation
InformationDemo (music)Coma BerenicesWeb pageDefault (computer science)Computer animation
Demo (music)PortletTemplate (C++)Configuration spaceComputer animation
MassDemo (music)Moment (mathematics)GEDCOMFood energyFocus (optics)AverageData recoveryIntegrated development environmentContent (media)PortletWeb pageSlide ruleLecture/ConferenceComputer animation
Revision controlCross-site scriptingInstallation artRevision controlProfil (magazine)Lecture/ConferenceMeeting/InterviewComputer animation
Software bugGroup actionOpen setSoftware testingCloningWindows RegistrySoftware testingIntegrated development environmentLecture/ConferenceMeeting/InterviewComputer animation
CloningComputer animationLecture/Conference
CloningSoftware developerCloningBuildingLecture/ConferenceMeeting/InterviewComputer animation
Normed vector spaceCloningBlock (periodic table)Core dumpComputer configurationDemo (music)Block (periodic table)Computer animationXML
MUDUniform resource locatorBoom (sailing)Musical ensembleDemo (music)Web pageBlock (periodic table)Block (periodic table)Lecture/ConferenceMeeting/InterviewComputer animation
Demo (music)Drum memoryFood energyBounded variationBlock (periodic table)Eigenvalues and eigenvectorsBlock (periodic table)Type theoryComputer animation
Demo (music)Revision controlMereologyLecture/ConferenceMeeting/InterviewComputer animation
Block (periodic table)Core dumpCore dumpLipschitz-StetigkeitXML
Digital filterGreen's functionMathematical analysisSource codeMaizeAreaDirected setQuarkLecture/ConferenceComputer animation
Green's functionDemo (music)Block (periodic table)Core dumpOpen sourceDemo (music)Lecture/Conference
Client (computing)Meeting/Interview
Enterprise architectureContent management systemVideoconferencingClassical physicsStress (mechanics)YouTube
Enterprise architectureContent management systemWave packetSemantics (computer science)Goodness of fitFreewareLecture/Conference
CodeOpen sourceEnterprise architectureCanadian Mathematical SocietyLecture/Conference
Integrated development environmentMultiplication signLibrary (computing)Physical systemLecture/ConferenceComputer animation
Software developerContent (media)Template (C++)Computer-generated imageryLink (knot theory)LaceStatisticsVariable (mathematics)AdditionCuboidUser interfaceComputer animation
Physical systemTelecommunicationMenu (computing)GEDCOMIntegrated development environmentVacuumOpen sourceComputer animation
Group actionArrow of timeGamma functionComputer animation
Boom (sailing)Food energyGEDCOMDemo (music)MomentumFocus (optics)Real numberCodierung <Programmierung>Interface (computing)Extension (kinesiology)BootingElectronic visual displayCloningWeb pageData typeGamma functionGreatest elementMathematicsQuery languageUniform resource locatorGraph coloringMeeting/InterviewLecture/ConferenceXMLComputer animation
AverageUniqueness quantificationMaxima and minimaTerm (mathematics)ExplosionDemo (music)System programmingData recoveryIntegrated development environmentShift operatorPlastikkarteInformationCurvatureAsynchronous Transfer ModeAvatar (2009 film)GEDCOMInternet forumPortletLecture/ConferenceComputer animation
Classical physicsCodePlug-in (computing)Wave packetLibrary (computing)Lecture/ConferenceMeeting/Interview
Meeting/Interview
Grand Unified TheoryArithmetic meanPlug-in (computing)Meta elementGamma functionLimit (category theory)Dedekind cutFiber bundle2 (number)Perfect groupLecture/ConferenceSource code
Equals signSoftware developerOnline helpBootstrap aggregatingLecture/ConferenceSource codeProgram flowchartComputer animation
Gamma functionMaxima and minimaInstallation artConstraint (mathematics)Source code
WebdesignSemantics (computer science)Meeting/InterviewLecture/Conference
GEDCOMContent (media)Software developerDigital signalProduct (business)Dean numberPhysical systemGroup actionControl flowAsynchronous Transfer ModeModel-driven engineeringMenu (computing)Semantics (computer science)Connectivity (graph theory)EmailComputer animation
Form (programming)Maxima and minimaGroup actionInsertion lossComa BerenicesMultiplication signSource codeComputer animationMeeting/InterviewLecture/Conference
MetadataObject (grammar)Scaling (geometry)Library catalogSynchronizationMeeting/InterviewLecture/Conference
Meeting/Interview
Turtle graphicsMultiplication signLecture/ConferenceComputer animation
Transcript: English(auto-generated)
Okay, this call is presented by Alin Voneia. He has worked at Odaweb in Romania.
Thank you. My name is Alin Voneia. I work with Odaweb Romania and we work mainly for the European Environment Agency.
And you see there also the logo of the company of Philips. You will see why in a moment. Yeah, this is what I've been doing in the past 15 years.
So I do Python, I do React, Docker, NLP, Elasticsearch, everything basically. But before we start, because Errico and Fred said that you should come to this stage, it's not easy.
I mean, I've been a lot of talks in the past 12, 14 years, so man, you have to prepare first. So here in Belgium there is this airspace indoor skydiving. So basically there is no gravitation there.
And I think the feeling is the same as being on this stage.
And look, for these guys it seems so simple, but I was there.
And this is not all you have to do, because you also have to go to the Walibi Belgium, which is also 30 minutes from Namur.
Find the highest rollercoaster, and remember this is not a simulation, this is the real thing.
I've been there, my daughter dragged me in this thing. I mean, every time I submit a talk to the Plonk conference, I have this, okay, it's okay, we're going to the sky.
But then, this comes. The moment of the talk. And from the moment when you arrive to the conference, until the moment you deliver the talk, it's indeed a rollercoaster.
I mean, you experience emotions more like this one.
So, yeah, and then you have to deal with these Google slides. Okay, then you come to the conference, and you spend your time with these beautiful people until 3am in the morning.
And you don't have the presentation done, actually you start doing the presentation during the conference. Now being serious, this is an expert in doing public speaking into the public.
And it's very powerful, just look for him on TED. So, going back to EA FASTA navigation and Plonk 6.
You are here because I used buzzwords. In the Plonk community, these are some of the buzzwords. So, yes, if you want to find more buzzwords, or if you're new to this community, or as Erika said, if you are in Brasilia or Argentina,
and you don't want to come to deliver at the Plonk Conf, make your product a buzzword by adding it to Awesome Plonk and also Volto,
and then come here and people will come to your talk. So, Plonk Classic and FASTA navigation, you have some options doing FASTA navigation in Plonk Classic.
If you don't, you have EA FASTA navigation, but if you don't want the advanced stuff within EA FASTA navigation, you have collective collection filters. Then also Andreas Jung showed us a light and talked about TypeSense.
I'm sure there are more. I'm sorry if I didn't include them in here. But yes, EA FASTA navigation 16 was released. Alpha, of course, 67. No, it's Alpha 1.
And you have to give this guy a beer, at least one of Belgian type, because Philip came to us and said we have a client that wants EA FASTA navigation to work with Plonk 6, and we said add Volto, and he said no, the client wants FASTA navigation.
So, okay, we started working on it. And yes, we have Lingua Plonk in FASTA navigation 16. No, we dropped all this. So, we dropped Python 2 and Plonk 4 support.
We dropped CC build out from development environment, Lingua Plonk. We dropped all the dependencies. EA GQuery, EA FASTA, Vocabularies, CollectiveJS, GQuery UI. We dropped by default behavior on the folder in collection.
You will see why. Actually, you may understand that the folder is not in Plonk 6 anymore. Enable by default.
So, yeah, what's new? We have the, we use Webpack to bundle the JavaScript and CSS resources. We upgraded some jQuery plugins like JS3 and jQuery UI, because jQuery UI also had a vulnerability in it,
and the Lighthouse always complained about it. Then we have the PIP-based development environment. We have Bootstrap 5, Grid, and Card for the faceted reviews.
We have GitHub Actions for code analysis and testing, and it's 10 times faster, or maybe 100 times faster. Nobody knows that. So, you can try it right now. If you open your computer, just type docker run site and add-ons and profiles.
And, of course, because I like roller coasters, here should be a demo. But I will do a live demo of it. So, no.
So, you know how to install an add-on. You know how to enable. I will just show you that you will have to, after you install the add-on, you have to go to content types, page, behaviors,
search for faceted navigable, and just enable this behavior. And then, if I add a new page, the faceted demo, I have it already here.
And in the actions, you will have enable faster navigation and enable faceted search. For the people that don't know what's the difference, faceted search will not search by default when you enter the page.
Faceted navigation will search by default to do that. But I didn't disable the faceted search.
Okay. What did I say in this slide? Enable configure portlets. Okay, portlets. So, as I said, this template is using boostup5 grid.
So, no more custom grid, what we had there before. So, basically, if I go to this one, I can enable left portlets and the grid will adjust automatically. I can enable the right portlets
and also have the grid. And I can enable smart faceting, disabling, and this will hide the facets if you have only one page of content because you don't have to filter.
I mean, it's no sense to filter something that it's one page of content. Anyway, going back to the slides. So, because in 16 we dropped the Python 2
and Python 4 support, we have an intermediate version. So, if you're upgrading your website, I suggest you to upgrade to 15 first because this one has some profiles of cleaning up,
like collected JS jQuery profiles, the faceted bundling in the resource registry and all that old stuff. And then upgrade to 16. Yeah, and run the upgrades available in the set setup.
Now, if you find a bug, it's a feature by design if you don't report it. If you have an idea but you don't open a pull request,
then it remains just an idea. And the pull is broken by default, as David said, if there are no tests and documentation. So, now, as I said,
we have the PIP-based development environment. And, yeah, you can just clone it from collective, CD, make, make-start. So, the make is here just to simplify some commands,
but this will just install cmf-clone and the latest one. You also have a docker-compose there, so basically you can start if you don't want to, I don't know why wouldn't you want to use PIP, but if you want to use Docker, just token-compose up clone 5 or clone 6,
and see how it looks on clone 5 or clone 6. How do we, what do we do with the resources? We use Yarn and Webpack. So, you just run Yarn and Yarn build.
You don't have to do this manually because when you do make-start, all the resources will be automatically rebuilt. But, yeah, if you change something in CSS or in JavaScript, then just do Yarn build, and the resources will be recreated.
Now, the options we have on faceted navigation and Volto, so we have the search block demo, already did a keynote about it in the morning,
so just go, I will not do the demo here, just go to the keynote from this morning and search for faceted navigation. So, basically we have faceted navigation. Ah, I still wanted to demo something because, so we have this backend,
and if I go to the Volto part, try to ignore that you already have this block here.
So, this will, if you put Volto on it, it will look like this, but if you add the search block, so basically you can add the search block from the, from the core, which is here,
and replicate manually, for now, the facets you had in the, was it in controls, no controls, facets. So, you can add a title,
it's like portal type. Okay. It's type, yes. You can move it on the right, on the left,
and was this a checkbook? So, now you have faceted navigation on the same content, and it can stay, I mean, it can live there
together with the classic part. So, the classic, if you go back to classic, nothing changed here, changed here. So, you still have a working faceted navigation here, and you also have another version of it
on the Volto part. So, this is built in Volto core. If you want something more advanced, we have some add-ons,
we have the Volto search lip and Volto global search, and if you've been at Ramon's presentation, there is something more advanced, like Nuclea core, and I think there are more, but I will show you what we have at the EA.
So, here we have, so we have facets, basically you can filter the content, but we also have the NLP part.
So, basically you can question it, and you will get a direct answer from the solution we have. We are using an open source solution
called HiStack from Deepset AI, and you can see that it gave us that we have to walk more. So, if you're going to Valibi,
use the walking transportation method. It will help. What else? Demo. Okay. So, now you have no excuse
to not upgrade to Plone 6. I mean, if your clients come to you and say, yeah, but I want to stay in Plone 5 because I have faster navigation, we have it also in Plone 6, classic. We have solutions for Plone 6 Volto.
So, yeah, I will just remind you what Plone is. This is a video we made for the Plone World Day this year. So, yeah,
and I saw it gained a lot of traction on YouTube. So, I think new people still ask what's Plone, and Plone is not about the Plone Classic or Plone 6 or Plone.
It's about accessibility, internalization. We have the latest technologies in it like Pustra, PS5, Semantic UI. We have documentation, good, very good documentation and free trainings. We have REST API,
and the most important of it, we have an awesome Plone community. And, yes, this is a code from Sorrento.
So, you can take the man out of the Plone, but you can't take the Plone out of the man. That being said, we have a lot of resources at Plone.org.
We have the docs at Plone.org. We have the demo, and the classic demo, and we have the trainings, and you can ask your questions on community.
So, Plone is the ultimate open source enterprise CMS. If you have questions, here you can find the FASTA navigation and the Volto search lib packages.
We have more. We have some time. I want to show you a quick... Well, it's not related to the FASTA navigation, but if you go to EA GitHub IO, we are working on a design system for Volto. For the EA, the branding for the European Environment Agency,
and here you can find resources about how to build,
and we have also a storybook. We have colors, all the branding stuff you will need for, and this is open source. You can fork it. You can use it for your needs. It's free.
It's in the spirit of the Plone community. So, with this one, I think we can also improve the storybook we have on Volto Core. Yes, question, please. Any questions?
Thank you. Someone who never used FASTA navigation, is it context-aware?
It is context-aware. So, if you... You can add in the FASTA navigation. You can... Let me show you how it works. If I find it, it's here.
So, here you have this menu. You can configure it, and you can add visible facets. The one with the blue color on title, and these are hidden. So, this works as collection did before.
So, this will define the initial query. So, basically, here you can say, okay, I want the location, path, and say location,
the title, so you have validation also, and the location. You can say,
look in news, hide it, and now it will show content only from the news. Yeah, you have only four, six items. So, you can also say, okay, give me only the news item. Now it's giving also the folders.
Let me disable the portlets.
Thank you. Okay, there is a question on this code. The question is, will the classic UI resource be refactored to Model Federation support? No, I'm sorry I didn't
went to the Johannes training about Model Federation on his talk. I don't know how to, I don't know. I didn't dig into it. Maybe the sixth final will have Model Federation.
But right now, we only reuse the jQuery, the jQuery library from Plon Classic, but the rest of models, I think there is only one, the cookie, the barbecue cookie, and maybe the select two.
But other than that, there are just new jQuery plugins there. But I would like to dig into it and use the Model Federation. Okay, thank you. Any other question?
There. I also wanted to ask the same question about Model Federation, but aren't you also using jQuery as a dependency?
Are you including that in the bundle? No, the jQuery, I added it into the Webpack. Let me find it. So if you look at the Webpack config, I said that
is not here. It's, look. So it's external. So basically, it's using jQuery from Plon. Perfect. And the second thing is, did I get it right? You do not provide the build bundle in the GitHub repository,
but in the PyP package, right? No, no, it's on GitHub. No, only, you know, in the old way of doing, of developing add-ons, you would have build.cfg here, or... Yeah. So now we have just a simple makefile. And if I go to sandbox,
you have just
the bootstrap install, develop, start, test, and help. For now. And behind the scenes, it's just doing pip install. Find it. So it's doing pip install Plon, with the constraints from Plon version,
and it's doing the sub-instance. Other question?
Web design system, the implementation, is it independent from Semantic UI? It's based on Semantic UI, so it only adds to the Semantic UI components, and we also have, where is it?
So we have styled all the Semantic UI components. Not this one. This one.
Yeah. And we have also some custom components. Like the footer, the header.
Also a question. Thanks for the work.
Why is it ten times faster? Good question. I was about to say, but I forgot. So, we found out that in the previous faceted preview template,
we were doing doc get object, brain get object, and it was there for 12 years, and nobody complained about it. But we did that because of the thumbnail, in Plon 4. Now we have the
scale sync catalog. So basically, we can just use the brain, and as a general rule, in listings, don't do brain get object. It's killing your website, so use the catalog as much as possible. Create new indexes
and use the brain, use the data from the brain metadata. Ok, is there any other question on Discord?
No more questions. Ok, thank you very much. The next talk
is at 11 and 50, so we have a little time.