We've all heard of Spaghetti Code. I'd like to discuss a less frequently used term: Pizza Code. Often thought of as an anti-pattern, I would like to present an argument for why pizza is actually the best analogy for good web development.
Parts of a Pizza:
I have a nickname for any marinara based pasta that gets made in my house: "Essentially Pizza". They're made of all the same things, and combine all the same flavors, but pizza takes more time and effort. Keep in mind that I'm talking about using dehydrated, store bought pasta here. Making your own noodles from scratch does takes time, but you'll have to make dough to make noodles anyway so you might as well just make pizza because the end result will be more satisfying.
1) The Dough
The dough represents the Browser. The platform on which your web app runs. There are a few different ways to make dough (Thick, Thin, Gluten Free — Blink, Gecko, WebKit, etc). Each developer has a preference as to which type of dough they prefer but they're all made from the same basic ingredients (the W3C Standards) and all provide essentially the same base on which to build your pizza (aka your app).
2) The Sauce
The sauce would be your CSS. But you can't even see the sauce! you point out. Correct, but the true style of a food is in it's taste. Each bite is influenced by the flavor of your sauce. You can make a pizza without sauce, it would be pretty bland but still edible. You can serve a web page without CSS too. If it's well built, it will still get it's point across. If not, well... you probably just tried to pass off spaghetti as pizza.
You can put any sauce you like on a pizza too. There's no real wrong decision here. However, you still can make a bad sauce. Too much salt (or not enough), overpowering herbs, too acidic, etc. You can use a canned sauce (bootstrap, tailwind, etc) but making your own from fresh ingredients adds a richness that you'll never get with an off-the-shelf solution. A well seasoned and balanced flavor can only be achieved through practice and a trained palette.
3) The Toppings
Every pizza needs toppings just as every app needs content. Each type of topping has it's own unique characteristics and the way they are prepared can vary. What each one brings to the experience can be wildly different. Onion and mushrooms are about as similar as <h1> and <img>. There are a few typical ingredients you see used frequently but pretty much anything goes in some combination or another. However, you can definitely overload a pizza with too many toppings or create an unspeakable combo that nobody would ever want to consume.
HTML5 is kind of the same way. It comes with a set of tried and tested elements that generally get used in predictable ways but the spec also allows for developers to create their own Custom Elements which are prepared ahead of time and used as desired. Not all Widgets are created equal though. Just as an experienced chef will prepare custom toppings in a delicious and beautiful way, a developer needs the right tools and experience to produce elegant, efficient Web Components. The preparation of the components should be aside from the main app and their use should be as simple as choosing between green bell peppers or feta-stuffed serrano just to spice things up a bit.
Be wary of where you source your toppings though. They can make or break your pizza. Growing your own vegetables from seeds may not be the right choice for every one but is certainly a valid and rewarding option. For most others, buying fresh from a farmers market would be the next best alternative. Best to avoid heavily processed or frozen options though.
The same principle applies to Web Components. Building standards-compliant, portable components from scratch has so far been the domain of evangelical developers such as myself and, of course, the brilliant minds behind the spec. But that's what makes this technique so powerful. All you need to use a Web Component is basic knowledge of HTML. All the behavior is baked right in. They work perfectly in most templating engines and you can style them with standard CSS. In most cases, well-documented pre-made solutions can be found online and either used as they come or extended with whatever custom functionality you need.
Watch out for "component-based" libraries/frameworks sporting catchy slogans on their plastic packaging or you might end up picking your peppers out of a bag of dehydrated soup stock. Stick with components that adhere to the standards and you'll be doing yourself a favor.
4) The Cheese
A pizza without cheese is not a pizza. Period. Without it, you've made bruschetta. And without the Event Loop you've made a static document, not an app. We need the cheese to glue all of our toppings together and we need the Event Loop to tie our elements into a cohesive interface. The cheese is reliable. It doesn't care what toppings are attached to it. You can throw whatever fancy cheese you want on your pizza to suit your taste but adding a UI Framework to your project ultimately does nothing that trusty ole mozzarella can't do without the extra fuss. If you've built your app right, each Web Component can co-exist in the Event Loop and not interfere with each other but act in concert to make every bite of content a satisfying experience.
5) The Delivery
A key part of pizza is the baking process. Cook it too fast and it will be an underdone soggy mess. Cook it too long and people get impatient and complain that final product tastes burnt. Cooking times vary by oven though and your choice of both front and back end architecture will heavily influence your app's ability to respond to requests and render content in a timely fashion.
When ordering a pizza you expect to wait. The anticipation builds as you smell and see the reveal. This is all part of the experience. In a web app we have the First Contentful Paint and Time to interactive metrics. Ideally, these should be as fast as possible, but as long as the user experience is smooth and satisfying, impatience and annoyance can be mitigated. Prioritizing Above The Fold content and avoiding Layout Shifts allows your users to be drawn into the experience. Strategic use of caching and preloading can make a Multi Page App feel just as responsive as a Single Page App.
Loading an empty app skeleton and populating it with dozens of chunky render-blocking components each with at least one HTTP request and it's own spinning indicator is equally as bad as leaving a user sitting on a blank screen while a monolithic app bundle is downloaded and executed. Don't leave your users with a bad taste in their mouth before they've even taken a bite by being mindful of the Core Web Vitals.
6) The Slices
It can be hard to eat a whole pizza without slicing it but that really depends on the size of the pizza. An 8 inch personal pizza would be no problem but a 24 inch extra large party pizza would be significantly harder. Pizza (and by extension a well developed web app) lends itself perfectly to being sliced into any number of portions best suiting your target audience and content distribution.
This is where pizza trumps pasta. The pasta makers all want you to think that their shape of noodle is superior. And maybe in certain highly specific situations they're right but all they've really done is squeeze your perfectly good pizza dough through a noodle factory exposing more surface area for you to hope that your sauce clings to.
With spaghetti, fettuccine, jQuery, WordPress, etc, you get a tangled framework to slop your sauce/toppings mixture onto. Most of it ends up around the edges of the plate and once it's all consumed you're left with a ugly pile of plain noodles. With something more bite sized, like shells, macaroni, ReactJS, etc, you get a homogenized scoop of pasta but every bite feels generic and mushy. A golden baked slice of pizza will always have more texture and stability than any pasta could ever hope for. You can also showcase individual toppings making your content the star of the show, not just background flavor.
Conclusion
There are as many ways to make pizza as their are Web Development Frameworks. It all boils (bakes?) down to whether you want to provide your audience with a hot-and-ready to stuff into their faces as they drive out of the parking lot, a gourmet dining experience, or something in between. Chew on that when you're writing the recipe for your next app or leave the cooking to the chefs.
Top comments (0)