Developing Web Components: UI from jQuery to Polymer

Home page — Additional Resources — Developing Web Components: UI from jQuery to Polymer

Once upon a time, in a galaxy known as the ‘World Wide Web’, websites were black, white, and full of bright blue hyperlinks. As the internet has evolved, so too has our demand for sleek, sophisticated and interactive websites. Developing web components is a bedrock skill of any successful web developer.

In this guide we’re going to take a magical tour through the fascinating world of web development, hopping from HTML to PHP, pausing for a picnic in CSS, before arriving at our final destination: Javascript and WordPress. So, sit back, grab your laptop, and prepare to tackle ‘UI from jQuery to Polymer’.

HTML: The Bones of Your Website

Imagine you’re building a house. HTML is the bricks-and-mortar of your website, it lays out the foundation and structure for all the other technologies to stand on. But we’re not here for a boring lecture about

and

, you’ve probably learnt that back at Web Dev Elementary School. Our focus here is to create impactful, meaningful elements that’ll ace any user interaction test.

Towards that end, you’d learn to use the

, and

FAQ

What is the difference between jQuery and Polymer?

jQuery is a JavaScript library for simplifying HTML document manipulation, event handling, and AJAX calls, while Polymer is a library for creating and using Web Components to build reusable elements.

Why should I consider moving from jQuery to Polymer?

Moving to Polymer allows for encapsulating functionality and styling into reusable and self-contained components, leading to cleaner code and improved maintainability.

How do Web Components benefit the development process?

Web Components provide a standardized way to create reusable custom elements that can be easily shared and used across different projects, promoting code reusability and consistency.

Can I use jQuery and Polymer together in a project?

Yes, it is possible to use jQuery alongside Polymer in a project, especially during a transition period where you are moving from one framework to the other.

What are some key features of jQuery?

jQuery offers simplified DOM traversal and manipulation, event handling, and AJAX capabilities, making it easier to work with JavaScript and HTML.

How can I learn to use Polymer for building Web Components?

You can learn to use Polymer by following official documentation, tutorials, and hands-on projects that walk you through creating custom elements and using Polymer’s features.

Are there any performance considerations when using jQuery or Polymer?

While jQuery is widely supported and might be easier to start with, Polymer’s Web Components offer better performance due to encapsulation and native browser support.

Can I create responsive web design using jQuery or Polymer?

Yes, both jQuery and Polymer can be used to create responsive designs by leveraging CSS media queries and JavaScript functionalities to adapt the layout based on screen size.

Are there any limitations to using Web Components with jQuery or Polymer?

Web Components might not be fully supported in older browsers, requiring polyfills for compatibility, which could impact the performance and functionality in certain scenarios.

How do I decide whether to stick with jQuery or transition to Polymer?

Consider factors such as project requirements, team familiarity, performance needs, and the long-term benefits of adopting Web Components before deciding whether to stick with jQuery or transition to Polymer.