Buenas prácticas en el desarrollo de software

Piero Divasto

Full-stack Developer

Nisum

Agenda

Buenas prácticas

Git

Código

Agile

Git

Buenas prácticas

http://nvie.com/posts/a-successful-git-branching-model/

Feature Branch Architecture

Git

Buenas prácticas

feature

pull request

develop
master

Git

Buenas prácticas

PRO-123
develop

Código story + nombre de story

desde branch PRO-123

$ git checkout -b PRO-123

Git

Buenas prácticas

PRO-123
develop

PULL REQUEST!

Git

Buenas prácticas - Pull Request

Instancia importante

Momento para hacer peer-review

Otro miembro del equipo inspecciona el código y hace comentarios

Verificar si realmente tarea esta lista (definition of done), verificar coding style, tests, etc.

También eres responsable de lo que se acepta!

Git

Buenas prácticas - Destruir feature branches

PRO-123
develop
PRO-124

Destruir branch después de hacer PR! No más commits!

Git

Buenas prácticas - Destruir feature branches

PRO-123
develop
PRO-124
PRO-124-CONT

Git

Buenas prácticas - Rebase

PRO-123
develop
PRO-124
PRO-124

desde branch PRO-124

$ git rebase develop

Git

Buenas prácticas - Multiples devs p/feature

PRO-123
develop
PRO-124
feature
PRO-124

desde branch PRO-124

$ git rebase feature

Git

Buenas prácticas - Commits

Explica lo que hiciste (Problema + solución)

Título no más de 50 caracteres

Titulo + Comentario

En PR incluir código y titulo de story

PRO-123 Titulo del story/task

Git

Buenas prácticas - Conclusión

Un@ dev por feature branch

Merge siempre y cuando no rompa algo

Pull request => IMPORTANTE!

Rebase!

No release branch (en lo posible)

hotfixes en                

master

Git

Buenas prácticas - Referencias

https://speakerdeck.com/ewoodh2o/release-management-git-workflow
http://nvie.com/posts/a-successful-git-branching-model/
https://www.youtube.com/watch?v=qyz3jkOBbQY

Código

Buenas prácticas

Código

Buenas prácticas

“Try and leave this world a little better than you found it . . .”

Robert Stephenson Smyth Powell

Código

Buenas prácticas - Naming

int d;
int m;
int y;
int day;
int month;
int year;
static final String constante = "constante";
boolean change = false;
public class person {}
String getnombre();


static final String CONSTANTE = "VALOR CONSTANTE";
boolean isChange = false;
public class Person {}
public String getNombre();


public String getPersonData();
public String loadFamilyFilteredData();
public String requestRelativesData();
public String loadPersonData();
public String loadFamilyFilteredData();
public String loadRelativesData();

Código

Buenas prácticas - Funciones

Deben ser lo más pequeñas posible!

Deben hacer una cosa, hacerla bien y ser la única que la hace.

Menor cantidad de parámetros de entrada (<= 3)

Evitar side-effects

Código

Buenas prácticas - Comentarios

No siempre son malos

Pero trata de evitar el uso excesivo

Trata de que el código hable por si solo

NO MANTENER CÓDIGO COMENTADO!

Código

Buenas prácticas - Comentarios

/**
 *
 * @param title The title of the CD
 * @param author The author of the CD
 * @param tracks The number of tracks on the CD
 * @param durationInMinutes The duration of the CD in minutes
 */
 public void addCD(String title, String author, int tracks, int durationInMinutes) {
     CD cd = new CD();
     cd.title = title;
     cd.author = author;
     cd.tracks = tracks;
     cd.duration = duration;
     cdList.add(cd);
 }

Código

Buenas prácticas - Fomateo

{name: 'prExists', width: 90, align: "center", sorttype: "string"},
                            {name: 'reason',width: 140,align: 'center', edittype: 'select', formatter: 'select',
                                editoptions:
            {
                    value: reasons,
                    defaultValue: '',
                    onchange: "selectOnChange(this)"
                },
                                editable: true,classes:'selectReason'},
            {name: 'sellable',width: 100,align: 'center', formatter: 'checkbox',editable: true,
                edittype: 'checkbox',
                                editoptions:
                                    {
                    value: 'Yes:No',
                    defaultValue: 'No',
                    onchange: "returnOnChange(this,'#008000')"
                },
                                classes:'selectSellable'},
                            {name: 'damaged',width: 100,align: 'center', formatter: 'checkbox',editable: true,
                edittype: 'checkbox',
                                editoptions:
                                    {
                    value: 'S:No',
                    defaultValue: 'No',
                    onchange: "returnOnChange(this,'#FFFF00')",
                }
                                ,classes:'selectDamaged'},
                            {name: 'bgBf',width: 90,align: 'center', formatter: 'checkbox',editable: true,
                edittype: 'checkbox',
                                editoptions:
                                    {
                    value: 'Y:No',
                    defaultValue: 'No',
                    onchange: "returnOnChange(this,'#FF0000')",

Código

Buenas prácticas - Fomateo

      {name: 'prExists', width: 90, align: "center", sorttype: "string"},
      {
        name: 'reason', width: 140, align: 'center', edittype: 'select', formatter: 'select',
        editoptions:
          {
            value: reasons,
            defaultValue: '',
            onchange: "selectOnChange(this)"
          },
        editable: true, classes: 'selectReason'
      },
      {
        name: 'sellable', width: 100, align: 'center', formatter: 'checkbox', editable: true,
        edittype: 'checkbox',
        editoptions:
          {
            value: 'Yes:No',
            defaultValue: 'No',
            onchange: "returnOnChange(this,'#008000')"
          },
        classes: 'selectSellable'
      },
      {
        name: 'damaged', width: 100, align: 'center', formatter: 'checkbox', editable: true,
        edittype: 'checkbox',
        editoptions:
          {
            value: 'S:No',
            defaultValue: 'No',
            onchange: "returnOnChange(this,'#FFFF00')",
          }
        , classes: 'selectDamaged'
      },
      {
        name: 'bgBf', width: 90, align: 'center', formatter: 'checkbox', editable: true,
        edittype: 'checkbox',
        editoptions:
          {
            value: 'Y:No',
            defaultValue: 'No',
            onchange: "returnOnChange(this,'#FF0000')",
          }
        , classes: 'selectBgBf'
      },

Código

Buenas prácticas - Fomateo/coding style

https://google.github.io/styleguide/javaguide.html

Linters

  • eslint
  • jshint
  • ...

http://errorprone.info/

http://checkstyle.sourceforge.net/

https://pmd.github.io/

Código

Buenas prácticas - Tests

Tests independientes

1 test por escenario

Unit tests son el mínimo requerido

Código

Buenas prácticas - CSS

SMACSS

OOCSS

Suit CSS

Atomic

BEM

CSS Modules

Código

Buenas prácticas - CSS

https://www.webpagefx.com/blog/web-design/css-methodologies/
https://www.danylkoweb.com/Blog/5-methodologies-for-architecting-css-IP
https://github.com/css-modules/css-modules

Código

Buenas prácticas - jQuery - DOM Manipulation

$(".container input#elem").attr("title", $(".container input#elem").text());

$(".container input#elem").css("color", "red");

$(".container input#elem").fadeOut();
var elem = $("#elem");

elem.attr("title", elem.text());

elem.css("color", "red");

elem.fadeOut();
http://gregfranko.com/jquery-best-practices

Código

Buenas prácticas - jQuery - Event Handling

$("#longlist li").on("mouseenter", function() {
    $(this).text("Click me!");
});

$("#longlist li").on("click", function() {
    $(this).text("Why did you click me?!");
});
var listItems = $("#longlist li");

listItems.on({
    "mouseenter": function() {
      $(this).text("Click me!");
    },

    "click": function() {
      $(this).text("Why did you click me?!");
    }
});
http://gregfranko.com/jquery-best-practices

Código

Buenas prácticas - jQuery - AJAX

function getName(personid) {
    var dynamicData = {};
    dynamicData["id"] = personID;
    $.ajax({
      url: "getName.php",
      type: "get",
      data: dynamicData,
      success: function(data) {
        // Updates the UI based the ajax result
        $(".person-name").text(data.name);  
      }
    });
}

getName("2342342");
http://gregfranko.com/jquery-best-practices

function getName(personid) {
    var dynamicData = {};
    dynamicData["id"] = personID;
    return $.ajax({
      url: "getName.php",
      type: "get",
      data: dynamicData
    });
}

getName("2342342").done(function(data) {
    $(".person-name").text(data.name); 
});

Código

Buenas prácticas

“Clean code is not written by following a set of rules. You don’t become a software craftsman by learning a list of heuristics. Professionalism and craftsmanship come from values that drive disciplines.”

Robert C. Martin, Clean Code: A Handbook of Agile Software Craftsmanship

Código

Buenas prácticas

Agile

Buenas prácticas - Definition of Done

Agile

Buenas prácticas - Stories

Descripción detallada y bien escrita

Incluir BDD escenario

Pair-programming

Deben ser discutidas por el equipo

Incluir criterio de aceptación

Agile

Buenas prácticas - CICD Pipeline

Agile

Buenas prácticas

Respetar las ceremonias

Ser HONESTOS en la Retrospective Meeting

Si tienes algún problema, pide ayuda

Deben ser discutidas por el equipo

PARTICIPA en las ceremonias!

Conclusion

Buenas prácticas

Mejor calidad del código

Mejor tiempo de entrega al mercado

Más tiempo para enfocarse en mejoras

Menor cantidad de bugs y menor tiempo en resolverlos

Mejor desarrollo personal y profesional

Conclusion

Buenas prácticas

Muchas Gracias!

Piero Divasto

Full-stack Developer

Nisum

Buenas prácticas en el desarrollo de software - jQuery

By Piero Divasto

Made with Slides.com

Buenas prácticas en el desarrollo de software - jQuery

Presentación sobre buenas prácticas en el desarrollo de software. Esta esta dividida en tres secciones: Git, Código y Agile. La primera es un conjunto de buenas prácticas tales como nombrar features branches, resolver conflictos, etc. La siguiente es sobre buenas prácticas en el código basado en el gran libro "Clean Code". Para finalizar, se exponen buenas prácticas relacionadas con Agile, scrum y el equipo de desarrollo.

  • 669

More from Piero Divasto