May 2016 Summaries

Creator has significantly evolved since its inception, continuously incorporating user feedback to introduce new features and improvements, including the highly anticipated Theming and SCSS editing capabilities. This update allows users to customize their apps by changing header and page background colors using Ionic’s predefined theme colors, which can also be personalized to align with a brand's identity. Users can select from ten popular web fonts for iOS and Android, or incorporate any Google Font, and they can also include custom CSS and SCSS, enabling them to modify the app's appearance and layout comprehensively. The platform supports exporting projects with custom SCSS in its own directory, and a video demonstration showcases the ease of these customizations, with the promise of upcoming features like in-tool JS editing.

Handling datetime values in web development is notoriously challenging due to inconsistent behavior across different browsers and operating systems, especially with JavaScript and HTML. Ionic addresses these issues by providing the ion-datetime component, which offers a consistent and customizable user interface for selecting dates and times, overcoming the limitations of native HTML inputs. This component is part of Ionic's broader effort to enhance app development by smoothing out the inconsistencies and difficulties associated with native HTML elements, allowing developers to easily style and format datetime inputs with CSS. The ion-datetime component is supported by Ionic's Picker API, which allows for the creation of various selectable inputs beyond just dates and times, and ensures that the user interface feels native to different platforms like Material Design, iOS, and Windows, all while using the same source code.

The announcement of Ionic 2 Beta 7 highlights several key updates, including the transition to Angular 2's Release Candidate, which introduces a modular design and requires developers to follow provided upgrade instructions. Notable new features include the DateTime component for improved date and time selection, and inset modals that offer a partial screen display for modal content on larger devices. The roadmap for Ionic 2 outlines upcoming features such as swipeable tabs, popover menus, range sliders, material design chips, and enhanced right-to-left language support. Additionally, Ionic 2 aims to support Electron for desktop apps and Progressive Web Apps for a native-like web experience, encouraging developers to upgrade their apps to resolve potential issues early and leverage a versatile platform for deploying across mobile, desktop, and web environments.

Snapshot is an internal tool developed by the Ionic Framework team to ensure that updates to their components do not inadvertently affect other parts of the framework. By running end-to-end tests and capturing screenshots for each command, Snapshot assigns a unique ID to each test session, enabling the team to visually track changes and compare them against a Master Snapshot. This tool utilizes Protractor for executing tests across multiple platforms, such as Android, iOS, and Windows, and helps in identifying unintended changes by highlighting differences in bright purple. Snapshot also allows for configuration to focus on specific components when needed, making it a versatile tool for maintaining the integrity of the framework. By serving as a visual safety net, Snapshot helps the Ionic team catch bugs and ensure thorough testing before new code is released, ultimately enhancing the reliability of apps built using their framework.

Progressive Web Apps (PWAs) represent an innovative approach to mobile web applications, leveraging modern web capabilities to provide an app-like experience directly through the browser. These apps combine new Web APIs, design concepts, and functionalities such as service workers, which allow for offline functionality, push notifications, and content caching. The App Shell model further enhances PWAs by separating the app's UI shell from its content, enabling quicker load times and improving user perception of performance. Additionally, the integration of app manifests allows web apps to be installed on the homescreen like native apps, although full support varies across platforms. Ionic, a framework for building cross-platform apps, is incorporating these PWA principles to offer developers the ability to deploy apps both through traditional app stores and as PWAs, thus reaching a wider audience without the need for separate native and web app development.

In collaboration with Proximi.io, a hackathon was held from May 13 to July 31, 2016, encouraging developers to create location-aware apps using the Ionic framework and Proximi.io's Proximity Platform. Offering two prizes of 1,000 Euros each for the best Ionic proximity apps, the event aimed to integrate location technologies with IoT devices by utilizing Proximi.io's Cordova plugin and free Ionic starter app for both indoor and outdoor navigation. Participants were required to develop an app, publish it on iOS or Google Play Store, and submit screenshots, a description, and optionally, a short video to Proximi.io. The hackathon also invited public engagement through voting, and interested individuals could register to participate while receiving updates via a newsletter.

Andrew McGivery's tutorial explores using Ionic Native to interface with the Cordova Camera plugin in an Ionic 2 app. The guide walks through setting up a new application using Ionic's blank template, installing necessary plugins and platforms, and developing a method to capture and display a picture using the device's camera. It elaborates on configuring the Camera plugin to take a 1000x1000 pixel image, converting it to a base64 string, and displaying it within the app's user interface. The tutorial highlights the efficiency of combining Ionic Native and Ionic View for rapid prototyping and development, allowing developers to test their apps on real devices quickly. McGivery emphasizes that the process can be achieved with minimal code within ten minutes, showcasing the ease and effectiveness of integrating native features into Ionic apps.

Ionic Creator has introduced several exciting updates aimed at enhancing its mobile app development experience, particularly with new mobile sharing features, device preview modes, and customization options. The Creator Mobile app, available on iOS and Android, now allows Pro and Team members to generate share codes for wider app previews. Device Preview Modes have expanded to include Android and iOS, along with options for different orientations and device types, providing a more versatile cross-platform preview experience. Enhancements such as Icon and Splashscreen support bring users closer to creating app store-ready packages, while the new List Item component offers increased customization with options like Regular, Icon, Avatar, and Thumbnail list items. Upcoming features include Theming and SCSS support, which promise greater control over component customization, and the platform has also improved project management tools with a new Public/Private/Passcode system and better image properties. Feedback-driven updates continue to be a priority, as evidenced by the ongoing work on in-tool JS editing scheduled after Theming support.

Raymond Camden discusses the fundamentals necessary for hybrid mobile development, particularly emphasizing the importance of having a solid understanding of HTML, CSS, and JavaScript. He highlights the need for web developers to leverage their existing web development skills to create mobile applications using frameworks like Apache Cordova and Ionic, while also acknowledging the additional skills required for effective mobile app development. Camden underscores the significance of familiarizing oneself with tools such as Ajax for data loading and asynchronous operations in JavaScript, as well as the use of browser developer tools for debugging. He encourages developers to continually refresh their knowledge of web technologies and experiment with various tools, recommending resources from Mozilla Developer Network for learning and reviewing HTML, CSS, and JavaScript basics and advanced features.