Laboratorio Avanzato di Programmazione II - Sviluppo app native multipiattaforma, Introduzione al corso, Lezione 01

1. 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 2017/18
Lesson 01: Introduzione al corso

2. About me
Adjunct Professor @UniCT (DMI, DipBioGeo, SS-PSI)
ex Apple iOS Developer Academy Teacher
Freelancer: Mobile app instructor & engineer
Founder of EtnaTraining (http://www.etnatraining.it)
Ex studente@Corso di Laurea in Informatica - DMI

3. How to reach me
email: calanducci AT unict.it
@tcaland | Facebook | github.com/etnatraining && acaland
http://www.dmi.unict.it/~calanducci
https://www.facebook.com/groups/unict.lap2/
Ricevimento:
• DMI @ Studio 19, blocco III
• by appointment (every Thursday 16:30 - 18:00)

4. Objective
Learn mobile development topics and related ecosystems
• 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)

5. Lesson hours
Tuesday, 09:00 - 11:00, Friday, 09:00 - 11:00
Laboratorio Archimede (Lab 125)

6. Draft program
http://www.dmi.unict.it/~calanducci/LAP2/
At studium.unict.it

7. Course approach
Intro theoretical lesson
Demo & live coding
• After the basics we will build a full fledged social & Cloud
based app
hands-on labs
Home assignments

8. Exam format
"Clone the app" style
• build a simple app, according to teacher assigned
requirements (screenshots and descriptions of features)
• the more features, the higher the mark
• 2-3 hours timeframe
In the LAP (but you can bring your own PC)
you can use Internet too!

9. Requirements
Bring 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

10. Polls
How 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

11. Prerequisite test
Home assignment:
• http://www.dmi.unict.it/~calanducci/LAP2/test.html

12. Mobile development approaches
Silo
Mobile Web / Hybrid
Native & Cross-platform

13. Silo (Native) Approach
Same apps multiple times:
• Multiple teams
• Multiple code bases
• Different toolset
• Expensive and slow
• Pros:
• Exploitation of the target platform
features
• Best performance
Swift Kotlin

14. “Write once, run everywhere” approach
Mobile Web
• development based on HTML5/CSS/JavaScript (web apps)
• responsive web page that adapts to different screens
• identical look & feel on all platforms
• not performant; limited access to hardware and offline capabilities
• ex: Progressive Web Apps (PWA) by Google
• can be updated immediately (hosted on the Web)
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/Ionic

15. Native & cross-platform approach
Native 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

16. 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
Flutter (Google)
• https://flutter.io/
Others:
• Titanium (http://www.appcelerator.com)
• Fuse (https://www.fusetools.com),
• Rubymotion (http://www.rubymotion.com)

17. React Native
JavaScript 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, Android TV
It makes use of React, a popular Web UI library
Created by Facebook. First released in March 2015 (iOS), Android support (September 2015)
• very popular (61,040 stars on github!)
Open Source (1624 contributors, 12,977 commits)
Used by many big companies (https://facebook.github.io/react-native/showcase.html):
• Facebook, AirBnb, Walmart, Wix, Tesla, Vogue, Bloomberg, etc
• Increasing demand of React (Native) engineers

18. Why React Native
One 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)

19. Why React Native
80% 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

20. Live Demo

21. Expo Snack
http://snack.expo.io

22. Any questions ?

23. References
Official 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

24. Books
Learning React Native: Building Native Mobile Apps with JavaScript (2nd edition)
Bonnie Eisenman, Nov 2017
http://amzn.eu/8lEayro
Fullstack React Native
https://www.fullstackreact.com/react-native/
Mastering React Native
Eric Masiello, Jacob Friedmann, Gen 2017
http://amzn.eu/36IL9MW