Web Components VS Frameworks

7 min readMay 19, 2017

When it comes to web tech, I’m the guy that stays in the loop of cutting-edge while constantly keeping updated w/ what’s coming. Whether it’s knowing how to render CSS animations @60/ FPS w/ the GPU instead of CPU, or playing around w/ the Web Bluetooth API to see my phone’s battery life from a laptop, I want to know about it.

Frameworks: Going Down the Rabbit Hole…

That curiosity to learn what’s possible carried over to JS libraries, frameworks, and stacks as well. My research has been on-going since my first experience w/ jQuery in 2010, on up to my current weapon of choice, Polymer (Web Components). I don’t want to lead on that I’m some sort of “Frameworks Expert”, I don’t know everything there is to know… What I do know however, is the features, pros, and cons that all the big players bring to the table.

In 2015 I researched 100+ flavors of M.E.A.N. Stack Generators (thanks to Dan Cancro’s amazing legwork). I quickly got caught up in the maze of trying to find the answer to… Which stack is the “best”? Should I go with meanJS or meanIO? Or uhh.., ooh! Look at this one!… 💥

You can read a similar article I wrote in an attempt to convince a former employer and his team to consider switching to the M.E.A.N. Stack (Mongo, Express, Angular, Node).

Frameworks: Rinse, Wash, Repeat (…Forever…)

Developers and Frameworks are involved in a tragic love story… We fall in love with a framework and create amazing next-level apps… Then one day that super bad piece of framework comes along and whispers in our ear… “vDOM”. We try to ignore it, but in the back of our minds we know we’ll eventually be downloading that hottie. You know, the one with the curly brackets.

The Pattern

“Cool” Framework comes out
Learn “Cool” Framework
Create “Cool” web app
Next year…
“COOLER” Framework comes out
Abandon “Cool Legacy” web app
Learn “COOLER” Framework
Build new and improved “COOLER” web app
Rinse, Wash, Repeat

Decisions, Decisions, Decisions

The options a developer has now are endless… Frameworks pull us in a million different directions and train us to do things from the framework author’s perspective. These practices might be good, bad, or completely new concepts… But in many cases, it comes down to their way or the highway’, buddy.

The BIG Picture: Frameworks = Evolution

I can’t completely hate on frameworks… We’re witnessing evolution people! My only real beef is the repetitive and wasteful process they drag us through. When looking at the big picture, one thing has been true for each of them: They bring powerful change to what we know is possible, and that sort of change can only be achieved by putting in the 10,000 hours of Trial & Error it takes to create something better. Our option then? Learn the tech and stay relevant or be the guy that still embeds <flash> into <iframes>. Yikes!!

Is this the fate for web developers? Will frameworks consume our industry for all eternity?

Is there no other way. . .

Web Components: A New Light

Web Components are the biggest thing since HTML5. It might be hard to understand why if you’ve never suffered through “Framework Hell”… So what are they? Web Components are a powerful new W3C Standard that’s already been agreed upon by all the major browsers and can be used today in our apps (with a polyfill). Like the name suggests, this DOM addition gives us the ability to “componentize” the web into small, reusable, modular containers that fit into web apps like puzzle pieces. Best of all, they’re not tied to any framework- Purely built with HTML, CSS, and JAVASCRIPT.

Do you realize what this means?!

It means we can literally think of anything we’ve ever created, turn it into an atomic designed custom <html-element>, and re-use it globally. Everywhere. I like to think of each <custom-element> as it’s own little app. It’s made for one thing, and it does that one thing perfectly every time.

Web Components: 4 New Additions

Custom Elements: Reusable elements in every project (like angular directives)
Shadow DOM: Encapsulated DOM/ Style with composition (nothing get’s leaked)
HTML Imports: Declarative methods of importing HTML into HTML (mind = blown)
HTML Templates: Allows documents to contain inert chunks of DOM (No GET request)

PolymerJS: A Web Components Library

Polymer (created by Google), allows developers to use the powerful W3C spec today in all browsers, and it’s 100% production ready. If you’re one of the developers that sampled this technology in its early stages (.5 version), don’t let the beta release fool you. It’s improved dramatically and has moved past its 1.0 production version and onwards to its 2.0 “browser native” version (still in development).

Sweet, tell me more!

This library is unlike anything else on the market: The end goal is to disappear (makes for a pretty unique mission statement!). Just like the old HTML 5 Shiv required to support older browsers (IE6, IE7, IE8) in the past, the Polymer team created the Web Components Shiv (11kb) for Web Components support in all browsers.

On top of being a fully built web components library, the full version of Polymer provides many of the features we’ve grown to love from other frameworks out of the box (these are 100% optional). Since web components under the hood are written in web programming languages, there’s nothing stopping anyone from using these in their framework of choice (I.E.: angular-polymer or react-polymer)

Polymer Says: “There’s an element for that!”

The Polymer team has created 200+ custom elements to freely use that they continuously maintain via Github. If you can’t find an element there, you’re sure to find what you’re looking for on webcomponents.org (639 custom elements at the time of writing), or Github (5000+ custom elements?), or you could always just create one yourself!

The Future (now): Progressive Web Apps

From the emerging web technologies mentioned above + technologies listed below, a new breed of web app is being born w/ the title “Progressive Web Apps” (PWA’s for short). These PWA’s blur the line between “Native” & “Web” and bring the 2 worlds closer together than ever!

PWA you say?

Progressive: Works for every user, regardless of browser choice
Responsive: Works for every device, regardless of size: desktop, mobile, tablet
Offline Enabled: Enhanced with the Service Worker API to work offline
App-like: Native feel with smooth 60/FPS animations + Single Page navigation
Fresh: Always up-to-date from the Service Worker API’s update process
Safe & Secure: Served over HTTPS w/ options for HTTP 2
Discoverable: Identifiable as an “application” from the manifest
Re-engageable: Re-engage easily with the Push Notifications API
Installable: Bypass the app store and install directly from URL
Fullscreen: Full Screen web app experience like native apps
Linkable: Share via URL, does not require complex installation.

Who’s using Polymer & PWA’s in production?

The biggest announcement would be the full re-design of YouTube and Twitter. If that doesn’t get you excited, here’s the incomplete BIG LIST.

Noteworthy “PWA” Demos

These Progressive Web Applications in the wild show the true power of these new technologies. (best experience on mobile)

You can see tons more examples on OutWebIO or PWA Rocks!

https://cheese.polymer-project.org … https://news.polymer-project.org/list/top_stories

https://polymon.polymer-project.org … https://paperplanes.world … https://meatscope.camera

Case Study: My First PWA

I started learning web components in 2016 and shortly after had my first real go at creating a progressive web app.

Stats:

Website: SFI (sulphurfuelinjection.com)
Code Repo: Github
Technology: Polymer v1.4
Hosting: Firebase
Testing: Travis CI

Features:

Mobile/ Tablet/ Desktop friendly (</iron-flex-layout> custom elements)
Works offline (service worker api @300 millisecond load time)
Product Catalog (</google-sheets-cms> custom element)
Parallax Scrolling (</app-box> custom element)
Single Page Application (App Shell + </app-route> and </app-location> custom elements)
Google Maps integration (</google-map> custom element)
Installable on homescreen (manifest.json file)
Search Engine Optimized w/ friendly URL slugs
Open Graph “OG” for social platforms
Google Analytics

Final Thoughts

By now you’re probably aware that Polymer’s Web Component “library // framework // standard” is my favorite choice in the world of development. That is, until we have the freedom to use Web Components in their native form. The world is changing for the better and we’re sitting on the verge of a big shift for web enthusiasts from all corners… It’s up to us to push it forward and “hashtag” #usetheplatform !

Want to learn more?

If you or your team want to learn more about Web Components and all of it’s greatness, have a look at my “Polymer Learning” Trello Board where I’ve handpicked the best of the best videos, tutorials, and live demo examples to get you going.

Happy coding!