While making technology decisions when we started building EvenCart one of our requirements was to speed up the page load times.
As we were already focused on making an API first platform, it was necessary that wherever required, the server should focus on sending the data in JSON rather than complete HTML. However, if requested, the server should be able to send complete HTML.
What were the available options?
Too many. But we wanted to make sure that we don't go with something that we regret at later stages.
ASP.NET razor view engine was already out of question due to its inability to client-side rendering. Blazor could be used because of our familiarity with C#, but we still were not sure about its compatibility across web browsers.
Next in line of thoughts was Angular for templating but relying on client-side rendering with Angular can be harmful to SEO. This is because not every crawler executes JavaScript before indexing the HTML.
A cloud service like https://prerender.io for server-side rendering could be used to overcome the crawling issue. However, the learning curve of AngularJS is very steep and server-side rendering with prerender.io meant an additional head to the overall expenses.
Fine we also thought about Angular Universal, but that seemed like an unwanted step in the overall deployment cycle.
After a good thought and discussion within our team and having looked at Liquid's feature set, the consensus was to use this language.
What is Liquid?
Liquid is a templating language created by Shopify for use in their system. It's open-source now and is used by various applications ranging from eCommerce systems, content management systems, site generators, email generators, and many others.
What are the good things about liquid?
- Easy to learn. Easy to use: Liquid is fairly easy to use even for non-programmers. The simple syntax allows for anybody with little knowledge to quickly work up a readily working page.
- Customize and Extend: Liquid already comes with a good set of filters and tag support. However, in case you wish to have your custom filters and tags, it should be very easy to do so.
- Render at client or server: This is probably the best thing that I like about this language. You can create an HTML page with Liquid templating and have it processed on your server or at the browser. What this means is that you can write Single-page applications that only requests data via API and process them on the client to render the pages. In EvenCart we use dotLiquid for server-side processing and liquidjs for client-side rendering.
- Fewer resources to process: All you need is a Liquid parser and processor to have a working page using Liquid. And the processor itself doesn't require too many resources.
- Clean Html Code: Due to the simple and clean syntax, the HTML is less cluttered. The liquid template files are better readable due to this.
What Liquid can not do?
Liquid is simple for a reason. So that it should be easy for non-designers and non-programmers to use it. Therefore if you have some previous experience with some other programming language, you may find it a little limiting.
There is no concept of classes or functions in Liquid. You can not create reusable components as you do with Razor or Blazor. Therefore one might find repeating things across pages.
For the loops, there is only for loop that gets the job done in most cases. There is no while or do-while sort of thing.
Conclusion
Overall, Liquid is perfect for those who want simple yet powerful templating language that is easy to learn and manage. However, if you areexpecting too much from a language that was designed for non-programmers, in particular, you should look for something else.
