Technology is continuing to advance before our very eyes quicker than we can consume or comprehend. We have come far in the past years with website building capabilities. Today, web development is easier because you can search the web for snippets of code to copy and paste onto your site. This method is still unfortunately messy, and people employing this method are typically pasting large amounts of code onto a page that they don’t understand.
The way we build websites continues to change, and advancements are helping us transition to a development world where anyone will be able to build complex applications with simple drag and drop functionality. What enables this? It’s web components. It may be hard to fathom that fully functioning applications could be created with little to no code, but with dedicated minds work to foster this paradigm shift, we are not too far from this. One of the projects working on this initiative is Google’s Polymer project.
Web components are shareable pieces of code that you can easily use in any application. They are a way to encapsulate styles and structure inside of an element such as an input element or a button element. With web components, you can package complex styled components such date pickers and use them on the web. Though web components are still a fairly new concept, the standardization of them is what’s creating our future.
While the standardization process is being developed, projects like Polymer allow web developers to create web components and assist with providing the polyfills needed to make the components work in all browsers.
The idea behind Polymer is to provide a structure for web developers to develop web components and share them without having to worry tasks like dealing with browser compatibility issues. Customization and creation of new web components is something those working on web components are trying to foster in the community. Polymer helps developers take prebuilt Polymer web components and customize them. Allowing greater access to web component creation helps develop the ecosystem and move us closer to mainstreaming web components.
Monica (@notwaldorf) is a self proclaimed emojineer at Google working on the Polymer project. At Google, she focuses on making developer’s lives easier by creating features to give developers more flexibility when developing web components. Monica has spoken at various tech conferences and has a background in computer science.
Some may wonder why Google cares about projects such as Polymer. Monica says, “Google is passionate about web components and Polymer because they make the web ecosystem better. These initiatives help all developers, but they also help Google developers scale code and share it across codebases internally. It allows everyone to stop recreating the wheel.”
Monica reminisces on 1995, the year the first iteration of the input element landed native in the browser. The input element allows web developers to easily specify types such as text, password, checkbox, radio button, and more even today. That was 21 years ago, and not much has changed with the browser APIs. The current browsers still only have have a couple more elements on top of the input, video, and button elements.
“We haven’t made any large leaps like adding date pickers, or responsive modals that work across all browsers. 20 years from now, we will have a large inventory of web elements, and the same way developers are using input elements natively now, then, custom elements will feel natural and we will use them like they were always there.”
Browser standards and adding native elements such as the input element are a slow process due to sensitivity with the API and the agreements across browser teams. Polymer gives the future advancement of the web to the people so the ecosystem can move faster and we can achieve a better web faster.
“Think of Polymer like jQuery for web components. If you were around in the 2000s, jQuery made writing JavaScript for the DOM easy. Polymer does the same thing for web components. It adds syntactic sugaring to make it easy to develop web components and affordances that are missing from the platform like data binding and data propagation.”
Large companies who have adopted web components have had success in using them to standardize their code base. If an organization has multiple projects, they are able to create an internal repository that houses their web components so teams can find ready-made, styled components to use in their applications. An added benefit is standardized components help companies have consistent brand and styles across all teams and web presences.
Polymer components change the way teams work together. If a company used Polymer as an interface for mockups, designers within an organization would be able to drag and drop pre-made elements onto a page to generate useful mocks easily and share those with the development team. It would be easier for companies to enforce strict guidelines of how they want their apps to look with a specific set of visual elements that become the standard. It also make is easier for developers to create MVPs from mocks this way.
Google has its own mockup tool to show developers the ease of using Polymer elements. The site, http://polymer-designer.appspot.com/ may be a bit outdated, but a second iteration of this tool is in the works. The mockup tool is functional now, and allows beginners to get functionality from APIs without understanding the API. Internationalization is a drag and drop feature, as are responsive layouts and elements that store your data offline. You can even have the functionality of Google Maps without writing a single line of code.
Polymer-CLI, a project that launched in 2016, is another initiative by Google that allows developers to start creating web components quickly. The CLI starts developers off with a responsive layout, routes and a Service Worker for offline support..
“Web components have also made the world funner. You can create art, or make components that help others create art. Some of the best web components I’ve created are emoji rain and emojilate. Emoji rain makes it rain emoji on your page, while emojilate takes any picture and converts the pixels to all emoji.”
With the quick advancement of projects like Polymer and the fast adoption of web components in the modern web ecosystem, we can see where the future is taking us, and play a part in history by using web components now.
Many companies have created great free open source components available for public use. A great way to get started is to visit webcomponents.org for a catalog of custom elements. Google’s Polymer team has created a set of custom elements for everyone to use and can be found at https://www.webcomponents.org/author/PolymerElements.
This article was written by Tracy Lee (@ladyleet), a Google Developer Expert, JavaScript developer, and Co-Founder of *This Dot Labs, a framework agnostic company focused on helping companies level up their expertise in front end development through mentoring & consulting.*
Top comments (0)