Angular 4 - convertire o migrare un'applicazione AngularjsGiovanni Buffa
Seminario renuto all'IRES di Udine sulla migrazione, attraverso UpgradeModule, o la riscrittura di un'applicazione AngularJs in una applicazione Angular 2/4
Angular js o React? Spunti e idee per la scelta di un frameworkGiovanni Buffa
Come poter scegliere un framework da utilizzare in un progetto per una web applications? Durante questo workshop analizzeremo le parti fondamentali di AngularJs e React, in modo da capire pregi e difetti di ognungo dei due principali strumenti di sviluppo.
Introduzioni all'uso dei preprocessori Sass e Less per la stesura di un foglio di stile CSS intelligente
Autore: Valerio Radice - valix85
Data: Giugno 2017
Angular 4 - convertire o migrare un'applicazione AngularjsGiovanni Buffa
Seminario renuto all'IRES di Udine sulla migrazione, attraverso UpgradeModule, o la riscrittura di un'applicazione AngularJs in una applicazione Angular 2/4
Angular js o React? Spunti e idee per la scelta di un frameworkGiovanni Buffa
Come poter scegliere un framework da utilizzare in un progetto per una web applications? Durante questo workshop analizzeremo le parti fondamentali di AngularJs e React, in modo da capire pregi e difetti di ognungo dei due principali strumenti di sviluppo.
Introduzioni all'uso dei preprocessori Sass e Less per la stesura di un foglio di stile CSS intelligente
Autore: Valerio Radice - valix85
Data: Giugno 2017
ASP.NET 4.6 e ASP.NET 5...l'evoluzione del webAndrea Dottor
Una sessione alla scoperta delle grandi novità che ASP.NET 5 introduce. Questo nuovo aggiornamento del framework non porta solo un'evoluzione alla tecnologia che già conosciamo, ma porta importanti e radicali cambiamenti (una "rivoluzione" di molte cose che già conosciamo e utilizziamo) che dobbiamo essere pronti a sfruttare il prima possibile per dare una marcia in più alle nostre applicazioni. ASP.NET MVC 6, nuovo template di progetto, cross-platform.
Una panoramica delle caratteristiche e delle possibilità che hanno reso Angular uno dei framework più importanti sulla scena frontend.
N.B. Le slides sono aggiornate sino ad Angular 6.
Prepariamoci al cambiamento. ASP.NET MVC e ASP.NET Web API saranno unificati in un unico framework chiamato ASP.NET MVC 6, e questo è solo la prima di una serie di novità che stanno per arrivare.
Tutto si semplifica. Le performance migliorano. Un altro salto tecnologico in avanti portato da ASP.NET 5.
In questa sessione, infatti, vedremo tutte le novità che ASP.NET MVC 6 porta con se, e cercheremo di andare in dettaglio in modo da capire cosa voglia dire realizzare (da zero) o migrare (un'applicazione essitente) a questa nuova versione
Lavorare con applicazioni Brownfield: il caso di 39x27.comSimone Chiaretta
La maggior parte dei progetti software sono progetti legacy. Anche progetti nuovi possono essere considerati legacy se non pensati correttamente. In questa sessione vedremo gli step per portare un progetto legacy verso un progetto facile da manutenere, testare ed estendere.
E lo faremo usando come caso reale 39x27.com, un sito per il tracking di salite in bicicletta.
Slide della presentazione tenuta il 23 Gennaio 2010 alla 5° UGIALT.NET Conference.
What's New in ASP.NET 4.5 and Visual Studio 2012Andrea Dottor
Slide e codice lo potete trovare a questo link:
http://blog.dottor.net/post/2012/09/18/Codice-e-slide-della-sessione-Whats-New-in-ASPNET-45-and-Visual-Studio-2012.aspx
Il Microsoft .NET Framework è in continua evoluzione, e con la prossima versione verranno rilasciate interessanti funzionalità riguardanti ASP.NET.All'interno di questa sessione conosceremo tutte queste novità, ed andremo invece più in dettaglio in alcune di esse, permettendo a chi conosce già ASP.NET di poter essere più produttivo (Strongly Typed Data Controls, Model Binding, Asynchronous, WebSocket, ... ), mentre, per chi invece non ha molta esperienza con questa tecnologia, potrà vedere come i nuovi template di progetto e Visual Studio 2012 potranno aiutarlo ad approcciare correttamente queste tipologie di applicazioni.
Realizzare applicazioni cross-platform con Xamarin e il pattern MVVMCodemotion
"Realizzare applicazioni cross-platform con Xamarin e il pattern MVVM" by Matteo Pagani.
Xamarin è una delle tecnologie più interessanti quando si parla di sviluppo cross-platform, in quanto permette di riutilizzare le proprie conoscenze di C# per realizzare applicazioni con le stesse feature e performance di un'applicazione nativa. Usare Xamarin, però, non significa solamente poter realizzare app Android e iOS in C#, ma anche e soprattutto non dover scrivere e mantenere codebase completamente diverse. In questa sessione vedremo come poter massimizzare il riutilizzo di codice tra le diverse versioni della nostra applicazioni, aiutandoci con il pattern MVVM.
Dependency injection questa sconosciutaAndrea Dottor
L'uscita di ASP.NET Core ha portato a una maggiore diffusione dell'utilizzo della DI (Dependency Injection) ma spesso senza che lo sviluppatore sappia la sua reale utilità o potenzialità.
Dependency Injection, uno dei design pattern della programmazione OOP. Una best-practice dello sviluppo che può portare alla semplificazione del codice scritto, facilitare il disacoppiamento, e migliorare la testabilità.
In questa sessione vedremo cos'è la DI e come utilizzarla intelligentemente all'interno dei nostri progetti.
Slide dell'evento "XE One Day - Good code" tenuto il 15.09.2018.
Il codice è disponibile alla pagina dell'evento https://www.xedotnet.org/eventi/one-day-good-code/
Come portare il profiler di symfony2 in drupal8Luca Lusso
Molti progetti PHP open source hanno adottato Symfony2 come base per la loro prossima versione, tra questi c'è anche il CMS Drupal (http://drupal.org). In questo talk vedremo come scrivere un modulo per Drupal8 in modo da sfruttare il più possibile il suo nuovo motore Symfony2, dall'integrazione con il service container alla gestione degli eventi, dal routing a Twig. Verrà usato come esempio il modulo webprofiler (http://drupal.org/project/webprofiler) per dimostrare come un bundle per Symfony2 possa essere trasformato in un modulo per Drupal8 e integrato facilmente nel sistema.
ASP.NET 4.6 e ASP.NET 5...l'evoluzione del webAndrea Dottor
Una sessione alla scoperta delle grandi novità che ASP.NET 5 introduce. Questo nuovo aggiornamento del framework non porta solo un'evoluzione alla tecnologia che già conosciamo, ma porta importanti e radicali cambiamenti (una "rivoluzione" di molte cose che già conosciamo e utilizziamo) che dobbiamo essere pronti a sfruttare il prima possibile per dare una marcia in più alle nostre applicazioni. ASP.NET MVC 6, nuovo template di progetto, cross-platform.
Una panoramica delle caratteristiche e delle possibilità che hanno reso Angular uno dei framework più importanti sulla scena frontend.
N.B. Le slides sono aggiornate sino ad Angular 6.
Prepariamoci al cambiamento. ASP.NET MVC e ASP.NET Web API saranno unificati in un unico framework chiamato ASP.NET MVC 6, e questo è solo la prima di una serie di novità che stanno per arrivare.
Tutto si semplifica. Le performance migliorano. Un altro salto tecnologico in avanti portato da ASP.NET 5.
In questa sessione, infatti, vedremo tutte le novità che ASP.NET MVC 6 porta con se, e cercheremo di andare in dettaglio in modo da capire cosa voglia dire realizzare (da zero) o migrare (un'applicazione essitente) a questa nuova versione
Lavorare con applicazioni Brownfield: il caso di 39x27.comSimone Chiaretta
La maggior parte dei progetti software sono progetti legacy. Anche progetti nuovi possono essere considerati legacy se non pensati correttamente. In questa sessione vedremo gli step per portare un progetto legacy verso un progetto facile da manutenere, testare ed estendere.
E lo faremo usando come caso reale 39x27.com, un sito per il tracking di salite in bicicletta.
Slide della presentazione tenuta il 23 Gennaio 2010 alla 5° UGIALT.NET Conference.
What's New in ASP.NET 4.5 and Visual Studio 2012Andrea Dottor
Slide e codice lo potete trovare a questo link:
http://blog.dottor.net/post/2012/09/18/Codice-e-slide-della-sessione-Whats-New-in-ASPNET-45-and-Visual-Studio-2012.aspx
Il Microsoft .NET Framework è in continua evoluzione, e con la prossima versione verranno rilasciate interessanti funzionalità riguardanti ASP.NET.All'interno di questa sessione conosceremo tutte queste novità, ed andremo invece più in dettaglio in alcune di esse, permettendo a chi conosce già ASP.NET di poter essere più produttivo (Strongly Typed Data Controls, Model Binding, Asynchronous, WebSocket, ... ), mentre, per chi invece non ha molta esperienza con questa tecnologia, potrà vedere come i nuovi template di progetto e Visual Studio 2012 potranno aiutarlo ad approcciare correttamente queste tipologie di applicazioni.
Realizzare applicazioni cross-platform con Xamarin e il pattern MVVMCodemotion
"Realizzare applicazioni cross-platform con Xamarin e il pattern MVVM" by Matteo Pagani.
Xamarin è una delle tecnologie più interessanti quando si parla di sviluppo cross-platform, in quanto permette di riutilizzare le proprie conoscenze di C# per realizzare applicazioni con le stesse feature e performance di un'applicazione nativa. Usare Xamarin, però, non significa solamente poter realizzare app Android e iOS in C#, ma anche e soprattutto non dover scrivere e mantenere codebase completamente diverse. In questa sessione vedremo come poter massimizzare il riutilizzo di codice tra le diverse versioni della nostra applicazioni, aiutandoci con il pattern MVVM.
Dependency injection questa sconosciutaAndrea Dottor
L'uscita di ASP.NET Core ha portato a una maggiore diffusione dell'utilizzo della DI (Dependency Injection) ma spesso senza che lo sviluppatore sappia la sua reale utilità o potenzialità.
Dependency Injection, uno dei design pattern della programmazione OOP. Una best-practice dello sviluppo che può portare alla semplificazione del codice scritto, facilitare il disacoppiamento, e migliorare la testabilità.
In questa sessione vedremo cos'è la DI e come utilizzarla intelligentemente all'interno dei nostri progetti.
Slide dell'evento "XE One Day - Good code" tenuto il 15.09.2018.
Il codice è disponibile alla pagina dell'evento https://www.xedotnet.org/eventi/one-day-good-code/
Come portare il profiler di symfony2 in drupal8Luca Lusso
Molti progetti PHP open source hanno adottato Symfony2 come base per la loro prossima versione, tra questi c'è anche il CMS Drupal (http://drupal.org). In questo talk vedremo come scrivere un modulo per Drupal8 in modo da sfruttare il più possibile il suo nuovo motore Symfony2, dall'integrazione con il service container alla gestione degli eventi, dal routing a Twig. Verrà usato come esempio il modulo webprofiler (http://drupal.org/project/webprofiler) per dimostrare come un bundle per Symfony2 possa essere trasformato in un modulo per Drupal8 e integrato facilmente nel sistema.
Slide del decimo Meetup di Milano, che si è tenuto il 26 Gennaio dalle ore 10:30 alle ore 12:00 in formato virtuale.
Abbiamo parlato insieme a Davide Bonaciti di come ha realizzato un caso d'uso di automazione e CI/CD. Stefano Bernardini, Serena Galassi e Lorenzo Ornella, invece, ci parleranno di DataGraph e ci mostreranno una demo di implementazione per realizzare un'asta del fantacalcio 2.0.
Nel corso di quest’articolo vedremo come sia possibile sfruttare il Service Builder (Liferay Inc., 2014) per creare dei servizi da esporre all’esterno non direttamente collegati all’entità gestiste dallo specifico plugin.
Quello che vogliamo ottenere è quindi un servizio personalizzato chiamato Custom Users Service disponibile pubblicamente e che sfrutti i servizi core del portale. In questo particolare scenario vogliamo fare in modo che il servizio Custom Users Service, esponga un metodo che ritorni al consumer del servizio, la lista di utenti taggati con un determinato tag (Liferay Inc., 2014).
Workshop Ideare e creare Web Applications, Introduzione ad AngularJSGiovanni Buffa
Gli argomenti trattati durante il Workshop gratuito sull'ideazione e creazione di Web Applications con AngularJS:
- Metodologie innovative di ideazione e creazione di Web Applications;
- Sfide e problemi del lavoro in team;
- Introduzione ad AngularJS e alle sue componenti principali;
- Dimostrazione pratica di una WebApp
Developing for Performances - Laboratorio di Web Design 2014/15Giovanni Buffa
Developing for Permfances: quali sono le cose che veramente contano nella realizzazione di un sito internet. Come poter velocizzare il caricamento di un sito internet.
Introduction to SEO, based on the official document provided by Google: https://static.googleusercontent.com/media/www.google.com/it//intl/it/webmasters/docs/search-engine-optimization-starter-guide-it.pdf
Drupal is an open-source content management framework that allows users to create and manage websites and applications. It provides building blocks like modules that can be combined to create sites for purposes like news sites, online stores, social networks, blogs, and wikis. Content in Drupal is organized into nodes that are then structured and presented through various systems like menus, taxonomy, and views. This separation of content and presentation is similar to the separation of HTML and CSS. Drupal provides flexibility in customizing sites through its large library of contributed modules and ability to configure user permissions and themes.
Laboratorio di Web Design Base - 2014/15 - HTML/5Giovanni Buffa
All must used and usefull HTML and HTML5 tags. Thi presentation is used in my course "Laboratorio di Web Design Base" @ Centro Giovani di Monfalcone in 2014/15
2. in collaborazione conServices 2
È una classe Angular utilizzata per implementare funzionalità
indipendenti da una view specifica, o per fornire dati e logica
condivisi per più componenti.
I services vengono iniettati in altri componenti o servizi tramite
dependency injection.
3. in collaborazione conServices 3
La dependecy injection è un design pattern e un meccanismo
per la creazione e la distribuzione di parti di una applicazione
all'interno di altre parti che le richiedono.
4. in collaborazione conServices 4
Un componente potrebbe avere la necessità di utilizzare un
service per ottenere dei dati o per utilizzare delle funzioni.
Se un componente "A" si affida ad un altra entità "B", si dice
che "A" dipende da "B" e che "B" è una dipendenza di "A".
6. in collaborazione conServices
Solitamente, i services sono parti
di logica o dati che vengono
condivisi in più componenti.
È logico inserirli in una cartella
shared.
Non sempre, un service è
condiviso per l'intera
applicazione.
6
-src
--app
---shared
----...
7. in collaborazione conServices
Il nome del file deve rispecchiare
il seguente pattern:
service-name.service.ts
7
-src
--app
---shared
----logging.service.ts
9. in collaborazione conServices
providers
Il service, per poter essere
utilizzato, va prima definito
nell'array providers, all'interno
del decorator @Component
9
/* src/app/app.component.ts */
import { Component } from '@angular/
core';
import { LoggingService } from '../
shared/logging.service';
@Component({
providers:[LoggingService],
...
})
export class AppComponent {
}
10. in collaborazione conServices
Il service va poi iniettato, tramite
dependency injection, nel
componente tramite il suo
costruttore
10
/* src/app/app.component.ts */
import { Component } from '@angular/
core';
import { LoggingService } from '../
shared/logging.service';
@Component({
...
})
export class AppComponent {
constructor(private ls:
LoggingService) {}
}
11. in collaborazione conServices 11
La dependency injection in Angular è di tipo gerarchica: i figli del
componente nel quale viene iniettato il service riceveranno
automaticamente le funzionalità del servizio stesso.
12. in collaborazione conServices
Se ChildComponent è figlio di
AppComponent (dove è stato
iniettato il servizio) allora non è
necessario includerlo nell'array
providers
12
/* src/app/app.component.ts */
import { Component } from '@angular/
core';
import { LoggingService } from '../
shared/logging.service';
@Component({
...
})
export class ChildComponent {
constructor(private ls:
LoggingService) {}
}
15. in collaborazione conServices
@Injectable()
Il service, grazie ad @Injectable,
può ricevere, tramite dependency
injection, un altro service.
15
/* src/app/shared/logging.service.ts
*/
import { Injectable } from '@angular/
core';
import { OtherService } from '../
shared/other.service';
@Injecatable()
export class LoggingService {
constructor(private os:
OtherService) {}
}
17. in collaborazione conServices 17
Creare applicazioni moderne significa fare un passo avanti
anche sui concetti oramai consolidati in programmazione.
Con le attuali esigenze degli utenti, le applicazioni devono
essere sempre più reattive e, allo stesso tempo, essere leggere
da caricare ed eseguire.
18. in collaborazione conServices 18
Con queste problematiche è nata la programmazione reattiva
(Reactive Programming): un paradigma di programmazione
che, più che basarsi sugli oggetti, si basa su flussi di dati
(tipicamente asincroni) e sulla possibilità che più entità
possano "abbonarsi" (subscribe) a questi flussi.
20. in collaborazione conServices 20
A B C
1 4 90
2
3 A1 + B1
La cella C3 calcola automaticamente la somma quando uno dei due parametri cambia
La cella C3 osserva le modifiche di A1 e B1 ed esegue il calcolo se uno dei valori cambia
Le celle A1 e B1 notificano il proprio valore a tutti colori che sono in ascolto
24. in collaborazione conServices 24
È molto probabile che un'applicazione Angular, anche la più
semplice, necessiti di recuperare delle informazioni da un server
remoto.
Per poter utilizzare le richieste HTTP, Angular ci mette a
disposizione due servizi appositi: Http e HttpClient
25. in collaborazione conServices
Per poter utilizzare il servizio
Http è necessario includere il
modulo HttpModule
25
/* src/app/app.module.ts */
import { NgModule } from '@angular/
core';
import { HttpModule } from
'@angular/http';
@NgModule({
...
imports: [
BrowserModule,
HttpModule
],
...
})
26. in collaborazione conServices
Per poter utilizzare il servizio
HttpClient è necessario
includere il modulo
HttpClientModule
26
/* src/app/app.module.ts */
import { NgModule } from '@angular/
core';
import { HttpClientModule } from
'@angular/common/http';
@NgModule({
...
imports: [
BrowserModule,
HttpClientModule
],
...
})
27. in collaborazione conServices
È possibile utilizzare tutti i
termini HTTP più comuni: get,
post, put, delete, patch, head,
options
Il servizio Http ritorna sempre un
Observable.
Con Angular 5 Http è stato
deprecato in favore di
HttpClient
27
/* src/app/shared/logging.service.ts
*/
import { Injectable } from '@angular/
core';
import { Http } from '@angular/http';
@Injecatable()
export class LoggingService {
constructor(private http: Http) {}
getMessage(): Observable<...> {
return this.http.get(`...`);
}
}
28. in collaborazione conServices
Le stesse modalità sono presenti
in HttpClient.
L'unica differenza è che con
HttpClient è possibile utilizzare
gli interceptor.
28
/* src/app/shared/logging.service.ts
*/
import { Injectable } from '@angular/
core';
import { HttpClient } from '@angular/
common/http';
@Injecatable()
export class LoggingService {
constructor(private http:
HttpClient) {}
getMessage(): Observable<...> {
return this.http.get(`...`);
}
}
29. in collaborazione conServices
Finché non sottoscriviamo un
Observable, esso non viene creato
e, per cui, nessun valore viene
emesso ai subscribers
29
/* src/app/app.component.ts */
...
constructor(private ls:
LoggingService) {}
ngOnInit() {
this.ls.getMessage()
.subscribe();
}
...
30. in collaborazione conServices
All'interno di subscribe()
possiamo utilizzare tre metodi
✴success: I dati vengono inviati
correttamente ai subscribers
✴error: c'è un errore che viene
notificato ai subscribers
✴complete: viene chiamata
quando l'observable viene chiuso
30
/* src/app/app.component.ts */
...
constructor(private ls:
LoggingService) {}
ngOnInit() {
this.ls.getMessage()
.subscribe(
(success) => {},
(error) => {},
() => {}
);
}
...
31. in collaborazione conServices
In qualunque momento è
possibile rimuovere la
sottoscrizione ad un observable.
Se non ci sono altri subscribers,
l'observable viene rimosso dalla
memoria
31
/* src/app/app.component.ts */
...
constructor(private ls:
LoggingService) {}
ngOnDestroy() {
this.ls.getMessage()
.unsubscribe();
}
...