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
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.
Tech Webinar: Advanced AngularJS, tecniche avanzate per padroneggiare il fram...Codemotion
Matteo Ronchi e Fabio Biondi ci spiegano come padroneggiare le tecniche per creare componenti ed architetture avanzate in AngularJS.
Iscriviti qui per partecipare ad altri Tech Webinar: http://goo.gl/iW81VD
Per info sul Bootcamp AngularJS Advanced Class clicca qui: https://goo.gl/NHbv9D
Scrivici a training@codemotion.it
Tw: @codemotionTR
Applicazioni Web ultra-performanti con Vue.js e DelphiMarco Breveglieri
Vue.js è un framework per creare interfacce utente estremamente performanti e che può essere introdotto progressivamente nelle vostre applicazioni Web, nel modo meno invasivo possibile. In questo talk scoprirete come utilizzarlo con Delphi creando una soluzione frontend e backend ad elevate prestazioni.
XeDotNet meeting del 5 Marzo 2013
In questa sessione vedremo come Knockout.js permetta di scrivere codice JavaScript in modo pulito e organizzato, semplificando la scrittura del codice e la sua manutenzione. Come lo si utilizza KO? Quali vantaggi ci offre? Quali librerie ci vengono in aiuto? Quali sarebbe meglio evitare?
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.
Sviluppo Web con React e Delphi - Seminario Delphi Day 2016, PiacenzaMarco Breveglieri
Slide del seminario sull'uso di React con Delphi e confronto con altre tecnologie (es. ExtJS) per lo sviluppo Web, tenuto al Delphi Day 2016 a Piacenza.
I sorgenti sono disponibili qui:
https://github.com/marcobreveglieri/conferences/tree/master/2016/delphi_day_2016
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
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.
Tech Webinar: Advanced AngularJS, tecniche avanzate per padroneggiare il fram...Codemotion
Matteo Ronchi e Fabio Biondi ci spiegano come padroneggiare le tecniche per creare componenti ed architetture avanzate in AngularJS.
Iscriviti qui per partecipare ad altri Tech Webinar: http://goo.gl/iW81VD
Per info sul Bootcamp AngularJS Advanced Class clicca qui: https://goo.gl/NHbv9D
Scrivici a training@codemotion.it
Tw: @codemotionTR
Applicazioni Web ultra-performanti con Vue.js e DelphiMarco Breveglieri
Vue.js è un framework per creare interfacce utente estremamente performanti e che può essere introdotto progressivamente nelle vostre applicazioni Web, nel modo meno invasivo possibile. In questo talk scoprirete come utilizzarlo con Delphi creando una soluzione frontend e backend ad elevate prestazioni.
XeDotNet meeting del 5 Marzo 2013
In questa sessione vedremo come Knockout.js permetta di scrivere codice JavaScript in modo pulito e organizzato, semplificando la scrittura del codice e la sua manutenzione. Come lo si utilizza KO? Quali vantaggi ci offre? Quali librerie ci vengono in aiuto? Quali sarebbe meglio evitare?
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.
Sviluppo Web con React e Delphi - Seminario Delphi Day 2016, PiacenzaMarco Breveglieri
Slide del seminario sull'uso di React con Delphi e confronto con altre tecnologie (es. ExtJS) per lo sviluppo Web, tenuto al Delphi Day 2016 a Piacenza.
I sorgenti sono disponibili qui:
https://github.com/marcobreveglieri/conferences/tree/master/2016/delphi_day_2016
Tech Webinar: Test e2e per AngularJS e non soloCodemotion
Luca Ferretti illustra Protractor: il framework JavaScript indispensabile alla realizzazione di completi test e2e per web app AngularJS (e non solo).
Iscriviti qui per partecipare ad altri Tech Webinar gratuiti: http://goo.gl/iW81VD
Scrivici a: training@codemotion.it
Tw: http://twitter.com/CodemotionTR
Lo Spring Framework viene ancora una volta incontro agli sviluppatori Java semplificandone la vita, questa volta vedremo come implementare facilmente uno strato servizi stateless da rendere disponibile remotamente nei diversi formati fruibili dalle diverse tecnologie client RIA, introducendo i concetti di Exporter e Proxy di Spring Remoting. Tutto questo tramite pura configurazione, via XML o annotation a seconda dei gusti, e con un esempio specifico in Flex con Spring BlazeDS Integration.
Event: Giffoni Open Makers Day 2013
Speaker: Fabrizio Lapiello
Questo talk è strutturato "Step by Step" per presentare in modo semplice ed intuitivo il framework Django, gli step sono incentrati sugli aspetti più appetibili e funzionali del framework fornendo informazioni di base su come utilizzarlo in ambiente Google App Engine.
ASP.NET MVC è una piattaforma aperta costruita come un puzzle di componenti. Per personalizzare il comportamento dei componenti interni del sistema è quindi sufficiente rimuovere uno dei tasselli e sostituirlo con uno scritto da noi. Un'operazione resa semplice ed immediata dall'interfaccia Dependency Resolver.
Slide e riferimenti al codice del Meetup del 28/02/2019 del Vue JS Milano dove parlo di creazione di componenti, passaggio di parametri, computed properties
Una introduzione a Laravel, un framework open source di tipo MVC scritto in PHP per lo sviluppo di applicazioni web. La versione di riferimento per questa presentazione è la 5.x
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.
Asp.Net MVC 3 - Il Model View Controller secondo MicrosoftStefano Benedetti
Il pattern architetturale MVC (Model View Controller) favorisce la manutenzione delle applicazioni web tramite una architettura elegante ed una chiara ed esplicita separazione delle competenze, l'impiego dei più diffusi pattern di software engineering, il controllo completo dell'HTML generato e degli URL, la testabilità ed estendibilità.
In questa sessione vedremo le novità principali di Asp.Net MVC in versione 3.
La sessione è stata tenuta a SMAU Business Bologna il 9 giugno 2011
Similar to CommitUniversity AngularJSAdvanced Andrea Vallotti (20)
Come funzionano i Retrieval-Augmented Generators (RAG) e quanto i database vettoriali sono fondamentali per poter memorizzare e utilizzare le sorgenti dati aziendali e personali?
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
Open source, in Python, compatibile con vari LLM ed estendibile tramite plugin: queste sono solo alcune delle potenzialità del framework Cheshire Cat AI!
Collaborazione, Decisionalità e Gestione della Complessità nel Tempo: cosa ...Commit University
Vuoi migliorare la gestione dei progetti a lungo termine con team multidisciplinari e prendere decisioni rischiose in modo sicuro e ponderato? Non perderti il nostro workshop gratuito!
Antonio Dell’Ava, Frontend Developer di eDreams Odigeo, condividerà strategie per aiutarti a ottimizzare la collaborazione nel tuo team, scegliere gli strumenti giusti per ogni situazione e garantire l’evoluzione del progetto nel tempo
A volte essere pigri è una qualità, evita (quasi) tutte le richieste di personalizzazioni lasciando "finestre aperte" nei tuoi componenti generici.
Gli slots sono un modo per passare il contenuto a un componente in Vue.js. Permettono di definire una sezione nel template di un componente che può essere sostituita dall'esterno.
È inoltre possibile assegnare un nome o uno "scope" agli slots, garantendo così maggiore controllo e personalizzazione sul contenuto. I "named slots" consentono di definire più slots nello stesso componente, assegnando dei nomi specifici.
Gli "scoped slots" ti consentono di accedere dall'esterno ai dati interni del componente.
Quante volte mi è capitato di migliorare applicazioni lente e difficili da ottimizzare, ma poi ho scoperto Qwik e tutto è cambiato.
Con il suo nuovo modello mentale è in grado di fare la differenza e scalare facilmente qualsiasi applicazione.
Non conosci questo framework? Nessuna paura...andiamo a scoprirlo assieme!
Backstage l'Internal Developer Portal Open Source per una migliore Developer ...Commit University
Non ci raccontiamo frottole: sviluppare software oggi e' potente come non lo e' mai stato, ma anche incredibilmente complesso, con decine di framework e strumenti nelle mani di sviluppatori che devono saperli usare tutti in modo sicuro e scalabile.
Questa frammentazione e complessita' ha generato una serie di innovativi software (chiamati IDP), che si stanno affermando sul mercato business e non solo, con lo scopo di rendere la vita degli sviluppatori piu' semplice ed effciente.
In questa sessione forniremo una paromica su questo emergente segmento di mercato e parleremo dell'indiscusso leader Open Source chiamato Backstage (by Spotify).
Francesco, ex-Spotify, ci mostrera' una demo della piattaforma e mostrera' come, grazie a questa, la Developer Experience migliori, anche attraverso metodi più moderni.
Nella giungla degli ORM node, Prisma sta prendendo sempre più piede. Ha migliorato la Developer Experience, si integra perfettamente con Typescript e funziona dannatamente bene con diversi provider. In questo talk, vedrai come Prisma può migliorare il tuo lavoro quotidiano e come ti permette di avere un maggior controllo della tua code base aiutandoti a prevenire fastidiosi errori nella tua applicazione nodejs.
Decision-making for Software Development Teams - Commit UniversityCommit University
Ti senti bloccato quando si tratta di prendere decisioni critiche su aspetti tecnologici? Vuoi conoscere i processi decisionali collaborativi e come applicarli al tuo team?
Francesco Strazzullo, Chief Operating Officer di Claranet Italia, ti insegnerà gli elementi chiave per prendere decisioni critiche su aspetti tecnologici, gestire i requisiti non funzionali e lavorare con processi decisionali collaborativi.
L’Advisor Leader dell’area Game di NABA, Marco Secchi, ti insegnerà come migliorare la gestione degli oggetti in-game e la loro comunicazione utilizzando Unity Engine e Design Pattern Component.
La prototipazione è un’attività fondamentale per “capire facendo”. Lo scopo della prototipazione non è costruire partendo da un progetto definito ma, piuttosto, acquisire dati preziosi per essere poi più consapevoli di prendere la giusta direzione. Alla base delle attività di prototipazione ci sono spesso strumenti low code e no code. Esistono ormai da diversi anni e ultimamente stanno guadagnando sempre più attenzione nella community per la loro immediatezza e velocità. Abbiamo definito meglio le loro qualità e le opportunità che ci sono nel loro utilizzo.
Durante il talk abbiamo approfondito perché è importante prototipare e come questa attività migliora i nostri progetti. In particolare, abbiamo approfondito l’utilizzo AWS Step Functions Workflow Studio, strumento low code prodotto da AWS. Workflow Studio ci permette di imbastire una state machine basata su step functions con uno strumento visuale drag & drop che semplifica moltissimo il nostro lavoro. Abbiamo analizzato cosa lo contraddistingue da altri strumenti e quali sono i suoi punti di forza. Infine siamo passati alla pratica facendo una piccola esercitazione con AWS Step Functions.
KMM survival guide: how to tackle struggles between Kotlin and SwiftCommit University
Kotlin Multiplatform Mobile (KMM) è un SDK per lo sviluppo di applicazioni Android ed iOS che consente agli sviluppatori di condividere la business logic mantenendo UI/UX native.
Ogni SDK/framework cross/multi platform ha i suoi pro ed i suoi contro, e purtroppo KMM non è l'eccezione che conferma la regola.
Se sei uno sviluppatore Android potresti pensare che tutto funzionerà correttamente, ma purtroppo non sarà così quando dovrai confrontarti con Swift.
Se sei uno sviluppatore iOS saprai che Swift è simile a Kotlin, ma non in tutto, dovrai quindi conoscere alcune sue caratteristiche.
In questo talk vedremo quali sono i problemi che si possono riscontrare nell'interoperabilità tra Kotlin e Swift, i motivi che li causano, e come risolverli.
Stai perdendo la testa cercando di convertire il tuo state manager da Vuex a Pinia?
Ecco una guida step-by-step per affrontare questo task senza difficoltà.
I micro-frontend sono uno degli argomenti più interessanti nel mondo frontend dell'ultimo periodo ma nonostante la loro popolarità, non esistono delle linee guida comuni per svilupparli. micro-lc risponde a questa esigenza e permette di raccogliere in un unico applicativo tanti micro-frontend, orchestrandoli e rendendoli parte della stessa applicazione e non più componenti singoli, scollegati e sconnessi.
Fastify è il web framework del momento e diverse aziende in tutto il mondo lo stanno utilizzando in produzione da anni.
Costruito da zero per essere il più veloce possibile, con un overhead minima e una potente architettura a plugin, Fastify fornisce la migliore esperienza di sviluppo, senza sacrificare prestazioni e sicurezza.
5. AngularJS
Advanced
17.07.2014
AngularJS - Generale
E’ un framework JavaScript:
● per lo sviluppo di applicazioni Web in modalità Single
Page Application
● “forza” l’uso del pattern MVC
● implementa il two-way data-binding
● pensato per facilitare il test:
o separazione delle competenze
o dependency injection
o mock del back end
9. AngularJS
Advanced
17.07.2014
Direttive - Definizione
● restrict - definisce le modalità di utilizzo
ammesse (e.g. restrict: ‘EA’)
● template - inline HTML template
● templateUrl - url per scaricare il template
della direttiva tramite richiesta ajax
● replace - definisce se sostituire o
appendere il template all’elemento originale
10. AngularJS
Advanced
17.07.2014
Direttive - Definizione
● priority - definisce l’ordine di
“esecuzione” delle direttive
● terminal - indica se il processo di
compilazione deve terminare alla direttiva
corrente
● require - specifica se è necessario
utilizzare altre direttive: [?][^]directive
11. AngularJS
Advanced
17.07.2014
Direttive - ciclo di vita
1. costruzione
2. compilazione del template
3. *creazione dello scope e del controller
4. *pre-linking
5. ricorsione sui figli
6. post-linking
12. AngularJS
Advanced
17.07.2014
Direttive - scope
scope: false | true | { … }
● false - è il default, la direttiva condivide lo
scope del controllore che la contiene
● true - viene creato uno scope per la
direttiva che “deriva” dallo scope contenitore
● { … } - viene creato uno scope isolato
13. AngularJS
Advanced
17.07.2014
● fondamentali per: separazione e riusabilità
● permettono di definire dei collegamenti con il
mondo esterno:
o @[attr] - collegamento monodirezionale con il
valore di un attributo del DOM
o =[?][attr] - collegamento bidirezionale
o &[attr] - esecuzione di un espressione nello
scope contenitore
Direttive - scope isolati
14. AngularJS
Advanced
17.07.2014
Direttive - controller
● si dichiarano come i controller “normali”
● iniettabile con:
o qualunque servizio disponibile nell’applicazione
o servizi specifici: $scope, $element, $attrs,
$transclude
● logica e varibili “locali”
● no manipolazione del DOM
● opzionale
16. AngularJS
Advanced
17.07.2014
Direttive - link
● è la funzione principale
● nel 80% dei casi non serve altro
● manipolazione del DOM
● registrazione agli eventi del DOM:
o è fondamentale utilizzare $scope.$apply per
propagare le modifiche
● registrazione dei watch
19. AngularJS
Advanced
17.07.2014
Direttive - compilazione
compile: function(tElement, tAttrs) { ... }
● modifica il DOM del template
● non ha accesso allo scope
● è invocata per ogni direttiva
● *ritorna una funzione/oggetto di link
● migliora le performance
20. AngularJS
Advanced
17.07.2014
Direttive - comunicazione
● Direttiva → Controller:
o scope isolato con binding &
● Controller → Direttiva:
o scope isolato con binding mono o bidirezionale
● Direttiva ←→ Direttiva:
o attraverso i controller
25. AngularJS
Advanced
17.07.2014
Testing - Jasmine - spies
● Mock (FakeItEasy, mockito, etc.)
● Comportamento:
o invocazione metodo originale
o invocazione metodo fake
o lancio eccezioni
● Asserzioni sull’invocazione dei metodi:
o argomenti
o ordine
26. AngularJS
Advanced
17.07.2014
Testing - angular.mock
● module(…) - registrare moduli per l’injector
● inject(…) - inietta le variabili richieste
● $httpBackend - simula la comunicazione
HTTP con il back end e di definire delle
attese:
o when???(…).response(…)
o expect???(…)[.response(…)]
o flush([count])
27. AngularJS
Advanced
17.07.2014
Testing - controller
● Caricare il modulo
● Farsi iniettare le dipendenze
● Creare uno scope
● Creare i mock necessari
● Creare il controller
● Utilizzare il metodo $apply dello scope
28. AngularJS
Advanced
17.07.2014
Testing - direttive
● Caricare il modulo
● Preparare l’HTML di test (stringa)
● Farsi iniettare $compile e $rootScope
● Compilare l’HTML
● Modificare scope → verificare il DOM
● Modificare il DOM e lanciare gli eventi →
verificare lo scope
30. AngularJS
Advanced
17.07.2014
Dipendenze - AngularJS’s way
Modulo - raggruppamento di “oggetti Angular”
angular.module('???', […])
.config(function(…){…})
.run(function(…){…})
var m = angular.module('???')
Angular non si occupa di caricare gli script!
31. AngularJS
Advanced
17.07.2014
Dipendenze - RequireJS
● Definisce le dipendenze fra file/moduli
● Carica file/moduli
● Garantisce l’ordine di caricamento
● Asincrono
● Usabile con librerie non-RequireJS
● Elimina variabili globali
● Include un tool per minimizzare e offuscare il
codice (r.js)
33. AngularJS
Advanced
17.07.2014
Dipendenze - RequireJS
● Definire nelle sezioni path e shim, la
posizione e le dipendeze delle librerie
angular
● Bootstrap manuale:
o No ng-app
o utilizzare plugin domReady
o utilizzare angular.bootstrap(…)
● Definire due main.js per test ed “esecuzione”
priority è un numero, le direttive con priority maggiore vengono eseguite prima
a parità di priority l’ordine è indeterminato
priority di default è zero, alcune direttive che la cambiano sono: ng-disabled (100), ng-controller (500), ng-include (400), etc.
terminal deve essere usato in congiunzione con priority
require è ideale per la comunicazione tra direttive, che vedremo dopo, e possibile specificare una o più direttive (utilizzando un array). ? vuol dire che è opzionale, ^ vuol dire che la direttiva può essere su un elemento contenitore. Esempio menuDirective.js
la costruzione è invocata una volta sola durante il ciclo di vita dell’applicazione. Volendo far vedere il codice della slide #5 per far capite cos’è la costruzione
scope e controller vengono creati solo se necessario;
pre-linking → link allo scope prima della compilazione/linking dei figli
post-linking → link allo scope dopo la compilazione/linking dei figli
Direttive con priority maggiore vengono compilate per prime. Le funzioni di pre-link sono invocate nello stesso ordine mentre le funzioni di post-link vengono eseguite in ordine inverso;
Le direttive di default condividono lo scope del controller che le contiene
true → se ci sono più direttive sullo stesso elemento che richiedono un nuovo scope con true allora AngularJS ne crea uno solo condiviso fra tutte
deriva prototipicamente
gli scope isolati sono scope che non partecipano alla normale eriditarietà prototipale degli scope di AngularJS
uno scope isolato “vuoto” non contiene nulla se non ciò che ci viene messo dalla direttiva
gli scope isolati sono fondamentali per evitare che una direttiva possa interferire in alcun modo con il comportamento del controller o di altre direttive
il valore di un attributo del DOM è sicuramente una stringa quindi il binding @darà sempre una stringa
con il binding = il ? serve per dire che non è obbligatorio che l’attributo ci sia, di default è obbligatorio
il binding & è perfetto stabilire una comunicazione fra direttiva e controller (nel verso opposto basta usare un binding :-) ). Vedi ui-bootstrap.js riga 2876
VEDERE ESEMPIO LIVE SUL BROWSER
ideali per concentrare tutta la logica della direttiva e per contenere variabili che non devono essere esposte sullo scope per il binding
$transclude è la stessa funzione che viene passata ai metodi di link, dato che non è consigliabile manipolare il DOM dal controller meglio non usarla
scope: è lo scope della direttiva (lo stesso del controller)
iElement: è [il clone] del template
iAttrs: è la lista “normalizzata” (cioè con i nomi in camel case) degli attributi presenti sull’elemento. E’ condiviso da tutte le direttive presenti su un elemento
controller: è il controller della direttiva o una lista di controller se è stato utilizzata l’opzione require
transcludeFn: è una funzione che consente di clonare e linkare il template per poi inserirlo nel DOM
Direttive con priority maggiore vengono compilate per prime. Le funzioni di pre-link sono invocate nello stesso ordine mentre le funzioni di post-link vengono eseguite in ordine inverso;
pre: dato che viene eseguita prima che i figli siano stati linkati è meglio evitare di manipolare il DOM. Deve essere usata solo per lavori preparatori o attività che non riguardano il DOM ma che comunque sono relative all’istanza specifico del DOM e non al template. E.g. direttiva form in angular.js alla riga 16345
eseguita dopo che il template è stato clonato
esempio completo vedere cmswSpinnerDirective.js
in questo esempio è stato utilizzato anche l’attributo replace per sostituire il template della direttiva al posto dell’HTML originale
il contenuto di una direttiva che ha transclude a true non fa riferimento allo scope della direttiva (anche se vi è contenuto nell’albero HTML) ma fa riferimento allo scope subito fuori dalla direttiva
Direttive con priority maggiore vengono compilate per prime. Le funzioni di pre-link sono invocate nello stesso ordine mentre le funzioni di post-link vengono eseguite in ordine inverso;
vedere come esempio ngRepeat in angular.js alla riga 20393 - 20404
della funzione/oggetto di link se ne parla dopo
migliora le performance perché se la nostra direttiva è utilizzata insieme, ad esempio, ad ng-repeat le operazione fatte nella funzione compile verranno effettuate una volta sola
ngCloak si autoelimina dal proprio template nella funzione compile (angular.js riga 18624)
se viene dichiarata la funzione compile non può essere dichiarata la funzione/oggetto link, quest’ultimo deve essere ritornato eventualmente dalla funzione compile
Direttive con priority maggiore vengono compilate per prime. Le funzioni di pre-link sono invocate nello stesso ordine mentre le funzioni di post-link vengono eseguite in ordine inverso