Building a new product - A developer's perspective

The context, a short history

Above 10.000 connections, code written using sequential programming either blocked the entire process or implied multiple execution stacks in the case of simultaneous connections.

With the introduction of a new package manager for Node, npm, a new phase for web development had just started. Programmers could now publish and share the source code of Node.js packages. This allowed speed growth and awareness for Node itself but also laid the new ground for Javascript enhancements to flourish. In 2020, taking into account all the growth that JavaScript has been through in the past 10 years we can say that there is still a lot to be revealed. Technology evolves with such speed now, that just when you think a new piece of software has come to stay, be it a framework or a language, there is something new that pops up; all disguised as winds of change that come with a promise of better understanding and solving of problems, for coders in their day to day craft and the clients need to keep up with the ultra fast-growing web. This is a good thing, in a way, because it means we are progressing, we are getting better at doing things, in building tools that help us achieve more with less.

The cost of evolution in tech

After working with a significant number of frameworks over the years, either javascript or PHP based, I find that the problem with all the new technology that continues to emerge is the cost of the learning curve, the cost of the changes and challenges that may come up on the way. Your code may be up to date one day just to find itself obsolete 2 months later when a new major release of the framework you used in developing the project appears. It’s no mystery that most times in programming even if we plan carefully each aspect there will always be unforeseen things that will increase workloads, estimates, pressure on the team, and the delivery process. In the long run, no matter how good a framework is as long as it’s not being used in more stressful scenarios, there will always be questions on its full capabilities and whether or not it fully suits the needs of development that it was chosen for.

Magento

Our main platform in developing e-commerce solutions is Magento which in 2018 became part of the Adobe portfolio. Magento, considered one of the most popular e-commerce platforms around the world, is also a speed growing framework that started to get acknowledgement around the same time the last decade's Javascript revolution began. The latest Magento release is 2.4 and brings a lot of improvements along with support for PHP 7.4, Elasticsearch 7.6.x, and MySQL 8.0. With this new version, Magento announces substantial security improvements, fixes, and enhancements. MySql search engine was replaced by Elasticsearch which provides superior search capabilities as well as catalog performance optimizations. According to Magento.com, there are 250,000+ merchants worldwide that use Magento to power their online businesses. Amongst the most popular we can name a few like Coca-Cola, Ford, Jaguar, Nike, and the list goes on.

PWA in the Mix

Progressive Web Apps (PWAs) are web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications. The term PWA was first “coined” in 2015 to describe apps taking advantage of new features supported by modern browsers like service workers and web app manifests. PWAs incorporate features such as fast load time, accessibility in unclear network conditions, engaging user experience, extra reliability, availability and push notifications. What is outstanding about PWAs is that they allow us to incorporate the websites on the screens of our devices as applications and also make the application available in offline mode when there is no internet connection. Since most of the stores using PWA solutions noticed a considerable increase in presence on the web, the number of visitors, and page load speed the adoption rate of PWA continues to ascend.

Magento + PWA

Magento 2 already has an in-house PWA solution based on React. In our technology stack, we chose Vue as Javascript Framework and there was already on the market a product that could meet our needs, Vue Storefront, so we decided to give it a try.

Vue Storefront is an open-source complete PWA storefront solution launched in November 2017 that allows integration with multiple backends, including Magento. Probably this platform-agnostic feature is what brings the downside to Vue Storefront. Being developed on so many fronts, the documentation doesn’t get to be sufficiently exhaustive for new adopters even though there are more than 2k+ developers that work on the project and 180+ active contributors regularly participate in the development. Looking back to the beginning of 2019, the framework was relatively fresh on the market when we started working with it. Also even though it covered most of the Magento framework functionality, there were still bugs that needed to be addressed and features to be covered. In other words, it was not suitable for full production needs.

Maybe if we would have started with a smaller project, our perception of Vue Storefront would be more positive.

Building eWA

Some key factors that make a great framework are good documentation, ease of integration, a supporting and growing community, the fast ramp-up on projects while learning and using it, and of course that it keeps up with the latest trends in technology. As a result, awesome solutions like eWA get delivered.

The team

Our team loves to stay in line with top trends in tech, so we found imperative the need for a progressive web app that we could connect with Magento 2 to provide a better shopping experience and also better visibility for ourselves as a team to what changes such a framework would present. I believe that having a clear overview of the capabilities and the downfalls of the frameworks we as developers use allows us to come up with better solutions, improvements, and better deliverability. The time which is of uttermost importance gets used in meaningful things that bring value to the products and clients and, what’s more, there is the enthusiasm of the team in developing a product of its own which will in turn bring to market other solutions.

Every good product is the result of a need

We wanted something that we could have better control of and visibility when it comes to features and upgrades. Even though Vue Storefront has a good position in the e-commerce market we found it a bit heavy and over-complicated in some aspects like ease of development of more complex features and client needs. The tendency in programming nowadays heads towards microservices and decoupled systems but if you require in-depth changes of the base Vue Storefront functionality chances are you will get some headaches, messy code, and regrets.

Technical overview

When we started building the product we had 3 pillars in mind: performance, scalability, and development speed. After laying out a plan for what we wanted this product to be like we engaged in the creative process, both with enthusiasm and the necessary dose of skepticism that doesn’t let you get astray. eWA stands for e-commerce Web Application with a progressive touch. On the client-side, like the Vue Storefront solution presented earlier, eWA is based as well on Vue, but even better, we decided to use Nuxt Js, an intuitive Vue Js Framework that allowed us to build a modular and scalable product easy to maintain and extend. On the backend, Magento implements GraphQL, a query language for APIs, to provide an alternative to REST and SOAP web APIs for frontend development. Apollo Client acts as an interface between eWA and the GraphQL server endpoints provided by Magento. There is also an extra caching layer that limits the number of requests to the server only when they are necessary.

Where to next?

With eWA we wanted to bring forth the capabilities of a stack of technologies that all put together could bring more ease in development, address the issues we did not find covered in other products we used and also bring value for our e-commerce clients.

Although eWA is still a young product, as it happens with most tech solutions, time and development iterations will make it even better. After using it in production we are proud that we have achieved our goals of making development of e-commerce applications more predictable and more easy to sustain for us as a team. Happy clients, happy developers. In the near future, we want eWA to become a point of reference for how e-commerce PWAs should work. Sometimes a simpler approach makes a better product and you cannot simplify something unless you understand completely what lies underneath the processes.

Technology is ever evolving. We don’t know what tomorrow will bring in tech, but we have the duty to make things better and push progress further.