Ahmad Nassri Fractional CTO, Startup Advisor Modern Patterns in Modular Software Design

Hello! I am Ahmad Nassri Syrian-Canadian, Entrepreneur, Developer, Open Source Advocate & Dog lover! Fractional CTO, Founder of Tech Masters Community, Advocate of all things Open Source, Startup Advisor, Entrepreneur. Previously: CTO @ npm, Inc. Chief Architect @ TELUS, VP Engineering @ Kong

What is this ? It’s my name, in Arabic “Ahmad” Written in 12th century Square Kufic script. Square Kufic was originally created in architecture with bricks and tiles functioning as pixels The color is inspired by the coat of arms of the “Nasrid dynasty of Granada”

Modern Patterns in Modular Software Design 1. What does “modular” mean? 2. Why does this matter? 3. How modern patterns work?

1. What does “modular” mean?

1978: The Unix philosophy 1. Make each program do one thing well. To do a new job, build afresh rather than complicate old programs by adding new features. 2. Expect the output of every program to become the input to another, as yet unknown, program. Don’t clutter output with extraneous information. Avoid stringently columnar or binary input formats. Don’t insist on interactive input. 3. Design and build software, even operating systems, to be tried early, ideally within weeks. Don’t hesitate to throw away the clumsy parts and rebuild them. 4. Use tools in preference to unskilled help to lighten a programming task, even if you have to detour to build the tools and expect to throw some of them out after you’ve finished using them.

The Unix philosophy emphasizes building simple, short, clear, modular, and extensible code that can be easily maintained and repurposed by developers other than its creators.

What is “not modular” Modular != Packages But we’ll talk about the relationship in a bit. Modular Architecture != Microservices The methods in which you choose to deploy and manage your software do not have to be defined by how you write and manage your code. (Modular Monoliths are a thing!) Modular Architecture != Modular Software Don’t shift the burden of managing all the software components to your users (or your user’s clients) Be Modular like Unix != Become a Unix/Linux guru! Modular patterns can apply to all and any development environment, in-fact many of the patterns I’m identifying evolved through the web platform.

2. Why does this matter?

Here’s the secret about software development ...

Building software is about the people who code and the relationships between them as defined through process and architecture paradigms! dependencies

● Orgs are a mess of dependencies across humans ● Do not design your software dependencies to follow your human ones! ● Software System must survive organizational change Your Org is a mess!

“Organizations which design systems are constrained to produce designs which are copies of the communication structures of these organizations.” — Conway's law Your Org is a mess!

Package management systems are designed to solve complex dependency management problems! Software Dependencies!

3. How does this work in a modern setting?

@LeaVerou https://twitter.com/LeaVerou/status/1306001020636540934 Build for Sustainability The longer you have to maintain a system, the more you have to consider: ● Future Maintainers (self or others) ● Knowledge Transfer, Handover ● Security & Updates ● Testing & Readability ● Etc ...

2020: The Unix philosophy Principles 1. Each module should do one thing well. 2. The output of every module to become the input to another. 3. Throw away the clumsy parts and rebuild them. 4. Use tools to lighten a programming task. 5. Modules should be easily maintained and repurposed by developers other than its creators.

We modularized one part (front-end components) But what about the rest? A typical app example acme-app/ ├── index.js ├── package.json ├── components/ │ ├── user/ │ │ ├── profile.jsx │ │ └── list.jsx │ ├── billing/ │ │ ├── invoice.jsx │ │ └── history.jsx ├── pages/ │ ├── users/ │ │ ├── error.jsx │ │ └── index.jsx │ ├── billing/ │ │ ├── error.jsx │ │ └── index.jsx │ └── layout.pug ├── api/ │ ├── users.js │ └── billing.js └── tests/ ├── users/ │ ├── create.js │ └── delete.js └── billing/ ├── create.js └── delete.js

"Each module should do one thing well" "Throw away the clumsy parts and rebuild them" #1 apps as packages ● No more /app or /src directories ● Use package.json , composer.json , Gemfile , requirements.txt , etc … ● Describe your environment with with Dockerfile and docker-compose.yml ● README is (mainly) about Environment & Deployment ● Maybe an index.js

Things you can package: ● UI Components ● API Routes ● Data Models and Associated Mock Test Data ● And yes, you can keep all of those in a monorepo!

@acme/users@v1.0.0 ├── api.js ├── components/ │ ├── profile.jsx │ └── list.jsx ├── tests/ │ ├── create.js │ └── delete.js ├── db/ │ └── users.js └── pages/ └── users/ ├── error.jsx └── index.jsx @acme/app@v1.0.0 ├── index.js └── package.json @acme/billing@v1.0.0 ├── api.js ├── components/ │ ├── invoice.jsx │ └── history.jsx ├── tests/ │ ├── create.js │ └── delete.js ├── db/ │ ├── subscriptions.js │ └── transactions.js └── views/ ├── error.pug └── index.pug @acme/assets@v1.0.0 └── public/ ├── images/ ├── javascripts/ └── stylesheets/ └── style.css acme-app/ ├── index.js ├── package.json ├── components/ │ ├── user/ │ │ ├── profile.jsx │ │ └── list.jsx │ ├── billing/ │ │ ├── invoice.jsx │ │ └── history.jsx ├── pages/ │ ├── users/ │ │ ├── error.jsx │ │ └── index.jsx │ ├── billing/ │ │ ├── error.jsx │ │ └── index.jsx │ └── layout.pug ├── api/ │ ├── users.js │ └── billing.js └── tests/ ├── users/ │ ├── create.js │ └── delete.js └── billing/ ├── create.js └── delete.js

#2 Documentation! "Modules should be easily maintained and repurposed by developers other than its creators" ● Soon after it’s written (if not before) you lose track of what your code actually does! ● Things that are documentation: ○ Meeting minutes ○ Bug reports ○ User Stories ○ Pull Request comments ○ Package Versions! ● Things that are NOT Documentation: ○ Slack chats ○ Discussions / Decisions on video calls ○ Your code!

● Uncovered code = module without tests #3: 100% Test Coverage "Modules should be easily maintained and repurposed by developers other than its creators" ● Testable code == maintainable code ● Full coverage isn’t about writing code with more tests, it’s about writing code that is more testable! ● “Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. Code for readability.” — John Woods ● Forces you to create a better experience for the next person

#4: Automate all the things! "Use tools to lighten a programming task" ● Bots are here to help make your job easier (not take it away) ● Bots can: ○ Check for bugs ○ Open Pull Requests ○ Update Dependencies ○ Refactor your code ○ Merge Pull Requests ○ Thank each other for doing all the hard work! ○ … and more!

Use the tools luke!

Questions / Ideas / Feedback? New Blog Post: The New Normal - Scaling the challenges of a Modern CTO AhmadNassri.com/blog You can find me at: ● twitter.com/@AhmadNassri ● hello@AhmadNassri.com ● AhmadNassri.com Thank you!