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.

2. THE SORRY
STATE OF
FRONTEND
CODE

3. 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.

5. 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.
@alinpandichi

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

7. SCOUT
RULE:
LEAVE THE
PLACE
CLEANER
THAN YOU
FOUND IT!

8. @alinpandichi

9. @alinpandichi

10. @alinpandichi

11. @alinpandichi

12. @alinpandichi

13. @alinpandichi

14. @alinpandichi

15. @alinpandichi

17. @alinpandichi

19. LACK OF
S

20. HIGH
COUPLING

21. SINGLE
RESPONSIBILITY
PRINCIPLE

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

23. 3RD
PARTY
DEPENDENCIES

24. @alinpandichi

26. GLOBAL NAMESPACE
POLLUTION @alinpandichi

28. @alinpandichi

29. SIDE EFFECTS
@alinpandichi

30. @alinpandichi

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

32. Apply scout rule
Split God files
Remove duplication
Identify UI patterns
Write tests!
Decouple code
Push out dependencies
Isolate and modularize
Avoid mutable state

33. @alinpandichi

34. THANK
YOU
Alin Pandichi
Software developer, trainer, facilitator
Mozaic Works
@alinpandichi
alin.pandichi@mozaicworks.com