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?
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
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.
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!