Slides de la charla hecha en el espacio Kunlabori con los chicos de MadridJS sobre las lecciones aprendidas desarrollando una red social con frontiers.

1. Lecciones aprendidas
creando una red social
Roberto Luis Bisbé
roberto.luis@frontiersin.org
@rlbisbe

2. ¿Qué es esta charla?
Lo que
queremos
hacer
Lo que
hacemos
ahora

3. ¿Por qué una red social para científicos?
Presencia
ConocimientoColaboración
Divulgación

4. ¿Cómo?
Usuarios Pruebas Entornos Código Herramientas Docs

5. ¿Bonito o accesible?
Fuente: http://thenextweb.com/insider/2014/05/01/ie11-market-share-passes-ie10-ie9-combined-chrome-cements-lead-firefox/

6. ¿Bonito o accesible?
Chrome
41%
Firefox
24%
Safari
17%
IE 9+
12%
< IE 8
2%
Otros
4%

7. ¿Bonito o accesible?
HTML5
CSS3Javascript

8. El uso que le dan los usuarios
Métricas
TestingOptimización

9. Métricas
• Google analytics
• Uso de la página
• Llamadas a APIs
• Profiling de consultas
• New Relic
• Redis
• Nagios

10. Optimización
• Minificación de CSS y Javascript
• Minificación de HTML
• Imágenes en Base64 en Javascript
• Sprites
• CDN
• Local storage

11. A/BTesting
Fuente: http://www.astekweb.com/the-web/what-is-ab-testing/

12. Tests
Unitarios
JS: Componentes +Viewmodels Backend
Integración
JS +Vistas APITests
Aceptación
Selenium Pruebas manuales

13. Selenium es lento
Imagen: http://content.time.com/time/specials/packages/article/0,28804,1991915_1991909_1991755,00.html

14. Selenium es LENTO
Imagen: http://content.time.com/time/specials/packages/article/0,28804,1991915_1991909_1991755,00.html

15. Selenium es LENTO
Imagen: http://content.time.com/time/specials/packages/article/0,28804,1991915_1991909_1991755,00.html

16. Selenium es LENTO…
y caro
Imagen: http://content.time.com/time/specials/packages/article/0,28804,1991915_1991909_1991755,00.html

17. Selenium es LENTO…
y caro
Imagen: http://content.time.com/time/specials/packages/article/0,28804,1991915_1991909_1991755,00.html
• Basado en navegador
• Mal necesario
• Solamente casos completos

18. Integración y unitarios
Imagen: http://www.ceviu.com.br/blog/info/artigos/teste-de-sistema-system-integration-test/

19. QUnit
QUnit.test( "hello test", function( assert ) {
assert.ok( 1 == "1", "Passed!" );
});

20. Sinon
Fake
Server
SpiesStubs
Mocks

21. Sinon - fakeserver
function getFollowers(listId, callback) {
jQuery.ajax({
url: "/user/" + userId + "/followers",
success: function (data) {
callback(null, data);
}
});
}
it("passes", function () {
var server = sinon.fakeServer.create();
server.respondWith(200, { "Content-Type": "application/json" },
JSON.stringify([{ id: 23, name: "foo"}]));
getTodos(42);
server.respond();
server.restore();
});

22. Sinon - fakeserver
function getFollowers(listId, callback) {
jQuery.ajax({
url: "/user/" + userId + "/followers",
success: function (data) {
callback(null, data);
}
});
}
it("passes", function () {
var server = sinon.fakeServer.create();
server.respondWith(200, { "Content-Type": "application/json" },
JSON.stringify([{ id: 23, name: "foo"}]));
getTodos(42);
server.respond();
server.restore();
});

23. Chutzpah
• Test Runner Javascript paraVisual Studio
• Compatible conTFS
• Open Source

24. Carga - JMeter
• Escenarios específicos
• Múltiples usuarios
concurrentes
• Detectar picos

25. ¿Dónde hacemos los test?

26. Entornos
Live
Test
QA
Integración
Dev

27. Casos de prueba
• No buscar perfección
• Significativos
• Extremos
• De datos reales, mucho mejor

28. El código

29. MVVM
Model
ViewmodelView

30. Arquitectura
Page
Modal
Dialog
Modal
Dialog
Brick
ViewModel
Communication
Services
Modal
Dialog
Knockout
Template
Navigation

31. Knockout.js
• Ligero
• Fácil de aprender
• Usa jQuery

32. Knockout.js
var myViewModel = {
personName: ko.observable('Bob'),
personAge: ko.observable(123)
};
The name is <span data-bind="text: personName"></span>
ko.applyBindings(myViewModel);

33. Knockout.js
var myViewModel = {
personName: ko.observable('Bob'),
personAge: ko.observable(123)
};
The name is <span data-bind="text: personName"></span>
ko.applyBindings(myViewModel);

34. Knockout.js
var myViewModel = {
personName: ko.observable('Bob'),
personAge: ko.observable(123)
};
The name is <span data-bind="text: personName"></span>
ko.applyBindings(myViewModel);

35. Knockout.js
var myViewModel = {
personName: ko.observable('Bob'),
personAge: ko.observable(123)
};
The name is <span data-bind="text: personName"></span>
ko.applyBindings(myViewModel);

36. Knockout.js - Observable Arrays
<ul data-bind="foreach: users">
<li data-bind="text: name">
</li>
</ul>
self.users = ko.observableArray([
{name: "Carlos"},
{name: "Ivan"},
{name: "Maria"},
{name: "Quique"},
]);

37. Knockout.js - Observable Arrays
<ul data-bind="foreach: users">
<li data-bind="text: name">
</li>
</ul>
self.users = ko.observableArray([
{name: "Carlos"},
{name: "Ivan"},
{name: "Maria"},
{name: "Quique"},
]);

38. Knockout.js - Observable Arrays
<ul data-bind="foreach: users">
<li data-bind="text: name">
</li>
</ul>
self.users = ko.observableArray([
{name: "Carlos"},
{name: "Ivan"},
{name: "Maria"},
{name: "Quique"},
]);

39. Knockout.js -Templates
<div data-bind="template: { name: 'person-template', data: seller }"></div>
<script type="text/html" id="person-template">
<h3 data-bind="text: name"></h3>
<p>Credits: <span data-bind="text: credits"></span></p>
</script>

40. Knockout.js -Templates
<div data-bind="template: { name: 'person-template', data: seller }"></div>
<script type="text/html" id="person-template">
<h3 data-bind="text: name"></h3>
<p>Credits: <span data-bind="text: credits"></span></p>
</script>

41. Knockout.js -Templates
<div data-bind="template: { name: 'person-template', data: seller }"></div>
<script type="text/html" id="person-template">
<h3 data-bind="text: name"></h3>
<p>Credits: <span data-bind="text: credits"></span></p>
</script>

42. Knockout.js – Animaciones
<ul data-bind="foreach: {data: users, afterAdd: fadeIn}">
<li data-bind="text: name">
</li>
</ul>
self.fadeIn: function(element, index, data) {
$(element).filter("li")
.animate({ backgroundColor: 'yellow' }, 200)
.animate({ backgroundColor: 'white' }, 800);
};

43. Knockout.js – Animaciones
<ul data-bind="foreach: {data: users, afterAdd: fadeIn}">
<li data-bind="text: name">
</li>
</ul>
self.fadeIn: function(element, index, data) {
$(element).filter("li")
.animate({ backgroundColor: 'yellow' }, 200)
.animate({ backgroundColor: 'white' }, 800);
};

44. Knockout.js – Animaciones
<ul data-bind="foreach: {data: users, afterAdd: fadeIn}">
<li data-bind="text: name">
</li>
</ul>
self.fadeIn: function(element, index, data) {
$(element).filter("li")
.animate({ backgroundColor: 'yellow' }, 200)
.animate({ backgroundColor: 'white' }, 800);
};

45. Knockout.js – Animaciones
<ul data-bind="foreach: {data: users, afterAdd: fadeIn}">
<li data-bind="text: name">
</li>
</ul>
self.fadeIn: function(element, index, data) {
$(element).filter("li")
.animate({ backgroundColor: 'yellow' }, 200)
.animate({ backgroundColor: 'white' }, 800);
};

46. Un apunte sobre las animaciones

47. Un apunte sobre las animaciones
• Cuestan tiempo
• Penalizan el rendimiento
• Para tests: jQuery.fx.off

48. Sammy
Sammy('#main', function() {
this.get('#/path', function() {
this.$element().html('A new route!');
});
}).run();

49. Sammy
Sammy('#main', function() {
this.get('#/path', function() {
this.$element().html('A new route!');
});
}).run();

50. ¿Y si Javascript está deshabilitado?

51. ¿Y si Javascript está deshabilitado?
• Header estático con información principal
• Advertencia de uso de Javascript

52. Herramientas

53. Herramientas
JIRA
Panel
Kanban
Visual
Studio
Chrome
tools
TFS +
Chutzpah

54. Documentación
Imagen: http://sharpen.engr.colostate.edu/mediawiki/index.php/CHOMP:_Documentation

55. Swagger
• Documentación a partir de comentarios
• Especificación basada en JSON
• Multilenguaje y multiplataforma
• Extensible y personalizable

56. Swagger
{
"apiVersion": "1.0.0",
"swaggerVersion": "1.2",
"basePath": "http://petstore.swagger.wordnik.com/api",
"resourcePath": "/store",
"produces": [
"application/json"
],
"apis": [
],
"models": {
}
}

57. Swagger - APIs
"method": "GET",
"summary": "Get by user name",
"type": "User",
"parameters": [
{
"name": "username",
"description": "The name.",
"required": true,
"type": "string",
"paramType": "path",
"allowMultiple": false
}
]
"responseMessages": [
{
"code": 400,
"message": "Invalid username supplied"
},
{
"code": 404,
"message": "User not found"
}
]

58. Swagger - Modelos
"User": {
"id": "User",
"properties": {
"id": {
"type": "integer",
"format": "int64"
},
"username": {
"type": "string"
}
"userStatus": {
"type": "integer",
"format": "int32",
"description": "User Status",
"enum": [
"1-registered",
"2-active",
"3-closed"
]
}

61. Conclusiones
• Toda una experiencia
• Muchas tecnologías y frameworks
• Pruebas, pruebas, pruebas
• Algo se te va a colar
• Rendimiento

62. frontiers is hiring
• Buscamos desarrolladores full-stack
• Retos interesantes
• .NET y Javascript
• Bolis de colores
• Gente maja
• Café gratis

63. ¿Preguntas?

64. Gracias!
roberto.luis@frontiersin.org
@rlbisbe