lecciones aprendidas creando una red social
TRANSCRIPT
![Page 2: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/2.jpg)
¿Qué es esta charla?
Lo que queremos
hacer
Lo que hacemos
ahora
![Page 3: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/3.jpg)
¿Por qué una red social para científicos?
Presencia
ConocimientoColaboración
Divulgación
![Page 4: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/4.jpg)
¿Cómo?
Usuarios Pruebas Entornos Código Herramientas Docs
![Page 5: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/5.jpg)
¿Bonito o accesible?
Fuente: http://thenextweb.com/insider/2014/05/01/ie11-market-share-passes-ie10-ie9-combined-chrome-cements-lead-firefox/
![Page 6: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/6.jpg)
¿Bonito o accesible?
Chrome41%
Firefox24%
Safari17%
IE 9+12%
< IE 82%
Otros4%
![Page 7: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/7.jpg)
¿Bonito o accesible?
HTML5
CSS3Javascript
![Page 8: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/8.jpg)
El uso que le dan los usuarios
Métricas
TestingOptimización
![Page 9: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/9.jpg)
Métricas
• Google analytics
• Uso de la página
• Llamadas a APIs
• Profiling de consultas
• New Relic
• Redis
• Nagios
![Page 10: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/10.jpg)
Optimización
• Minificación de CSS y Javascript
• Minificación de HTML
• Imágenes en Base64 en Javascript
• Sprites
• CDN
• Local storage
![Page 11: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/11.jpg)
A/B Testing
Fuente: http://www.astekweb.com/the-web/what-is-ab-testing/
![Page 12: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/12.jpg)
Tests
Unitarios
JS: Componentes + Viewmodels Backend
Integración
JS + Vistas API Tests
Aceptación
Selenium Pruebas manuales
![Page 13: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/13.jpg)
Selenium es lento
Imagen: http://content.time.com/time/specials/packages/article/0,28804,1991915_1991909_1991755,00.html
![Page 14: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/14.jpg)
Selenium es LENTO
Imagen: http://content.time.com/time/specials/packages/article/0,28804,1991915_1991909_1991755,00.html
![Page 15: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/15.jpg)
Selenium es LENTO
Imagen: http://content.time.com/time/specials/packages/article/0,28804,1991915_1991909_1991755,00.html
![Page 16: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/16.jpg)
Selenium es LENTO… y caro
Imagen: http://content.time.com/time/specials/packages/article/0,28804,1991915_1991909_1991755,00.html
![Page 17: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/17.jpg)
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
![Page 18: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/18.jpg)
Integración y unitarios
Imagen: http://www.ceviu.com.br/blog/info/artigos/teste-de-sistema-system-integration-test/
![Page 19: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/19.jpg)
QUnit
QUnit.test( "hello test", function( assert ) {
assert.ok( 1 == "1", "Passed!" );
});
![Page 20: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/20.jpg)
Sinon
FakeServer
SpiesStubs
Mocks
![Page 21: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/21.jpg)
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();
});
![Page 22: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/22.jpg)
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();
});
![Page 23: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/23.jpg)
Chutzpah
• Test Runner Javascript para Visual Studio
• Compatible con TFS
• Open Source
![Page 24: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/24.jpg)
Carga - JMeter
• Escenarios específicos
• Múltiples usuarios concurrentes
• Detectar picos
![Page 25: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/25.jpg)
¿Dónde hacemos los test?
![Page 26: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/26.jpg)
Entornos
Live
Test
QA
Integración
Dev
![Page 27: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/27.jpg)
Casos de prueba
• No buscar perfección
• Significativos
• Extremos
• De datos reales, mucho mejor
![Page 28: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/28.jpg)
El código
![Page 29: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/29.jpg)
MVVM
Model
ViewmodelView
![Page 30: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/30.jpg)
Arquitectura
Page
ModalDialog
ModalDialog
Brick
ViewModel
CommunicationServices
ModalDialog
KnockoutTemplate
Navigation
![Page 31: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/31.jpg)
Knockout.js
• Ligero
• Fácil de aprender
• Usa jQuery
![Page 32: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/32.jpg)
Knockout.js
var myViewModel = {personName: ko.observable('Bob'),personAge: ko.observable(123)
};
The name is <span data-bind="text: personName"></span>
ko.applyBindings(myViewModel);
![Page 33: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/33.jpg)
Knockout.js
var myViewModel = {personName: ko.observable('Bob'),personAge: ko.observable(123)
};
The name is <span data-bind="text: personName"></span>
ko.applyBindings(myViewModel);
![Page 34: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/34.jpg)
Knockout.js
var myViewModel = {personName: ko.observable('Bob'),personAge: ko.observable(123)
};
The name is <span data-bind="text: personName"></span>
ko.applyBindings(myViewModel);
![Page 35: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/35.jpg)
Knockout.js
var myViewModel = {personName: ko.observable('Bob'),personAge: ko.observable(123)
};
The name is <span data-bind="text: personName"></span>
ko.applyBindings(myViewModel);
![Page 36: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/36.jpg)
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"},
]);
![Page 37: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/37.jpg)
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"},
]);
![Page 38: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/38.jpg)
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"},
]);
![Page 39: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/39.jpg)
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>
![Page 40: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/40.jpg)
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>
![Page 41: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/41.jpg)
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>
![Page 42: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/42.jpg)
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);};
![Page 43: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/43.jpg)
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);};
![Page 44: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/44.jpg)
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);};
![Page 45: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/45.jpg)
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);};
![Page 46: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/46.jpg)
Un apunte sobre las animaciones
![Page 47: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/47.jpg)
Un apunte sobre las animaciones
• Cuestan tiempo
• Penalizan el rendimiento
• Para tests: jQuery.fx.off
![Page 48: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/48.jpg)
Sammy
Sammy('#main', function() {
this.get('#/path', function() {
this.$element().html('A new route!');
});
}).run();
![Page 49: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/49.jpg)
Sammy
Sammy('#main', function() {
this.get('#/path', function() {
this.$element().html('A new route!');
});
}).run();
![Page 50: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/50.jpg)
¿Y si Javascript está deshabilitado?
![Page 51: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/51.jpg)
¿Y si Javascript está deshabilitado?
• Header estático con información principal
• Advertencia de uso de Javascript
![Page 52: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/52.jpg)
Herramientas
![Page 53: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/53.jpg)
Herramientas
JIRA
Panel Kanban
Visual Studio
Chrome tools
TFS + Chutzpah
![Page 54: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/54.jpg)
Documentación
Imagen: http://sharpen.engr.colostate.edu/mediawiki/index.php/CHOMP:_Documentation
![Page 55: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/55.jpg)
Swagger
• Documentación a partir de comentarios
• Especificación basada en JSON
• Multilenguaje y multiplataforma
• Extensible y personalizable
![Page 56: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/56.jpg)
Swagger
{
"apiVersion": "1.0.0",
"swaggerVersion": "1.2",
"basePath": "http://petstore.swagger.wordnik.com/api",
"resourcePath": "/store",
"produces": [
"application/json"
],
"apis": [
],
"models": {
}
}
![Page 57: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/57.jpg)
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"
}
]
![Page 58: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/58.jpg)
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"
]
}
![Page 59: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/59.jpg)
![Page 60: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/60.jpg)
![Page 61: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/61.jpg)
Conclusiones
• Toda una experiencia
• Muchas tecnologías y frameworks
• Pruebas, pruebas, pruebas
• Algo se te va a colar
• Rendimiento
![Page 62: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/62.jpg)
frontiers is hiring
• Buscamos desarrolladores full-stack
• Retos interesantes
• .NET y Javascript
• Bolis de colores
• Gente maja
• Café gratis
![Page 63: Lecciones aprendidas creando una red social](https://reader035.vdocuments.pub/reader035/viewer/2022081513/55a93adf1a28ab3a648b45bf/html5/thumbnails/63.jpg)
¿Preguntas?