September 2021 Summaries

Ionic's recent event highlighted significant updates and new releases across its suite of open source and commercial products, including the launch of Ionic Portals, a component designed to integrate web-based experiences into native mobile apps with enhanced security and collaboration features. The introduction of the Cloud CLI for Appflow allows seamless integration with CI/CD platforms, enhancing development processes by enabling rapid updates and automated app store publishing. Ionic also expanded its official integration offerings with Apple Pay, Google Pay, Microsoft Intune, and Couchbase Lite, facilitating the creation of comprehensive and secure app experiences. Additionally, Ionic Windows was unveiled to enable the deployment of apps as native Windows applications, while the Ionic 6 Beta introduces new components and improved desktop support. The Capacitor framework continues to grow as a standard for web developers transitioning to mobile apps, and Stencil has enhanced its team and features, including support for source maps. These advancements underscore Ionic's commitment to empowering developers to create high-quality apps using web technologies, furthering their vision of a "Web Native" ecosystem.

Ionic has launched Ionic Portals, a new product designed to enhance native mobile apps on iOS and Android by integrating web-based experiences through a supercharged Web View component. This innovation allows web and native development teams to collaborate seamlessly, incorporating web functionality like checkout flows into native apps without compromising user experience. By building on Capacitor's features, Ionic Portals offers deep native integration, enabling access to native device capabilities such as camera and geolocation. Developers can manage permissions to ensure security and use Appflow's upcoming Live Updates for real-time content changes without app store reviews. This move aligns with Ionic's mission to empower web developers to deliver native-quality mobile experiences, marking a significant step in their Web Native vision.

In a significant shift for the open-source ionic-native project, community member Daniel Sogl has taken over its maintenance, and the project has been renamed awesome-cordova-plugins to reflect its focus on Cordova plugins. This change addresses confusion among developers who expected to find Capacitor plugins within ionic-native, as Capacitor has become the standard native runtime for new Ionic apps since its release in 2018. While ionic-native will remain available through a two-year deprecation period, developers are encouraged to migrate to the new @awesome-cordova registry. This transition aims to simplify the discovery of quality plugins for both Cordova and Capacitor users, with updated documentation forthcoming. Despite the changes, the impact on developers is expected to be minimal, as Daniel Sogl has been the core maintainer for years, and measures have been taken to enhance plugin quality assurance.

Sales Engineering is a crucial yet often misunderstood role in technology companies, combining elements of engineering, sales, and developer relations to support and advance the sales process. At Ionic, Sales Engineers partner with Account Executives to provide technical insights, build demonstrations, and assist prospective customers in understanding and integrating Ionic's technology into their projects. This role demands strong technical skills, excellent communication abilities, and a capacity for problem-solving, making it suitable for developers who seek a more interactive and leadership-oriented career path. Contrary to common assumptions, Sales Engineering at Ionic is not an entry-level position and offers a diverse career trajectory, potentially leading to executive roles such as CTO or VP, due to the combination of technical expertise and customer interaction. Ionic is actively hiring for this role, emphasizing its importance in the company's business model and inviting interested candidates to explore this opportunity further.

In a detailed tutorial by Anthony Giuliano, readers are guided through building a countdown tracker component using Stencil, an open-source tool for creating reusable web components suitable for integration into various frameworks like React, Angular, and Vue. The tutorial explains how to use Stencil to create a countdown tracker that calculates and displays the time remaining until a specified event, using JavaScript's Date object and functions to manage time conversions and updates. The tutorial emphasizes the use of props to receive user-defined dates and state management to update the countdown dynamically. Additionally, it discusses creating an animation loop using requestAnimationFrame to ensure continuous updates, along with addressing how to stop the loop once the countdown reaches zero. The guide concludes with styling tips to enhance the visual appeal of the component, encouraging developers to incorporate their own styles and explore further component development to build comprehensive design systems.

In Anthony Giuliano's tutorial, readers are guided through creating an audio player component using Stencil, a tool for building reusable web components suitable for large-scale design systems. The tutorial introduces fundamental Stencil concepts, leading to a customizable audio player that can integrate with various front-end frameworks or function independently. It covers setting up a Stencil project, generating boilerplate code, and managing component properties and state, such as audio title, source, duration, and playback status. By utilizing the @Prop and @State decorators, the tutorial explains how to render the component, manage audio playback, and format time displays. The guide also discusses enhancing the component's appearance using CSS and incorporating play/pause icons. Ultimately, the tutorial provides a foundation for creating versatile components that contribute to a cohesive design system across different platforms.

PSPDFKit, a tool for integrating document functionality in apps, has developed a native plugin for the Ionic platform to provide PDF capabilities using their iOS and Android SDKs. Initially created for Cordova, the plugin is now compatible with Capacitor, allowing developers to integrate PDF viewing, annotating, and editing features into their applications with a unified JavaScript API that works seamlessly across both iOS and Android platforms. The plugin emphasizes the importance of a cross-platform approach, ensuring minimal differences in API behavior between platforms to reduce maintenance costs and enhance usability for developers building multi-platform apps. PSPDFKit's solution leverages native platform SDKs to deliver optimized performance while offering customization options like page transitions and background color changes, and it supports programmatic interactions such as page switching. This integration highlights PSPDFKit's commitment to providing robust document management tools, enhancing the functionality of apps with minimal complexity.

In a blog post by Mike Hartington, the integration of MongoDB's Realm with an Ionic React app is explored, focusing on leveraging Realm as a data storage solution. Realm serves as both a local database for mobile apps and a platform for syncing data with a MongoDB Atlas instance, providing serverless functions for actions like authentication. In the web context, Realm operations occur directly on the Atlas instance. The blog outlines how to set up a task tracker app using React's Context API and hooks to create a context, provider, and hook for accessing Realm, enabling user authentication and state management. The tutorial provides code examples and instructions for setting up a free Atlas database cluster and a Realm hosted application, with options to explore different app versions using GraphQL or direct API operations. The post encourages developers to explore the provided repository and experiment with the app's functionality, highlighting the flexibility and power of using Realm in modern web applications.