Web Components VS Frameworks
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.
- “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
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?
- YouTube Gaming
- Comcast (xfinity)
- Google I/O 2016
- Chrome Status
- ING (video)
- Google Translate
- Google Music
- Chrome Dev Editor
Noteworthy “PWA” Demos
These Progressive Web Applications in the wild show the true power of these new technologies. (best experience on mobile)
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.
- Website: SFI (sulphurfuelinjection.com)
- Code Repo: Github
- Technology: Polymer v1.4
- Hosting: Firebase
- Testing: Travis CI
- 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
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.