Mobile application development does not need to be difficult for us Web Developers. No longer do we need to learn a whole slew of new programming languages to create a mobile application. We can use our existing skills and create mobile applications with Html, JavaScript, and CSS. Then deploy to Android and iOS devices using a single code base that looks, feels, and performs like a native mobile application.
Apache Cordova enables the packaging of our web code into the mobile application that we will deploy to the App Stores but it does not include a UI framework. For the UI framework, we will be using Ionic framework. The Ionic framework takes the worry out of making the UI look, feel and perform correctly on the slew different Apple and Android devices that your users will have. It allows you to focus on your business logic and not the underlying infrastructure. Your time to market will be greatly reduced.
In addition to the free, open-sourced framework, Ionic also has a slew of highly useful cloud based tools that you can pay for it you need them such as Push Notifications, User Authentication, Native Builds, and Live Updates. Push Notifications allows targeted pushes and custom scheduling to improve push notification engagements. User Authentication provides a single authentication solution with email & password authentication, as well as third-party providers like Facebook, Twitter, Google and more. Native Builds turns your code into the native app binaries for the Apple and Android with a single command. Finally, Live Updates gives you the ability to push updates and UI changes to your user immediately without going through the app stores.
In this talk we will dive into what it takes to get started, look at the features of the Ionic framework and finish off by creating a sample application with the Ionic framework. You will walk away from this talk with all of the tools that you need to deliver your first mobile application
7. http://digitaldrummerj.me
Same App Different Tools
IOS
Obj-C/Swift
XCODE
$$$
Android
Java/Kotlin
A-Studio
$$$
Web
JavaScript
ANY
$
OSX
Swift
XCODE
$$$$
Windows Universal
.NET
Visual Studio
$$$
7
12. http://digitaldrummerj.me
Hybrid Development Strategy
Web platform technologies
HTML 5 CSS 3 JavaScript
12
Mobile
Traditional Web Apps
Desktop Apps
IOT
Server Side
TV Apps
Proprietary Devices
(Console Games,
Airline Entertainment)
18. http://digitaldrummerj.me
Things We Want To Achieve
Code once with web technologies
Code runs same way across mobile platforms
Access to hardware feature like bluetooth, GPS, accelerometer, etc
Access hardware features same way with the same code
18
30. http://digitaldrummerj.me
Mobile Platforms Have Different Behaviours
They Have Different UI SDK Libraries
User Experience Is Different Across Mobile Devices
Some Devices Have Back Buttons
Don’t Forget The Tablets
How To Reuse At This Level?
30
34. http://digitaldrummerj.me
What Is Ionic?
Missing Cordova UI Framework (i.e. Mobile Web SDK)
Supports Android, IOS & Windows Universal
Open Source
Built With Web Technologies
Performance Obsessed
Zero Code Redundancy
34
42. http://digitaldrummerj.me 42
Over 4 Million Apps Generated
110+ Countries with Communities
13,000 Slack Members
30,000 Start On Github
Companies Include Microsoft, Airbus,
Diesel, Dow Jones, ETC
Apps Include Untapped, Sworkit &
Microsoft Flow.
Ionic Usage
52. http://digitaldrummerj.me
What Is A PWA?
PWA = Progressive Web App
A Web Application That Works Offline
Can Be Installed On A Mobile Phone
Runs Full Screen With Icon & Splash Screen
Works Thanks To Manifest.JSON & Service Worker
53. http://digitaldrummerj.me
We Have Ludicrous Mode in a Car
We Have Invented AI
We Have Reusable Rockets
Yet Dinosaur Game,
Is Best Offline Experience
State Of Offline In 2017
58. http://digitaldrummerj.me
About Desktop Apps
Lot In Common With Web Apps In Terms Of User Experience
Some Few Noticeable Differences From Web Apps
Offline Is A Must
OSX, Windows & Linux All Have Different UI Skins
How Do You Ensure Reuse Between Each Desktop Platform
65. http://digitaldrummerj.me
Compiler For Generating Native Web
Components
Will Power Ionic 4.0
No More Framework Needed
Available For Play Today
https://github.com/ionic-team/stencil
Stencil JS
65
66. http://digitaldrummerj.me
Deploy – Update Apps Without AppStore
Package - Cloud Builds
Error Reporting
Drag & Drop Prototyping
https://ionicframework.com/products
Ionic Pro - Tools By Ionic For Ionic
66