Getting your hands dirty and feet wet with Open Web Component Recommendations...sort of.

This a cross-post of a Feb 26, 2019 article from Medium that takes advantage of my recent decision to use Grammarly in my writing (so, small edits have been made here and there), thanks for looking again if you saw it there 🙇🏽‍♂️ and if this is your first time reading, welcome!

Welcome to “Not Another To-Do App”, an overly lengthy review of making one of the smallest applications every developer ends up writing at some point or another. If you’re here to read up on a specific technique to writing apps or have made your way from a previous installation, then likely you are in the right place and should read on! If not, it’s possible you want to start from the beginning so you too can know all of our characters’ backstories...

If you’ve made it this far, why quit now?

Getting Started

With all of these lofty goals I’ve set out for myself, where do I start?

The blank page often being the scariest part of any creative endeavor, the best way to get through it is to skip it!

There is a growing number of tools that will get you started (before you’ve started) on a web component-based application. The OG tool, one that I’ve used a lot in the past, is the Polymer CLI. A single polymer init can often give you the sense that you’ve skipped some 50% of your work. However, last year's move by Polymer 3 to ES Modules and the NPM ecosystem has given developers more options in this area than ever before. As a sort of spiritual successor to polymer init, the Polymer Team has more recently announced the PWA Starter Kit, which beyond getting you started with a web component-based application also provides some great baseline template options along with suggestions on tying Redux into your project or writing it in TypeScript. If you’re a fan of Redux based state management or interested in getting acquainted with it for the first time, this is a great project for learning how to tie a number of powerful javascript tools together in a way that might just make it the basis for your next (to do) app. However, in order to cross off one of my research to-dos, for my new To-Do app I’ll be checking out the intriguing new community initiative called Open Web Components. Their philosophy starts with a strong:

The goal of Open Web Components is to empower developers with powerful and battle-tested tools for creating and sharing open source web components.

That seems like a pretty good set of tools to have in your bag, right? One that I highly recommend is their list of example uses of LitElement, which is an amazing resource when first getting into developing web components with this highly promising base class, as well as on days when your memory just won’t serve to lead you to the design pattern you’re looking to apply. More applicable to my current goal of building a To-Do application is a set of generators that get you started fast or accelerate an already started web component development process in all the best ways. Built from a number of their sub-generators, one of the newest open-wc offerings is a starter app. By default, it gets an expansive webpack config structured both for development and building for production, modern linting tools powered by Prettier and ES Lint, and a pre-structured Karma testing harness. Before I’ve even started I’ve already started to check off two of my targets for this project: web component-based UI and unit testing. The linting just comes for free (and is strict in all the right places), which is even better!

What I did...

git clone https://github.com/open-wc/open-wc-starter-app.git
cd open-wc-starter-app

yarn install
yarn start

What you can do (because it’s been a couple of weeks, which is like a whole year in frontend development, so things got easier!)...

$ npm init open-wc
npx: installed 14 in 4.378s
What would you like to do today?
    > Scaffold a new project
What would you like to scaffold?
Note: Content will be written in a new folder.
    > Starter App
Give it a tag name (min two words separated by dashes) to-do-app

I’m lazy, as you’ll see more of later, so I’d highly suggest the second approach as it gets your new directory, starter app, and npm install handled all in one command. It even reminds you at the end what’s next to get the generated code running:

You are all set up now!
All you need to do is run:

cd to-do-app
npm run start

But, then what?

Disclaimer: beyond this point be some code. That code may not always be exactly what I ended up within my application, for more reasons than are worth getting into at this point. However, that code is conceptually representative of the various techniques that are discussed throughout this series and the part(s) of the development process in which I ran into the need/desire to apply those techniques. That means code in one section might not work or play well with code in another section. In that knowledge, do not despair, for despair is only for those who see the end beyond all doubt. I’ve got the full project on GitHub if you want to read along, clone, or customize to your heart's desire. Live code is also of Netlify, for those who like watching the movie first.

The Short Game

As voted on by a plurality of people with opinions on such topics that are both forced to see my tweets in their Twitter feed and had a free minute this last week, a 9000+ word article is a no, no.

So, it is with the deepest reverence to you my dear reader that I’ve broken the upcoming conversations into a measly ten sections. Congratulations, you’re nearing the end of the first! If you’ve enjoyed yourself so far, or are one of those people that give a new sitcom a couple of episodes to hit its stride, here’s a list of the others for you to put on your Netflix queue:

• Not Another To-Do App
• Getting Started (you are here)
• Test Early, Test Often
• Measure Twice, Lint Once
• Make it a Component
• Make it a Reusable Part
• Does Your Component Really Need to Know That?
• Separate Things Early, Often, and Only as Needed
• Some Abstractions Aren’t (Just) For Your App (The abstraction of this series into separate articles is for you reader, I hope you’re really enjoying it.)
• Reusable and Scaleable Data Management/And, in the end...
• See the app in action

Special thanks to the team at Open Web Components for the great set of tools and recommendations that they’ve been putting together to support the ever-growing community of engineers and companies bringing high-quality web components into the industry. Visit them on GitHub and create an issue, submit a PR, or fork a repo to get in on the action!