Desenv. front-end avançat Codi:  M4.256    Crèdits:  6
Consulta de les dades generals   Descripció   L'assignatura en el conjunt del pla d'estudis   Camps professionals en què es projecta   Coneixements previs   Informació prèvia a la matrícula   Objectius i competències   Continguts   Consulta dels recursos d'aprenentatge de què disposa l'assignatura   Recursos d'aprenentatge i eines de suport   Bibliografia i fonts d'informació   Metodologia   Consulta del model d'avaluació   Avaluació continuada   Avaluació final   Feedback  
Aquest és el pla docent de l'assignatura. Us servirà per planificar la matrícula (consulteu si l'assignatura s'ofereix aquest semestre a l'espai del Campus Més UOC / La Universitat / Plans d'estudis). Un cop comenci la docència, heu de consultar-lo a l'aula. El pla docent pot estar subjecte a canvis.

L'assignatura en la que ens trobem, Desenvolupament front-end avançat, és una continuació de l'assignatura Desenvolupament front-end amb frameworks JavaScript del Màster universitari de Desenvolupament de Llocs i Aplicacions Web.

Si bé en aquesta assignatura prèvia es van treballar les bases del desenvolupament a nivell de front-end amb el framework Angular, treballant conceptes com el llenguatge de programació TypeScript, l'estàndard de programació ECMAScript 6, i aspectes més propis del framework Angular com ara treballar amb formularis, serveis i rutes, en aquesta assignatura en la que ens trobem, aprofundirem alguns d'aquests conceptes i en presentarem diversos de nous.

En una part inicial, treballarem amb els formularis reactius, i d'aquesta manera tindrem les eines necessàries per tal que l'usuari pugui inserir dades a l'aplicació i tingui una resposta adient. L'objectiu serà que la interacció de l'usuari amb la nostra aplicació sigui fluïda i el més fàcil possible.

Posteriorment, en un segon bloc força extens, estudiarem la programació reactiva i introduirem un patró de disseny molt interessant anomenat Redux que ens permetrà gestionar les dades de l'aplicació d'una manera eficient i des d'un punt de vista d'estats. Si bé és un patró de disseny que afegeix complexitat a la nostra implementació i està més pensat per a plataformes de certa complexitat, nosaltres aplicarem aquest patró a l'aplicació que anirem desenvolupant durant el curs per assolir el coneixements necessaris i entendre el seu funcionament.

Finalment, tindrem diversos blocs més concentrats on treballarem des de temes de maquetació, testos i desplegaments, com temes de refactoring. També treballarem un concepte molt important i molt present actualment que és com transformar una aplicació web a una PWA ( Progressive Web App ). Aprofundirem amb aquesta tecnologia al seu moment.

A nivell general, podem dir que aquesta assignatura conté un temari força extens i complex però un cop estudiat, ens permetrà tindre un coneixement complet de tot el que implica el desenvolupament de la part de front-end, tot utilitzant el framework Angular.

Hem de pensar que a dia d'avui, el mercat laboral té molta demanda de desenvolupadors tant de front-end com de back-end, i en el nostre cas, dintre del desenvolupament front-end el framewok Angular està molt demandat. A més, Angular al ser un framework tant complet, ens permetria en un moment donat, si tinguéssim que utilitzar algun altre framework com ara React o Vue, que el procés d'aprenentatge d'aquests altres frameworks fos relativament senzill.

Ja per acabar, també podem comentar que conceptes com aplicacions PWA o desplegaments amb Docker són aspectes molt interessants i demandats i dintre d'aquesta assignatura els treballarem per assolir els coneixements mínims necessaris.

Amunt

En el màster de Desenvolupament de Llocs i Aplicacions Web, aquesta assignatura ha de cursar-se després d'haver realitzat l'assignatura Desenvolupament front-end amb frameworks Javascript.

Amunt

Aquest curs forma a professionals en el desenvolupament web del costat client o front-end.

Amunt

Per a aquest curs és imprescindible tenir coneixements d'Angular, estudiat en l'assignatura Desenvolupament front-end amb frameworks Javascript.

Amunt

És imprescindible haver superat l'assignatura Desenvolupament front-end amb frameworks Javascript.

Amunt

L'objectiu principal d'aquesta assignatura és dotar als estudiants de les competències bàsiques necessàries per tal que puguin implementar el cicle complert d'un desenvolupament d'una web app amb el framework Angular, des de l'inici fins al final, és a dir, des de l'anàlisi, la implementació, les proves i el desplegament.

Això implica que l'estudiant assolirà les capacitats següents:

  • Capacitat per implementar formularis reactius que permetin una interacció fluïda de l'usuari amb l'aplicació.
  • Capacitat per implementar i aplicar la programació reactiva.
  • Capacitat per dotar d'un aspecte visual professional la nostra aplicació web.
  • Capacitat per assegurar la qualitat de les implementacions mitjançant jocs de proves automatitzats.
  • Capacitat de transformar una aplicació web a una PWA i dotar-la d'una imatge corporativa, que sigui instal·lable tant a escriptori com a dispositius mòbils, i que funcioni sense connexió a internet.
  • Conèixer el concepte de Angular Universal, capacitat per aplicar-lo i entendre les implicacions que té amb SEO i amb el rendiment.
  • Capacitat per refactoritzar una aplicació.
  • Entendre com es generen els paquets entregables d'una aplicació Angular, com es pot desplegar en un entorn local per fer proves i com es desplegaria amb Docker.

De manera més transversal:

  • Capacitat d'anàlisi de requeriments i implementació en conseqüència.
  • Capacitat per implementar tot el cicle de desenvolupament d'una aplicació web de la part front-end des de l'anàlisi, la implementació, les proves i el desplegament.
  • Capacitat per buscar la solució més òptima.
  • Capacitat per aplicar els patrons de disseny adients.
  • Visió més enllà del propi requeriment, pensar en tasques futures per intentar implementar un codi escalable, modulable i ben parametritzat.

Amunt

Aquesta assignatura s'organitza en 8 temes ben diferenciats, a continuació els enumerem:

1. Programació Reactiva: Formularis reactius
2. Programació Reactiva utilitzant RxJS + Patró Redux (NgRx)
3. Maquetació: Angular Material
4. Proves
5. Progressive Web Apps (PWA)
6. Angular Universal (SEU)
7.  Desplegant una aplicació frontend
8. Refactoring

Amunt

Tots els recursos necessaris per la correcta realització d'aquesta assignatura estaran als propis enunciats de les pràctiques.

Concretament, cada enunciat de cada pràctica estarà dividit en dues parts.

Una primera part serà la teoria necessària per desenvolupar les tasques que s'hauran d'entregar. Aquesta part teòrica pot ser un conjunt d'informació de recursos extrets d'internet amb la corresponent bibliografia i/o redaccions pròpies dels professors.

Per posar un exemple concret, la primera pràctica tindrà una primer part on s'explicaran que són els formularis reactius, després hi haurà un exemple guiat de com implementar un formulari reactiu tot implementant una pantalla d'autenticació senzilla, es proposarà que per practicar amplieu algun aspecte com ara afegir algun camp, simplement per practicar, i llavors ja sí que a la segona part ens trobaríem l'enunciat del que s'ha d'entregar i és avaluable.

Per tant, tots els recursos teòrics i pràctics que els alumnes necessiten per tal de desenvolupar l'assignatura estaran a les pròpies pràctiques.

També via els fòrums de l'aula intentarem anar compartint recursos que ens semblin interessants com a lectures complementaries, com ara explicació d'algun patró de disseny, alguna noticia d'actualitat interessant relacionada amb el temari, ...

Amunt

Tota la bibliografia i les fonts d'informació estaran detallades als propis enunciats de les diferents pràctiques de l'assignatura.

Amunt

Aquesta assignatura treballa de manera conjunta la part teòrica i pràctica. El fil conductor de l'assignatura són les 6 Proves d'Avaluació Contínua (PAC). Cada PAC conté, a més dels enunciats del que l'estudiant ha de lliurar, una guia que explica la teoria necessària per dur a terme la PAC i/o enllaços a recursos que ajuden a la seva comprensió.

L'assignatura està formada per 6 Proves d'Avaluació Contínua (PACs) que serveixen per controlar, tant per part del professor col·laborador com pel mateix estudiant, el progrés en l'assignatura. L'avaluació d'aquestes 6 PACs donen com resultat la nota final d'Avaluació Contínua (AC) que alhora es correspon amb la nota final de l'assignatura.

Les PACs seran publicades a l'aula segons les dates previsats al calendari (veure l'apartat "Dates clau" d'aquest Pla Docent).

Amunt

Aquesta assignatura només es pot superar a partir de l'avaluació contínua (AC). La nota final d'avaluació contínua esdevé la nota final de l'assignatura. La fórmula d'acreditació de l'assignatura és la següent: AC.


Ponderació de les qualificacions

Opció per superar l'assignatura: AC

Nota final d'assignatura: AC

Amunt

L'avaluació continuada (AC) està composta de 6 Proves d'Avaluació Continuada (PACs), que es realitzaran al llarg del semestre.

La nota final d'AC (i de l'assignatura) serà la mitjana ponderada de les 6 PACs, tenint en compte que una PAC no lliurada es comptabilitzarà com una D = 0.

Per obtenir una qualificació final d'AC cal lliurar, com a mínim, el 50% de les PACs. En cas contrari, la qualificació de l'AC (i de l'assignatura) serà No Presentat (N).

A més, a la nota final d'AC es valorarà també la participació de l'estudiant al fòrum de l'aula.

Les dates de publicació d'enunciats i de lliurament de les PAC les podeu trobar a l'apartat de 'Planificació' d'aquest pla docent.

És important tenir clar que el seguiment correcte de l'assignatura us compromet a realitzar les activitats proposades (PACs) de manera individual i segons les indicacions que pauta aquest Pla Docent. En cas que no sigui així, les activitats s'avaluaran amb una D (=0). En concret, en cas d'extrema similitud entre algun exercici d'alguna PAC de dos o més estudiants que desacrediti el fet d'haver-la realitzat individualment, la nota final d'AC serà un 0 per tots ells.

D'altra banda, i sempre a criteri dels Estudis, l'incompliment d'aquest compromís pot suposar que no se us permeti superar cap altra assignatura mitjançant avaluació continuada ni en el semestre en curs ni en els següents.

La ponderació de les diferents PACs és la següent:

Prova d'avaluació continua: PONDERACIÓ
1. Programació Reactiva: Forms 15%
2. Programació Reactiva usant RxJS + Patron Redux (NgRx) 25%
3. Maquetació: Angular Material 15%
4. Proves 15%
5. Progressive Web Apps (PWA), Angular Universal (SEU), Desplegant una aplicació frontend
15%
6. Refactoring: Lliurament final 15%

La PAC 6 consisteix en la refactorització de l'aplicació completa. Al llarg de l'assignatura s'aniran realitzant lliuraments de les diferents PACs d'un projecte de gran abast el qual pot ser modificat al llarg de l'assignatura en el procés de refactorització, sobretot després del tema 4 - Proves. 

És a dir, que es podran realitzar modificacions del codi lliurat en les PACs, el qual serà tingut en compte en la PAC 6, en el qual es tindrà en compte el projecte finalitzat.

Amunt

Per a cadascuna de les activitats d'avaluació del curs (PACs), el professor docent col·laborador donarà un feedback personalitzat a cada estudiant.

Amunt

Per a cadascuna de les activitats d'avaluació del curs (PACs), el professor docent col·laborador donarà un feedback personalitzat a cada estudiant.

Amunt