Local blog for Italian speaking developers
Integrazione di Angular 1 e Angular 2: sulla strada dell’aggiornamento semplificato
21 settembre 2015
Se disponete di un’applicazione Angular 1 esistente e vi chiedete come effettuare l’aggiornamento ad Angular 2, basta che continuiate a leggere per scoprire i nostri programmi di supporto agli aggiornamenti incrementali.
Riepilogo
Buone notizie!
Stiamo abilitando la combinazione di Angular 1 e Angular 2 nella stessa applicazione.
È possibile combinare i componenti di Angular 1 e Angular 2 nella stessa vista.
Angular 1 e Angular 2 possono inserire i servizi tra i vari framework.
L’associazione dati funziona tra i vari framework.
Perché aggiornare?
Angular 2 offre numerosi vantaggi rispetto ad Angular 1, comprese prestazioni nettamente migliori, modelli più potenti, caricamento lazy, API più semplici, debugging facilitato, maggiori possibilità di testing e molto altro ancora. Ecco alcuni dei punti salienti:
Prestazioni ottimizzate
Ci siamo concentrati su più scenari per rendere le app degli sviluppatori più veloci e più interessanti. Abbiamo migliorato la velocità, incrementandola da 3 a 5 volte negli scenari di rendering iniziale e di riesecuzione del rendering.
Rilevamento più rapido delle modifiche tramite chiamate JS monomorfiche
Precompilazione e riutilizzo dei modelli
Caching della visualizzazione
Uso della memoria / pressione VM inferiore
Scalabilità lineare (straordinariamente veloce) con strutture di dati osservabili o immutabili
Inserimento delle dipendenze che supporta il caricamento incrementale
Modelli più potenti
Elimina la necessità di molte direttive
Statisticamente analizzabile: strumenti futuri e IDE possono rilevare errori al momento dello sviluppo anziché in fase di esecuzione
Consente agli autori dei modelli di definire l’uso delle associazioni anziché inserirle in modo permanente nella definizione delle direttive
Possibilità future
Abbiamo separato il rendering di Angular 2 dal DOM. Stiamo attivamente lavorando sul supporto di queste altre funzionalità consentite dalla separazione:
Rendering lato server
. Consente un rendering iniziale straordinariamente veloce e il supporto dell’agente di ricerca Web.
Web Worker
. Possibilità di spostare l’app e la maggior parte di Angular su un thread Web Worker per mantenere l’interfaccia utente uniforme e sempre reattiva.
IU mobile nativa
. Siamo particolarmente soddisfatti di poter supportare la piattaforma Web nelle app mobili. Inoltre, alcuni team desiderano offrire interfacce utenti completamente native sulle relative app mobili iOS e Android.
Compilazione in quanto fase della build
. Le app Angular analizzano e compilano i propri modelli HTML. Stiamo lavorando per accelerare il rendering iniziale spostando la fase di compilazione nel processo di creazione della build degli sviluppatori.
Esecuzione congiunta di Angular 1 e 2
Angular 2 offre netti vantaggi rispetto ad Angular 1 in termini di prestazioni, semplicità e flessibilità. Stiamo semplificando la possibilità per gli sviluppatori di sfruttare questi vantaggi nelle relative applicazioni Angular 1 esistenti consentendo la combinazione semplificata nei componenti e servizi di Angular 2 in una singola app. In tal modo gli sviluppatori potranno aggiornare un servizio o un componente di un’applicazione alla volta in molti piccoli commit.
Ad esempio, lo sviluppatore potrebbe avere un’app simile a quanto illustrato nel diagramma di seguito. Per iniziare a conoscere Angular 2, lo sviluppatore decide di aggiornare il riquadro di spostamento di sinistra con un componente di Angular 2. Una volta presa maggiore dimestichezza, decide di sfruttare la velocità di rendering di Angular 2 per l’area di scorrimento nell’area del contenuto principale.
Per questa operazione sono necessari quattro elementi per l’interazione tra Angular 1 e Angular 2:
Inserimento delle dipendenze
Nidificazione dei componenti
Transclusione
Rilevamento delle modifiche
Per rendere possibile tutto ciò stiamo creando una libreria denominata ng-upgrade. Includendo ng-upgrade e Angular 2 nell’app Angular 1 esistente, gli sviluppatori potranno creare qualsiasi tipo di combinazione senza limiti.
I dettagli completi e lo pseudocodice sono reperibili nel
documento di progettazione per l’aggiornamento
originale, oppure è possibile leggere una descrizione generale del funzionamento di seguito. Nei post successivi illustreremo esempi specifici di aggiornamento dal codice di Angular 1 ad Angular 2.
Inserimento delle dipendenze
Innanzi tutto dobbiamo risolvere il problema di comunicazione tra le parti dell’applicazione. In Angular, il metodo più comune per chiamare un’altra classe o funzione è tramite l’inserimento di dipendenze. Angular 1 dispone di un singolo iniettore radice, mentre Angular 2 dispone di un
iniettore gerarchico
. L’aggiornamento dei servizi uno per volta implica che i due iniettori devono essere in grado di fornire istanze l’uno all’altro.
La libreria
ng-upgrade
rende automaticamente disponibili tutti gli elementi inseribili di Angular 1 in Angular 2. Ciò significa che i servizi dell’applicazione Angular 1 ora possono essere inseriti ovunque nei componenti o servizi di Angular 2.
Verrà supportata anche l’esposizione di un servizio Angular 2 in un iniettore Angular 1, ma lo sviluppatore dovrà fornire una semplice configurazione di mappatura.
Ne consegue che i servizi possono essere facilmente spostati uno per volta da Angular 1 ad Angular 2 su commit indipendenti e comunicare in un ambiente misto.
Nidificazione dei componenti e transclusione
In entrambe le versioni di Angular, definiamo un componente come una direttiva che dispone del proprio modello. Per la migrazione incrementale, lo sviluppatore dovrà poter eseguire l’operazione di migrazione di questi componenti uno per volta. Ciò significa che la libreria ng-upgrade deve abilitare i componenti da ciascun framework per la relativa nidificazione.
Per risolvere il problema, ng-upgrade consente allo sviluppatore di eseguire il wrapping dei componenti di Angular 1 in una facciata, in modo che possano essere usati in un componente di Angular 2. Per contro, è possibile eseguire il wrapping dei componenti di Angular 2 da usare in Angular 1. Questa tecnica funziona perfettamente con la transclusione in Angular 1 e la relativa proiezione di contenuti omologa in Angular 2.
In questo mondo di componenti nidificati, ogni modello è di proprietà totale di Angular 1 o Angular 2 e segue completamente la rispettiva sintassi e semantica. Non si tratta di una modalità di emulazione che assomiglia molto all’altra, ma è un’effettiva esecuzione in ciascun framework, a seconda del tipo di componente. Ciò significa che i componenti che vengono aggiornati ad Angular 2 ottengono tutti i vantaggi di Angular 2 e non solo un’ottimizzazione della sintassi.
Significa anche che un componente di Angular 1 utilizzerà sempre l’inserimento di dipendenze di Angular 1, anche se usato in un modello di Angular 2, e che un componente di Angular 2 utilizzerà sempre l’inserimento di dipendenze di Angular 2, anche se usato in un modello di Angular 1.
Rilevamento delle modifiche
La combinazione dei componenti di Angular 1 e Angular 2 implica che gli ambiti di Angular 1 e i componenti di Angular 2 sono interfoliati. Per questo motivo, ng-upgrade si accerta che il rilevamento delle modifiche (Scope digest in Angular 1 e Change Detectors in Angular 2) sia interfoliato nello stesso modo per mantenere un ordine di valutazione prevedibile delle espressioni.
ng-upgrade prende in considerazione e mette in collegamento lo scope digest di Angular 1 e il rilevamento delle modifiche in Angular 2 in modo che crei un singolo ciclo di digest coesivo che copra entrambi i framework.
Tipico processo di aggiornamento dell’applicazione
Ecco un esempio di come potrebbe apparire un aggiornamento di un progetto Angular 1 ad Angular 2.
Includere le librerie di Angular 2 ed ng-upgrade nell’applicazione esistente.
Scegliere un componente di cui eseguire la migrazione.
Modificare un modello di direttiva di Angular 1 per adattarlo alla sintassi di Angular
Convertire la funzione del controller/di collegamento della direttiva in sintassi-semantica di Angular 2.
Utilizzare ng-upgrade per esportare la direttiva (ora un componente) come componente di Angular 1 (questo è necessario se si desidera richiamare il nuovo componente di Angular 2 da un modello di Angular.
Scegliere un servizio di cui eseguire la migrazione.
La maggior parte dei servizi non dovrebbe richiedere praticamente alcuna modifica, o al massimo richiedere modifiche minime.
Configurare il servizio in Angular 2.
(Facoltativo) Esportare nuovamente il servizio in Angular 1 servendosi di ng-upgrade se è ancora usata da altre parti del codice di Angular 1.
Ripetere i passaggi 2 e 3 conformemente alla propria applicazione.
Dopo aver esaurito i servizi/componenti da convertire, lasciare il bootstrap di livello superiore di Angular 1 e sostituirlo con il bootstrap di Angular 2.
Si noti che ogni singola modifica può essere assegnata separatamente e l’applicazione continua a funzionare consentendo allo sviluppatore di continuare a rilasciare aggiornamenti secondo necessità.
Non prevediamo di aggiungere supporto per consentire a direttive non-componente di poter essere utilizzate su entrambi i lati. Riteniamo che la maggior parte delle direttive non-componente non siano necessarie in Angular 2 in quanto sono supportate direttamente dalla nuova sintassi di modello (ovvero ng-click invece di (click) )
Domande e risposte
Ho sentito che Angular 2 non supporta le associazioni bidirezionali. Come le sostituisco?
In realtà, Angular 2 supporta l’associazione dei dati bidirezionale ed ng-model, anche se con una sintassi leggermente diversa.
Quando abbiamo deciso di compilare Angular 2 volevamo risolvere i problemi del ciclo di digest di Angular. Per questo motivo abbiamo scelto di creare un flusso di dati unidirezionale per il rilevamento delle modifiche. All’inizio non ci era chiaro come si sarebbe integrata l’associazione dei dati dei moduli bidirezionali di ng-model in Angular 1, ma abbiamo sempre saputo che dovevamo rendere i moduli di Angular 2 semplici quanto quelli di Angular 1.
Dopo alcune iterazioni siamo riusciti a risolvere i problemi con più digest, pur preservando la potenza e la semplicità di ng-model in Angular 1.
L’associazione dei dati bidirezionale presenta una nuova sintassi: [(property-name)]="expression" per rendere esplicito che l’espressione è vincolata in entrambe le direzioni. Dal momento che per la maggior parte degli scenari questa è solo una lieve modifica sintattica, non prevediamo difficoltà nella migrazione.
Ad esempio, se in Angular 1 si ha:
<input type="text" ng-model="model.name" />
Lo si può convertire in questo in Angular 2:
<input type="text" [(ng-model)]="model.name" />
Quali linguaggi posso usare con Angular 2?
Le API di Angular 2 supportano pienamente la codifica nell’attuale versione di JavaScript (ES5), nella prossima versione di JavaScript (ES6 o ES2015), TypeScript e Dart.
Benché sia perfettamente accettabile scegliere di continuare con l’attuale versione di JavaScript, vorremmo consigliare di provare ES6 e TypeScript (che è un superset di ES6), in quanto offrono netti miglioramenti per la produttività.
ES6 fornisce una sintassi molto migliorata e standard interoperativi per le librerie comuni come promise e moduli. TypeScript offre una navigazione del codice nettamente potenziata, il refactoring automatizzato in IDE, documentazione, rilevamento degli errori e altro ancora.
L’adozione di ES6 e TypeScript è semplice in quanto si tratta di un superset dell’attuale ES5. Ciò significa che tutto il codice esistente è valido e si possono aggiungere le relative funzioni poco per volta.
Che cosa posso fare con $watch nel nostro codebase?
Le espressioni tldr; $watch devono essere spostate in annotazioni dichiarative. Quelle che non si adattano dovrebbero sfruttare le annotazioni osservabili (stile di programmazione reattivo).
Per guadagnare velocità e prevedibilità, in Angular 2 si specificano le espressioni di controllo in modo dichiarativo. Le espressioni sono contenute in modelli HTML e sono controllate automaticamente (senza l’intervento dello sviluppatore), o devono trovarsi nell’annotazione della direttiva.
Un ulteriore vantaggio di tutto questo è che le applicazioni Angular 2 possono essere ridotte/nascoste in sicurezza per payload di dimensioni inferiori.
Per la comunicazione tra le applicazioni, Angular 2 offre le annotazioni osservabili (stile di programmazione reattivo).
Che cosa posso fare adesso per prepararmi alla migrazione?
Basta seguire le procedure di best practice e compilare l’applicazione usando componenti e servizi in Angular 1 come indicato nel documento AngularJS Style Guide.
Sapevo che il piano di aggiornamento originale prevedeva l’uso del nuovo Component Router, e adesso invece?
Il piano di aggiornamento che avevamo annunciato in occasione di ng-conf 2015 si basava sull’aggiornamento di un’intera vista per volta e sull’uso di Component Router per gestire le comunicazioni tra le due versioni di Angular.
Il feedback ricevuto ci ha indicato che benché questo fosse incrementale, non lo era abbastanza. Perciò siamo tornati indietro e abbiamo riprogettato il piano come descritto sopra.
Potete condividere altre informazioni?
Certo! Le informazioni sono riportate nel documento di progettazione relativo alla strategia di aggiornamento da Angular 1 ad Angular 2.
Stiamo lavorando su una serie di prossimi post su argomenti correlati, tra cui:
Mappatura della conoscenza Angular 1 in Angular 2.
Una serie di FAQ sui dettagli relativi ad Angular 2.
Guida dettagliata sulla migrazione con esempi di codice funzionante.
A presto!
Pubblicato da
Misko Hevery
, Software Engineer, Angular
Etichette
Android
Firebase
machine learning
Google Cloud Platform
GDL
Eventi
Google Developers Live
Google Play
TensorFlow
App
Chrome
Cloud
api
GDLItalia
GDE
GDG
Google Assistant
iOS
Kotlin
Actions on Google
Deep Learning
AppEngine
AMP
BigQuery
Cloud Functions
Flutter
Android Studio
Google Developers Expert
Università
Google AppEngine
JavaScript
AI
Android Wear
GAE
Google Play Store
HTML5
Maps
security
Android App Development
AngularJS
IoT
Kubernetes
Annunci
Cloud Firestore
Cloud Machine Learning
Google I/O
Polymer
Android Things
Community
DevTools
Google App Engine
intelligenza artificiale
Entrepreneurship
Firebase Analytics
GSoC
Games
Google Cast
ML
open source
Crashlytics
Dart
Diversity
Drive
Google Data Studio
Google Play Games
TensorFlow Lite
Android Developers
Android O
Cloud Spanner
Cloud TPU
Compute Engine
DevFest
Google Compute Engine
Google Developers
Material Design
Mobile
PWA
Python
Startup
AIY Project
ARCore
Android Jetpack
AndroidDev
Androidq
Apps Script
Artificial Intelligence
Augmented Reality
Firebase Cloud Messaging
Google Cloud
Google Maps
Gsuite
IO19
ML kit
Research
VR
coding
unity
#io19
AR
Android Dev Summit
Android Developer
Android Q
Cardboard
Cloud AI
Coral
Developers
Dialogflow
Firebase Realtime Database
Gmail
Google AI
Google Cloud Messaging
Google ContainerEngine
Google Play Console
Kotlin Coroutines
NLP
Programming
Responsive Design
TensorFlowjs
Testing
WTM
Women
beacons
cloud storage
developer
node JS
student programs
women techmakers
API Cloud Vision
Add-ons
Android P
AndroidDevStory
Animation
AutoML
Brillo
Classroom
DSC
Database
Developer Student Clubs
Edge TPU
Fabric
Featured
Flutter Web
G Suite
GWT
GoLang
Google
Google Brain
Google Cloud Next
Google Container Engine
Google Developer Groups
Google I/O Extended
Graph
Hosting
Instant Apps
Keras
Livedata
Mobile Sites
Prediction
Privacy
Project Tango
SDK
Stackdriver
Tales
UI
Udacity
Virtual Reality
Web
Web Development
YouTube
analytics
android security
api.ai
courses
google io
indies
natural language processing
reti neurali
sign-in
young developers
2d Animation
3d
AIY
ARkit
Adversarial Learning
Alpha
Android App
Android App Developmen
Android App bundle
Android Architecture
Android Architecture Components
Android Auto
Android Automotive OS
Android Dev Summit Android Developer
Android Developer Challenge
Android Developers GooglePlayAwards
Android Development
Android Go
Android Instant App
Android Pie
Android Q Scoped Storage
Android Q audio
Android Styles
Android audio playback capture
Android codelabs
AndroidTV
AndroidX
Angular
Aogdevs
Api Design
App Development
App Distribution
Apps
Architecture
Architecture Components
Arduino
Best Practices
Betatesting
Bugs
C++
Certification
Cloud Anchors
Cloud Next
Cloud Run
Cloud Service Platform
Cloud Shell
Cloud Study Jam
Coached Conversational Preference Elicitation
Commerce
Community Connector
Computer Science
Consistency
Containers
Converge
Conversation Design
Crash Reporting
DLS Design
Dagger
Data Science
Databases
Dependency Injection
Design
Developer Communities
Developer Community
Developer Culture
Developer Story
Developing Media Apps
Development
Eager
Edge TPU Dev Board
Education
Emulatore Android
Error Message
Eslint
Europe
Firebase Extensions
Firebase Summit 2019
Firebasehosting
Flutter 1.5
Flutter at IO
FlutterDark
GCE
GDD
Game Development
Gboard
Gesture Navigation
Glass
Go
Google AI Quantum
Google App Script
Google Cloud Functions
Google Cloud billing
Google Coral
Google Developer Days
Google Home Hub
Google IOS Android
Google Identity Platform
Google Launchpad
Google Lens
Google Now
Google Photos
Google Play Devs
Google Play Indie Games Festival
Google Play Instant
Google Plus
Google codelabs
Google+
GoogleDevWeekly
GoogleLaunchpad
GooglePlay
Graphics
Healthcare
I/O
IO
IO19 Flutter
In-app Billing
Indie Games
Indie Games Festival
Indie games showcase
Indie showcase
Ingress
Instant Games
Issues
Java
Jetpack
Knative
Kotlin Beginners
Kotlin Everywhere
Kotlin codelabs
Lighthouse
Live Caption
Live Streaming
Localization
Location
M-Theory
Mondaygram
Monetization
NYT
NativeScript
Navigation
Neural Graph Learning
Neural Structured
Nodejs
OS
OS Updates
Olivex
One Time Codes
Online Education
PHA
Performance Monitoring
Policy
Posenet
Project Mainline
Project Treble
Quantum Computing Theory
Reactive Programming
Regression
Remote Config
Resonance Audio
Room
Scoped Storage
Semantics
Semi Supervised Learning
Serverless
Sms Retriever Api
Sms Verification
Speech Recognition
Swift
Tensorflow Core
Tensorflow Hub
Test Lab
Text
Tokenizer
Tpu
Transformers
UX
UX Design
UX Research
Universal Sentence Encoder
Unsupervised Data Augmentation
Unsupervised Learning
User Experience
Viewmodel
Voice
WWW
Wear OS
WebAssembly
Widget
Women in Tech
WomenTechmakers
android kotlin
app stability
assistant
audio recording
augmented faces
authsub
best practices and updates
billing
botnet
business
c++ games
cancer
chatbot
chrome privacy
codelab
codelabs
competition
daydream
designer
dominio .dev
error handling
event
firebase games
firebase gdc
firebase hosting
firebase unity
game center authentication
game testing
games authentication
gdc
google summer of code
googledevelopers
grow
hashcode
indie
indie developers
internship
kids
machine intelligence
machine learning accelerator
maker
multi-platform
nearby
oauth
openid
performance
persistent AR
privacy sandbox
prizes
prototype
purchase flows
queries
realtime
responsible AI
security rules
showcase
solutions challenge
startup africa roadtrip
startup times
students
summer of code
unity crashlytics
verify apps
win
Archivio Blog
2020
feb
gen
2019
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2018
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2017
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2016
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2015
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2014
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2013
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
Feed
Follow @GoogleDevsItaly
