THE WINNER MIX: CLOUD, FUNCTIONS AND MICRO FRONTENDS FOR AN
ARCHITECTURE SMOOTHIE
Natalia Venditto
@anfibiacreativa
Natalia Venditto
@anfibiacreativa
Cloud.
@anfibiacreativa
@anfibiacreativa
WHAT DO ALL MODERN (SMALL AND ENTERPRISE SIZE) SOLUTIONS
HAVE IN COMMON?
Infrastructure
Business Logic
Services (APIS)
Frontend
@anfibiacreativa
Content Management
Tech Stack
Patterns and Frameworks
CD/CI + Release Models
@anfibiacreativa
Build Systems
Dependency Management
@anfibiacreativa
Infrastructure
Business Logic
Services (APIS)
Frontend
@anfibiacreativa
Content Management
Infrastructure
Business Logic
Services (APIS)
Frontend
Content Management
@anfibiacreativa
@anfibiacreativa
@anfibiacreativa
API Gateway
Infrastructure
Business Logic
Services (APIS)
Frontend
Content Management
Infrastructure
Serverless Computing
Micro-services + API Gateway
service1
service2
service3
serviceN
feat. complete
team of 2
releases every 2 weeks
team of 10
in development
releases every 3 weeks
team of 5
in development
service1
service2
service3
serviceN
micro-fe
micro-fe
micro-fe
micro-fe
micro-fe1
feat. complete
team of 2
releases every 2 weeks
team of 10
in development
releases every 3 weeks
team of 5
in development
micro-fe2
micro-fe3
micro-feN
micro-fe1
micro-fe2
micro-fe3
micro-feN
Common JS Utilities
Common Styles/Fonts/Icons
app1
app2
app3
appN
Angular Mono Repo
el1
el2
el3
elN
Angular Mono Repo
createCustomElement<P>(component: Type<any>, config: NgElementConfig): NgElementConstructor<P>Infrastructure
Business Logic
Services (APIS)
Frontend
Content Management
Infrastructure
Serverless Computing
Micro-services + API Gateway
Micro-frontends
CRUD
HOW DO WE SETUP AND INTEGRATE ALL THESE?
SERVERLESS COMPUTING FUNCTIONS ARE CODE THAT EXECUTES ONLY WHEN NEEDED, AND NEEDS NO SERVER MAINTENANCE
exports.handler = async function(event, context) { console.log('Remaining time: ', context.getRemainingTimeInMillis()) console.log('Function name: ', context.functionName) return context.logStreamName }
exports.handler = async function(event, context) { console.log('Remaining time: ', context.getRemainingTimeInMillis()) console.log('Function name: ', context.functionName) return context.logStreamName }
exports.handler = async function(event, context) { console.log('Remaining time: ', context.getRemainingTimeInMillis()) console.log('Function name: ', context.functionName) return context.logStreamName }
exports.handler = async function(event, context) { console.log('Remaining time: ', context.getRemainingTimeInMillis()) console.log('Function name: ', context.functionName) return context.logStreamName }
exports.handler = async function(event, context) { console.log('Remaining time: ', context.getRemainingTimeInMillis()) console.log('Function name: ', context.functionName) return context.logStreamName }
SERVERLESS FUNCTIONS ARE RUN FROM PIPELINE EXECUTION VIA
ACTIONS, OR IN RESPONSE TO EVENT TRIGGERS
GITLAB IS PRECONFIGURED AND AVAILABLE IN MARKETPLACE
WITH DEPENDENCIES TO OTHER SERVICES!
REDUCED
COSTS IN
INFRASTRUCTURE
SETUP AND MAINTENANCE
EASIER
TO SCALE UP, FASTER TO DEPLOY, 0 TO NONE DOWNTIME
ABSOLUTE
FLEXIBILITY, ABILITY TO CHOOSE ALL TECHNOLOGIES, IN THE STACK
CONTINUOUS INTEGRATION LEADING, TO AGILE DELIVERY
Thank you!!!
Images Unsplash.com | Icons Freepik && Eucalyp @ flaticon.com
@anfibiacreativa