This slide deck was used during a webinar presentation covering everything you can do and build with Ionic from Matt Netkow, Head of Developer Relations.
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
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?
8. Compile to Native?
Uncanny Valley of “Native” and not native
Difficult to work around complex abstractions
Still need to know native development tools
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.
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
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
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
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