1.
Ionic in 30

2.
Housekeeping Items
➔ This webinar is being recorded
➔ The presentation will be about 30 minutes
➔ All registrants will receive a link to the on-demand recording and
slides following the event
➔ You can submit questions to the speakers during the live event
using the Q&A panel

3.
Today’s Presenter
Matt Netkow
Head of Developer Relations
@dotNetkow
matt.netkow@ionicframework.com

4.
Building for Mobile is Hard
Multiple Platform styles to design for
Different code bases to maintain
More developers to hire
Steep learning curve
What about PWAs?

5.
Solutions
Build Native?
Compile to Native?
Web Technologies?

6.
Build Native?
Multiple languages to learn (Obj-C, Swift, Java, Kotlin)
Multiple code bases to maintain
Multiple teams to coordinate

7.
Solutions
Build Native? ❌
Compile to Native?
Web Technologies?

8.
Compile to Native?
Uncanny Valley of “Native” and not native
Difficult to work around complex abstractions
Still need to know native development tools

9.
Solutions
Build Native? ❌
Compile to Native? ❌
Web Technologies?

10.
Web Technologies
Run everywhere
Easy to work with
Open Standards
Future-proof
Accessible
(and your team probably already knows it)

11.
Solutions
Build Native? ❌
Compile to Native? ❌
Web Technologies? ✅

12.
But there’s no SDK for the Web
Native is made "easy" with these SDKs
Components, Animations, Gestures - all provided out-of-the-box
The Web has to reinvent these concepts.

13.
Enter, Ionic

14.
Ionic Framework
UI Components for native mobile apps, PWAs, and even Desktop
Pre-built Gestures and Animations
Adaptive Styling for iOS and Material Design
Full access to all Native APIs and Plugins
A large, vibrant world-wide community

15.
UI Components (100+)

16.
Gestures & Animations
Swiping gestures between views
Sliding items for reveals
Carousel slides for App intro

17.
Adaptive Styling
A N D R O I D I O S
Platform-aware components
Look-and-feel at home
Up to date with latest UI design

18.
Native Access
Community driven plugin ecosystem
@ionic-native project pairs with Ionic
Framework
Integrate with custom needs and APIs

19.
Framework/components are open source (MIT)
Native layers (Cordova/Capacitor) also open source
Open Web Standards - available to everyone
Open Source everything

20.
How Does Ionic Work?

21.
Built as Web Components
Core functionality ships as Custom Elements
Uses Modern JavaScript Features (ES Modules, Async/Await, etc)
Polyfills loaded when they're needed
Can be run or dropped in essentially anywhere
Extremely performant, small, and fast!

22.
Easy to Theme with Dynamic CSS
All styles exposed via CSS Variables
Change the entire look and feel easily
Themes can be set at runtime and customized by users
MIKE ADD EXAMPLE
:root {
--ion-color-primary: #488aff;
--ion-color-primary-contrast: #fff;
--ion-color-primary-shade: #3f79e0;
--ion-color-primary-tint: #5a96ff;
}
.dark {
--ion-color-primary: #1b2b34;
--ion-color-primary-contrast: #fff;
--ion-color-primary-shade: #111C21;
--ion-color-primary-tint: #426C7F;
}

23.
Integration with Popular Frameworks
Angular, React, Vue currently. More to come
Use framework-specific tooling to better integrate with ecosystem
Ionic handles the UI/UX, frameworks handle the logic layer

24.
Getting Started
$ npm install ionic -g
$ ionic start myApp <starter-template> --type=[angular|react]
$ cd myApp
$ ionic serve

25.
Demo Time!

26.
The
Ionic App
Platform
Introducing:
✓ Visual app builder
✓ Premier native solutions
✓ Mobile DevOps services
✓ Enterprise support & advisory
Build. Connect. Deploy.

27.
Powerful, visual
development environment
Ionic Studio
✓ Visual drag-and-drop design
✓ Library of 100+ mobile-ready components
✓ Interactive properties menu

28.
Premium native and 3rd-party
integrations
Ionic Native
✓ Identity Vault Biometric mobile security solution
✓ Auth Connect Single sign-on solution
✓ Offline Storage Offline data storage solution
✓ Core Device Common device plugins

29.
Ionic Appflow
Cloud app management to
build & ship apps
✓ Generates native binaries in the cloud
✓ Real-time hot code deployments/updates to users
✓ Automates every phase of app delivery
SOON 1-click push to app stores

30.
Enterprise support & services
Expert help and guidance at
every step
✓ Enterprise support for OSS and premium software
✓ Instructor-led team training
✓ Custom Advisory services for help with any challenges

31.
Docs and Resources
➔ Ionic Framework Docs
➔ Ionic Studio Docs
➔ Ionic Native Docs
➔ Ionic Appflow Docs
➔ Community Hub
➔ Worldwide Slack
➔ Community Forum

32.
</presentation>
Questions?