About the course
This course is designed to equip developers with the skills to build modern, cross-platform mobile and web applications using Ionic.
Starting with the fundamentals of Ionic, Angular, and Capacitor, participants will progress to advanced topics such as accessing native device functionality, working with data, and optimizing for production.
The course emphasises hands-on learning and best practices to enable you to create high-quality, performant apps for iOS, Android, and the web, using JavaScript or TypeScript.
Instructor-led online and in-house face-to-face options are available - as part of a wider customised training programme, or as a standalone workshop, on-site at your offices or at one of many flexible meeting spaces in the UK and around the World.
-
- Understand the Ionic framework and its relationship to Angular and Capacitor.
- Set up a development environment and create new Ionic projects.
- Build responsive and engaging user interfaces using Ionic's UI components.
- Utilise Capacitor to access native device functionalities across platforms.
- Implement data management techniques, including working with APIs and local storage.
- Debug and test Ionic applications effectively.
- Apply theming and styling to customise the appearance of Ionic apps.
- Optimise and build Ionic applications for production deployment to app stores and as PWAs.
-
This course is designed for:
Web developers with experience in HTML, CSS, and JavaScript.
Angular developers looking to build mobile applications.
Software Developers seeking to learn a cross-platform mobile development framework.
Anyone interested in building apps for iOS, Android, and the web from a single codebase.
-
To get the most out of this course, you should be comfortable with:
Writing HTML, CSS, and JavaScript code.
Working with Angular components and services.
Using a command-line interface.
Understanding basic programming concepts.
-
This Ionic course is available for private / custom delivery for your team - as an in-house face-to-face workshop at your location of choice, or as online instructor-led training via MS Teams (or your own preferred platform).
Get in touch to find out how we can deliver tailored training which focuses on your project requirements and learning goals.
-
Where Ionic Fits
Comparing Ionic to native iOS and Android development
Single-code-base advantages and limitations
How modular Angular architecture underpins app development
Typical workflow and tool-chain development
The importance of scalability, maintainability and testability
The process of submitting to app stores and PWA deployment
Introducing Ionic
How Ionic and Cordova make web technologies work as a native app
Installing Node.js, Ionic (latest LTS version), Angular and Capacitor
Let us know if you need to support older or different JS frameworks and / or Cordova - we can customise accordingly
Creating projects for iOS, Android and other platforms
Following best practice for a particular platform
Ionic Components
Action sheets, Alerts and Badges
Interactive elements and forms
Menus, Tabs, Views and Navigation
Routing, Inputs, Outputs and custom events
Grids, Cards, Lists and Layout
Adding Native Functionality
Ionic Native
Promises and Observables
Accessing Device Features
Invoking device sensors and capabilities
Network detection
Practical memory and resource considerations
Working with Data
Making calls for external resources
Passing parameters out to servers
Persisting and retrieving local data
Managing state (RxJS, NgRx, Zustand overview)
Debugging Tools and Techniques
Runtime diagnostics
Serving to devices and emulators
Browser-based tools
Theming and Style Guides
Managing an app theme
Using SASS variables
Platform styles
Icons and Glyphs
The Command Line Interface (CLI)
Powerful CLI features
Creating a starter project with the CLI
Creating parts of a project via commands
Testing in Ionic
Overview of testing approaches
Unit testing (Angular testing tools)
End-to-end testing (Cypress)
Production build
Development and Production modes
Configuring an automatic build chain
Optimizing for production
Ahead-of-Time (AOT) compilation.
Lazy loading of modules.
Web vitals
Cross-Platform beyond Mobile
Progressive Web Apps (PWAs) in a browser
-
https://ionicframework.com/docs/ - Ionic Framework Documentation
https://angular.io/docs - Angular Documentation
https://capacitorjs.com/docs - Capacitor Documentation
https://ionicframework.com/blog - Ionic Blog
Trusted by