Modern eCommerce Web Development
With the number of available tech solutions, tools, architectures, and approaches to web development today, it is easy to get overwhelmed when choosing the one for your online store.
15 minutes
Nasdaq’s prediction that 95% of ALL purchases will be done online through eCommerce by 2040 should not come as a surprise. Even today, you either have an eCommerce store or you don’t exist. What’s surprisingly difficult is trying to keep your ecommerce up-to-date with the modern trends and frameworks that pop up every now and then.
A new wave of emerging technologies to upgrade and build upon the previous one is nothing new. Back in the day, we had HTML and CSS for static websites of the old. Then came the era of dynamic server-side websites, with WordPress being the most popular solution. Then came React and JS frameworks. And then we went (kind of) full circle, back to the static with the Jamstack approach. With all shades in between, of course.
Similarly, some time ago (after the WAP disaster), the only possible route in the app dev world was to have one native app for the web and one for mobile (or two if you take different OSs into account). Today, it is a bit different. 60% of web devs support cross-platform applications, thus removing the need to develop and maintain separate apps.
Technology is evolving much faster than most of us would prefer. But given how it develops and improves the experience of working on or using your website/store, it is good news for both developers and clients.
All of this brings the question of which tools I should use for my online store as a crucial one for today's eCommerce businesses.
With Crystallize being at the forefront of modern tech, we know we can help you navigate the murky waters of web development to end up with the best possible outcome/technology for your use case.
YES, we’d love you to pick Crystallize. The thing is, Crystallize is not for everyone and every use case. This post is not about picking us. The post is about picking the right solution for your use case. We’ll try to lay all and all about web development here, the pros and cons of each approach, for your consideration. The decision is all yours.
The web development scene has gradually evolved over the last few years. A lot has happened to speed up things. Like the all-time high usage of mobile devices and mobile apps, the brands focusing on customer experience, the expanding API economy, the acceptance of headless and serverless techniques, the rise of frontend and backend technologies, etc.
So, let’s start with a short overview of this year's happenings and what’s coming next.
Multi-page Apps (MPA) because SPAs and PWAs are not enough on their own and because modern frameworks are able to deliver so much more than before.
The age of Cloud, APIs, and Decoupled/Headless Architecture is upon us. Cloud spending is already half of all IT spending.
Personalization, i.e., delivering compelling customer experiences through tailored design and UX on various devices and sales channels.
There is more. Check our dev and design trends post here.
We'll go through this quickly here; for a more thorough explanation, have a look at the eCommerce business models post.
When we talk about types of eCommerce business models, there are five general ones most recognize today:
Business-to-Consumer (B2C)
Business-to-Business (B2B)
Business-to-Business-to-Consumer (B2B2C)
Business-to-Government (B2G)
Consumer-to-Consumer (C2C)
Direct-to-Consumer (DTC)
And five potential types of eCommerce revenue models:
Dropshipping
Subscription
White Labels
Private Labels
Wholesale
You’ll find your business idea to be a mix between these and this mix, in turn, can enforce certain tech and marketing constraints (or rather audience expectations). This is not to say you should abide by these expectations. The best brands in the world go against the grain and are successful in that. Then again, the rules are different for big brands.
Big or small, today, everyone needs a website. So, let’s talk about how we get about building one.
OK. So, the first two chapters were just a warm-up for what is to come.
Now, there are two ways we can talk about web development, i.e., in the context of Web Dev Approaches and Modern Web Dev Stacks.
There are many different eCommerce web dev approaches out there, each with its own set of features, benefits, drawbacks, and platforms that are the leading piece of tech in the approach.
Let us try and walk you through them.
Web Dev Approaches vs. Modern Web Dev Stacks. When we say Web Dev Approach, we are referring to a platform-based approach, i.e., an approach where you rely on a platform that is in the center of your online store. When we say Web Dev Stack, we are referring to underlying tech and tools one would use in making an online store.
Example: WordPress + WooCommerce
As the most used CMS in the world, WordPress comes with many available plugins (features/enhancements), one of which is WooCommerce. While definitely not the most powerful of eCommerce engines, WooCommerce is continually updated, and today, it can satisfy many eCommerce businesses.
This eCommerce web dev approach is perfect for businesses that don’t sell too many different products and whose revenue model is pretty straightforward. If your marketing is content-heavy, the WordPress part of this combo will do wonders for you. Finally, you’ll be able to keep your costs down since you won’t need to hire a full-time web dev team.
All of the above means you are sacrificing personalization and custom use case functionality. Instead of taking care of your use case, you are molding your business in what is already there (i.e., relying on pre-made themes, pre-made subscription/payment solutions, pre-made checkout processes, etc.).
Another potential drawback is performance. For solutions like this one, performance does not come out of the box.
Suppose you need any custom development to add advanced features to your eCommerce store, or you rely heavily on personalization. In that case, you may be better off with one of the other web dev approaches on this list.
Example: Magento Open Source or PrestaShop
A self-hosted open-source eCommerce platform means using your own server to run your online store. And because it’s open source, you get to benefit from pre-made solutions while retaining control over each and every aspect of the platform.
This web dev approach is great for complex stores that sell hundreds of products or use multiple sales channels. Plus, you control the setup because it is on your own server.
On the flip side, you will definitely need full-time web developers on your team to ensure everything is running the way you want it and make sure it is performant. Then there is the question of automatic updates and ongoing maintenance, which is your responsibility since the servers and installation are your concern and matter greatly if you intend to have a smoothly running setup.
Example: Shopify or BigCommerce
Paid-hosted eCommerce platforms are ready-to-use, all-in-one solutions that enable online stores without worrying about any infrastructure-related hassle. Usually, you’ll have different subscription tiers available that you can choose from based on your needs.
It’s perfect for those who plan to launch an online store with standard functionalities and design. In this case, you won’t need a web development team and can instead rely on the platform provider for technical support. Finally, your store upkeep expenses will be predictable each month which may not be the case with other solutions on the list.
Downsides, vendor lock-in for one. Personalization and customization are limited by available platform integrations (similar to website builders' setup).
Example: Crystallize + any modern framework.
In headless eCommerce, the frontend layer or the head is detached from your online store's backend (and the different other services). These two communicate through APIs that deliver all content from the backend to as many frontends or sales channels as your web developers define.
Headless eCommerce allows endless customizations and blazing-fast speeds thanks to the modern frameworks you can use for the frontend (like Vue, Angular, React, and react-based Gatsby or Next JS, Remix Run, Astro, Svelte, etc.) and modern programming languages that you can use for the backend (e.g., Node, GoLang, Rust, PHP or even Python).
For headless eCommerce, you will need a full-time development team. Although it can produce superior eCommerce stores, the development process itself can get quite complex.
However, benefits in terms of personalization and customization are too good to ignore. We like to explain the headless as a best-of-breed approach where you can pick, choose and change individual vendors/solutions per your use case who will manage different functionalities (like payment, search, content/CMS, authorization, etc.).
A web development stack is a collection of tools and technologies web developers use to make websites or, more general, web apps. A web app typically needs to consist of at least a database, web server, operating system, and the development environment or programming language.
Each company will typically use one web dev stack for its website, while web dev agencies usually specialize in one or two stacks. If it’s the latter that you’re hiring for the development of your web app, then you should definitely get familiar with the most popular stacks.
A simplified web app is usually made up of two layers: the server-side or the backend and the client-side or the frontend. Both of these layers contain different tools and technologies built on top of each other, thereby making up a web dev stack. More complex stacks would have, at least, application cache, HTTP cache, and message brokers in order to crush performance, but we are considering that as server-side.
A frontend is a client-side layer or the part that the users interact with. It’s the user interface with its design and its functionalities and the face of your web app.
The backend is the server-side or functional layer that contains various technologies to answer user requests and transactions. It’s the brain of your web app.
The front end communicates with the backend, and the backend feeds all the information and content to the front. So, we could say that the backend is where the web app’s logic, file system, website structure, and database, among other things, are housed.
This is also the backend that will act as a service layer to connect all the other services your web application uses. (authentication, notifications, payments, etc.).
LAMP is an acronym that stands for the operating system Linux, the server Apache, the database MySQL, and the programming language PHP. As well as LEMP for Linux, Nginx, and MySQL.
As a combination of open-source technologies (there aren’t any licensing fees), LAMP/LEMP is, one of the most popular web dev stacks out there. It’s been tried and tested repeatedly, so the development should be trouble-free.
It has great community support with regular updates ensuring that your website is secure, among other things, and it’s an excellent solution for both static and dynamic websites.
We have to mention that in the last few years, the PHP ecosystem has evolved even more than before. Now PHP 8.x is strongly typed (not TypeScript, but that’s not PHP 4 anymore). On top of that, performance can be achieved with PHP, and the progression of the architecture is worth the mention.
At first, with the LAMP approach, one web server that handles the requests, scaling the application itself was not easy. Nginx arrived with its lightweight, asynchronous, event-driven architecture allowing it to be used as a load-balancer, reverse proxy, and for PHP applications as a Web Server, democratizing PHP-FPM.
Thanks to it, you could scale the web server independently from PHP, but PHP still lacked the Event Loop (one of the reasons) that made Node so powerful. Indeed, with PHP on each request, all the initialization must be redone. That was a huge problem for years, with a lot of optimizations to be done on the autoloading for a framework. Symfony and Laravel are on top of it in terms of best practices.
Today you can do AWS Lambda functions with Bref, and PHP has very nice extensions that bring event loops, asynchronous I/O, and multi-threading (ReactPHP, PHP Swoole, and others). This means you can serve web applications the same way as you serve Node applications.
MEAN/MERN/MEVN are popular technology stacks that include MongoDB, Express.js, and NodeJS. The third letter carries all the differences.
In MEAN, the frontend layer is built with Angular, MERN with React, and MEVN with Vue.js.
All three of these web stacks are also open source and offer great community support and documentation, as well as UI component templates for some aspects of web apps.
Jamstack is a non-traditional web dev stack that initially meant a tech stack with JavaScript, APIs, and Markup. Today, however, the term has moved away from the original idea and refers to a Jamstack architecture rather than a tech stack (read the linked post to learn more about it).
It’s super popular because it helps improve the user experience while also making it easier for developers to manage, upgrade and edit the backend without having to do anything to the front.
As already (kind of) explained, headless isn’t a web dev stack but instead web app architecture and a subset of decoupling.
In it, the head or the front layer is decoupled from the backend of your web app. They exist independently of each other, with the only connection between them being APIs.
APIs can seamlessly deliver content from your backend to your frontend if you have one, or even multiple frontends if your eCommerce is multichannel.
Serverless (computing, architecture, cloud, etc.) is a foggy term used to explain a development model that allows you to build and run applications and services without worrying about servers and infrastructure. It is great for smaller companies that wish to outsource their backend management to cloud providers such as AWS, Google, or Azure.
In its most basic case, these cloud providers sell functions as a service (FaaS), where the developers only need to develop the front end while they take care of the rest. Another great aspect of serverless is that it enables a microservices architecture making the web app much faster than its monolithic counterpart.
Serverless is more affordable since you only pay for features that you use. Your web app is easier to scale when needed, and you don’t have to manage as many things as you would otherwise.
By now, you probably know how CDNs work, right? Edge computing brings the capabilities of the cloud even closer to the end-users. For you and your business, that means the ability to run code at the edge with close to zero latency and deliver the fastest personalized experience possible, among other uses.
This explains why top cloud providers turn their heads to it. Think of Cloud Workers, Edge Handlers, Edge Functions, etc. Any and all of the approaches mentioned above can make use of Edge Computing.
Monolith, headless, serverless, LAMP, composable, microservices MERN, etc., tech jargon can be mind-boggling, right? How does one find the right approach or tech stack for the project at hand?
There is no one-size-fits-all solution, but there are some things that you should take into consideration before you arrive at the right web development approach for your business.
Different products will benefit from different web development stacks/approaches. What will be the main functionalities of your product?
If it’s an MVP that you’re after, you could probably benefit from a simpler solution that enables fast development cycles. On the other hand, if your product is meant to handle large quantities of data, go for a stack that’s efficient at handling data.
If you already have a web development team, talk to them. What’s their skill set?
You will either have to opt for a tech stack they’re familiar with or set time aside for them to learn a new one. Alternatively, the tech stack you opt for could dictate your hiring process and requirements.
The maturity and popularity of the tech stack/platform greatly influence the price of developers and the development of your project.
What’s your launch time frame? This will too affect your choice.
Some solutions will come with out-of-the-box functionalities that you can use for your product. If your team already knows the solution you opt for, then you’ll cut significant time there, too. Finally, the more documentation exists for a tech stack (think open source stacks), the quicker your developers will be able to produce the web app.
You don’t want to choose an obscure tech stack just for it to lose support a few years after the release of your product or service.
Before opting for a web stack, make sure that there is a booming community with regular updates and patches and plenty of documentation available so that you can future-proof your tech stack.
Simple truth is your budget dictates many things, including solutions you’ll opt-out to for building your website. Make sure you understand the costs involved before making the decision.
One of the hidden costs most doesn't think about initially is the cost of maintenance. Keeping all systems, platforms, and tools in check and working takes time, dev time. Take WordPress as an example. WP requires constant maintenance and core version updates, and so do the plugins you use. This basically means a high probability you'll be tacking with compatibility issues and security flaws on both ends. This also means that having a WP dev on the team or available on call is imperative, especially if your business largely depends on your website, as many eCommerce businesses do.
For an eCommerce website, design is a fantastic opportunity to make a strong first impression.
It directly affects how much time users are inclined to spend there and how much money they are going to spend. A successful eCommerce platform should offer a great customer experience and make purchasing easy and intuitive.
Below are some key points to consider concerning design in eCommerce.
Ideally, you'll want your eCommerce website to load within three or two seconds. In a 2019 survey by Unbounce, nearly 70% of consumers admitted that page speed impacts their willingness to buy from an online retailer.
Start thinking about optimizing your web page speed, and you'll see loads of improvements in your revenue, customer loyalty, and SEO.
Did you know that 73.1% of customers may leave a website if it has a non-responsive design?
Responsive design ensures webpages are displayed with proper dimensions across a wide variety of devices, including smartphones, tablets, laptops, and desktops.
As consumers interact with businesses across multiple devices, ensuring the experience is consistent at every touch point is vital.
Before you even consider hiring a professional to help you create a new website, it’s essential to narrow down what you want that website to achieve. You have to think long-term, be clear about your website objectives, and make a plan.
A practical way to determine your website goals is to start with your business goals. If your intention is to build an eCommerce website, your goals should be too.
The main focus of your website development project should be creating a seamless User Interface (UI) and User Experience (UX).
Everything on the website should make sense and flow from one section to the next so that users may explore sites easily and without rushing. Make sure you’re mobile-friendly and offer a personalized experience.
If you achieve all of this, your sales will most certainly increase.
Today, customers expect more than just high-quality products. Apart from the web app user experience itself, any interaction with the customers should be up to par.
It's imperative that you work on your communication with them, as the benefits of great customer interaction are numerous -- greater customer satisfaction and retention, increased customer referrals, and so on.
Try communicating across various channels, make it easier for customers to find you online, respond to them on time, use your authentic voice and be transparent. They will appreciate it!
Undoubtedly, digital marketing is among the most successful means of selling. And high-quality content is a huge part of it.
The main goal behind establishing a strong brand reputation online is attracting more customers, and you can do that by creating quality, informative content to make for a valuable experience.
The web development scene has been gradually developing over the last few years. The majority of developers are probably already aware of several disadvantages associated with utilizing a conventional CMS like Wordpress or Drupal and monolith eCommerce solutions like Magento and Shopify to some extent.
It is fairly understandable why static, pre-rendered websites are emerging as the ideal choice for contemporary web developers, given that Google is enhancing its Javascript crawling and rendering capabilities and preferring speed as one of the top-ranking elements. That is not to say that going headless is not without its challenges and drawbacks.
The bottom line is the choice is yours and yours alone. The best advice we can give is to put tech solutions against your business goals within your budget and make a decision that is best for your business.
We can help. Seriously we can.
BOOK a personalized 1-on-1 demo today, and we’ll show you what makes Crystallize a powerful product story engine well suited for your business.
Or, why not SIGN UP for FREE and start building the website yourself.
Connect the Dots
Development and Design Trends In eCommerce
Headless, composable, API-first, Remix, UI or UX-driven design, etc. Tracking development and design trends in eCommerce is both tough and rewarding at the same time.
eCommerce Business Models: Types, Selection, Revenue, Examples
The eCommerce space is animated with various business models, each with its unique set of advantages, challenges, and requisites, making it hard to identify which is the best fit for your use case.
What follows is a mish-mash of research, dry definitions, suggestions gathered from our clients, and our in-house and world-famous brand examples in an article to help you make that decision a little easier.
Return on Investment (ROI) of Headless Commerce
The benefits and competitive advantages of headless commerce are many. When done right, of course. Let’s look at some of the primary advantages that a proper headless commerce buildout can provide.