Download to read offline
![MODELVIEW CONTROLLER
Model: també pot ser model de dades de vista
tabChooser = {
tabs: [‘introduction’,‘advanced’],
current: 0,
next: function() {
this.current += 1;
this.current %= this.tabs.length;
},
...
};
37 @drpicox](https://image.slidesharecdn.com/freelanceienginyeria-170207152439/85/Freelance-i-Enginyeria-37-320.jpg)
![DEEPER CODE
View: jQuery version
// this{ user, save }
function UserFormView() {
var view = this;
view.template = ‘userForm.tpl.html’;
view.link = function(dom) {
$(‘input[name=“name”]’).attr(‘value’,view.user.name);
$(‘form’).submit(function() {
view.save();
});
};
...
} 62 @drpicox](https://image.slidesharecdn.com/freelanceienginyeria-170207152439/85/Freelance-i-Enginyeria-62-320.jpg)
Freelance i Enginyeria
- 1. FREELANCE I ENGINYERIA byDavid Ródenas 1
- 2.
- 3. QUI SOC? • EnginyerInformàtic pla antic (actual Grau en Informàtica + Master en Eng. Informàtica) 3 @drpicox
- 4. QUI SOC? • Col·legiat806 al Col·legi d’Enginyers Informàtics 4 @drpicox
- 5. QUI SOC? • Doctoren Enginyeria Informàtica 5 @drpicox
- 6.
- 7. QUINA FEINA FAIG? •Actualment soc Freelance en Javascript: ➡ ingressos (no sou) brut anual …… ➡ faig apps (android, iPhone,WPhone, web; he arribat a fer una cada 2 setmanes sostingut en un any) ➡ faig d’arquitecte d’aplicacions (tornem al model de clients rics) 7 @drpicox
- 8. ¿QUEVOL DIR SERFREELANCE? 8 @drpicox
- 9. QUEVOL DIR SERFREELANCE? • No tens un sou fix ➡ Hi ha mesos que cobres molt, hi ha mesos que no cobres • els clients et paguen quan volen (malgrat la llei) • els clients no sempre volen els teus serveis • o no sempre tens clients ➡ Oju, perquè quan cobres després(o abans) no tot es el teu “sou” 9 @drpicox
- 10. QUEVOL DIR SERFREELANCE? • No tens unes condicions fixes ➡ Quins horaris requereix cada client ➡ Despeses: qui compra l’ordinador, on treballo, com em desplaço… ➡ Propietats intel·lectuals: que dono, que puc re-utilitzar, … ➡ Quina garantia m’exigeixen (~hores extres gratis) ➡ No hi ha baixa ni vacances (malalt o vacances = no cobrar/facturar) 10 @drpicox
- 11. QUEVOL DIR SERFREELANCE? • Ets el teu jefe ➡ Cal mantenir un registre de feina feta • Per a qui, quan i que has fet ➡ Cal posar-te un horari • Cobres per hores, si no treballes no cobres • Potser te l’imposen… (no hauria) 11 @drpicox
- 12. QUEVOL DIR SERFREELANCE? • Vas amb lo posat ➡ Respons amb els teus bens personals (alias autònom) • Els presents i els futurs (pots perdre casa teva, i les següents…) ➡ Cal un Advocat • Entendre contractes abans de signar • Redactar contractes • Aclarir eventualitats (ganivetades per l’esquena, perquè n’hi han) 12 @drpicox
- 13. QUEVOL DIR SERFREELANCE? • Impostos! ➡ Cal un gestor • Generar Factures • IVA, 330, 310, 306, … • Pagar IVA abans de cobrar (o fins i tot quan no et pagaran) 13 @drpicox
- 14.
- 15. UN NOU MON •Al 1996 començo la carrera (mon estructurat) • Al 2003 començo el doctorat (mon de referències i contrast) • Al 2008 em faig Col·legiat (suport més enllà de ser assalariat) • Al 2011 descobreixo els user-groups (seguir el ritme a la tecnologia) 15 @drpicox
- 16. UN NOU MON •User-groups ➡ Els descobreixo a Berlin, i poc després arriben a Barcelona ➡ Grups de quasi tot: Ruby, MongoDB, Javascript, Neo4j, … ➡ Quedades mensuals i es comparteixen descobriments (no cal pasar-se hores/dies provant noves tecnologies) ➡ Recolzament mutu, problemes comuns, … fer pinya! ➡ Font de feina per freelancers i buscar talent per startups 16 @drpicox
- 17. UN NOU MON •User-groups ➡ Son una eina imprescindible ➡ Normalment giren entorn el twitter i fins i tot meetup 17 @drpicox
- 18.
- 19. JAVASCRIPT • Douglas Crockford ➡El Chuck Norris de Javascript ➡ Descobreix el JSON (que substitueix el XML) ➡ Descobreix com fer OO en Javascript ➡ Descobreix com fer membres privats ➡ … és el tiu que va entendre Javascript! 19 @drpicox
- 20. JAVASCRIPT • És elnou assembler ➡ Funciona en browsers ➡ Funciona en apps de mòbil ➡ Funciona en servidors 20 @drpicox
- 21. JAVASCRIPT • En websi SPA ➡ Perquè perdre CPU en el servidor calculant tot l’HTML si ho pot fer el client? ➡ La SPA es una aplicació completa amb tot el cicle de vida • En apps mòbil ➡ Son aplicacions senceres i el servidor es una font de dades 21 @drpicox
- 22. JAVASCRIPT • En servidorsapareix el NodeJS (~V8) ➡ Es basa en callbacks/eventbus/promises ➡ No usa threads, no en necessita ➡ Apallissa en rendiment a Java i qualsevol altre llenguatge ➡ Tremendament senzill 22 @drpicox
- 23. JAVASCRIPT • Sense Callbacks view.books= remote.get(‘/api/books’); view.update(); 23 @drpicox
- 24. JAVASCRIPT • Callbacks remote.get(‘/api/books’, function(books){ view.books = books; view.update(); }); 24 @drpicox
- 25. JAVASCRIPT • ¿Quin guanya? remote.get(‘/api/books’,function(books) { view.books = books; view.update(); }); view.books = remote.get(‘/api/books’); view.update(); VS 25 @drpicox
- 26. JAVASCRIPT • Callbacks remote.get(‘/api/books’, function(books){ view.books = books; view.update(); }); • Promises var books = remote.get(‘/api/books’); books.then(function(books) { view.books = books; view.update(); }); 26 @drpicox
- 27. JAVASCRIPT VS 27 @drpicox remote.get(‘/api/books’, function(books) { view.books= books; view.update(); }); var books = remote.get(‘/api/books’); books.then(function(books) { view.books = books; view.update(); });
- 28.
- 29. ARQUITECTURA • Use casedriven • Components + Cola • MVC • Cohesió + Acoblament 29 @drpicox
- 30. USE CASE DRIVEN •“Descobert” durant el 2002 fent el PFC 30 @drpicox
- 31. COMPONENTS + COLA •“Descobert” durant el 2005 fent un simulador 31 @drpicox
- 32. COMPONENTS + COLA •Component = peça que satisfà una interfície • Cola = mecanisme que ajunta els components • Guanyes que és fàcilment configurable i reutilitzable 32 @drpicox
- 33. MODELVIEW CONTROLLER • “Descobert”durant el 2014 al Desigual 33 @drpicox
- 34. MODELVIEW CONTROLLER 34 @drpicox arbre ambpomes http://clipart.nicubunu.ro
- 35.
- 36. MODELVIEW CONTROLLER Model: pràcticamentson dades user = { id: ‘123’, name: ‘John’, surname: ‘Smith’, fullName: function() { return this.name+‘ ’+this.surname; }, ... }; 36 @drpicox
- 37. MODELVIEW CONTROLLER Model: tambépot ser model de dades de vista tabChooser = { tabs: [‘introduction’,‘advanced’], current: 0, next: function() { this.current += 1; this.current %= this.tabs.length; }, ... }; 37 @drpicox
- 38. MODELVIEW CONTROLLER Model: noconeixVistes ni Controladors (es observat: callbacks, dirtycheck, ...) user.addObserver(userFormView) ex: buscar Observer pattern 38 @drpicox
- 39. MODELVIEW CONTROLLER Model: isnot html/dom <input name=“name” value=“John”> <img class=“status” src=“success.jpg”> 39 @drpicox Model: is a Javascript object user = {name: “John”}; status = “success”; Please, don’t
- 40. MODELVIEW CONTROLLER View: éspràcticament html/css <form name=“user”> <label for=“name”>Name:</label> <input name=“name” type=“text”> <label for=“surname”>Surname:</label> <input name=“surname” type=“text”> <input type=“submit” value=“Update”> </form> 40 @drpicox
- 41. MODELVIEW CONTROLLER View: +una miqueta de JS userFormView = { setUser: function(user) { user.addObserver(this); this.user = user; this.update(); }, update: function() { this.form.name = user.name; this.form.surname = surname; }, ... }; 41 @drpicox
- 42. MODELVIEW CONTROLLER View: noconeix els Controladors (es usat amb: callbacks, interfaces, ...) userFormView.onSubmit(controller.save) // ull viu: controller.save pot ser una funció 42 @drpicox
- 43. MODELVIEW CONTROLLER Controller: éspràcticament la resta user = http.get(‘/user’); userFormView = new UserFormView(); userFormView.setUser(user); userFormView.onSubmit(function() { http.post(‘/user’, user); }); viewport.setView(userFormView); 43 @drpicox
- 44. MODELVIEW CONTROLLER user =http.get(‘/user’); userFormView = new UserFormView(); userFormView.setUser(user); userFormView.onSubmit(function() { http.post(‘/user’, user); }); viewport.setView(userFormView); Be Careful! Persistence/Service Controller carrega i desa dades (potser usa patró identity map) 44 @drpicox Controller: és pràcticament la resta
- 45. MODELVIEW CONTROLLER user =http.get(‘/user’); userFormView = new UserFormView(); userFormView.setUser(user); userFormView.onSubmit(function() { http.post(‘/user’, user); }); viewport.setView(userFormView); Be Careful! Route Controller ex: http://localhost:8080/#/user 45 @drpicox Controller: és pràcticament la resta
- 46. MODELVIEW CONTROLLER user =http.get(‘/user’); userFormView = new UserFormView(); userFormView.setUser(user); userFormView.onSubmit(function() { http.post(‘/user’, user); }); viewport.setView(userFormView); Be Careful! View Controller manega una vista específica 46 @drpicox Controller: és pràcticament la resta
- 47. MODELVIEW CONTROLLER Controller: diferentstipus segons responsabilitats • Persistence/Service Controllers: carrega, desa i manega models. Usa altres persistence controllers i models. • View Controllers: prepara i observa vistes. Usa controladors de persistència, vistes and models (poquet). • Route Controllers: selecciona vistes a mostrar. Usa altres controladors, (instancia) vistes i models (poquet). • … 47 @drpicox
- 48. MODELVIEW CONTROLLER MVC NOés una moda! , or ModelView Adapter, or ModelViewViewModel, or ModelView Presenter No crear ternaries ModelX-ViewX-ControllerX just per seguir el patró. Crea models, vistes i controladors perquè tenen sentit, i reusals! 48 @drpicox
- 49. COHESION AND COUPLING •“Descobert” durant el 2014 al Desigual (common sense patterns) 49 @drpicox
- 50. COMMON SENSE PATTERNS 50@drpicox High Cohesion: posa coses relacionades al mateix lloc • Persistence Controllers: carreguen/desen models d’un mateix tipus, • Route Controllers: preparen una vista a mostrar, • View: mostren una informació al usuari (no un model!), • Model: descriu una entitat, • ...
- 51. COMMON SENSE PATTERNS 51@drpicox Low Coupling: minimitza qui coneix a qui • Crea direcció:A coneix B, però B no pot conèixer A Models Views View Controllers Service Controllers Coneix A B
- 52. COMMON SENSE PATTERNS @drpicox A B A B C Nocircles! Low Coupling: minimitza qui coneix a qui • Crea direcció:A coneix B, però B no pot conèixer A Coneix 52
- 53. COMMON SENSE PATTERNS 53@drpicox Son el patró més bàsic a seguir, la majoria de patrons provenen d’ells, fins i tot el ModelView Controller. High Cohesion & Low Coupling
- 54.
- 55.
- 56. DEEPER CODE Persistence Controller:remote data accesses (v1) userService = { get: function() { return http.get(‘/user’); }, save: function(user) { http.post(‘/user’, user); }, }; 56 @drpicox Simple get and save, of data.
- 57. DEEPER CODE Persistence Controller:remote data accesses (v2) userService = { get: function() { return $http.get(‘/user’). then(function (response) { var user = new User(response.data); return user; }); }, save: function(user) { return $http.post(‘/user’, user); }, }; 57 @drpicox Recover data and create model instances.
- 58. DEEPER CODE Persistence Controller:remote data accesses (v3) instance = null; userService = { get: function() { if (instance) { return instance; } return instance = $http.get(‘/user’). then(function (response) { var user = new User(response.data); return user; }); }, ... }; 58 @drpicox Keep track of recovered instances. Not double loading, always same instance for same data. (have key? Identity map)
- 59. DEEPER CODE View Controller:dona vida a la vista function UserFormController(view, user) { view.user = user; view.save = function() { userService.save(user); }; } 59 @drpicox For Java programmers: imagina’t que la vista satisfà una interficie. For AngularJS programmers: la vista es de fet $scope.
- 60. DEEPER CODE Route Controller:mostra el que l’usuari vol (v1) routeManager.when(‘/user’, function() { var user = userService.get(); var view = new UserFormView(); var controller = new UserFormController(view, user); viewport.setView(view); }); 60 @drpicox
- 61. DEEPER CODE Route Controller:mostra el que l’usuari vol (v2) routeManager.when(‘/user’, function() { userService.get(). then(function (user) { var view = new UserFormView(); var controller = new UserFormController(view, user); viewport.setView(view); }); }); 61 @drpicox Wait for it :-)
- 62. DEEPER CODE View: jQueryversion // this{ user, save } function UserFormView() { var view = this; view.template = ‘userForm.tpl.html’; view.link = function(dom) { $(‘input[name=“name”]’).attr(‘value’,view.user.name); $(‘form’).submit(function() { view.save(); }); }; ... } 62 @drpicox
- 63. DEEPER CODE View:AngularJS version <formng-submit=“save()”> <label>Name:</label> <input ng-model=“user.name” type=“text”> <label>Surname:</label> <input ng-model=“user.surname” name=“surname” type=“text”> <input type=“submit” value=“Update”> </form> 63 @drpicox
- 64. USER GROUPS /COMUNITATS 64 @drpicox
- 65. USER GROUP /COMUNITAT • Actualment hi ha més de 20 comunitats a Barcelona (que conegui) ➡ PerlMongers, Sudoers, Javascript,Angular (+ Angular Beers),AdaJS, NodeJS, CouchBase, MongoDB, Scala,Wordpress, Disseny web,Agile, Lean, Big Data, Python, Ruby, Elastic, Internet ofThings, Gaming, … 65 @drpicox
- 66. USER GROUP /COMUNITAT • Part d’aquesta mateixa presentació va estar al grup de Javascript ➡ M’han ajudat a refinar conceptes, i ells al mateix temps han apres • Al grup de Javascript vaig coneixer coses com: ➡ Grunt, gulp, docker, promises, j3d, impress, ionic, mobile, … 66 @drpicox
- 67. USER GROUP /COMUNITAT • Model software lliure ➡ Un coco te una bona pensada (ex: NodeJS) ➡ Un altre coco d’una altre organització te una altre bona pensada (ex: promises) ➡ La comunitat filtra i repel·leix dolentes i es queda amb les bones que es propaguen amb rapidesa 67 @drpicox
- 68. USER GROUP /COMUNITAT • Evolució tecnologia ➡ Possiblement gràcies a les comunitats la tecnologia Javascript mai havia avançat tant ni tant ràpidament 68 @drpicox
- 69.
- 70. ARA ÉS LAVOSTRA •Preguntes? • Quins plans teniu? • Ja coneixeu la vostra comunitat? 70 @drpicox