Mais conteúdo relacionado Semelhante a Lecciones aprendidas creando una red social (20) Mais de Roberto Luis Bisbé (8) Lecciones aprendidas creando una red social2. ¿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
5. ¿Bonito o accesible?
Fuente: http://thenextweb.com/insider/2014/05/01/ie11-market-share-passes-ie10-ie9-combined-chrome-cements-lead-firefox/
8. El uso que le dan los usuarios
Métricas
TestingOptimización
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
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();
});
24. Carga - JMeter
• Escenarios específicos
• Múltiples usuarios
concurrentes
• Detectar picos
27. Casos de prueba
• No buscar perfección
• Significativos
• Extremos
• De datos reales, mucho mejor
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);
};
47. Un apunte sobre las animaciones
• Cuestan tiempo
• Penalizan el rendimiento
• Para tests: jQuery.fx.off
51. ¿Y si Javascript está deshabilitado?
• Header estático con información principal
• Advertencia de uso de Javascript
55. Swagger
• Documentación a partir de comentarios
• Especificación basada en JSON
• Multilenguaje y multiplataforma
• Extensible y personalizable
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