What's the purpose of Agile methodologies?

Our highest priority is to satisfy the customer

Welcome changing requirements, even late in
development

Let's talk about Software Architecture...

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

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

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