Sacrificial Architecture
Ego Slide
f.strazzullo@extrategy.net
@TheStrazz86
https://github.com/francesco-strazzullo
https://medium.com/@TheStrazz86
https://slides.com/francescostrazzullo
What's the purpose of Agile methodologies?
Our highest priority is to satisfy the customer
Welcome changing requirements, even late in
development
Welcome changing requirements, even late in
development
Welcome changing requirements, even late in
development
Let's talk about Software Architecture...
Try To Change This
By Webysther Nunes (Own work) [CC BY-SA 4.0 ], via Wikimedia Commons
Martin Fowler
Introducing
Sacrificial Architecture
choosing a sacrificial architecture means accepting now that after some time you'll need to throw away what you're currently building.
Design code that you can throw away!
It's not a pattern
It's a way to accept technical debt...
...and to manage it
Sacrificial Architecture in Frontend Development
Frameworks
Choose your framework as you will need to change it after six months
Choose wisely what features to use of a framework
app.factory('getUsers',['$http',function($http){
return $http.get('api/v1/users');
});
app.controller('home',[
'$scope',
'getUsers',
function(
$scope,
getUsers){
getUsers().then(function(response){
$scope.users = response.data;
});
}]);
export default () => {
return fetch('api/v1/users').then(function (response) {
return response.json();
});
};
import getUsers from './getUsers';
app.controller('home',[
'$scope',
function(
$scope){
getUsers().then(function(users){
$scope.users = users;
});
}]);
Design your way out of a framework
Modularity
duplication is far cheaper than the wrong abstraction
Sandi Metz
UI Components
UI Components are Microservices for frontend development
Separate Logic
export default (param) => {
console.log(param);
};
import logger from './logger';
class DummyButton extends React.Component {
render() {
return (
<div onClick={() => {logger('This is a Value!'}}>
Click Me Bro!
</div>
);
}
}
import EventBus from 'EventBus';
class DummyButton extends React.Component {
onButtonClick() {
EventBus.dispatch('SOMETHING_HAPPENED','This is a Value!');
}
render() {
return (
<div onClick={() => {onButtonClick()}}>
Click Me Bro!
</div>
);
}
}
import EventBus from 'EventBus';
export default {
init:{
EventBus.on('SOMETHING_HAPPENED',(param) => {
console.log(param);
});
}
};
When?
Complex Vs Complicated
Cynefin Framework
/ˈkʌnᵻvɪn/
By Snowded (Own work) [CC BY-SA 4.0 ], via Wikimedia Commons
In The End Software...
It's All About People...
And People Are Complex
So use the "Right Practices" for the Job
Martin Fowler
Sacrificial Architecture, sometimes it’s the fastest way to learn things