Up to Date: Maintaining and Improving Shopify Themes

A presentation at Shopify Pursuit in November 2018 in Melbourne VIC, Australia by Anne Thomas

Slide 1

Slide 1

UP TO DATE MAINTAINING AND IMPROVING SHOPIFY THEMES

Slide 2

Slide 2

Long live your code. Be proactive instead of reactive. !2

Slide 3

Slide 3

Past, present and future. Meet your codebase ghosts… !3

Slide 4

Slide 4

THE PAST

Slide 5

Slide 5

Technical debt is unavoidable. Does your team pay off their credit card every month? !5

Slide 6

Slide 6

It’s all around us... ● Using third-party libraries that are now defunct ● Custom undocumented code added to a theme by an expert ● Themes that haven’t been updated in years ● Inherited code from other agencies/developers ● A “temporary” fix that was added months ago

Slide 7

Slide 7

Legacy code is everywhere. How much are you living with? !7

Slide 8

Slide 8

Reaching the tipping point. ● Developers are scared to change anything ● Worried about the “Butterfly Effect” ● No one want to work on that store anymore ● Theme can’t be updated - bugs emerge ● App conflicts (with other apps and themes)

Slide 9

Slide 9

I see dead parentheses. Identifying your issues. !9

Slide 10

Slide 10

Take stock of what you’ve got. ● Is it currently broken? Like really broken? ● When is the last time the code was touched? ● Does anyone understand what the code does? ● Are you using the latest Shopify features? ● What kind of improvements can be made?

Slide 11

Slide 11

Be kind. Attitude is everything. !11

Slide 12

Slide 12

Focus on solutions, not blame. ● You don’t know what stresses previous developers were under/ time commitments, etc ● Software is built by humans and humans are NOT infallible ● Flip side is to not put code on a pedestal

Slide 13

Slide 13

Why does it happen? Identifying the path to technical debt. !13

Slide 14

Slide 14

Reckless Deliberate Inadvertent Prudent No one has time to review it, so we’ll just commit to master. We know this bug exists, but we have to focus on this feature instead. What are JavaScript design patterns? In hindsight, it’s clear that we should have taken this approach instead. – Martin Fowler

Slide 15

Slide 15

THE PRESENT

Slide 16

Slide 16

Getting buy-in. Is it worth the trouble to update or improve? !16

Slide 17

Slide 17

What’s the return on investment here? ● Merchants may not recognize the importance of maintenance ● Avoid enabling the “Set it and forget it” attitude ● Sell them on the flexibility of new features and performance improvements ● Stress the importance of keeping things up to date (browsers update all the time)

Slide 18

Slide 18

Help your team. Reduce technical debt where you can. !18

Slide 19

Slide 19

Document the heck out of everything. ● Documentation needs to be just good enough ● Document all the things - project with compilers, development process, etc ● Use comments in your code - eg. using liquid to create arrays ● Not fun, but super helpful when someone new joins the team

Slide 20

Slide 20

Tooling. ● Linters, compilers, task runners ● Be wary because these can come with their own technical debt, but the pros generally outweigh the cons ● Linters can be tough with liquid - separate files

Slide 21

Slide 21

Code styleguides. ● If you can’t implement a linter, this is the next best thing in the short term ● Be picky in pull requests (but nice!) ● Have one for CSS/JavaScript/HTML/Liquid, etc

Slide 22

Slide 22

Establish some standards. ● Introduce some repetition and consistency in your code so that it is easier to ramp up ● BEM, SMACSS, OOCSS ● Explore design systems (eg. Polaris or custom)

Slide 23

Slide 23

Know what has changed. ● Always use some form of version control ● Make pull requests small and associate branch with issue number ● Take your time with reviews and set aside time/ energy ● Establish a solid git branching model (eg. git-flow)

Slide 24

Slide 24

Keep your merchants in the loop. ● Changelogs are easier for team to review than commit messages - also a marketing opportunity ● Let your clients know when updates have been made - stress importance of updating ● Listen to suggestions for features/improvements

Slide 25

Slide 25

Happy devs, happy life. ● Nothing is too precious to be reworked and improved - encourage time to refactor ● Provide opportunities to work on new features ● Get team to take personal ownership of code that they are committing ● Don’t get too fancy, just solid readable code

Slide 26

Slide 26

Incremental changes. Small wins over time. !26

Slide 27

Slide 27

Things you can do tomorrow. ● Remove any old polyfills that you no longer need (check out caniuse.com for browser support) ● Use resource hints (preconnect, dns-prefetch) to perform DNS lookups in the background ● Minify your HTML using liquid ● Run axe on your site to check for accessibility issues and make a plan to update

Slide 28

Slide 28

THE FUTURE

Slide 29

Slide 29

Look ahead. Think about what your merchants are requesting. !29

Slide 30

Slide 30

Be kind to your future self. ● Be ready to support new features down the line ● Not all “features” are optional (eg. a11y) ● Browsers change rapidly and new APIs appear that you will want to use ● There is no “set it and forget it”

Slide 31

Slide 31

Keeping things fresh. What should you be aware of? !31

Slide 32

Slide 32

Font picker. (maybe not for custom agency sites) !32

Slide 33

Slide 33

Dynamic Payment Buttons. SUPER popular. !33

Slide 34

Slide 34

Sections and blocks. Just scratching the surface of how powerful these can be. !34

Slide 35

Slide 35

Accessibility. Mandatory updates. !35

Slide 36

Slide 36

Internationalization. All around the world. !36

Slide 37

Slide 37

Stay up to date. Bringing it all together. !37

Slide 38

Slide 38

No code left behind. ● If you are using a third-party theme, always aim to keep it up to date ● Sign up for mailing lists/ read development blogs ● Get involved with the Shopify community ● Attend conferences (good job!) ● Build time for maintenance into your schedule

Slide 39

Slide 39

Maintenance is often overlooked ● It’s not hip, cool or sexy ● BUT being able to properly understand (and respect) legacy code is a skill ● It is critical and important

Slide 40

Slide 40

Tenacity and optimism ● Don’t become complacent with the work you are doing ● Know your contribution affects the long-term prospects of the merchant and their business ● You’ve got this!

Slide 41

Slide 41

Thank you! @AlfalfaAnne @outofthesandbox