Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×
Wird geladen in …3

Hier ansehen

1 von 32 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie Ionic in 30 (20)


Weitere von Ionic Framework (15)

Aktuellste (20)


Ionic in 30

  1. 1. Ionic in 30
  2. 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. 3. Today’s Presenter Matt Netkow Head of Developer Relations @dotNetkow matt.netkow@ionicframework.com
  4. 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. 5. Solutions Build Native? Compile to Native? Web Technologies?
  6. 6. Build Native? Multiple languages to learn (Obj-C, Swift, Java, Kotlin) Multiple code bases to maintain Multiple teams to coordinate
  7. 7. Solutions Build Native? ❌ Compile to Native? Web Technologies?
  8. 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. 9. Solutions Build Native? ❌ Compile to Native? ❌ Web Technologies?
  10. 10. Web Technologies Run everywhere Easy to work with Open Standards Future-proof Accessible (and your team probably already knows it)
  11. 11. Solutions Build Native? ❌ Compile to Native? ❌ Web Technologies? ✅
  12. 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. 13. Enter, Ionic
  14. 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. 15. UI Components (100+)
  16. 16. Gestures & Animations Swiping gestures between views Sliding items for reveals Carousel slides for App intro
  17. 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. 18. Native Access Community driven plugin ecosystem @ionic-native project pairs with Ionic Framework Integrate with custom needs and APIs
  19. 19. Framework/components are open source (MIT) Native layers (Cordova/Capacitor) also open source Open Web Standards - available to everyone Open Source everything
  20. 20. How Does Ionic Work?
  21. 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. 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. 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. 24. Getting Started $ npm install ionic -g $ ionic start myApp <starter-template> --type=[angular|react] $ cd myApp $ ionic serve
  25. 25. Demo Time!
  26. 26. The Ionic App Platform Introducing: ✓ Visual app builder ✓ Premier native solutions ✓ Mobile DevOps services ✓ Enterprise support & advisory Build. Connect. Deploy.
  27. 27. Powerful, visual development environment Ionic Studio ✓ Visual drag-and-drop design ✓ Library of 100+ mobile-ready components ✓ Interactive properties menu
  28. 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. 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. 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. 31. Docs and Resources ➔ Ionic Framework Docs ➔ Ionic Studio Docs ➔ Ionic Native Docs ➔ Ionic Appflow Docs ➔ Community Hub ➔ Worldwide Slack ➔ Community Forum
  32. 32. </presentation> Questions?