Downloaded 103 times
![Getting Started
$ npm install ionic -g
$ ionic start myApp <starter-template> --type=[angular|react]
$ cd myApp
$ ionic serve](https://image.slidesharecdn.com/webinarionicin30-191211211651/85/Ionic-in-30-24-320.jpg)
![Getting Started
$ npm install ionic -g
$ ionic start myApp <starter-template> --type=[angular|react]
$ cd myApp
$ ionic serve](https://image.slidesharecdn.com/webinarionicin30-191211211651/75/Ionic-in-30-24-2048.jpg)
Uploaded byIonic Framework
Ionic in 30
The document outlines a webinar presentation by Matt Netkow on the Ionic framework, focusing on building mobile applications using web technologies. It highlights the advantages of Ionic such as access to native APIs, a vibrant community, and integration with popular frameworks like Angular, React, and Vue. The discussion also covers Ionic's tools for visual app development and enterprise solutions, emphasizing ease of use and robust support for developers.
More Related Content
Ionic in 30
- 1.
- 2. Housekeeping Items ➔ Thiswebinar 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 Headof Developer Relations @dotNetkow matt.netkow@ionicframework.com
- 4. Building for Mobileis 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 toNative? Web Technologies?
- 6. Build Native? Multiple languagesto learn (Obj-C, Swift, Java, Kotlin) Multiple code bases to maintain Multiple teams to coordinate
- 7. Solutions Build Native? ❌ Compileto Native? Web Technologies?
- 8. Compile to Native? UncannyValley of “Native” and not native Difficult to work around complex abstractions Still need to know native development tools
- 9. Solutions Build Native? ❌ Compileto Native? ❌ Web Technologies?
- 10. Web Technologies Run everywhere Easyto work with Open Standards Future-proof Accessible (and your team probably already knows it)
- 11. Solutions Build Native? ❌ Compileto Native? ❌ Web Technologies? ✅
- 12. But there’s noSDK 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.
- 14. Ionic Framework UI Componentsfor 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.
- 16. Gestures & Animations Swipinggestures between views Sliding items for reveals Carousel slides for App intro
- 17. Adaptive Styling A ND 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 drivenplugin ecosystem @ionic-native project pairs with Ionic Framework Integrate with custom needs and APIs
- 19. Framework/components are opensource (MIT) Native layers (Cordova/Capacitor) also open source Open Web Standards - available to everyone Open Source everything
- 20. How Does IonicWork?
- 21. Built as WebComponents 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 Themewith 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 PopularFrameworks 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 $ npminstall ionic -g $ ionic start myApp <starter-template> --type=[angular|react] $ cd myApp $ ionic serve
- 25.
- 26. The Ionic App Platform Introducing: ✓ Visualapp builder ✓ Premier native solutions ✓ Mobile DevOps services ✓ Enterprise support & advisory Build. Connect. Deploy.
- 27. Powerful, visual development environment IonicStudio ✓ Visual drag-and-drop design ✓ Library of 100+ mobile-ready components ✓ Interactive properties menu
- 28. Premium native and3rd-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 appmanagement 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.