It's time to be honest with ourselves and admit that we do not treat our frontend code the same way we treat our backend code. And it shows. But what's wrong with our frontend code, you ask? Well, not surprisingly, the same things that we usually recognize as Bad Things™ for backend: duplication, coupling, clutter, lack of unit tests, bad naming, etc. Let's take a closer look at some of these anti-patterns showing up in our frontend code and how we can avoid them.

1. THE SORRY
STATE OF
FRONTEND
CODE

2. DISCLAIMER
Frontend code written by
frontend developers is
fine, most of the time.
Frontend code written by
backend developers is
NOT fine, most of the
time.

4. SKIPPING
ALL THOSE
RULES
THREE SMALL TIPS TO HELP YOU DO
WHAT YOU LOVE EVERYDAY
Quick and dirty will do it.
We'll revisit it later when things aren't
so hectic.

5. THREE SMALL TIPS TO HELP YOU DO
WHAT YOU LOVE EVERYDAY
BUT WE
NEVER DO,
DO WE?

6. BOYSCOUT
RULE:
LEAVE THE
PLACE
CLEANER
THAN YOU
FOUND IT!

7. Inconsistent naming
Abbreviations
Unclear intent
Big pile of CSS
Commented code
Outdated comments
Etc.

19. LACK OF
S

20. HIGH
COUPLING

21. SINGLE
RESPONSIBILITY
PRINCIPLE

22. https://alistapart.com/article/writing-testable-javascript

23. 3RD
PARTY
DEPENDENCIES

26. GLOBAL NAMESPACE
POLLUTION

29. SIDE EFFECTS

31. https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/

33. THANK
YOU
Alin Pandichi
Software developer, trainer and coach at
Mozaic Works
@alinpandichi
alin.pandichi@mozaicworks.com