Natalia Venditto| anfibiacreativa
Principal JavaScript DX Lead Microsoft Azure
GDE for Angular and Web Technologies (Web Performance)
@anfibiacreativa
@anfibiacreativa
KNOWLEDGE SILOS
SLOW TIME TO VALUE
TECHNICAL DEBT
INABILITY TO INNOVATE
INTERDEPENDENCIES
(RUNTIME) PERFORMANCE DEGRADATION
© Nathan Bodle | Unsplash.com
@anfibiacreativa
@anfibiacreativa
BUSINESS LOGIC (APP)
DATA LAYER
FRONTEND
© Antoine Pettiteville | Unsplash.com
SOLUTION
Can choose their stack, etc
Can be deployed and fails in isolation
Monolithic Backend
Monolithic Frontend
Monolithic Frontend
Micro-service
Micro-service
Micro-service
(service, technology, data perspective)
API Gateway
@anfibiacreativa
Pushing the monolith split envelope even further, to very lean experiences that fit within performance budgets.
Use-case(s)
Architecture
Decision
Architecture
Decision
Tech-stack
Definition
Tech-stack
Definition
Development
Cycle
Development
Cycle
Deployment
Options
Deployment
Options
SPEC
@anfibiacreativa
© Pickled Stardust | Unsplash.com
HOT TAKE
@anfibiacreativa
@anfibiacreativa
© charlesdeluvio | Unsplash.com
@anfibiacreativa
@anfibiacreativa
© Pickled Stardust | Unsplash.com
HOT TAKE
Homepage
Blogpage
© Jason Goodman| Unsplash.com
@anfibiacreativa
Horizontal
Vertical
PEOPLE
TECHNOLOGY
PROCESSES
Specialized team working on solving a concrete problem
Tech stack is chosen according to the team skills and the specific use-case
Processes are simplified to enable each team independently, based off of technology and requirements
Setup
Implement
Integrate
Build
Deploy
Publish
Design
(Spec)
For what?
Where in?
With what?
To what?
How?
Where
to?
For
whom?
That is where?
And browses how?
For what reason?
@anfibiacreativa
@anfibiacreativa
BUSINESS LOGIC
DATA ACCESS
FRONTEND
© Amirali Mirhashemian | Unsplash.com
DATA STORAGE
INFRASTRUCTURE
@anfibiacreativa
© William Daigneault | Unsplash.com
Architecture patterns
Data/API models
Infrastructure options
Full-stack apps patterns
Data/API models
Infrastructure options
@anfibiacreativa
© William Daigneault | Unsplash.com
@anfibiacreativa
© Pickled Stardust | Unsplash.com
HOT TAKE
For what?
Where in?
For
whom?
Business Unit
Dev Team
End-user
© Hervet | Unsplash.com
@anfibiacreativa
© Clay Banks | Unsplash.com
@anfibiacreativa
© Hal Gaywood | Unsplash.com
@anfibiacreativa
© NASA | Unsplash.com
@anfibiacreativa
https://hbr.org/2016/11/why-diverse-teams-are-smarter#:~:text=The%20researchers%20found%20that%20individuals,published%20in%20the%20journal%20PNAS.
@anfibiacreativa
© Pickled Stardust | Unsplash.com
HOT TAKE
© Martin Sanchez | Unsplash.com
@anfibiacreativa
@anfibiacreativa
2007
2011
2015
2019
2022
250 M
750 M
1,250 M
© Tyler Lastovich | Unsplash.com
@anfibiacreativa
@anfibiacreativa
@anfibiacreativa
@anfibiacreativa
https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/
APIS
MARKDOWN
JAVASCRIPT
@anfibiacreativa
© Michelle.com | Unsplash.com
Page types || Views
Homepage
Landing page
Blog page
User page
SPA + cached to CDN
SSG
SSR
Data Request
AT BUILDTIME
Data Request
ON THE FLY
pattern, tech stack, DB & APIs per page/view type mapping to use-case
Data Request
AT RUNTIME
@anfibiacreativa
(Containerized) Microservice Node App.
Serverless Func. (Origin)
Edge Computing/Composable
API Management and Cache Layer
Homepage
Userpage
KNOWLEDGE RAMP
STATE MANAGEMENT
DATA ARCHITECTURE
GOVERNANCE/ENFORCEMENT
VERSION SKEW
ORCHESTRATION
© Brad West | Unsplash.com
@anfibiacreativa
UX CONSISTENCY
ROUTING
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
uniqueName: "host_name"
},
plugins: [
new ModuleFederationPlugin({
name: "host",
remotes: {
'remote1': "remote1"
},
library: { type: "var", name: "host_name" },
filename: "remoteEntry.js",
shared: [
// other advanced options include requiredVersion, shareScope, etc
"@anfibiacreativa/styles/styles.css",
{"@angular/core": { singleton: true, strictVersion: true }},
{"@angular/common": { singleton: true, strictVersion: true }},
{"@angular/router": { singleton: true, strictVersion: true }}
]
})
],
};
@anfibiacreativa
Remote
shareScope
Host Runtime
Container
provided modules
exposed modules
consumed modules
version check
version check
version def
@anfibiacreativa
© Pickled Stardust | Unsplash.com
HOT TAKE
@anfibiacreativa
@anfibiacreativa
© Ronak Balobobhai| Unsplash.com
@anfibiacreativa
Homepage
Userpage
© Ahmed Yaaniu| Unsplash.com
@anfibiacreativa
instead of a multi-framework horizontal split
Homepage
@anfibiacreativa
@anfibiacreativa
© Pickled Stardust | Unsplash.com
HOT TAKE
@anfibiacreativa
© Pickled Stardust | Unsplash.com
HOT TAKE
@anfibiacreativa
https://www.emnify.com/blog/global-2g-3g-phase-out
Pub/Sub
LocalStorage
input
event=`topic`
publish(event)
subscribe(event, callback)
subscribe(event, callback)
https://hbr.org/2016/11/why-diverse-teams-are-smarter#:~:text=The%20researchers%20found%20that%20individuals,published%20in%20the%20journal%20PNAS.
@anfibiacreativa
© Pickled Stardust | Unsplash.com
HOT TAKE
@anfibiacreativa
@anfibiacreativa
© Pickled Stardust | Unsplash.com
HOT TAKE
© Chris Liverani | Unsplash.com
Relational
Document Stores
Key-Value
Graph
Spatial
Search Engines
Wide Column
Vector
Time-series
MySQL, PostgreSQL, SQL Server
Cosmos DB, MongoDB, Firebase, Firestore
Cloud BigTable
SpatiaLite, PostGIS
Redis, Memcached
Neo4js, Virtuoso
Elasticshearch, Solr, Algolia
MongoDB, Gremlin, Influx, Prometheus
Weaviate
Relational
Document Stores
Key-Value
Graph
Spatial
Search Engines
Wide Column
Vector
Time-series
AI Model Training, Advanced Search
Content Management, Banking, CRM, Resource Planning
Content Management, Fintech, Customization, Personalization
Session Management, Product recommendations, Caching
Fraud Detection, Recommendation Engines, Social Networks, Network Mapping
IoT use-cases (collecting data from devices), Trends and forecasting, Monitorization
Full-text content search
Logging, Geographic information, Reporting systems
Geomarketing, Supply chain optimization, Environmental Management
API-FIRST
CLOUD NATIVE BASED
MICRO-*(Services)
@anfibiacreativa
© Michelle.com | Unsplash.com
HEADLESS SaaS
https://machalliance.org/
@anfibiacreativa
© Pickled Stardust | Unsplash.com
HOT TAKE
https://github.com/features/codespaces
@anfibiacreativa
@anfibiacreativa