ChicagoJS's JSCAMP 2019 Keynote - Inclusive Architecture - Building Sustainable Dev Teams with the PAMstack

1. HOW TO BUILD
SUSTAINABLE DEV TEAMS
INCLUSIVE ARCHITECTURE

2. WHAT IS THE PAMSTACK?
PROCESS MENTORSHIPABSTRACTIONS

3. INCLUSIVE
ARCHITECTURE
ENABLES
● Less project maintenance
● Less stress
● Cooperative teams
● Decrease project costs
● Greater diversity

4. TRACY LEE
@ladyleet
Lead, This Dot Labs, JS consulting (Angular, React, Vue, Node, Polymer)
RxJS Core Team
Google Developer Expert, Angular
Microsoft MVP
Community Rel, Node.js @ OpenJS Foundation
Women Techmakers, GDG Silicon Valley & Triangle
Modern Web Podcast

5. WHY AREN’T JUNIORS
SUCCESSFUL ON OUR
TEAMS?

6. People believe that the reason
juniors don’t succeed is due to a
deficiency of the juniors.
They don’t realize it may be a fault
of the the teams.

7. How non-inclusive projects hurt juniors:
● Poor onboarding documentation
● Rely on individual excellence
● Unnecessarily complex codebase
● No review or mentorship

8. How non-inclusivity actually hurts everyone
● Harder to onboard and hire
● “Hit by a bus” fears
● Productivity delays
● Lack of advancement & stagnant careers

9. Individuals succeed and are enabled by teamwork and collaboration
Decrease unnecessary complexity and focus on important features
More innovation, more excitement, more learning
A wider and more diverse set of engineers and skills on your team
THE INCLUSIVE VISION

10. WHAT IS THE PAMSTACK?
PROCESS MENTORSHIPABSTRACTIONS

11. WHAT IS THE PAMSTACK?
PROCESS MENTORSHIPABSTRACTIONS

12. Process doesn’t have to be...

13. “Processes are usually ad hoc and chaotic.
The organization usually does not provide a
stable environment to support processes...”

14. “... Success in these organizations depends
on the competence and heroics of the
people in the organization and not on the
use of proven processes...”

15. “...These organizations are characterized by
a tendency to overcommit, abandon their
processes in a time of crisis, and be unable
to repeat their successes.”

16. ● Clear expectations
● Greater team engagement and cooperation
● No single-points-of-failure
● Less stress during the crazy
● Reduced conflicts and fewer power struggles
THE BENEFITS OF
PROCESS DONE RIGHT

17. ● What needs to be done?
● Who will do those things?
● How should it be done?
● When should it be done?
HOW TO CREATE PLANS

18. The purpose of code peer review is to ensure
that changes to source code Verification Items
are correct, appropriate and follow style
guidelines.
The goal of the code peer review process is to
discover and correct defects in code before they
can be observed by testers or customers.
CODE PEER REVIEW
Once all Peer Reviewers have
completed the review, the author
responds to comments and
corrects defects.
If there is a disagreement about how
to resolve an issue, the parties
involved should work together to
reach compromise. If an agreement
is not reached, the Development
Manager will arbitrate the dispute.
If a review defect cannot be resolved in the
scope of the peer review, it will be marked
as Track Externally and a defect will be
created in the Quality Center for the issue
and the defect number is added on the
peer review for traceability.

19. The person who makes the initial changes to the code, makes the review in
CodeCollaborator and revises the Verification Items based on the results of the peer
review.
Responsible for reviewing Verification Items. Can be any developer except the
author. At least one Peer Reviewer is required.
Responsible for reviewing code. Can be any Project 4 team member. Unlike Peer
Reviewers, they are not required to approve a review before it concludes. Having an
observer is not required either.
They take the role of Authors, Peer Reviewers or Observers.
AUTHOR
PEER REVIEWERS
OBSERVERS
DEVELOPERS
ROLES AND RESPONSIBILITIES

20. ● Minimize errors
● Teach new team members
● Reduce cognitive load
CREATE CHECKLISTS

21. TYPES OF REVIEWS
● Meeting Notes
● Designs
● Requirements
● Tests
● Code
● Plans
● Email to Clients

22. WHAT IS THE PAMSTACK?
PROCESS MENTORSHIPABSTRACTIONS

23. WHAT IS THE PAMSTACK?
PROCESS MENTORSHIPABSTRACTIONS

24. WEB DEVELOPMENT IS HARD
Performance
Security
Accessibility
Responsive Design
Progressive Enhancement
Browser Compatibility
Progressive Web Apps

25. FRAMEWORKS CAN HELP!
THEY MAKE IT EASY TO DO THE RIGHT THING

26. LET A FRAMEWORK
DEAL WITH BASIC
PERFORMANCE & SCALABILITY

27. Tools
● Angular CLI
● Angular Console
● Nx
● Prettier
● Great docs
Architecture & Code
● Component based
● Code reusability
● Libraries
● TypeScript
● Angular Material
& the community!

28. ● Goal is to isolate the construction of the interface from the
business logic and the complicated tech integrations
● This could be done by separating the application into layers
● The senior engineers can implement the most critical sections
and provide hooks for juniors to wire the interface together
ARCHITECTURE

29. ● Strongly typed methods, variables, services
● Easier to understand functionality
● Stricter rules come with less bugs and growing need to
understand the purpose of each method
● Know what to expect and plan accordingly
● Better error handling, spotting the root of the problem
TYPESCRIPT

30. QUICK START DEVELOPMENT -
CLIS FTW!

31. ● Scaffolding a new project
● Zero-config environment
● Smart defaults
● Out of the box performance using
automatic differential serving, lazy
loading, tree shaking, AoT
compilation
● Actively maintained and kept
up-to-date with core libraries
CLIS FTW!
● Reduce the risk of defects due to
out-of-date or misconfigured
technologies
● Easy migration between major
versions of libraries
● Documentation readily available
● Low risk - ejecting always a
possibility

32. FRAMEWORK GUIS

33. STATE MANAGEMENT

34. STATE MANAGEMENT

35. STATE MACHINES

37. DESIGN AND USER EXPERIENCE

38. ● Shared visual language for your team
● Focus and constrain the set of options when building interfaces
● Contain:
○ Design purpose and guidelines
○ Designer resources (ex: Sketch files)
○ Content guidelines
○ Patterns
○ CSS Classes
DESIGN SYSTEMS

39. ● Set of basic reusable components
● Implement the requirements of a design system
● Help tackle accessibility, responsiveness, etc.
● API is usually more complete and thoughtful
COMPONENT LIBRARIES

40. WHAT IS THE PAMSTACK?
PROCESS MENTORSHIPABSTRACTIONS

41. WHAT IS THE PAMSTACK?
PROCESS MENTORSHIPABSTRACTIONS

43. HIRING IS EXPENSIVE FOR YOUR TEAM -
KEEP YOUR PEOPLE

44. ● Accelerates learning & growth
● Increases confidence
● Decreases fear of contribution/collaboration/idea sharing
● Increases communication skills
● Mentees feel more invested-in and valued
● Improves upward mobility (5x more likely to be promoted)
● Mentees become mentors and pass all these benefits on
Eric Elliott https://medium.com/javascript-scene/struggling-to-find-great-senior-javascript-developers-mentorship-is-the-answer-d352ea3574eb
WHAT’S IN IT FOR MENTEES

45. ● Great perk for recruiting
● Increases developer productivity & retention (~70% more likely)
● Reduces knowledge silos
● Improves the bus factor — reduces succession risks
● Creates a more positive, helpful, collaborative team culture
● Increases loyalty
● Increases employee engagement and motivation
● Improves leader identification and promotion pipeline — mentors
are 6 times more likely to be promoted (Sun Microsystems)
WHAT’S IN IT FOR OTHERS
Eric Elliott https://medium.com/javascript-scene/struggling-to-find-great-senior-javascript-developers-mentorship-is-the-answer-d352ea3574eb

46. ● Fostering a culture of teaching and sharing
● Formal 1:1 Sessions
● Code Reviews
● Pair Programming
● “Tech Talks”
● Chat Channels
SHIFTING THE ROLE
OF THE SENIOR DEV

47. WHAT IS THE PAMSTACK?
PROCESS MENTORSHIPABSTRACTIONS

48. HOW JUNIORS CAN HELP THEIR
TEAM USE THE PAMSTACK
● Bootstrap process by writing things down, sharing with the team
● Mentor and help your peers who are being onboarded
● Ask questions about the project, code, or process. Document the
answers and share with others.
● Do and ask for code reviews proactively as a way to understand,
get feedback, and create a culture of mentorship.
● If team loves your process or ideas, ask for it to be formally
incorporated into process

49. Upcoming Events
Angular Online - 1st Thursdays
React Online - 2nd Thursdays
Vue Online - 3rd Thursdays
Cloud Functions & Firebase Training - October 8

50. If you’re interested in
JavaScript Consulting
let me know!
Also, we’re hiring!

51. hi@thisdot.co
THANK YOU!