Hydrogen, cool new kit at Shopify
I want to explain how the development landscape is changing so we developers are not left behind if we are working with an outdated object oriented toolkit.
Background
I am working on a project that every two weeks holds a meeting where developers come together to share anything interesting in the code base or the wider environment that might help the team.
I came across this video that talks about some hot topics that are missing from our current Java/Angular development stack, and I don’t want the team to get left behind.
This is a share from one of those meetings.
Below is a summary of some of the interesting things demonstrated in the video, and some of the key concepts that Shopify use to make it a success.
At the bottom of the article are some references to Hydrogen and other useful projects.
Hot Topics
Meta Frameworks
These up an coming tools allow development of systems that are split between a server and the browser. They provide many benefits over the server only or browser only web development we are used to.
Hydrogen is one of these meta frameworks, it is built on top of React and specialises in delivering a retail experience. There are a number of other general purpose meta frameworks, the most popular are Next for React and Nuxt for Vue.
In the world of meta frameworks, there is a “new kid on the block”, RemixJS. I think Remix is a real game changer, and might be as important as ASP or PHP over the coming few years.
Server Components
This is where the meta frameworks will come into there own. They allow us to write a single code base then manage the placement of code on server, cloud edge or client. While at the same time managing the communication between the individual parts.
This is really important for a fast delivery of the experience to our users. It is also important in securing proprietary logic and facilitating use on low powered devices.
I am not sure how well an object oriented system, that relies on dependency injection like angular can perform in this space. I have a gut feeling the functional based systems like React and Vue are bettered suited to this type of delivery.
The reason I say this, is because back in the day we had Common Object Request Broker Architecture. CORBA was used to facilitate this sort of delivery for objects, but it was hyper complicated to use and disappeared from our toolbox very quickly.
Functions for State
In the video you will see React uses “useState” functions to hold state. This isolates the place where mutations occur, and fundamental to helping us avoid the mutation swamp that comes with object oriented programming.
If hooks are a new concept, here is a good place to find a simple introduction https://reactjs.org/docs/hooks-overview.html
Key Success Factors
Separation of concerns
In the video (@2:40) notice the use of their dashboard.
Shopify use a dashboard for data management and another system Liquid or Hydrogen for data display. It is very important not to mix the two in the same application.
If you mix the two in a very simple application like a blog manager, it might work. But when the complexity level rises, you have created a tool that becomes difficult to use.
There are some good general purpose tools for creating a data dashboard or a content management system. My go to solution at the moment is Strapi. It is a very flexible tool and you can easily customise the management interface to match your business theme.
Documentation
Documentation is very important. I think it is one of the keys to Microsoft’s early success, as they had some brilliantly written books covering there tools.
I have come across tools that have massive amounts of documentation, videos and tutorials. However, sometimes the documentation is full of holes, as it was never given the prominence within the organisation it needs.
When an organisation neglects the documentation, it makes that investment almost worthless.
Shopify, React, Angular, etc all have comprehensive detailed documentation that allows us to use there tools without digging into the source code to discover how things work.
Friction Removal
About 11 minutes into the video, they explain how the do deploy per branch. This feature is very important in a big team, so that product owners and testers can view work before it is merged back into the main codebase.
With a talented DevOps engineer and kubernetes we can set this up ourselves. However the Shopify team know the talent to do this is rare, so they have built this ability for all their clients. The attention to “friction removal” is something that makes them an successful company.
