Freelance i Enginyeria

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


• 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


• 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?


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


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


34 @drpicox

arbreamb pomes

http://clipart.nicubunu.ro

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 coneix Vistes ni Controladors(es observat: callbacks, dirtycheck, ...)

user.addObserver(userFormView)

ex: buscar Observer pattern38 @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 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


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 restauser = http.get(‘/user’);userFormView = new UserFormView();userFormView.setUser(user);userFormView.onSubmit(function() { http.post(‘/user’, user);});viewport.setView(userFormView);

43 @drpicox


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



Be Careful!

RouteController

ex: http://localhost:8080/#/user45 @drpicox




Be Careful!

ViewController

manega una vista específica46 @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 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,

• ...


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


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

fins i tot el Model View Controller.

High Cohesion & Low Coupling

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


• 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


• 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


• 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

Freelance i Enginyeria

Software

Transcript of Freelance i Enginyeria