Vusion 7.4

[Florence Rocle]

Beforediving into the tech stuff, you may want to take a look at the finished product at vusion.ses-imagotag.com. The website itself was implemented by a colleague, while I was responsible for implementing the product configurator.

The product configurator had two interesting requirements: it should be embeddable with JavaScript and all its filters should be flexible (with all rules, mapping values, etc.) and be managed in an administration interface.

The administration was implemented in "plain" Symfony (using Symfony Form components, etc.) in combination with a mySQL database, while for the client we decided to give Vue.js a try. The only alternative would have been React, but I always wanted to try out Vue - which was no mistake by any means, but more on that later.

In short a very small loader script gathers client-related information and an array of .css and .js files required to run the application, which are then dynamically injected into the client. After loading is finished (usually just a few milliseconds) the Vue application (coming from the dynamically injected files) is injected in a specific div container.

Vue did a great job for this application. Since this was my first Vue application everything was new for me - but nevertheless everything felt pretty straight-forward and, to my pleasure, little to no magic was involved. Thinking of the first time when I used Angular and stumbled upon Observables and RXJs? Even Tom Riddle would have been pretty confused at first by the magic happening there.

Interestingly the bar function would return "bar" here, instead of complaining that this.foo is not defined. This is because how Vue handles this: the Vue instance proxies some of its properties (in case you're interesting see here). This is pretty convenient once you're used to it, but it cost some "Whoops."-moments when using arrow functions.

In case you want to ask "why the heck did he put curly brackets in the Filter Type component": I have no idea how to represent repetitive components in such a diagram. That my way of saying "these things are repetitive!".

Even though this application was pretty small compared to the things I usually do, it was a really fun and interesting project. Vue is really fun and I'm definitely going again for it when there's a choice.

And gladly this project is publicly accessible so I'm allowed to talk about it - most of my applications are used internally (member databases, single sign on portals, ...), hence I can't really talk freely about them. Hopefully there'll be more of such projects in the future, I really enjoy writing such posts (and making cool diagrams and fancy notebook/smartphone images!).

VusionGroup (ex- SES-imagotag) is the global leader in the digitalization solutions for commerce, serving over 350 large retailer groups around the world in Europe, Asia and North America. The Group develops technologies that create a positive impact on society by enabling sustainable and human-centered commerce.By leveraging our IoT & Data technologies, we empower retailers to re-imagine their physical stores into efficient, intelligent, connected, and data-driven assets. We unlock higher economic performance, facilitate seamless collaboration across the value chain, enhance the shopping experience, create better jobs, cultivate healthier communities, and significantly reduce waste and carbon emissions.VusionGroup consist of six families of solutions, harnessing the full potential of IoT, Cloud, Data, and artificial intelligence (AI) technologies, at the service of the modernization of commerce: SESimagotag (ESL & Digital Shelf Systems), VusionCloud, Captana (computer vision and artificial intelligence platform), Memory (data analytics), Engage (retail media and in-store advertising), and PDidigital (logistics and industrial solutions).VusionGroup supports the United Nations' Global Compact initiative and has received in 2023 the Platinum Sustainability Rating from EcoVadis, the world's reference of business sustainability ratings.Learn more at vusion.com

3a8082e126