Freelance i Enginyeria

FREELANCE I ENGINYERIA
by David Ródenas
1

QUI SOC?
• Enginyer Informàtic pla antic 
(actual Grau en Informàtica + Master en Eng. Informàtica)
3
@drpicox

QUI SOC?
• Col·legiat 806 al Col·legi d’Enginyers Informàtics
4
@drpicox

QUI SOC?
• Doctor en Enginyeria Informàtica
5
@drpicox

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

¿QUEVOL DIR SER FREELANCE?
8
@drpicox

QUEVOL DIR SER FREELANCE?
• No tens un sou ﬁx
➡ 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

• No tens unes condicions ﬁxes
➡ 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

• 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

• 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

• Impostos!
➡ Cal un gestor
• Generar Factures
• IVA, 330, 310, 306, …
• Pagar IVA abans de cobrar (o ﬁns i tot quan no et pagaran)
13
@drpicox

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

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

UN NOU MON
• User-groups
➡ Son una eina imprescindible
➡ Normalment giren entorn el twitter i ﬁns i tot meetup
17
@drpicox

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

JAVASCRIPT
• És el nou assembler
➡ Funciona en browsers
➡ Funciona en apps de mòbil
➡ Funciona en servidors
20
@drpicox

JAVASCRIPT
• En webs i 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

JAVASCRIPT
• En servidors apareix 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

JAVASCRIPT
• Sense Callbacks
view.books = remote.get(‘/api/books’);
view.update();
23
@drpicox

JAVASCRIPT
• Callbacks
remote.get(‘/api/books’, function(books) {
view.books = books;
view.update();
});
24
@drpicox

JAVASCRIPT
• ¿Quin guanya?
view.books = books;
view.update();
});
view.books = remote.get(‘/api/books’);
view.update();
VS
25
@drpicox

JAVASCRIPT
• Callbacks
view.books = books;
view.update();
});
• Promises
var books = remote.get(‘/api/books’);
books.then(function(books) {
view.books = books;
view.update();
});
26
@drpicox

JAVASCRIPT
VS
27
@drpicox
view.books = books;
view.update();
});
var books = remote.get(‘/api/books’);
books.then(function(books) {
view.books = books;
view.update();
});

ARQUITECTURA 
/DEL SOFTWARE/
28
@drpicox

ARQUITECTURA
• Use case driven
• Components + Cola
• MVC
• Cohesió + Acoblament
29
@drpicox

USE CASE DRIVEN
• “Descobert” durant el 2002 fent el PFC
30
@drpicox

COMPONENTS + COLA
• “Descobert” durant el 2005 fent un simulador
31
@drpicox

COMPONENTS + COLA
• Component = peça que satisfà una interfície
• Cola = mecanisme que ajunta els components
• Guanyes que és fàcilment conﬁgurable i reutilitzable
32
@drpicox

MODELVIEW CONTROLLER
• “Descobert” durant el 2014 al Desigual
33
@drpicox

34 @drpicox
arbre
amb pomes
http://clipart.nicubunu.ro

35 @drpicox
Models
ViewsControllers

Model: pràcticament son dades
user = {
id: ‘123’,
name: ‘John’,
surname: ‘Smith’,
fullName: function() {
return this.name+‘ ’+this.surname;
},
...
};
36 @drpicox

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

Model: no coneixVistes ni Controladors
(es observat: callbacks, dirtycheck, ...)
user.addObserver(userFormView)
ex: buscar Observer pattern
38 @drpicox

Model: is not 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

View: és prà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

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

View: no coneix els Controladors
(es usat amb: callbacks, interfaces, ...)
userFormView.onSubmit(controller.save)
// ull viu: controller.save pot ser una funció
42 @drpicox

Controller: és prà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

});
Be Careful!
Persistence/Service
Controller
carrega i desa dades (potser usa patró identity map)
44 @drpicox

});
Be Careful!
Route
Controller
ex: http://localhost:8080/#/user
45 @drpicox

});
Be Careful!
View
Controller
manega una vista especíﬁca
46 @drpicox

Controller: diferents tipus 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

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

COHESION AND COUPLING
• “Descobert” durant el 2014 al Desigual 
(common sense patterns)
49
@drpicox

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 @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

@drpicox
A
B
A
B
C
No circles!
Low Coupling: minimitza qui coneix a qui
• Crea direcció:A coneix B, però B no pot conèixer A 
Coneix
52

53 @drpicox
Son el patró més bàsic a seguir,
la majoria de patrons provenen d’ells,
ﬁns i tot el ModelView Controller.
High Cohesion & Low Coupling

DEEPER CODE
Persistence Controller: remote data accesses (v1)
userService = {
get: function() {
return http.get(‘/user’);
},
save: function(user) {
},
};
56 @drpicox
Simple get and save, of
data.

DEEPER CODE
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.

DEEPER CODE
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)

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 interﬁcie.
For AngularJS programmers: la vista es de fet $scope.

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

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 :-)

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

DEEPER CODE
View:AngularJS version
<form ng-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

USER GROUPS / COMUNITATS
64
@drpicox

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

• Part d’aquesta mateixa presentació va estar al grup de Javascript
➡ M’han ajudat a reﬁnar 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

• 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 ﬁltra i repel·leix dolentes i es queda amb les bones que es propaguen
amb rapidesa
67
@drpicox

• Evolució tecnologia
➡ Possiblement gràcies a les comunitats la tecnologia Javascript mai havia avançat tant
ni tant ràpidament
68
@drpicox

ARA ÉS LAVOSTRA
• Preguntes?
• Quins plans teniu?
• Ja coneixeu la vostra comunitat?
70
@drpicox

Freelance i Enginyeria

Recommandé

Recommandé

Contenu connexe

Similaire à Freelance i Enginyeria

Similaire à Freelance i Enginyeria (12)

Plus de David Rodenas

Plus de David Rodenas (20)

Freelance i Enginyeria