January 2015 Summaries

Andrew McGivery, an application developer, explains the implementation of the "Pull to Refresh" feature using the Ionic framework in mobile applications, specifically by employing the ion-refresher directive. This mechanism allows users to update content in a feed by pulling down on the list, triggering a refresh function that retrieves new data from an API. In the example provided, the Random User API is used to demonstrate how to fetch and append new data to an existing list within an application. McGivery elaborates on setting up the required components, including a factory for API calls and a controller to manage data flow and refresh events. The article provides a step-by-step guide on how to integrate this functionality, including handling data loading and user interface updates, offering developers a practical approach to enhancing user experience in their Ionic apps.

Pacifica is an app designed to help individuals manage stress, anxiety, and worry through cognitive behavioral therapy (CBT) techniques. Created by developer Dale Beermann and designer Chris Goettel, the app offers users a private, mobile platform to engage in relaxation, thinking, wellness, and behavioral exercises anytime and anywhere. Built using the Ionic framework, Pacifica benefits from cross-platform functionality, allowing for simultaneous release on iOS and Android. Beermann and Goettel, leveraging their web development backgrounds, chose Ionic for its ease of use and ability to rapidly develop prototypes, enabling them to focus on creating an engaging and empathetic user experience. The app customizes the user interface while maintaining a consistent look across platforms, demonstrating the flexibility and power of the Ionic framework in app development.

Ionic has experienced significant growth in its international community, with Meetup groups forming in numerous cities and countries around the world, showcasing the enthusiasm and dedication of its users. The Ionic team supports these Meetup groups with resources such as logos, icons, and promotional assistance through social media, helping to build a following and spread awareness about the hybrid mobile app development ecosystem. Ionic co-founder Ben Sperry contributes to this effort by designing official branding materials, while the company provides customizable presentations to assist organizers in introducing Ionic at events. This expansion reflects the organic and passionate engagement of developers who are keen to share their experiences and knowledge of Ionic's capabilities globally.

With the release of Apple's iPhone 6 and 6 Plus, developers face the challenge of adapting to new screen resolutions to prevent apps from appearing blurry due to the default lower resolution setting. Ionic's framework offers responsive styles that address this issue, but developers must execute specific steps to fully utilize the new iPhone resolutions. This involves updating the Cordova version in their projects via the Ionic CLI and adding correctly sized splash screens using the confix.xml file. The Ionic CLI simplifies this process with the resources command, which automatically generates the necessary splash screens for the iPhone 6 and 6 Plus, allowing apps to maximize the screen space offered by these devices.

Ionic View, now in public beta for iOS and Android, functions as a mobile app portfolio that allows developers to easily view, share, and test their Ionic apps across various devices. This tool integrates with the Ionic command line, enabling users to upload apps to Ionic View for testing with a subset of Cordova plugins, such as GeoLocation and BarcodeScanner, allowing for a more comprehensive preview experience. Developers can expect ongoing updates, including new plugin support and feature enhancements like auto-updating and server syncing. Users are encouraged to provide feedback and feature requests through various channels as the Ionic team continues to refine the app.

In January 2015, Ionic introduced the ability to package modern rendering engines within apps for Cordova through Crosswalk, offering Android developers a bundled Chrome webview which improves performance and predictability. This feature aims to enhance hybrid mobile development, especially for older Android devices (versions 4.0-4.3), by providing a more consistent and performant browsing experience. Crosswalk allows developers to specify a version of Chrome, thereby ensuring uniformity across different devices and easing debugging processes. While integrating Crosswalk can increase app size by 10-15MB, it significantly enhances HTML/CSS rendering and JavaScript performance. The Ionic CLI update includes various milestones and improvements, such as error reporting and the ability to specify Crosswalk versions, and highlights the ongoing transition from Ant to Gradle for Android builds. Users are advised to use version control as the steps can alter Android projects, and to report any issues encountered during integration. The update also addresses challenges such as compatibility with Cordova Android versions and resource loading, providing solutions like installing specific plugins to maintain functionality.

Nic Raboy, an application developer with expertise in Android, AngularJS, and other technologies, discusses the importance of linting and minifying Apache Cordova projects to prevent easy decompilation and enhance code security. He argues that while Grunt is commonly used for linting and uglification, it may not be the most efficient tool for Apache Cordova projects, and he suggests alternative methods for these tasks. Raboy shares a detailed guide on setting up a Cordova project for Android and iOS, emphasizing the benefits of using JSHint for linting JavaScript errors and Cordova Uglify for code obfuscation. He provides scripts and instructions for implementing these processes, highlighting the necessity of checking code for errors before building to save time and effort. The tutorial underscores the ease of decompiling hybrid apps and recommends code obfuscation through uglification to protect the developer's work before app release.

In January 2015, Ionic introduced significant updates in Beta 14 to enhance navigation UI, incorporating feedback from the community to align with established patterns across platforms. The new navbar inheritance structure allows elements within `<ion-nav-buttons>` or `<ion-nav-title>` to replace default headers, streamlining the process for building UI navigation. Additionally, components like `ion-tab` and `ion-side-menus` have been refined to serve as foundational navigation elements, with side-menus now designed to create a stable base for transitioning views. The update also implements a UX approach seen in native SDKs, where the menu toggle icon is hidden on child pages to improve user experience. Ionic's navigation improvements extend to performance enhancements, introducing view lifecycle events that allow for efficient caching and scope management without rebuilding, thus optimizing app performance. These changes collectively provide a more comprehensive structure for navigation and view management within Ionic apps.

Creating app icons and splash screens has been simplified with the Ionic CLI, which automates the generation of these resources for both iOS and Android platforms using the cordova-res tool. By placing properly sized .png images named icon.png and splash.png in a designated resource directory, developers can execute the ionic cordova resources command to produce the necessary images, which are then integrated into the app's build process via updates to the config.xml. The tool accommodates different image requirements for each platform and allows developers to specify platform-specific icons by placing images in respective directories. To ensure compatibility, the process requires Cordova CLI version 3.6 or higher, and it offers flexibility with flags to generate only icons or splash screens if needed. The minimum size for icon images is 1024×1024 pixels, while splash screens require source images of at least 2732×2732 pixels, ensuring adaptability across various devices and orientations. This feature is part of Ionic's efforts to streamline app development, with continued enhancements like Crosswalk integration for Android anticipated in future updates.