January 2020 Summaries

Ionic has released new "Your First Ionic App" tutorials for Angular and React, designed to teach the fundamentals of Ionic app development by guiding users in creating a cross-platform Photo Gallery app. This app allows users to take photos with a device's camera, display them in a grid, and store them permanently on the device, utilizing a single codebase that runs on the web, iOS, and Android through the Ionic Framework UI components. The app is deployed as a native iOS and Android mobile app using Capacitor, the official native app runtime, and its functionality is powered by Capacitor's Camera, Filesystem, and Storage APIs. The tutorials emphasize improving development speed with Live Reload, which aids in writing, building, testing, and deploying code, and is particularly useful for debugging native plugins directly on a device.

The release candidate for Ionic 5.0.0 has been announced, marking a significant update to the framework with design enhancements and a host of new features. This release, which has been a year in the making, is now open for developer feedback, particularly regarding several breaking changes that have been introduced. Developers are encouraged to update to the latest version of Ionic 4 to identify any deprecation warnings before transitioning to Ionic 5. Key improvements include a public Animations and Gesture API, component design updates aligning with the latest iOS and Material specifications, easier customization through CSS Variables, and revamped Ionicons. The Ionic team invites users to test the release candidate and provide feedback, while detailed documentation on the breaking changes is available for reference.

Ionic Animations is an open-source utility designed to build highly performant animations by leveraging the Web Animations API, allowing developers to create smooth animations with minimal CPU usage and reduced energy impact. Unlike traditional JavaScript-driven animation libraries, Ionic Animations offloads the animation processing to the browser, which optimizes the animations for smoother performance and better resource management. It provides a straightforward API for creating complex animations, supporting features like grouped animations and gesture animations, and seamlessly falls back to CSS Animations when necessary. Performance tests demonstrate that Ionic Animations consistently achieves high frames per second (FPS) with significantly lower CPU usage compared to leading animation libraries like anime.js, GSAP, and Velocity.js, both on desktop and mobile devices. As part of the upcoming Ionic 5.0 release, the utility is already empowering all animations within the Ionic Framework and invites developers to explore its capabilities and contribute feedback through GitHub.

Aaron Saunders, a developer and CEO at Clearly Innovative, provides a tutorial on creating a custom React hook for uploading files to Firebase using Ionic React. The focus is on setting up and implementing the custom hook, `useFirebaseUpload`, which manages the upload process, tracks progress, and handles errors. Within the parent component, the hook's state variables like `isError`, `isLoading`, and `progress` are utilized to display upload status and error messages to users. Saunders explains setting up Firebase, defining necessary state variables, and using the `useEffect` hook to trigger uploads when a file is selected. The upload process involves monitoring state changes, handling progress updates, and obtaining the download URL upon completion. The tutorial emphasizes simplicity and excludes features like authentication to maintain focus on the file upload process.

In 2019, Ionic experienced significant growth, adding over 90 enterprise customers from diverse industries and doubling its revenue as it expanded its open-source and commercial products. The company released major updates, including Ionic 4, which supported the web ecosystem beyond Angular, and launched Ionic React and Ionic Vue to broaden its framework community. Stencil One, a new Web Component and Design System compiler, and Capacitor, a native layer aimed at replacing Cordova, were also introduced. The company enhanced its enterprise offerings with products like Auth Connect for secure user authentication and Appflow, a Mobile DevOps service. Looking forward to 2020, Ionic plans to focus on addressing challenges in app development, countering low-code solutions, and continuing to improve its tools and frameworks to empower developers and enterprises alike.