AngularJs, Bootstrap e Cordova:il perfetto connubio per applicazioni mobile cross-platform

17 Aprile – MilanoGabriele Gaggi

@GabrieleGaggi@OverNetE

#focusDay

Agenda

10:30 Il mercato del mobile: un’opportunità in continua mutazioneUna rapida analisi storica e attuale del mercato mobile e delle sue potenzialità.

11:00 Apache Cordova: la soluzione per il riutilizzo del codiceLe caratteristiche principali del framework per lo sviluppo mobile con HTML, Css e Javascript.

11:30 Bootstrap: parola d’ordine mobile firstVedremo come il framework di Twitter può aiutarci per gestire le diverse combinazioni di risoluzione dei device presenti sul mercato.

12:00 AngularJs per estendere il vocabolario HTMLEstendere il vocabolario Html per la creazione di codice straordinariamente espressivo, leggibile e rapido da sviluppare.

12:30 Pausa Pranzo

14:00 AngularJs, Bootstrap e Cordova hands-onVedremo i tre framework all’opera durante la creazione di una semplice applicazione mobile.

15:30 Q&ALo speaker è a disposizione dei partecipanti per approfondimenti e domande.

16:00 Fine lavori

Il mercato del mobile: un’opportunità in continua mutazione

Smartphone sempre più alla portata di tutti

• Diminuzione dei costi

• Aumento delle potenzialità• Geolocalizzazione

• Giroscopio, accelerometro, ect

• Batteria

• Tecnologie di connettività (3G, 4G)

• Tempi di produzione più brevi

Non focalizzarsi su una sola piattaforma!

Blackbarry è passato dall’essere il più diffuso, alla quasi completa scomparsa!

Cross-platform: la soluzione al problema?

Apache CordovaLa soluzione per il riutilizzo del codice

Cos’è Cordova?

Creare App mobile native utilizzando l’approccio "Write once, run anywhere" (WORA)

Riutilizzare le conoscenze e l’esperienza in ambito web e gli strumenti di sviluppo che già conosciamo

Cos’è Cordova?

Da Wikipedia:

Cordova (in spagnolo Córdoba e in latino Cordŭba) è un comune spagnolo di 328.841 abitanti situato nella comunità autonoma dell'Andalusia, sulla riva delGuadalquivir e ai piedi della Sierra Morena.

Cos’è Cordova?

Dal sito ufficiale cordova.apache.org:

Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. Combined with a UI framework such as jQuery Mobile or Dojo Mobile or Sencha Touch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript.

Cos’è Cordova?

Sempre dal sito ufficiale cordova.apache.org:

Cordova provides a set of uniform JavaScript libraries that can be invoked, with device-specific native backingcode for those JavaScript libraries. Cordova is available for the following platforms: iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada, and Symbian.

Un po’ di storia

• Pensato e realizzato da Nitobi ad un evento iPhoneDevCamp con il nome di PhoneGap.

• Nel 2009 vince il People's Choice Award alla conferenza O'Reilly Media's 2009 Web 2.0.

• Viene ufficialmente approvato da Apple nel 2010.

• Nitobi viene acquisita da Adobe nell’ottobre del 2011.

• Il codice di PhoneGap entra quindi a far parte della Apache Software Foundation inizialmente con il nome di Apache Callback e successivamente Apache Cordova.

• Adobe continua a distribuire la sua Build con il nome di PhoneGap.

Un passo indietro: Applicazioni native

• Specificamente create per ogni piattaforma

• Pieno controllo delle caratteristiche del device su cui gireranno

• Utilizzo delle notifiche

• Funzionameno offline

Un passo indietro: siti mobili

• Sono siti che presentano un look and feel analogo a quello delle applicazioni native

• Vengono eseguite all’interno del browser, quindi hanno un accesso molto limitato alle risorse del device

• Tipicamente sfruttano le funzionalità avanzate di Html5

Un passo indietro: Applicazioni ibride

• Appaiono all’utente come applicazioni native presenti nello store e permettono l’interazione con le caratteristiche del dispositivo

• Utilizzano il concetto delle Web Application girando all’interno di specifiche web view

• Sono cross platform

• Esistono diversi tools per realizzarle

Come funziona

Sistema operativo

Api Native

Web View Native

Html5 Css3 Javascript

Licenza di Apache Cordova

• Apache Cordova graduated in October 2012 as a top level project within the Apache Software Foundation (ASF). Through the ASF, future Cordova development will ensure open stewardship of the project. It will always remain free and open source under the Apache License, Version 2.0.

• http://www.apache.org/licenses/LICENSE-2.0.txt

• Usi commerciali ammessi, bisogna solo includere una copia della licenza e mostrarla nella sezione «copyright» del proprio programma.

Cordova non è un framework

• Quindi è possibile utilizzare i framework che preferiamo

Plugin per la gestione delle funzionalità native

• Una delle caratteristiche principali di Cordova è la possibilità di utilizzare le funzionalità native dei diversi device attraverso specifici plugin (es. Geolocalizzazione, batteria).

HTML5 + CSS3 + Javascript

• http://slides.html5rocks.com/

HTML(Hypertext Markup Language)

• Non è un linguaggio di programmazione

• Descrive la semantica di una pagina Web (il contenuto)

• Il contenuto viene suddiviso e gestito con i tag (es. <div></div>)

CSS(Fogli di Stile)

• Gestisce la visualizzazione del contenuto della pagina web

Javascript

• Linguaggio di programmazione

• Linguaggio interpretato

• Eseguito dal browser

• Può interagire con gli elementi della pagina

BootstrapParola d’ordine mobile first

Cos’è?

Libreria open-source per la realizzazione di siti e applicazioni web responsive.

I template sono basati su HTML e CSS con estensione JavaScript tramite JQuery.

Storia

• Nasce come Twitter Blueprint

• Rilasciato open-source, nel 2011, con il nome di Bootstrap

• Nel 2012 viene annunciato e rilasciato Bootstrap 2

• Nel 2013 si ha l’annuncio e il rilascio della versione 3

Perché usarlo…

• Ottimi risultati in tempi rapidi

• Semplice da usare

• CSS personalizzabile

• Risolve molte problematiche relative al responsive

…come usarlo

Usarlo è semplice:- scaricare il pacchetto dal sito ed includerlo nel progetto;- utilizzare le classi css di bootstrap per gestire il responsive; - utilizzare l’attributo data-* per configurare i componenti javascript.

Se ci serve solo la responsività meglio utilizzare solo il foglio di stile.

La personalizzazione

Bootstrap consente la personalizzazione sia con apposito tool online che con Less e Sass.

AngularJsPer estendere il vocabolario HTML

Cos’è?

E’ un framework javascript open-source per applicazioni web single page.

Favorisce un approccio dichiarativo.

Prende ispirazione dal pattern MVC.

Storia

• Iniziato a sviluppare nel 2009

• Vengono gestite due versioni:• La 1.x.x:

• 1.3.15 rilasciata a Marzo 2015

• 1.4.0 beta, rilasciata ad Aprile 2015

• La 2.0:• Più veloce della 1

• Non retrocompatibile

• Sviluppata da Google in collaborazione con Microsoft usando Typescript

Implementazioni JavaScript

Implementa il pattern MVC per separare la presentazione, I dati e la logica applicative. Utilizza la dependency injection.

• Rende il codice più chiaro

• Lo semplifica

• Lo rende più lineare

• Migliora le dipendenze

• Rende i componenti riutilizzabili

Cordova, Bootstrap e AngularJS united

Unendo i tre strumenti precedentemente visti si può creare un applicazione in modo pratico e funzionale per diversi sistemi.

• Riduzione dei costi e dei tempi

• Aumento di efficacia ed efficienza nel lavoro

• Semplicità di utilizzo

• Massima adattabilità per i dispositivi mobili

Il risultato finale

Cordova la base di sviluppo

Bootstrap lo stile

AngularJS le funzionalità

Link utili

• Mobile Development Platform Performance (Native, Cordova, Classic Xamarin, Xamarin.Forms)

• Mobile Development Platform Performance Part 2 (Native, Cordova, Classic Xamarin, Xamarin.Forms)

• Visual Studio Tools for Apache Cordova

• Angular powered by Cordova: una libreria che consente una miglior integrazione tra il framework Angular ed i plugin Cordova.

AngularJs, Bootstrap e Cordova:il perfetto connubio per applicazioni mobile cross-platform

17 Aprile – MilanoGabriele Gaggi

@GabrieleGaggi@OverNetE

#focusDay