Syllabus del corso
Obiettivi
Il corso fornisce le conoscenze fondamentali per l’analisi, la progettazione e lo sviluppo di applicazioni Web moderne, con particolare attenzione all’interazione tra client e servizi Web.
Al termine del corso lo studente conoscerà i principi architetturali del Web, le tecnologie alla base dello sviluppo front-end e i meccanismi di comunicazione con servizi distribuiti. Aquisirà competenze per progettare e sviluppare interfacce Web interattive, integrare applicazioni client con API Web e utilizzare strumenti moderni per lo sviluppo, il testing e il debugging.
Le competenze acquisite consentiranno allo studente di partecipare allo sviluppo di applicazioni Web distribuite, stimolando la comprensione per acquisire autonomia di giudizio sia degli aspetti progettuali sia di quelli implementativi.
Contenuti sintetici
Il corso introduce i principi di progettazione delle applicazioni Web basate su architetture client-server e orientate ai servizi. Vengono analizzate le tecnologie fondamentali del Web, i modelli di interazione tra browser e server e le tecniche per la realizzazione di interfacce utente dinamiche.
Una parte significativa del corso è dedicata alle attività di laboratorio, durante le quali gli studenti svilupperanno applicazioni Web utilizzando HTML5, CSS3 e JavaScript/React, integrando servizi Web tramite API HTTP e formati di scambio dati JSON. Saranno inoltre introdotti Node.js e il framework Express. Si faranno cenni di ambienti di sviluppo e strumenti per il debugging, il testing e la gestione dei progetti.
Programma esteso
- Architettura delle applicazioni Web: evoluzione del Web; architettura client-server; protocollo HTTP; principi delle API REST; Single Page Applications (SPA); Web API.
- Tecnologie fondamentali del Web: HTML5; CSS3; JavaScript moderno (ES6+); moduli JavaScript; formato JSON.
- Programmazione lato client: Document Object Model (DOM); gestione degli eventi; programmazione asincrona con Promise e async/await; Fetch API; comunicazione con servizi REST.
- Sviluppo di applicazioni Web con React: architettura basata su componenti; JSX; rendering dichiarativo; props; composizione di componenti; state management; Hooks; gestione di form ed eventi; effetti collaterali; Context API (introduzione).
- Progettazione di applicazioni React: routing; integrazione con servizi REST; gestione degli errori; autenticazione (concetti); organizzazione e strutturazione delle applicazioni.
- Strumenti di sviluppo e distribuzione: Node.js; Express; Vite; strumenti di debugging; testing; sicurezza lato client; build e deployment.
Prerequisiti
Conoscenza e competenze di programmazione in java o C++, reti di calcolatori, e sistemi distribuiti.
Modalità didattica
Il corso si svolge prevalentemente in presenza.
L’insegnamento prevede differenti modalità didattiche:
Didattica Erogativa (DE): lezioni frontali dedicate alla presentazione dei principi, dei modelli e delle tecnologie per la progettazione e lo sviluppo di moderne applicazioni Web. Durante le lezioni vengono introdotti i principali linguaggi, framework, strumenti di sviluppo e metodologie utilizzati nella realizzazione di applicazioni Web.
Didattica Interattiva (DI): esercitazioni e attività di laboratorio finalizzate alla progettazione, allo sviluppo e al testing di applicazioni Web. Attraverso lo sviluppo incrementale di una o più applicazioni Web, gli studenti applicano i concetti illustrati durante le lezioni, affrontando le principali fasi del processo di sviluppo software: analisi dei requisiti, progettazione, implementazione, integrazione con Web API, testing e debugging.
Didattica Interattiva (DI): attività di supporto all’apprendimento attraverso la piattaforma e-learning, che mette a disposizione materiale didattico, esempi di codice, esercizi, forum di discussione e ulteriori risorse di approfondimento, favorendo l’apprendimento collaborativo e l’approfondimento autonomo degli argomenti trattati.
Parte del materiale didattico è inoltre resa disponibile in formato audiovisivo attraverso la piattaforma e-learning, nel rispetto delle linee guida di Ateneo.
Lingua di insegnamento: Italiano.
Materiale didattico
Non è previsto un unico testo di riferimento.
Il materiale didattico comprende dispense, slide delle lezioni, esempi di codice, documentazione tecnica, tutorial e ulteriori risorse di approfondimento, che saranno resi disponibili o indicati attraverso la piattaforma e-learning dell’insegnamento.
La documentazione ufficiale dei linguaggi, delle tecnologie, dei framework e degli strumenti utilizzati durante il corso costituisce parte integrante del materiale di studio e sarà opportunamente segnalata nel corso delle lezioni.
Periodo di erogazione dell'insegnamento
Secondo Semestre
Modalità di verifica del profitto e valutazione
L’apprendimento è verificato mediante una prova scritta, eventualmente integrata da una prova orale a discrezione del docente. Durante il semestre potranno inoltre essere previste prove in itinere, il cui superamento potrà sostituire, in tutto o in parte, la prova scritta finale secondo modalità che saranno comunicate all’inizio del corso.
La prova scritta è finalizzata ad accertare il raggiungimento degli obiettivi formativi dell’insegnamento e comprende quesiti teorici, esercizi di progettazione e sviluppo di applicazioni Web e problemi relativi agli argomenti trattati durante il corso.
Le attività di laboratorio prevedono lo sviluppo di applicazioni Web e la realizzazione di esercitazioni pratiche, che consentono allo studente di consolidare le competenze acquisite. Le esercitazioni di laboratorio potranno concorrere alla valutazione finale con un punteggio aggiuntivo fino a 2 punti.
È inoltre previsto un progetto facoltativo, individuale o di gruppo, volto all’approfondimento di specifici argomenti del corso. Il progetto potrà contribuire alla valutazione finale con un punteggio aggiuntivo fino a 4 punti.
La valutazione tiene conto della correttezza delle soluzioni proposte, della capacità di applicare le conoscenze acquisite alla progettazione e allo sviluppo di applicazioni Web, della qualità del codice prodotto, dell’utilizzo appropriato delle tecnologie e degli strumenti illustrati durante il corso, nonché della chiarezza espositiva e della capacità di motivare le scelte progettuali.
Il voto finale è espresso in trentesimi ed è determinato dalla valutazione della prova scritta (o delle prove in itinere), eventualmente integrata dalla prova orale e dagli eventuali punti aggiuntivi conseguiti nelle attività di laboratorio e nel progetto facoltativo.
Orario di ricevimento
prof. De Paoli: Mercoledì dalle 10:00 alle 12:00 o su appuntamento scrivendo a flavio.depaoli@unimib.it
Domande e discussioni sugli argomenti dell'insegnamento possono essere fatte utilizzando i forum presenti in elearning.
Aims
The course provides the fundamental knowledge required for the analysis, design, and development of modern Web applications, with particular emphasis on the interaction between client-side applications and Web services.
By the end of the course, students will understand the architectural principles of the Web, the core technologies underlying front-end development, and the mechanisms used to communicate with distributed Web services. They will acquire the skills needed to design and develop interactive Web interfaces, integrate client applications with Web APIs, and use modern tools for development, testing, and debugging.
The acquired competencies will enable students to contribute to the development of distributed Web applications, fostering a solid understanding of both design and implementation aspects and promoting independent judgment in making architectural and implementation decisions.
Contents
The course introduces the principles of designing Web applications based on client-server and service-oriented architectures. It covers the fundamental technologies of the Web, the interaction models between browsers and servers, and the techniques used to develop dynamic user interfaces.
A significant part of the course is devoted to laboratory activities, during which students will develop Web applications using HTML5, CSS3, and JavaScript/React, integrating Web services through HTTP APIs and JSON data exchange formats. The course also introduces Node.js and the Express framework, as well as development environments and tools for debugging, testing, and project management.
Detailed program
- Web Application Architecture: evolution of the Web; client-server architecture; HTTP protocol; REST API principles; Single Page Applications (SPAs); Web APIs.
- Core Web Technologies: HTML5; CSS3; modern JavaScript (ES6+); JavaScript modules; JSON data format.
- Client-Side Programming: Document Object Model (DOM); event handling; asynchronous programming with Promises and async/await; Fetch API; communication with RESTful services.
- Web Application Development with React: component-based architecture; JSX; declarative rendering; props; component composition; state management; Hooks; forms and event handling; side effects; introduction to the Context API.
- React Application Design: client-side routing; integration with RESTful services; error handling; authentication concepts; application organization and architecture.
- Development and Deployment Tools: Node.js; Express; Vite; debugging tools; testing; client-side security; build and deployment.
Prerequisites
Basic knowledge of programming in Java or C++, computer networks, and distributed systems is recommended.
Teaching form
The course is delivered primarily through in-person classes.
The teaching activities include different instructional approaches:
Lectures (Direct Teaching – DE): classroom lectures introducing the principles, models, and technologies for the design and development of modern Web applications. The lectures cover the main programming languages, frameworks, development tools, and methodologies used in Web application development.
Interactive Teaching (DI): hands-on laboratory sessions and practical exercises focused on the design, development, and testing of Web applications. Through the incremental development of one or more Web applications, students apply the concepts presented during the lectures, addressing the main phases of the software development process, including requirements analysis, design, implementation, Web API integration, testing, and debugging.
Interactive Teaching (DI): learning support activities delivered through the e-learning platform, which provides lecture materials, code examples, exercises, discussion forums, and additional learning resources, fostering collaborative learning and independent study.
Part of the teaching material is also made available in audiovisual format through the e-learning platform, in accordance with the University guidelines.
Language of instruction: Italian
Textbook and teaching resource
There is no single required textbook for the course.
The teaching material includes lecture notes, lecture slides, code examples, technical documentation, tutorials, and additional learning resources, which will be made available or referenced through the course e-learning platform.
The official documentation of the programming languages, technologies, frameworks, and development tools used during the course is considered an integral part of the study material and will be appropriately referenced throughout the lectures.
Semester
Second semester
Assessment method
Student learning is assessed through a written examination, which may be complemented by an oral examination at the instructor’s discretion. During the semester, mid-term assessments may also be offered. Successfully completing these assessments may replace all or part of the final written examination, according to the procedures communicated at the beginning of the course.
The written examination is designed to assess the achievement of the course learning objectives and includes theoretical questions, Web application design and development exercises, and problem-solving tasks covering the topics addressed during the course.
Laboratory activities involve the development of Web applications and practical programming assignments, allowing students to consolidate the knowledge and skills acquired during the course. Laboratory assignments may contribute up to 2 bonus points toward the final grade.
An optional individual or group project is also available, allowing students to further explore selected course topics. The project may contribute up to 4 bonus points toward the final grade.
Assessment is based on the correctness of the proposed solutions, the ability to apply the acquired knowledge to the design and development of Web applications, the quality of the produced code, the appropriate use of the technologies and development tools presented during the course, as well as the clarity of the presentation and the ability to justify design decisions.
The final grade is expressed on a 30-point scale and is determined by the written examination (or the mid-term assessments), possibly complemented by the oral examination and any bonus points obtained through laboratory activities and the optional project.
Office hours
prof. De Paoli: Wednesday from 10:00 to 12:00 or by appointment by writing to flavio.depaoli@unimib.it
Questions and discussions on teaching topics can be posed using the forums in e-learning.
Staff
-
Flavio Maria De Paoli
-
Giuseppe Vizzari