Laboratorio Avanzato di Programmazione II (LAP II)

“Sviluppo di applicazioni mobili native multipiattaforma”

Prof. Antonio S. Calanducci Corso di Laurea in Informatica, Unict

Anno accademico 2016/17

Lesson 1: Introduzione al corso

About meContract Professor @UniCT (DMI, SS-PSI)

iOS Developer Academy Teacher

Freelancer: Mobile app instructor & developer

Founder of EtnaTraining (http://www.etnatraining.it)

Ex studente@Corso di Laurea in Informatica - DMI !

How to reach meemail: calanducci AT unict.it

@tcaland | Facebook | github.com/etnatraining

http://www.dmi.unict.it/~calanducci

https://www.facebook.com/groups/unict.lap2/

Ricevimento:

• DMI @ Studio 19, blocco III

• DFA @ Sala INFN Grid (piano terra)

by appointment (to be changed if required)

ObjectiveLearn mobile development topics and its ecosystem

• development approach (native vs mobile web vs hybrid)

• tools, languages, frameworks, backends

• from design to publishing to the stores

• focus on cross-platform native development (iOS & Android)

Lesson hoursMonday, 09:00 - 11:00, Wednesday, 09:00 - 11:00

Martedì, 17:00 - 19:00 / Giovedì, 17:00 - 19:00

Laboratorio Archimede (?) / Aula 3 (at DMI) / Laboratorio di Informatica (DFA, 2nd floor)

TO BE CONFIRMED, check the FB group

Draft programhttp://www.dmi.unict.it/~calanducci/LAP2/

At studium.unict.it

Course approachIntro theoretical lesson

Demo & live coding

After the basics we will build a full fledged social & Cloud based app

hands-on labs in the second hour

Home assignments

Exams(Test based on multiple choice ?) / Project based

Oral exam (discussion on the project)

Ask me to assign you a project or propose it

Project deliveries on github

• code should build and run without errors

• depends on how big the project is, it can be done in group

RequirementsBring a laptop at lesson (recommended)

github / bitbucket account (mandatory)

basic knowledge of HTML/CSS/JavaScript would help

iOS development (and testing) requires a Mac

options if you don’t have a Mac:

• you need an iOS device at least

• other options I cannot write here :D

PollsHow many of you with Mac, PC, Linux?

Which Windows/Linux versions?

Previous knowledge of native iOS/Android development?

Knowledge of Objective-C/Swift, Java, C#, C/C++

Knowledge of Web development tools: Node.js, PHP, Angular.js, React, github

Prerequisite testHome assignment:

• http://www.dmi.unict.it/~calanducci/LAP2/test.html

Mobile development approaches

Silo

Mobile Web / Hybrid

Native & Cross-platform

Silo Approach

Same apps multiple times:

• Multiple teams

• Multiple code bases

• Different toolset

• Expensive and slow

• Pro: Exploitation of the target platform features

Swift

“Write once, run everywhere” approachMobile Web

• development based on HTML5/CSS/JavaScript

• responsive web page that adapts to different screens

• identical look & feel on all platforms

• not performant; limited access to hardware and offline capabilities

Hybrid

• Wrapping of Mobile Web apps into a native container (WebView)

• distribution through the official app stores

• plug-in allow access to hardware (camera, sensors, etc..)

• ex: Adobe PhoneGap/Apache Cordova

Native & cross-platform approachNative User Interface (UI) & User Experience (UX)

Native access to services:

• Camera, Microphone, Hardware sensors

• GPS, Mapkit, Direct & Reverse geocoding

• Push Notifications

• Database SQLite, FileSystem, Properties APIs

• Android Intents, Local Notification, Background Services, Contacts, Gestures, Socket, Clipboard, XML, Network, Locale, etc etc

Most popular native cross-platform frameworks

Xamarin (Microsoft)

• https://www.xamarin.com/platform

React Native (Facebook)

• https://facebook.github.io/react-native/

NativeScript (Progress Telerik)

• https://www.nativescript.org

Titanium (Appcelerator)

• http://www.appcelerator.org

Others: Fuse (https://www.fusetools.com), Rubymotion (http://www.rubymotion.com)

React NativeJavaScript based framework for building native iOS and Android apps (Native UI)

• support also Universal Windows Platform (UWP, Windows 10 SDK), Xbox One, macOS Desktop 10.10+ (Cocoa), Web, Apple TV

It makes use of React, a popular Web UI library

Created by Facebook. First released in March 2015 (iOS), Android support (September 2015)

• relatively young, but very popular (46,408 stars on github!)

Open Source (1239 contributors, 10,205 commits)

Used by many big companies (https://facebook.github.io/react-native/showcase.html):

• Facebook, AirBnb, Walmart, Wix, Tesla, Vogue, Bloomberg, etc

Why React NativeOne language: JavaScript vs Swift/Objective-C and Java

• ES2015 (or ES6) supported and advised

Best Development Experience (DX)

• no time wasting for compile & deploy cycles

• Live reload & Hot reload ( Web like experience)

• Debugging with Chrome Developer tools

bridge to native code if needed

hybrid native apps (react native views into a Swift/Objective-C/Java app, like Facebook, Instagram apps)

Why React Native80% share code between Android & iOS (can vary)

Its not write once, run everywhere but

• learn once, write anywhere!

Being based on React:

• Web Developer friendly

• Declarative UI (JSX) vs Imperative UI

• Component based (reusability)

• Async rendering

Live Demo

Expo Snackhttp://snack.expo.io

Any questions ?

ReferencesOfficial website:

• https://facebook.github.io/react-native/

React Native Express

• http://www.reactnativeexpress.com

Awesome React Native:

• https://github.com/jondot/awesome-react-native

Use React Native

• http://www.reactnative.com

BooksLearning React Native: Building Native Mobile Apps with JavaScript

Bonnie Eisenman, Dic 2015

http://amzn.eu/ig4Fg1T

Mastering React Native

Eric Masiello, Jacob Friedmann, Gen 2017

http://amzn.eu/36IL9MW