Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lecciones aprendidas creando una red social

5,129 views

Published on

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

Published in: Software
  • Be the first to comment

Lecciones aprendidas creando una red social

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

×