“Live up to the time, the creation of non-stop, this article is participating in 2021 year-end summary essay competition”
The day before yesterday, Shopify released a developer preview of the Hydrogen. The technology was first unveiled at the end of this year’s Shopify Unite conference, where Shopify CEO Tobias went hands-on, sitting in front of a computer and demonstrating how to use React.js to break existing Shopify theme restrictions. Develop a highly customized store interface. In China, we call it “shop decoration”.
In the demo, Tobi used the Hydrogen framework to create a 360-degree drag-and-drop, multi-color 3D model.
How important is “fun”?
More than once during this demo, Tobi mentioned how FUN this new technology was.
He also makes a point: I think fun is really underrated in business (I think “fun” is really underrated in business).
The next part of his story brought tears to my eyes.
He recalls that 17 years ago, he learned Ruby, an interesting programming language, and bet on the Ruby on Rails framework to write Shopify’s code. Ruby was a very niche language then, and still is today, but it is very similar to English writing. Claiming to be the programmer’s best friend, although the sacrifice of operational efficiency, but greatly improve the development efficiency.
He made this choice because he got a lot of inspiration and fun from Ruby and Ruby on Rails, and the code was flying. They sustained him through his toughest days, and without them Shopify would not exist today.
And he ends it by saying,
I guess what I really learned along the way is that fun is actually good for business, the most creative things in the world are created by talented people, then they are having fun solving problems together.
I think what I’ve really learned along the way is that fun is actually good for business. The most creative things in the world are created by talented people who then enjoy solving problems together.
I learned programming in my junior year in 2013. In the same year, I also learned Ruby and Ruby on Rails by myself because it was “interesting”. Later, I started a food delivery platform in France, which was also built with Ruby on Rails.
“Dynamic e-commerce”?
Back to the point, e-commerce is supposed to be “dynamic”, right?
The concept of Dynamic Commerce is similar to the thousand faces of Tao e-commerce. But why does Shopify emphasize it?
In fact, Shopify’s problems are not quite the same as those of Chinese e-commerce platforms. Buyers and sellers from all over the world trade in a wide variety of languages, currencies, tax rates and payment methods.
And without the support of the platform traffic, independent station sellers have to think of all kinds of ways to drainage every day, the website is beautiful and fast, good service for every consumer.
In a word, it’s about creating differentiation (dynamic) and delivering the ultimate purchase experience (fast).
“Dynamic” and “fast” are hard to meet at the same time
Whether it is fast or not directly affects the GMV of the merchant.
When you open a web page,
You think you’ve waited too long to see the content, so you turn it off.
You saw the content, but it didn’t seem to work when you hit the button, so you turned it off.
These are all reasons for the low conversion rate.
Two important Web metrics, LCP and FID, need to be introduced here.
Largest Contentful Paint (LCP) : Maximum content drawing, measuring loading performance. To provide a good user experience, the LCP should occur within 2.5 seconds after the page first starts loading.
First Input Delay (FID) : First Input Delay, measuring interactivity. To provide a good user experience, a page’s FID should be 100 milliseconds or less.
Simply put: “I have been waiting for a long time to see the content”, that is, LCP is too long; The FID is too long for “no response on button or search”.
There are many reasons why the LCP is too long. In addition to the direct technical reasons, it is also influenced by geographical location and network conditions.
Shopify’s server and database in North America, a buyer in Asia visits Shopify’s website, and the request involves going to a Server in North America, pulling a rendering of the product data from the database, and returning it to the buyer in Asia for display. If the buyer is using a 3G network, it’s even worse.
Of course the actual request link is not exactly what I said.
In order to solve the problem of geographical location, CDN can be used to cache rendered static HTML pages and static resources such as JS/CSS/pictures on edge nodes. In this way, the next time a buyer from Asia visits the store, he or she will be in the server nearby, such as the Node in Hong Kong. Return the page content directly to him.
At the same time, the problem of poor network conditions can be solved by reducing the packing volume of static resources such as JS.
Statics can make loading faster, but…
There may be hundreds of SKUs in a single store, and sellers need to change product titles, pictures and prices frequently in the background every day. You can’t always show buyers the same page you cached hours ago, can you?
Make e-commerce more “dynamic” and “faster”
Shopify Hydrogen is designed to solve these problems.
First, what is Shopify Hydrogen? Shopify officially explains it as follows:
It is a front-end web development framework used for building Shopify custom storefronts. It includes the structure, components, and tooling you need to get started so you can spend your time styling and designing features that make your brand unique.
– hydrogen. Shopify. Dev
Hydrogen, for building the Shopify binding framework for headless e-commerce (binding only for Shopify). It is a front-end Web development framework for building custom Shopify storefronts. It includes the project structure, components, and development tools you need so that you can spend your time designing styles and features that make your brand unique.
Essentially, it allows developers to build faster dynamic e-commerce by providing a better developer experience.
Shopify’s store interface is dynamically rendered by Liquid, a Ruby-based template engine that Shopify CEO Tobi opened in 2008. It allows developers to write dynamic logic to control the data displayed on a page, which allows many designers and developers to monetize the Shopify theme.
But developing a Shopify theme isn’t cheap, especially as modern front-end frameworks like React. Js and vue.js become popular, and fewer UI developers know and are familiar with the Liquid syntax.
Liquid’s performance has also been poor, although Shopify has made a number of optimizations to the Storefront rendering engine in recent years, including decoupling the Storefront rendering engine from Rails megaliths and writing the Liquid extension library in C. But since the dynamic rendering engine still needs to be built on Shopify’s North American servers, there is still plenty of room for optimization.
Hydrogen’s first “fast” is that the page loads quickly
Rendering engine performance must be addressed first.
- Edge Computing: The rendering engine performs calculations at the nearest Edge segment node
- Enable the browser to receive the page data as soon as possible without waiting for the rendering to be complete
For the 3G phone buyer in Asia,
His request to access the page is processed by the nearest Hong Kong node,
Get the data, start rendering,
You can stream back to partially rendered pages without waiting for the rendering to complete.
With this rendering mode, it’s possible for a buyer anywhere in the world to open any Hydrogen technology-based Shopify store website in a second.
This seems like a perfect ability, but it’s never been possible. This will be possible through the Streaming SSR capabilities of React. Js and platforms such as Vercel and Netlify that provide edge computing.
The second “fast” aspect of Hydrogen is fast development efficiency
It turns out that changing a line of code requires repackaging, and so on and so forth.
Hydrogen, equipped with viet.js as a packaging tool, has a new generation of Bundleless compiler based on ES Modules, which only compiles but does not pack, and is over 90% faster than bundle mode. Now, in the blink of an eye, your style changes are automatically updated to the browser, which is great to use.
At the same time, the react. js library with Streaming SSR capability is selected as the base library, which has the largest front-end community ecology and a large number of ready-made components to help developers easily implement any cool interactive functions.
TailwindCSS, which is very popular these days, has no pre-determined styles, but provides a rich utilities class to help you achieve unique design styles, which is very suitable for e-commerce scenarios.
Coupled with the Hydrogen integrated Shopify API component library, you can iterate quickly with style and functionality only.
Most importantly, this technology stack is in the current front-end talent market, almost every developer can, there is no recruitment problem.
The third “fast” in Hydrogen is fast global deployment
Oxygen, the next generation of global edge computing deployment platform, will be launched early next year.
Start deploying new code changes to all edge node servers around the world as soon as the code is pushed to the repository. Also support branch preview, development experience is directly loaded!
Having said that, let’s get a feel for how fast Hydrogen really is! – > shopify. Named “supply”
Write in the last
Although it is an introduction to technology, it is more to let more people understand the trend of overseas e-commerce. From a technology perspective, technology is also meant to solve business problems. The emergence of a certain technology direction also reflects the challenges facing the industry.
Finally, I hope the seed of “Make Business more FUN” can sprout in the hearts of more people. New one!