It lurks in the shadows…creating hidden trees…playing by a set of its own rules…it’s…
But, what exactly is Shadow DOM? Put simply, Shadow DOM is an API that is part of the Web Component model. It helps to isolate component internals, protecting users from breaking changes and global CSS.
I’d like to think we here at Ionic know a thing or two about Shadow DOM, as we recently made the move to using it in Ionic 4, and with that, received a lot of questions from the community on just what the heck it is. There’s a lot of information (and misinformation) floating around about Shadow DOM, so let’s go through the API and see what it actually does.
Two weeks ago, I decided to make a companion app for the popular game, Pokemon GO. While my days were spent working on new products at Ionic (like Identity Vault), my early mornings, nights, and weekends were spent hacking on GO Ranger.
Here’s what happened:
- Day 1: I was live on Firebase Hosting as a web app with a few rudimentary features.
- Day 3: The amazing co-founder of Ionic and designer, Ben, made me a logo and I ordered some custom T-Shirts.
- Day 9: I launched several new features throughout the next week of development, testing them with some early users and making tweaks.
- Day 13: I was live on the iOS App Store and Google Play Store.
- Day 14: I posted my app to the most popular Pokemon GO subreddit as well as my local communities.
- Day 16: GO Ranger had been downloaded over 40,000 times in over 110 countries.
- Day 17: The app started trending at #6 on Google Play, is rated 4.9/5 Stars with 50 reviews on iOS, and 4.3/5 Stars with 200+ reviews on Android.
So how did I pull it off? What are some tips to make sure your app launch is successful?
With a few simple CLI commands, you can easily supercharge your app with:
- User sign-in, sign-out, forgot password
- Static website hosting (PWAs, anyone?!)
- File storage
Today, I’m thrilled to announce the beta release of the best version of Ionic Framework yet: Ionic 4.0.0-beta.0! 🎉
Representing over a year’s worth of work, Ionic 4 brings significant performance and build time improvements, powerful theming capabilities, multi-framework compatibility, brand new documentation, and so much more to the Framework you know and love. And, despite all of the new improvements, transitioning to Ionic 4 is our easiest upgrade process yet!
Ionic 4 marks the first version of the Framework to completely embrace modern Web APIs such as Custom Elements, CSS Variables and Shadow DOM. And it’s completely framework-agnostic at the core, fulfilling our original mission to be, first and foremost, a UI library for web developers no matter what frontend tools or frameworks they decide to use.
At the same time, Ionic 4 continues to solidify its roots as Angular’s leading mobile solution. And we’re taking it even further by adopting new Angular tooling and features, ensuring that Ionic apps follow Angular standards and conventions, and benefit immediately from new Angular features the community has to offer.
There’s just so much awesome stuff to unpack with Ionic 4, but keep in mind Ionic 4 is in beta! Read on to learn more about the technology, how to migrate your existing ionic-angular apps if you’re feeling brave, and how to get started testing. We are working hard on the final release and your help will be huge for us getting there as soon as possible.
We’d also like to extend a huge THANK YOU to everyone that helped test the previous v4 alpha releases. Your input and feedback was instrumental in getting to this point. 💙
Today I’m excited to announce a new product that the Ionic team has been working hard on over the last few months: Ionic Identity Vault. Identity Vault improves frontend security for any of your Ionic apps by making it easy to add secure biometric authentication in minutes, using the latest in native security best practices.
It all started after we met with a number of large enterprise development teams who had the same complaint: “frontend security is painful and we don’t even know if we’re doing it right”. Specifically, what’s the best way to enable secure biometrics like FaceID and TouchID, and how do we safely secure authentication tokens on a device?
That started us on a journey to find the answers that ultimately led to Identity Vault.
What’s at stake when it comes to frontend security?
If a device falls into the wrong hands and an app is left running or a security token is compromised, users could be vulnerable to data loss and unauthorized access to their accounts. That could be really bad for users, and even worse for the integrity of your backend systems and data.
Bottom line: If you’re storing tokens on-device (from any backend auth service), you need to protect your users at the device level. Ionic Identity Vault solves that by providing out-of-the-box enterprise grade frontend storage and session features.
Testing an app is always an important step to take before releasing, but it can often hard to do. While Android allows users to just load arbitrary apps on their device, iOS is a much more closed ecosystem with their own rules. In order to send an app out for user testing, you have to use TestFlight. Apple’s TestFlight is a service for sharing early release of an app with user. From TestFlight’s site:
TestFlight makes it easy to invite users to test your apps and collect valuable feedback before you release them on the App Store. You can invite up to 10,000 testers using just their email address.
So with TestFlight, we can take an early build of an app, and share it with a select group of users, and allow them to provide feedback on their experience. Since the app is compiled ahead of time, developers can test the full spectrum of native APIs and detect if there are any errors.
Since the app is installed on the testers device, it’s also able to utilize Ionic Pro Deploy and ship updates during the trial period! Let’s dive into what we need to do in order to use Ionic Pro with TestFlight.
As many of you know, Ionic View was removed from the App Store by Apple last month. We quickly appealed the decision, and after waiting a number of weeks, have finally been able to communicate with Apple and have more information we can share.
Unfortunately, Apple has decided to take a new stance against any testing and sharing apps that allow you to preview in-progress applications, and is removing any app from the App Store that does so, including Ionic View and all similar products for other frameworks or platforms. We have been told this is an ongoing process and it may take a while for them to remove all the testing apps from the App Store.
We regret to say that this decision from Apple has forced us to sunset Ionic View, as View doesn’t have much value when only used on a single platform or as a self-signed app. It also can’t be open-sourced as it depends on a large portion of our backend infrastructure for Ionic Pro.
If you have Ionic View installed on any devices, it will continue to work and be available for sharing until 9/1/2018. At that point we will be removing the option to share with users in View and disabling all access. The Feedback tab will also be shut down, but your feedback will be accessible until 9/1/2018 as well.
This is a guest post from Jorge Vegara. Jorge writes frequently on Javebratt about Ionic and Firebase, be sure to check it out.
Firestore is a fully managed NoSQL document-based database for mobile and web. It’s designed to store and sync app data easily. Today, we’ll go over how to manage data from an Ionic app, using Firestore.
Today I’m excited to announce the 4th release of our open source icon pack, Ionicons, a hand-crafted set of premium icons for use across web, iOS, Android, and desktop apps.
Ionicons v4 is one of the first major icon libraries to be distributed as web components, with drastically reduced sizes, brand new icon forms reflecting the latest iOS and Material Design styles, and a continuous focus on ease of use.
This is a guest post from Chris Griffith. Chris is UI/UX engineer, an educator in the Ionic community and author of the Ionic Native Mocks library.
When you create an Ionic application, often you have need to include a Cordova plugin or two. In fact, several Cordova plugins are included when you generate an Ionic application using any of the Ionic starter templates. These plugins give your Ionic application access to features on our mobile devices that are traditionally unavailable to developers not using native programming languages.