October 2023 Summaries

As of version 4.5.0, Stencil now supports form-associated custom elements, allowing developers to build custom elements that integrate seamlessly with form elements using built-in browser functionalities like validation and accessibility. This feature utilizes the ElementInternals interface, enabling web component developers to create custom elements that interact richly with forms, similar to native HTML inputs. Stencil introduces a new option, `formAssociated`, for the `@Component` decorator, and a new `@AttachInternals` decorator, allowing components to access ElementInternals. An example implementation of a custom text input demonstrates how form-associated custom elements can automatically connect with surrounding forms, using methods such as `setFormValue` to assign values to form elements. This advancement opens up a range of possibilities for Stencil components in form interactions, enhancing their capabilities in form management and data handling.

Appflow, Ionic's mobile CI/CD platform, now offers a 50% faster build experience with its new M1/Apple Silicon build stack, available on all paid plans, marking a significant upgrade for iOS developers. The platform provides a cloud environment that simplifies the compilation of native binaries for iOS and Android applications by eliminating the need for manual updates and hardware provisioning. The new build stacks, supported by Apple's M1 chip, promise enhanced performance and efficiency, aligning with Apple's transition from Intel-based hardware to custom silicon. This shift facilitates faster build times and more stable CI/CD pipelines, enabling developers to stay at the forefront of iOS development. To utilize these advancements, developers can select the Apple silicon build stacks from the “Build stack” option when creating new builds in Appflow, with the assurance of continuous updates to meet evolving infrastructure requirements.

Ionic 7.5 introduces several significant updates to enhance accessibility, Angular development, and usability across apps. A key feature is Dynamic Font Scaling, which allows text scaling on both iOS and Android for better readability, using rem units to ensure consistency across components. This feature is opt-in for iOS in Ionic 7.5 but will be default in Ionic 8, whereas on Android, it's enabled by default starting in Ionic 7.5. Additionally, developers can now import Ionic UI components as Angular standalone components, reducing final bundle sizes and improving load times. The new Toast anchor positioning feature prevents overlays from blocking important UI components, while the Datetime component now supports h11 and h24 hour cycles, expanding its time display options. An openURL utility has been added to simplify route management in ion-router, thanks to community contributions. This release encourages developers to explore these updates and provides detailed documentation and an experimental migration utility for seamless transitions.

Google's release of version 117 of the Android Webview has introduced changes to the History API that affect Capacitor applications using custom schemes, potentially causing them to hang during loading due to routing issues. Capacitor applications using the default http or https schemes remain unaffected, but those employing custom schemes should verify compatibility with Webview 117. Affected developers are advised to update their androidScheme to https, though this change would render stored data like cookies and local storage inaccessible, akin to a domain change. Alternatively, a hash-based routing strategy can be employed temporarily, although it is not recommended for long-term use. These updates are essential to maintain application reliability and performance, and developers are encouraged to reach out for support if needed.

Ionic's Appflow team has announced the beta release of a new Capacitor-based Live Updates SDK, designed to enhance performance and innovation for developers using their mobile CI/CD platform. This update allows for efficient, silent deployment of web code changes directly to users' apps, improving user experience by enabling quick fixes, feature additions, and performance optimizations without requiring app store downloads. The shift from a Cordova-based SDK to a Capacitor-based one allows functionality to move to the native layer, increasing execution speed and expanding development potential. This transition reflects a broader industry trend towards Capacitor due to its superior performance and extensibility. The new SDK offers benefits such as improved download speed and differential updates, and its migration process is designed to be seamless for current users. Further enhancements and features are expected as the SDK continues to evolve.

Simon Grimm, an Ionic Developer Expert, discusses the implementation of background tasks in Ionic apps using the Capacitor Background Runner plugin. This plugin allows developers to perform tasks such as data fetching, sending notifications, and obtaining geolocation while the app runs in the background. Historically, background tasks required native code, but Capacitor simplifies this process, though challenges remain, especially with iOS, which optimizes for battery life and may not execute tasks at specified intervals. The tutorial covers setting up a project with background tasks, configuring both iOS and Android platforms, and debugging methods, particularly on iOS. Grimm demonstrates using the Capacitor API for background task execution and integrating Capacitor Google Maps to show geolocation data. The tutorial emphasizes the importance of understanding platform-specific limitations but highlights the newfound ease of adding background capabilities to Ionic apps through Capacitor.