FREELANCE I ENGINYERIA by David Ródenas 1
FREELANCE I ENGINYERIAby David Ródenas
1
QUI SOC?
2 @drpicox
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?
6 @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
¿QUE VOL DIR SER FREELANCE?
8 @drpicox
QUE VOL DIR SER FREELANCE?
• 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
QUE VOL DIR SER FREELANCE?• 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
QUE VOL DIR SER FREELANCE?
• 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
QUE VOL DIR SER FREELANCE?• 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
QUE VOL DIR SER FREELANCE?
• 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
UN NOU MON
14 @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 fins i tot meetup
17 @drpicox
JAVASCRIPT
18 @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?
remote.get(‘/api/books’, function(books) { view.books = books; view.update();});
view.books = remote.get(‘/api/books’);view.update();
VS
25 @drpicox
JAVASCRIPT
• Callbacksremote.get(‘/api/books’, function(books) { view.books = books; view.update();});
• Promisesvar books = remote.get(‘/api/books’);books.then(function(books) { view.books = books; view.update();});
26 @drpicox
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();});
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 configurable i reutilitzable
32 @drpicox
MODEL VIEW CONTROLLER
• “Descobert” durant el 2014 al Desigual
33 @drpicox
MODEL VIEW CONTROLLER
34 @drpicox
arbreamb pomes
http://clipart.nicubunu.ro
MODEL VIEW CONTROLLER
35 @drpicox
Models
ViewsControllers
MODEL VIEW CONTROLLER
Model: pràcticament son dades
user = { id: ‘123’, name: ‘John’, surname: ‘Smith’, fullName: function() { return this.name+‘ ’+this.surname; }, ...};
36 @drpicox
MODEL VIEW 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
MODEL VIEW CONTROLLER
Model: no coneix Vistes ni Controladors(es observat: callbacks, dirtycheck, ...)
user.addObserver(userFormView)
ex: buscar Observer pattern38 @drpicox
MODEL VIEW CONTROLLER
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
MODEL VIEW CONTROLLER
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
MODEL VIEW CONTROLLER
View: + una miqueta de JSuserFormView = { setUser: function(user) { user.addObserver(this); this.user = user; this.update(); }, update: function() { this.form.name = user.name; this.form.surname = surname; }, ...}; 41 @drpicox
MODEL VIEW CONTROLLER
View: no coneix els Controladors(es usat amb: callbacks, interfaces, ...)
userFormView.onSubmit(controller.save)// ull viu: controller.save pot ser una funció
42 @drpicox
MODEL VIEW CONTROLLER
Controller : és pràcticament la restauser = http.get(‘/user’);userFormView = new UserFormView();userFormView.setUser(user);userFormView.onSubmit(function() { http.post(‘/user’, user);});viewport.setView(userFormView);
43 @drpicox
MODEL VIEW CONTROLLER
user = http.get(‘/user’);userFormView = new UserFormView();userFormView.setUser(user);userFormView.onSubmit(function() { http.post(‘/user’, user);});viewport.setView(userFormView);
Be Careful!
Persistence/ServiceController
carrega i desa dades (potser usa patró identity map)44 @drpicox
Controller : és pràcticament la resta
MODEL VIEW CONTROLLER
user = http.get(‘/user’);userFormView = new UserFormView();userFormView.setUser(user);userFormView.onSubmit(function() { http.post(‘/user’, user);});viewport.setView(userFormView);
Be Careful!
RouteController
ex: http://localhost:8080/#/user45 @drpicox
Controller : és pràcticament la resta
MODEL VIEW CONTROLLER
user = http.get(‘/user’);userFormView = new UserFormView();userFormView.setUser(user);userFormView.onSubmit(function() { http.post(‘/user’, user);});viewport.setView(userFormView);
Be Careful!
ViewController
manega una vista específica46 @drpicox
Controller : és pràcticament la resta
MODEL VIEW CONTROLLER
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
MODEL VIEW CONTROLLER
MVC NO és una moda!
, or Model View Adapter, or Model View ViewModel, or Model View 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,
• ...
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 ViewControllers
ServiceControllers
ConeixA
B
COMMON SENSE PATTERNS
@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
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 Model View Controller.
High Cohesion & Low Coupling
54
DEEPER CODE
55
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.
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.
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)
DEEPER CODE
View Controller : dona vida a la vistafunction 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.
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 of Things, Gaming, …
65 @drpicox
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
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
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
ARA ÉS LA VOSTRA
69 @drpicox
ARA ÉS LA VOSTRA
• Preguntes?
• Quins plans teniu?
• Ja coneixeu la vostra comunitat?
70 @drpicox