Tips for Portable Patterns
Published on for Cloud Four
One of the promises of design systems is portability. Every new project should benefit from the patterns and principles of the previous… why reinvent the wheel each time? But accomplishing that can be tricky when it comes to HTML, CSS and JavaScript patterns.
Teams that maintain a consistent technical stack have it easier in this regard. Maybe they only develop a single product, or maybe they mandate usage of a framework they’ve invested in. Whatever the reason, their strategy seems clear: Write HTML, CSS and JavaScript for patterns as you would any project code.
But many organizations have a much more varied ecosystem. Maybe their main product was built a few years ago with Ruby on Rails and jQuery, but there’s a new skunkworks project they’re testing that’s a PWA built with isomorphic JavaScript. There’s also the static marketing site, the WordPress blog, the help center, and so on, and so on…
As technology continues to change and we uncover new user needs, it’s no wonder that our platforms and techniques often evolve from project to project. In lieu of psychic ability or a crystal ball, what strategies can we adopt to improve the portability of our front-end patterns between seemingly disparate platforms?