Google’s ‘Polymer Project’ could replace PHP templates with their ‘lit’ library and web components

PHP templating engines like Twig are popular among web developers but Google is working on JavaScript solutions that have the potential to replace them. Google's Polymer Project created the JavaScript-based 'lit-html' templating library and more recently released LitElement, a solution for creating fast and lightweight web components.

Polymer Project
Google’s Polymer Project created lit-html and LitElement

A significant portion of sites on the internet are powered by PHP, an open source scripting language that’s actively maintained and well suited for web development. For example, WordPress, which accounts for over 30% of sites on the web, is written in PHP. Modern content management systems (CMSes) like Grav, a flat-file CMS, also use PHP.

PHP-based CMSes naturally use PHP templates to construct and present web pages for browsers. WordPress has its own PHP-based templating system built into its Core, and most other CMSes use third party PHP templating engines like Twig.

While PHP continues to be an excellent solution for CMSes, there’s an ongoing movement to switch to JavaScript (JS) for templating. Aside from being considered a more modern solution, JS provides the flexibility of executing code on the client-side, can update the DOM in real-time, and can help reduce server load. PHP can only execute on the server, which requires the browser to wait for responses from the server before it can alter the DOM (change objects on the page).

Google’s JS front-end solution is ‘lit’

Google’s solution for templates is lit-html. The templating library was first introduced in 2017 at the Polymer Summit, and it’s designed to efficiently update specific objects on a page. It can be used as a standalone solution for basic templates or utilized within an existing framework.

In February 2019, Google announced the release of the production version of LitElement, a lightweight base class that makes it easy for web developers to create and share web components. Unlike AMP, which is a web component framework with strict requirements, LitElement is designed for building standalone components that can be used in a multitude of environments, including frameworks like React or Vue.

As the trend towards utilizing JS frameworks, templates, and components continue to grow, lit-html and LitElement are well positioned for adoption. That’s because Google has made them compatible with virtually any environment.

Is ‘lit’ a good fit to replace PHP templates?

JS templating and components will still be a hard sell for CMSes like WordPress and Grav for the following reasons:

  1. The existing PHP solutions work well and they’re familiar to its users.
  2. The use cases for needing to use JS – the ability to dynamically change page content quickly – aren’t necessary for most sites.
  3. They can cause issues with search engine visibility if they aren’t coded well and if they don’t do server-side pre-rendering.

The templating library and web components from Google may still find a home with PHP-based CMSes, because Lit’s architecture allows it to be added to just about any environment. The template library and web components could also take advantage of WordPress’ REST API to dynamically change the DOM, the same way WordPress themes built with React do.

Regardless, I expect to see the adoption of lit-html and LitElement in a multitude of custom sites and web apps that require frequent DOM changes, like PWAs.


Update: August 28, 2019

Gray Norton, Software Engineering Lead for Polymer at Google, tweeted a clarification about the article.

It’s certainly true that you can use Web Components with your CMS-generated or traditional server-rendered site (and plenty of folks are doing so), but it’s definitely not a goal of the Polymer Project (or Google or other Web Components advocates) to replace PHP templating.

When I wrote the article I was thinking about the modernity of Google’s JS-based initiatives and how they have the potential to replace PHP front-ends. As an example, I mentioned how WordPress’ REST API is already being used as an alternative to its PHP themes. It’s therefore conceivable that a front-end could be built for WordPress using only lit-html and LitElement or included with JS frameworks like React or Vue.

While it wasn’t my intention, some people have interpreted the headline to mean that Google’s main goal is to replace PHP templates. I think my usage of “looks to replace” is the reason for that, which is why I’ve changed it to hopefully be more clear.