synaigy and Frontastic hack a PWA for HCL Commerce
Thursday, 11.10.2018 10:00 am in the Mediapark Cologne – it’s finally time: the synaigy Hackathon 2018 starts. Four teams compete to show what they can do in two days. The team “Syntastic” wants to prove that it is possible to create a slim Progressive Web App (PWA) based on the HCL Commerce API and a generic Frontend-as-a-Service in only two days.
But first back to the starting point: what should be hacked here and why?
HCL Commerce is a very powerful and adaptable system, especially when it comes to the combination of B2C and B2B. But as powerful as it is in data management and backend functions, as heavy and inflexible it is in the frontend. In this area, however, companies today need maximum flexibility in order to quickly try out new business ideas and expand existing offerings continuously and without great IT effort.
This is precisely where Frontastic’s strength lies: it builds on existing eCommerce APIs and makes the individual functions available to the online team in the form of Tastics. Tastics are lean web-component-like front-end building blocks and can communicate with each other (or access a common data layer in the browser to be more precise).
The online team creates the complete web application – from the start page to product pages, content pages, shopping cart and check out – based on these Tastics. And the customers, i.e. the users of the web application, have a very positive, “native” feeling. This is because the application reacts much more fluently than normal web applications, since a large part of the application runs in the browser, i.e. at the customer’s, and therefore does not require boring reloads.
Syntastic Team and Goals
The “Syntastic” team consisted of six synaigy and two Frontastic developers – the latter, however, focused on basic guidance. For synaigy, it’s important to have a strong front-end solution that works independently of the backend, whether it’s HCL Commerce or Intershop, for example. And the solution must work for both B2C and B2B models. Together, we therefore had to find a solution that would allow us to move forward quickly, easily, and flexibly. And yet the strong and flexible HCL Commerce can still be used for data and commerce functionality.
Goals for Day 1
Display of product information from HCL Commerce in the PWA frontend
The declared goal for the first day was to create a first breakthrough: Display of product information from HCL Commerce in the frontend. Specifically, a new connector for the Frontastic Product API for HCL Commerce was written in PHP by a Java developer ;-). Parallel (!! – it is not a matter of course that something like this can be developed in parallel) the frontend team has written a first Tastic for displaying the product data in React JS. With plenty of jQuery and Angular know-how – but without React JS knowledge.
And at the end of the day it was done: despite the know-how hurdle, the first milestone was reached as planned.
Goals for Day 2
Creation and styling of a PWA shopping route based on HCL Commerce backend
For the second day, of course, the bar was set a little higher:
creation of a shopping route (start page with product slider, category page with search and endless scrolling, shopping cart with live calculation from HCL Commerce as well as a checkout with order transfer to HCL)
Styling the e-commerce experience using the Frontastic SCSS framework, which is based on ITCSS, BEM and Atomic Design.
And, of course, the Syntastic team also managed to overcome all the hurdles on the second day to present an impressive result late in the evening.
And the winner is: Syntastic
With the result – despite the know-how hurdles – it was clear that the team had to take first place. Just like the other three teams ;-)
Summing up, one can say that on the one hand it was a giant achievement for all involved to create so many new things in such a short time. And on the other hand it was again impressive to see how well an API-based overall architecture works and, above all, how flexibly one can act by merging specialized systems (HCL Commerce for the e-commerce backend and Frontastic for the frontend experience).
With the achieved Proof of Concept, the team has also taken a first step towards a potentially full integration of HCL Commerce and Frontastic, an ideal starting point for the next projects.
Who wants to experience this flow together with us: Just talk to us, we’ll be happy to hack the next Proof of Concept, your latest business idea or a crazy something!
Java vs. PHP
Stay In The Loop
Subscribe to our newsletter to keep up to date on all the latest Frontastic news.