Juan Herrera
Google Developer Expert in Angular & Web Technologies
Architectures
Scalable
@jdjuan + @caroso1222
+2100
Google Developer Expert
Google Developer Expert
Ask me how to become a:
⭐️ Google Developer Expert ⭐️
@jdjuan
@luchillo17
@jdjuan
Framework
@jdjuan
@jdjuan
Ecosystem
You might not need anything of what I am about to talk about and you might as well define your very own standards
@jdjuan
Problem
@jdjuan
@jdjuan
INTERVIEW
@jdjuan
@jdjuan
How do I define a scalable
architecture?
@jdjuan
How do I make my architecture scalable?
@jdjuan
"The ability of the system to undergo changes with a degree of ease"
How do I make my architecture scalable?
@jdjuan
- Folder Structure
- Modularization
- Code Patterns
- State Management
How do I make my architecture scalable?
@jdjuan
@jdjuan
How do I keep my folder structure scalable?
@jdjuan
LIFT
Locate
Identify
Flat
Try DRY
How do I keep my folder structure scalable?
@jdjuan
LOCATE
How do I keep my folder structure scalable?
How quickly can you locate files in a project?
@jdjuan
@jdjuan
@jdjuan
IDENTIFY
How do I keep my folder structure scalable?
How quickly can you identify a file's purpose?
@jdjuan
How do I keep my folder structure scalable?
@jdjuan
FLAT
How do I keep my folder structure scalable?
How flat is your folder tree?
@jdjuan
How do I keep my folder structure scalable?
@jdjuan
How do I keep my folder structure scalable?
@jdjuan
How do I keep my folder structure scalable?
@jdjuan
How do I keep my folder structure scalable?
@jdjuan
@jdjuan
@jdjuan
@jdjuan
@jdjuan
How do I keep my folder structure scalable?
7 files per folder
@jdjuan
TRY DRY
How do I keep my folder structure scalable?
Don't Repeat Yourself
@jdjuan
How do I keep my folder structure scalable?
@jdjuan
How do I modularize my code?
@jdjuan
Modules
@jdjuan
Special
Modules
@jdjuan
Singleton
Shared
@jdjuan
MaterialModule
The Abstraction Analogy
"An artifact belongs to the same folder level where it is required"
@jdjuan
@jdjuan
The Abstraction Analogy
If a variable in only used within the scope of a function
it belongs to the function
@jdjuan
The Abstraction Analogy
If the variable is used by several functions
it belongs to the class
@jdjuan
The Abstraction Analogy
If the variable is used by several components
it belongs to a service
@jdjuan
The Abstraction Analogy
If the service is used by several modules
it belongs to a shared module
@jdjuan
The Abstraction Analogy
If the service is used by several applications
it belongs to its own repository
The Abstraction Analogy
"An artifact belongs to the same folder level where it is required"
@jdjuan
How to deal with team size growth?
How to deal with team size growth?
@jdjuan
What standard should I follow for naming?
@jdjuan
What standard should I follow for naming?
Be clear
Don't add meta data
Consider the context
@jdjuan
What standard should I follow for naming?
Name a variable that store the maximum inactivity time allowed for a transaction in an online store
@jdjuan
What standard should I follow for naming?
transactionTime
transactionInactivityTimeValue
transactionInactivityTimePurchaseProduct
@jdjuan
What standard should I follow for naming?
transactionMaxInactivityTime
@jdjuan
Name 5 code patterns for scalable architectures
Camel case for variables and functions
Title case for classes and interfaces
Dash case for files and folders
@jdjuan
Name 5 code patterns for scalable architectures
camelCaseForVariablesAndFunctions
dash-case-for-files-and-folders
TitleCaseForClassesAndInterfaces
@jdjuan
Name 5 code patterns for scalable architectures
@jdjuan
Name 5 code patterns for scalable architectures
tinyurl.com/my-vscode
@jdjuan
How would you do state management?
@jdjuan
How would you do state management?
@jdjuan
How would you do state management?
@jdjuan
YOU ARE HIRED
@jdjuan
THANK YOU!
@jdjuan
Scalable Angular Architecture
By Juan Herrera
