A practical approach to build an open and evolvable Digital Experience Platform (DXP)
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 542 | |
| Author | ||
| License | CC Attribution 2.0 Belgium: 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 | 10.5446/61794 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
FOSDEM 2023485 / 542
2
5
10
14
15
16
22
24
27
29
31
36
43
48
56
63
74
78
83
87
89
95
96
99
104
106
107
117
119
121
122
125
126
128
130
132
134
135
136
141
143
146
148
152
155
157
159
161
165
166
168
170
173
176
180
181
185
191
194
196
197
198
199
206
207
209
210
211
212
216
219
220
227
228
229
231
232
233
236
250
252
256
258
260
263
264
267
271
273
275
276
278
282
286
292
293
298
299
300
302
312
316
321
322
324
339
341
342
343
344
351
352
354
355
356
357
359
369
370
372
373
376
378
379
380
382
383
387
390
394
395
401
405
406
410
411
413
415
416
421
426
430
437
438
440
441
443
444
445
446
448
449
450
451
458
464
468
472
475
476
479
481
493
494
498
499
502
509
513
516
517
520
522
524
525
531
534
535
537
538
541
00:00
Electronic data interchangeRange (statistics)Information technology consultingProduct (business)Service (economics)TwitterComputing platformDigital signalMach's principlePoint cloudWikiContent (media)TwitterClient (computing)Interactive televisionNumberDemosceneConsistencyComplex (psychology)Information technology consultingDifferent (Kate Ryan album)Visualization (computer graphics)Conservation lawPhysical systemCustomer relationship managementContent management systemText editorData managementContext awarenessWeb 2.0RandomizationBlock (periodic table)Data storage deviceCanadian Mathematical SocietyGoodness of fit2 (number)Mobile appResultantModul <Software>Web applicationBitState of matterRight angleDebuggerQuicksortUser interfaceConstraint (mathematics)Projective planePoint cloudCharacteristic polynomialLibrary catalogMorley's categoricity theoremComputer architecturePoint (geometry)Execution unitProduct (business)Computing platformMedical imagingInformationIntrusion detection systemConnected spaceDigitizingForm (programming)Service (economics)Multiplication signSoftware developerSoftwareInteractive kioskComputer animation
08:53
Dew pointProduct (business)Web pageNormal (geometry)Component-based software engineeringSoftware frameworkComputer animation
10:40
Physical systemBit error ratePhysical systemComputer animation
11:21
Computer virusExecution unitRootLibrary (computing)Modul <Datentyp>Computer fileDrop (liquid)Video game consoleGame theoryCodeAxonometric projectionString (computer science)LengthDiscrete element methodTraverse (surveying)Default (computer science)Server (computing)Client (computing)Formal grammarCollisionFunction (mathematics)Plug-in (computing)Computer configurationSolid geometryPerfect groupComplex (psychology)Focus (optics)Computer architectureCodeComponent-based software engineeringConfiguration spaceConnectivity (graph theory)Multiplication signPresentation of a groupCore dumpCanadian Mathematical SocietyBuildingSoftware frameworkFood energyMobile appCartesian coordinate systemComplete metric spaceLibrary (computing)Sinc functionSoftware testingPhysical systemBoundary value problemHookingPlug-in (computing)Client (computing)Visualization (computer graphics)Computer animation
16:35
PressureKeyboard shortcutMeta elementPlug-in (computing)RootLibrary (computing)Computer fileCodeSolid geometrySheaf (mathematics)Game theoryProgrammable read-only memoryUniform convergenceInterface (computing)Default (computer science)Function (mathematics)String (computer science)Block (periodic table)Wrapper (data mining)Computer iconDecision tree learningGEDCOMDivision (mathematics)EmailDivisorComputer fontLogical constantPrice indexComponent-based software engineeringProduct (business)Normed vector spaceAxonometric projectionPointer (computer programming)Disk read-and-write headInterface (computing)Server (computing)MereologyComponent-based software engineeringSolid geometryCodePhysical systemMultiplication signMappingExtension (kinesiology)Constraint (mathematics)Software frameworkSheaf (mathematics)Compilation albumBitClient (computing)Computer fileDegree (graph theory)Escape characterDirection (geometry)Abstract syntaxGoodness of fitFunction (mathematics)Cartesian coordinate systemSoftware developerWeb pageRule of inferenceComplex (psychology)CASE <Informatik>Library (computing)Computer animation
21:49
Gamma functionComputer wormFAQContent (media)Component-based software engineeringText editorCartesian coordinate systemComputer animation
22:15
Menu (computing)Link (knot theory)Loop (music)Coma BerenicesDisintegrationTwin primePhysical systemFunction (mathematics)Data typeCanadian Mathematical SocietySound effectComponent-based software engineeringSystem callPolygon meshBuildingProgrammschleifeConnectivity (graph theory)Computer animation
23:50
Source codeDuality (mathematics)Maxima and minimaType theoryWeb pageINTEGRALText editorPower (physics)Computer animation
24:20
EmailMassDisintegrationConvex hullSoftware developerSoftware testingPhysical systemProduct (business)INTEGRALComputer animation
25:32
Program flowchart
Transcript: English(auto-generated)
00:05
All right, welcome everyone. We're going to go, yeah, it's four. So we did kind of a dry run this morning and we realized that there's too much content. So we're going to have to, you know, skip it. We're going to do the introduction. It's going to be very quick. So this is where we work.
00:21
It's called Mirai, blah, blah, blah. Connect to the website. You're going to see what we do. We do basically consultancy on a number of different clients on development, architecture, digitalization, and so on and so forth. This is us. You can tell who's who. These are our Twitter handles. And this is the Twitter handle of Mirai.
00:42
If you like to talk or if you don't like to talk, just feel free to share on Twitter. What we're going to talk about today. So this is the result of a number of lessons learned that we had on a number of projects where we tried to solve a problem that we see coming up
01:00
over and over again. So it's just we just took stock of the situation. We saw what was around all the mistakes that we made and we kind of condensed it into a presentation that we're going to give to you. So this is by no means an idea of giving you best practices of any sort because there's a lot of context that goes behind this kind of problems.
01:21
But it's just the way we are approaching the problem, the way we are analyzing the problem right now and the way we are approaching it. And we're going to talk about this idea of digital experience platform. You will see that like behind the name, there is a thing that you will know that is this idea that you start to have technical ecosystem that are more and more complex
01:42
and this technical ecosystems are done by a number of systems that need to integrate together and they need to communicate together and they need to give back to the user in some form or another on one channel or another, a number of information, a number of capabilities and interaction. So that said, what is the state of the art?
02:02
What is the thing that is the trendy thing right now? It's kind of synthesized but this idea of the Mac kind of technologies, there's an organization behind it, you may know it about it or not, but it's this idea that the new architectures
02:21
have kind of four major characteristics. They're based on microservices, we're not going to go into the debate of the microservice, what micro means and why do we need microservices or not. They're API first, they're cloud native and they're headless. We talked about headless, I think Alexander talked about headless on Material UI in the previous talk.
02:42
I think that the two that you have to retain for this talk are these ones, that you have systems where you don't necessarily care how the information or how the capabilities are going to be exposed because it can be on a mobile app or it can be on a web application or it can be on a kiosk that you have on a store or on something else, you just don't care.
03:03
The system is capable of giving you this kind of capabilities and data regardless of the channel that you use and how do they do that? Precisely by having an API first approach. So you don't have the interface, you have the capabilities, you can call any kind of HTTP rest service that is behind, the capabilities is there
03:21
and then you take care of the visualization or the user interface or the user experience, somewhere else. Am I going too fast? No, that's okay? All right, but there's a kind of a yes, but kind of situation. So let's say that you start from a simple website.
03:40
So this is what happened most of the time, you have a relatively complicated kind of interaction website, you choose your framework, here you have React, you may have a number of others, we basically don't care, but that's kind of one of the possible starting point. And then you say, okay, but I would like to manage this content. So what do you do? You add a content management system
04:02
and that is okay. You connect your content management system to your front end, off you go, now you have a number of editors that can manage your content. All right, sounds good. Then you want to add some commerce because the company is doing good, they want to add commerce capabilities. Well, very good.
04:20
You have a commerce engine that is headless, API first, you can add your commerce engine and then you start to connect it to your front end. But you also have to connect it to your CMS because they need to share certain kind of data. And this is the situation that you have. And then you have a lot of products.
04:41
So you start to need a digital asset management because you need assets for your mobile, you need assets for your kiosk, you need assets for the web and you can't store them here because they're not made for this job. So they start to see a bit their constraints. So you connect the dam
05:00
and you connect it with the commerce, you connect it with the CMS and then you connect it with your front end as well because it's the ultimate client. Okay, you kind of see where I'm going with this, right? Search, you start to have a huge catalog, you need to add search, you add Algolia or Elasticsearch, we don't care. It's the same kind of concept behind
05:21
and then you connect Algolia and you need to connect it with your commerce layer, you need to connect it with your CMS, you need to connect it with your front end and off we go. Then you have a Netlify because why not? And then at some point somebody says, you know what? I would like to do some customer relationship management with the data that I have and then you start to add the CRM
05:42
and that's where you end up with the situation. Now, if we remove all the capabilities that are provided by the system which is a huge step forward because before you had to do all kinds of plumbing behind, you need to de-connect your user interface from the system behind.
06:00
It was very tedious and very complicated. Now we have all those pieces of software that are capable of doing this by themselves where you're basically left with this. And I was finding it funny what Alexander, I don't know if he's still here, was saying in the previous talk, they would say you go headless and you just remove the problem
06:20
where you will see that there's kind of a law of conservation of complexity. You just don't remove the problem. You just shift it somewhere else. Someone or something still need to take care of this. And then of course, because we're not stupid and we're good intelligent developer, what we say is like, okay, this is not possible. We're gonna create something that is gonna aggregate this all together
06:41
and we basically create a layer. But this complexity is still here. So you kind of have a tension between the fact of having these Lego blocks and the modularity and the fact that someone or something still needs to orchestrate all this kind of stuff. And it can get very, very messy and very, very complicated very, very quickly.
07:01
All right, so this is the first problem, kind of big problem that we were trying to address. The second kind of problem is that if you take kind of a random e-commerce kind of interface, what we start to see more and more is that before it was just a matter of your CMS and your commerce. You had the catalog and the basket. These were coming from the commerce system
07:22
and then your content was coming from the CMS. What you start to see right now is that if you take all the blocks that compose, let's say, a fashion e-commerce, in the same blocks you have pieces of data that come from different systems and you need to aggregate those and you need to present them as if they were a unit
07:42
because that's what the user cares about. I need to have a catalog and the catalog is normally coming from the search because the search is optimized so you don't ask it to the CMS and you don't ask it to the commerce because you want to do all sorts of categorization and classification but then you don't show the IDs of the catalog, you show the product
08:00
and the product comes from the image from the dam, some content from the CMS and the SKUs from the commerce system. So, again, you see where we're going with this. It can get very complicated very quickly and the problem for us as developers behind is that every time that you need to change something here, you need to make sure that everything stays coherent
08:22
and consistent behind the scenes and, again, this can get very tedious very quickly. So, I hope what I said kind of made sense as an introduction for the context. You raise your hand if that was not the case, okay? Everything's clear? Sounds good.
08:41
I was getting scared. Okay, so we have the problem. Now what? And that's where I hand it over to Bouba that is gonna show you what is the situation that we're applying right now. So, full disclaimer, it's an approach that I'm showing you. It's not simple bullets, it's an exploration, so be with us, it's not perfect
09:02
and just trying stuff and trying to see where we can solve this problem. So, first thing that I'm asking you is, you tell me which framework I'm using. So, basically, I'm running on 4200 and 4201. And if you look at the two websites, okay, we're in JavaScript.
09:21
I have to make a joke about CSS. I'm really bad in CSS. This is dark magic for me, so that's the reason why. Don't bother with the logo, it's normal. It's okay. Just focus on the product here. Could you tell me on right or left, depending where you are, who is build with next and the other one is build with next?
09:44
No, no? Okay, so. Let's see. On how we, whoop, la. Here, so, I will just open it. So, if I do an inspect, if I scroll a bit, so one of them is based on next, okay?
10:02
And the second one is based on, because, voila, next, okay? So, you'll say, like, why I'm asking that, like, okay? So, if I tell you, like, these two page use the same base has code, okay?
10:22
And I just compile it and then I get a component that work for React, that work for Vue, and it's not a component, okay? So, do you know a tool that can do that? Nobody? Okay, so, I try. Okay, so, let's go.
10:42
So, for this talk, I will be speaking about some tools that we are using to orchestrate everything. So, the first one is NX. So, if you don't know NX, it's kind of like a tool, create, I will say, build system that you can use to handle all your monorepo, okay? It's really good tool because I don't want to set up Webpack guys,
11:02
or Vite, or anything else. So, I use this kind of tool to handle all the configuration, just handling Webpack, handling Cypress, Storyblock, everything's handled by this tooling, okay? I just use that plugin and then give you a good basic when you work with your team and really good standard, okay? Second tool that we will be showcasing is Mythosys.
11:23
Mythosys will be the basic of how we build our component. Like I said, it's an exploration. It doesn't solve everything, it's just a base, and we are trying to explore. So, if someone know something about Mythosys, did you hear about it? No, okay. So, give you some context. So, Mythosys is a kind of like a compiler,
11:41
component compiler, created by the Build.io team. So, Build.io, they build kind of like a CMS that completely, I will say, Visual CMS, where basically they have a lot of SDK. They would like to support all the framework that we have in JavaScript. So, it's a lot of frameworks. So, they hire multiple people and then they're like, okay, guys,
12:01
you're hiring too much people. Okay, maybe you should find a way to be able to handle all this complexity. So, they begin to create a compiler for component. So, they use a common layer, like JSX, and then base with this common layer, they compile it to, natively to React, Vue, Sval, or like all bunch of stuff, okay?
12:21
Basically, they take the approach of LLVM. So, if you don't know about it, they take the same approach, having a common layer where we can target and then all the architecture can file for that. So, we'll be using that. Frankly speaking, it's not perfect. It's really at the beginning. What's really nice with that, they are really pushing the boundary of that because all the SDK.
12:41
So, if you use Build.io, basically, you're using me to this under the hood. So, they use that to build all the SDK for the visual editor, like everything that you're using for React Vue, it's based on that. So, it's not perfect yet. It's improving every time, but it gives you really kind of like a good code. I will not say it's perfect. A human would be better.
13:00
Yeah, but at the end, you win time and energy because you write once and you build everywhere. Okay, it's a dream like since like 20 years, I know, but voila, every time, every 10 year, we try to do it again and try and fail maybe, but voila, someone tried, okay? So, basically, if you take back what Maurizio said,
13:21
we are going on the headless. So, our goal is really to reduce the friction. So, we have multiple frameworks. It's really difficult to go on client and say, hey, you use React, you use Vue, you use Angular. Okay, and every time, rebuilding the button, rebuilding the same thing. So, trying to find like a common layer and using me to this, we can really focus on, what I said most of the time, the presentation component.
13:43
I'm not mean like for really big component with charts. It's not mean for that and don't try to do it. You'll eat hardly and you will hate it and you'll be like, this is shit, okay? It's really for, I would say, common component that you will have that will be really simple, mostly UI based, not too complex, but kind of complex for some stuff.
14:03
So, you can really reuse. Basically, so if you're on React, they call it the presentation component. So, we should not say it anymore. Since then, it's bad, but voila, I use the term, okay? So, I will show you how we did it and what we have built, all the advantage issue that I got about it.
14:23
So, I'm using Upstone, okay? And basically here on the left side, you can see I'm using, it's just a standard, which application on Linux. So, you have the app folder, the libs, and then all bunch of stuff that you have every time on every stuff, okay?
14:40
The libs contain all the kind of library. What's cool with Linux? So, you don't need to publish it. So, you can really put it on a more repo. It handle all the configuration. So, when you import it in the React, it's basically use a test path under the hood and make the magic on Webpack. It just works, okay? It's kind of like dark magic, but it's not too complicated under the hood.
15:00
It's just test path and bring import into Webpack or feeds, okay? So, basically we create a library, a core library, okay, using mythosys, okay? So, if you open it here, you can see I have a core library. This is the mythosys. When I call it core, because it's the basic for everything, all the components we are using, okay?
15:21
Then I create a sub folder called the UI. UI will be like all my target that I'm pushing for people, okay? So, I have the UI for React, okay? And I have UI for Vue, okay? So, let's first focus on the core. So, on the core, I have like a mythosys config. So, basically it's a configuration layer
15:42
where I basically set up how I want to target and how I want to compile everything. So, you can see, it's a bit messy because like I said, it's not perfect completely. You have some edge case, but behind, it's just basically a config that you put and you say, okay, let me scroll, what do you explore?
16:03
You put where you put your file, where you put the write, really important, I will explain it after, and then the target you would like to do. It gives you also some edge case, edge, like for example, you can set up if you want to compile to TypeScript, want to run Prettier already, handling, like for example, how you want to handle a street tag,
16:21
and have like kind of like plug-in system, basically to help you to hook into the system like when you compile, okay? It's really basic and it's not like a big compiler, just basic, but it helps you already to fix some stuff that's not perfect, okay? Like if I go a bit here, like Rechnetiv, kweep, zwalt, like zwalt, you can see here,
16:41
like, holy shit, what this guy is doing? Like basically it's replacing stuff under the hood and patching stuff. Yeah, sometime you have to do it, but voila, it's just like to give you like the extent where we can go. Most of the time you don't need that. This is really like edge case for them, but you have all the code, okay? So then you have the SRC. The SRC basically is just where we put all the code.
17:02
So I will focus mostly on the component. So the convention is really straightforward. It's just you create a component, basically with .lite.tsx is a convention that will be every time picked automatically by the compiler, and then we will compile it to Vue or React, okay?
17:20
So basically here, I'm just taking a simple component. This one, it's more tricky. I will open another one. I will say easier, not this one because this one is so low. Let's take this one, okay? So here, basically just under the hood, it's using kind of like a JSX, but a more JSX constraint. So if you know Solid.js, you already play with it.
17:44
Not you. Basically, Solid, it's kind of like React, what React should have been if they write it now. And basically, it's used like really a constraints JSX system to make it more performant. And basically, they kind of copy some stuff from Solid.
18:04
For example, if you want to do maps, you don't do maps like in React, like it's just JavaScript. Yeah, okay, we know it's just JavaScript. Here, we have to use the for component. Why? It's because it makes easier for the compilation, basically, to be able to say, okay,
18:22
if I am using in-view, I use a v4. If I am in React, I use a map. If I am in Angular, I use ng4, okay? So this reason why they create these constraints to make the compilation easier. If not, they have to play with the AST, so abstract syntax tree, and just make the complexity increase, so try to make it simpler, okay?
18:41
And then they come with some common ground, like for example, ustore, it's just kind of like a hook. Basically, this will be compiled to a ustate or something similar in the view, okay? So they give you some rules that you have to respect. It's really strict. It's not easy at the beginning, and that's make the complexity of using this kind of tool
19:00
because you have to really think like, when I say if I'm working in Java before, like in interface development way, okay? What I mean by that is you have to think about the common ground between all the component and all the frameworks. You cannot just say, hey, I will write it like that, and basically this does not exist under the component, okay? Or it's not compatible, okay?
19:22
You have some degree of flexibility, but it's not every time the case, okay? So you have to find really the common ground, to handle it, but except that, it's kind of like just React, okay, with some stuff, okay? So basically, you get this component, and it will be compiled, and you can see it on the output folder here. It will be compiled automatically on React,
19:42
so if I take the, here, why I have client and server, oh, it's because I'm already testing stuff. Whoa, five minutes, okay. I have to go straight. So client basically is where we put all the normal component. Server is when you do LRC and so on, and not speak about it.
20:00
So component here, we have the future section. So basically, it's really, I think this one, under the hood, it looks like really something that you should have written, okay? The compilation is perfect, but it's going really well. The good thing with that, it's like give you also an escape edge under the hood. The escape edge is the override system. So if some part of your application,
20:21
you need to have like component that's not completely right, it's too complicated, you can override it, and how you do that, basically, you just follow the path here, and then you can say, on the compilation level, when you meet this import, replace the file by this one, okay? And here, for example, I do it for like headless UI, okay?
20:40
I say, okay, when someone meet the headless disclosure, basically, under the hood, he's switching to headless UI. And because headless UI is working both in a directed view, it works fine, okay? When I have that, I copy it completely automatically on my library here, UI and next, and basically, I just create a library,
21:01
simple library, where the client, and I do an export. Simple of that. This small row, I can take it and publish it on NPM, it works, okay? Then that, I take it, and then I use it in my application directly. Thanks to Nx, I don't need to do NPM, blah, blah, blah. It's already handled automatically. So to give you an example, on Next.js,
21:20
on the page here, I have my application. So basically, I reintroduce now the layer. So do you see here? We speak about the component, but now we need a layer, because everything is interconnected. So we need a layer to be able to say, okay, I have a layer in common where I can connect everything and handle it. This layer is called uniform, okay?
21:41
It's a tool that we use, and we explore a lot with the team. So let me show you. So uniform is basically that, okay? It's kind of like a visual editor that you can get. It starts completely with CMS, but it's way more powerful than that, where we can connect a lot of stuff. So here, basically, I'm connecting my next application
22:01
directly with my component. I will show you in two minute. And I'm also able to connect directly the data coming from multiple source, if I want. So here, okay? To show you the example, so here I have my sitemap. I have my, what I call, effective mesh.
22:21
It's just an example. The effective mesh, basically, it's connecting to, I hope it works, connecting to my CMS, okay? And you can see here, on the container level, I'm clicking on this one. Basically here, you can see, it provides me a component called loops that allows me to make reusable stuff. And then it's okay. The first component is the template, okay?
22:42
And the template, I can say, okay, I want to connect it to something, the title. The title is connected to something, okay? This here, what you see, it's an output from my API from storyboard, okay? How I get that?
23:02
I move uniform, come with a lot of stuff. First thing that it provides you, it's a component layer, okay? All the components that you saw, basically, are created here. So you can take them, reuse them, and use them as building blocks, like a CMS. Then the component, you can call it a composition. Composition is basically just aggregation of your component,
23:24
or basically here, I create pages, okay? And then you have a third system called the data type. Data type is basically your injector, okay? Do you see all these mesh? So they provide you a tool to be able to connect, in one way, in a similar way, to every system that you want.
23:40
Here, I will show you with my CMS. So basically here, I'm configuring my CMS, and I can go and say, okay, I have multiple call, and the call is really simple. Basically, it's an HTTP request. I can say, what is the name? I can say where I want, I can create variable that can be reused into the visual editor.
24:02
And then here, I can get that and connect everything. So when you saw a lot, a few minutes ago, what I'm using, it's basically a connection with that. This, it gives you the full extent, completely, when you have full power. But if you're lazy, and sometimes you come with an integration that's already built, you have some integration. One of them is, you go here,
24:23
you have all this integration already available. You just plug and play, and they provide you into your system, you connect, you have access, you put your credential, and you are ready to go. Like, for example, here, I set up Shopify, blah, blah, blah, and voila, I will remove stuff, but basically here,
24:40
if I wanted, I can connect Shopify. Then basically, it's provide me information, so I can just reuse and pick, for example, my product magically, automatically. And then I get one endpoint where I can get the data. One last thing that I would like to speak, why this tool is also interesting, it's about personalization and testing.
25:01
So it's already built into the system. Because it's the orchestration layer, you don't need to add, like, long darkly next to it, because the handle already does personalization for you, the handle already does the testing for you. Voila. Do you have a question?
25:25
Before the question, we'll say thank you.