Front-end development: migration from Polymer to LIT
Published on: Author: Team Communication Category: Java & WebQualogy is helping the Netherlands’ largest FinTech company migrate from Polymer to LIT. One of the goals of the bank’s strategic programs is to offer a globally scalable banking platform. By simplifying and standardizing banking applications. With a modular system. Web Components (LIT) matches this strategy seamlessly. We spoke with our Front-end Consultant.
“Qualogy and the bank are no strangers. They have been working together for years in back-end and full stack development (Oracle, Java, and Angular). The migration of Polymer to LIT is the start of a great cooperation in the field of front-end development at the bank.”
Web components as a solution for legacy and framework dependency
“As a developer, you know what it’s like to work with legacy code. It feels like you’re standing in a maze and getting more and more lost. With confusing structures, dated patterns and a lack of documentation. Front-end frameworks React, Angular and Vue – or specific versions – will also belong to the legacy class someday. At my client, they realized early on that web components (LIT) can prevent legacy and framework dependency.”
From Polymer to LIT
“Polymer and LIT are open source JavaScript libraries, developed by Google. Polymer centers around making new HTML elements that you can reuse in your application. Without the content of the components influencing the elements outside the component. In other words: Polymer is built with the idea that utilizing browser-native technologies takes precedence over using increasingly complex JavaScript libraries.
Polymer never became as popular as other frameworks such as Angular and React. Google realized that some Polymer features were the cause of complicated code in many web applications. That is why they stopped developing Polymer in 2018, and simply created a new library: LIT.
Almost all of Polymer’s principles can be found in LIT. Both libraries continue to build on the standard web components of modern browsers. But if you open a LIT component, you will quickly see the differences. For example, you build custom Elements in LIT with JavaScript classes instead of separate HTML templates and scripts. You build every part of the component in JavaScript: template, logic and styling. In addition, LIT offers reactive features. If the properties of a component change, the component will be rendered again on the page.
LIT has clearly taken its inspiration from the larger JavaScript frameworks, such as React, Angular and Vue. Developers with experience in React will quickly recognize the architecture, style, functionality and syntax. There is even a third-party expansion for LIT to replicate the React “hooks api” (Haunted).”
Advantages of LIT
LIT has many advantages compared to Polymer. The main advantages are:
- Speed: LIT components load faster than Polymer because of, for example, the library format and the architecture of features.
- Developer experience: development in LIT is many done using JavaScript. So no more obscure and vague syntax like ‘Helper elements: dom-repeat, dom-if’.
- Support: Google stopped developing Polymer.
- Interoperability of components: parent and child components were dependent on each other due to ‘two way binding’ in Polymer. As a result, components are less interoperable. This is not the case in LIT.
Migration from Polymer to LIT
“Polymer and LIT components are basically web components. They can therefore be used in the same application (even in other frameworks). It only requires a few adjustments in the configuration of your development tools (such as Webpack or Rollup). Hence why we chose to migrate my client’s application from Polymer to LIT page by page instead of a ‘big bang release’, where the application is transferred to LIT all at once. This limits the migration risks and makes debugging any errors easier.”
Early adaptor
“Qualogy specialized itself in LIT technology early on. LIT is still in its infancy in terms of market adoption. But the technology is starting to gain traction. Qualogy likes to be at the forefront and continuously monitors developments.”
More information?
Qualogy has a lot of expertise and experience with LIT and web components. We are happy to share this knowledge. For more information, please contact info@qualogy.com or +31 70 319 5000.
You can find more information about web components and LIT here:
- Want to get started with LIT and web components yourself? open-wc.org is the perfect place to start. With ‘battle tested’ standards for setting up a project, similar to the ‘create-react-app’ for web components.
- Google recently launched LIT 2.0, including a new website for documentation. You can find all the ins and outs of LIT here.
- You can find more information about the differences between Polymer and LIT here.
