Cross-Platform Apps with the Ionic SDK
The Ionic Platform is built on top of web-native architecture and allows web developers to built cross-platform and multi-experience apps utilizing their existing HTML, CSS, and JS skills.
Web Native architecture is built on the philosophy of programming using the web and rendering the web, without giving up full native access and capabilities. We'll dive in to the above stack from the bottom up:
- Native Platforms: At the very bottom we have the platforms that our web-native app is going to support. This includes Native iOS, Android, PWAs, web, responsive web, desktop, and desktop native. Anywhere the web can run! (Which is everywhere)
- Native Bridge: In order to run on all platforms, we need a piece of technology that provides access to native functionality as well as renders the web. For that we have Capacitor.
- Web Tech: You'll need a standard JS framework to build your application in. We believe you should choose the JS framework your developers already know: React, Angular, or Vue.
- UI Toolkit: In order to ensure that your developers are focusing only on the critical capabilities of your application, you'll need a UI Toolkit that makes your application feel performant and response. Ionic Framework provides a fantastic experience out of the box which you can fully customize and bring your own components as well.
- App UI & Functionality: This layer is the layer you'll actually be programming: the business functionality of your application. It's the custom functionality that makes your app successful.
Quickstart#
Want to stop reading and start building? Follow along with these tutorials, otherwise, read on and we'll talk about each piece of the platform in detail.
If Angular is your JS Framework of choice, build your first application by running through this tutorial to get a feel for the entire Ionic Platform stack.
If React is your JS Framework of choice, build your first application by running through this tutorial to get a feel for the entire Ionic Platform stack.
If Vue is your JS Framework of choice, build your first application by running through this tutorial to get a feel for the entire Ionic Platform stack.
If you already have a web codebase that you'd like to utilize cross-platform with, you can add Capacitor (a cross-platform native bridge that powers the Ionic SDK) to an existing project.
The Capacitor Native Bridge#
Capacitor is a cross-platform native runtime that powers the Ionic SDK and makes it easy to build modern web apps that run natively on iOS, Android, and the Web. Representing the next evolution of Hybrid apps, Capacitor creates Web Native apps, providing a modern native container approach for teams who want to build web-first without sacrificing full access to native SDKs when they need it.
Capacitor provides a consistent, web-focused set of APIs that enable an app to stay as close to web standards as possible, while accessing rich native device features on platforms that support them. Adding native functionality is easy with a simple Plugin API for Swift on iOS, Java on Android, and JavaScript for the web.
Capacitor modernizes web-native development by providing the following features:
- Complete control over your native projects as source code so you can modify them directly if you'd like
- Immediate access to native APIs the moment they're released by iOS and Google
- Performant rendering of your web code using the most modern browser component available on your native platform
- A complete ecosystem of native plugins for access to native device functionality
- The ability to make your own plugins quickly and easily utilizing native tooling
- Compatibility with 99% of Cordova plugin ecosystem that you might already be familiar with
You can think of Capacitor as the "engine that powers the car," it is what gives you the ability to truly be cross-platform, access native functionality, and render your web code. You can also build and share reusable micro frontends with Portals which is powered by Capacitor under the hood to provide the same direct native support and access.
Dive in to the Capacitor official documentation to learn more about this critical piece of the stack.
Share your web native applications across different applications for a micro-frontend architecture with Portals.
The Ionic Framework#
Ionic offers a library of mobile-optimized UI components, gestures, and tools for building fast, highly interactive apps.
Ionic’s UI components look great on all mobile devices and platforms. Start with pre-made components, typography, and a base theme that adapts to each platform.
Ionic is built to perform and run fast on all of the latest mobile devices. Build blazing fast apps with a small footprint and built-in best practices like hardware accelerated transitions, touch-optimized gestures, pre-rendering, and AOT compiling.
We don’t make assumptions about the tech stacks you or your team prefers to build with. That’s why Ionic is engineered to integrate seamlessly with all best frontend frameworks, including Angular, React, Vue, or even no framework at all with vanilla JavaScript.
Ionic’s components are written in HTML, CSS, and JavaScript, making it easy to build modern, high quality UIs that perform great everywhere.
One of the most important features of Ionic Framework is that it makes your app feel right on the corresponding native platform. Ignore the visual style of the components for a moment, you can customize them to look however you'd like or even create your own components. You'll get the following features out of the box that focus on giving your end-users an experience they're already familiar with:
- The correct page transition animations for the platform
- The correct physical back button or swipe-to-go-back gestures for the platform
- Push / pop navigation & routing for side menu and tabs with 0 programming required
- Beautiful header animations for the platform
- A 60fps experience that is fluid and performant out of the box
- The ability to completely customize the look & feel of your application without having to worry about programming the above yourself
You can still bring your own components, or build a sharable component library utilizing Stencil, but Ionic's UI toolkit should be used in all Ionic Platform applications in order to provide a performant experience that feels right regardless of how you'd like your application to look.
Dive in to the Ionic Framework official documentation to learn more about this critical piece of the stack.
Augment Ionic Framework by building your own Component Library that can be shared across multiple apps, no matter which JS framework they use.