Wow, what a month! October saw some big news drop:
Firefox version 63 enabled the Shadow DOM and Custom Elements (aka Web Components) APIs by default:
And, web components and Shadow DOM support are now stable across all major browsers, with exception of Microsoft Edge. However, ME’s team has started development, so that’s good news.
Naturally, we’re very excited about this over at Ionic, as the upcoming version of our open source UI toolkit, Framework v4, is built on web components.
Last week, Google released Chrome 70—its latest update, which introduced a slew of new features like public key credentials, enhanced Web Bluetooth support, and, most importantly, added support for Progressive Web Apps (PWAs) on Windows.
This newly added feature by the behemoth organization marks a significant stride for PWAs, which have recently become more pervasive with industry giants like Lyft, Starbucks, and Twitter introducing their own PWAs to drive better user experiences, anywhere the web runs.
At Ionic, we bet on the web a long time ago. We believe that as the web improves, so does its power to create more unique, impactful, and seamless cross-platform experiences. And in the spirit of this release, we wanted to share our perspective on what this means for the industry and the future of PWAs as a whole.
Over the last year or so, modern frontend frameworks have largely converged on a set of standard, recommended build tools and approaches to common frontend challenges (such as building, routing, and testing).
As an opinionated UI framework, Ionic has had to do varying amounts of non-UI work in the past to support frameworks like Angular, including investing in build tools, enforcing project structure, building routing systems, and more. Some of that is because existing tools weren’t mature yet or community standards hadn’t fully developed. And some of that is because we had our own opinions on how these things should work in the specific environment Ionic apps operate.
Over the last year, we’ve reflected on the state of the frontend web development world, and we’ve adjusted the understanding of our position in the frontend ecosystem and how we intend to work with existing framework communities and toolchains moving forward.
This is a guest post by Jedi Weller and his team at OpenForge. They have been pioneering new ways of designing digital solutions, integrating cross-disciplinary teams, and sharing common knowledge across technology companies in various verticals. Their work at OpenForge continues to lay the groundwork for clearer communication and enhanced transparency in the technology and startup communities.
Dev Scoping – The Final Frontier
In our industry, it’s often the case that software developers feel frustrated with the scoping process and the ‘need’ to put a ‘fixed’ number of hours on a complex feature. Developers everywhere try to estimate based on experience and past projects, but the number of variables in software development scoping can prove to be a perilous task.
This problem is exacerbated in team environments with Junior and Senior developers working together toward common solutions. This often results in Junior devs feeling ‘peer pressured’ (even unintentionally) into reducing their scopes to match other developers.
So, we built a way to help.
JuntoScope (“Together We Scope”) is a free, open-sourced, anonymous scoping tool for teams. We built it using Ionic V3, Firebase 4.12.1, a Serverless (FaaS) Architecture, and the Teamwork’s Projects API. The app is available on Google Play and the App Store.
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.