September 2014 Summaries

Salesforce announced the return of its $1M Hackathon, coinciding with the October 13th Dreamforce conference, where participants have two days to develop a mobile app using Salesforce technology. To assist developers, Ionic has collaborated with Salesforce to offer the Ionic Salesforce Survival Kit, a pre-configured app template designed to streamline the development process by providing necessary tools to connect to the Salesforce platform. The template, which runs on web technologies like AngularJS, allows for easy cross-platform development on iOS and Android without the need for native development skills, although some experience with JavaScript and HTML is beneficial. Developers are encouraged to install Ionic and Cordova ahead of the event to ensure a smooth start, with additional guidance provided for configuring development environments and incorporating Salesforce authentication into apps. The template also includes instructions for setting up Salesforce OAuth and testing apps on various platforms, with resources available for further learning about Ionic and AngularJS to enhance project capabilities.

Ionic's team embarked on a redesign of their Pull-to-Refresh feature to enhance user experience by making it enjoyable and communicative. Initially, they experimented with binding the arrow icon's rotation to the pull-down motion to create a playful interaction, but realized it wasn't practical as users prioritized functionality over playfulness. They reverted to a fixed-time animation with more visually appealing icons, ensuring the update process felt clear and reassuring to users. Recognizing that quick API responses often left users uncertain if a refresh occurred, they implemented a mandatory 400ms spinner animation, providing visual confirmation of the action despite the refresh potentially completing faster. This approach prioritized user confidence and clarity in the app's functionality over technical precision, reflecting Ionic's commitment to maintaining high standards in UX design.

In the era of single-page applications, AngularJS has become a leading framework, but traditional Web 2.0 authentication methods are no longer sufficient, necessitating new approaches such as cookie-based authentication and Cross-Origin Resource Sharing (CORS). CORS, supported by major browsers, allows access to services outside the current domain, although native web views like Cordova and Phonegap need domain whitelisting for security. Proper server configuration, including setting headers like Access-Control-Allow-Credentials, is crucial for session-based authentication. AngularJS facilitates remote API access via the $http service, and cookie storage can be enabled using the withCredentials flag. Cross-Site Request Forgery (CSRF) protection can be maintained by setting appropriate headers through AngularJS configurations. While cookie-based authentication is prevalent, token-based systems or HTTP Basic Authentication might better suit some APIs, offering alternatives to avoid cross-domain issues inherent to cookie methods.

In a significant update dated September 11, 2014, the Ionic team announced that their content delivery network (CDN), which had become heavily trafficked due to the popularity of Ionicons, now supports HTTPS in collaboration with MaxCDN. This change addresses security concerns by allowing Ionicons and other Ionic resources to be loaded securely on pages using HTTPS, such as checkout pages, without encountering any issues or being blocked. Users are encouraged to utilize protocol-relative URLs to ensure HTTPS is used only when necessary, enhancing compatibility and security across various platforms, including Codepen. The update also suggests using local copies of the framework’s files for Cordova/Phonegap hybrid apps while reserving the CDN for archived versions and online demonstrations.

Ionic has introduced the Split View feature, which enhances the ability of apps to adapt to different screen sizes by allowing a side-menu to be exposed when the viewport reaches a specific width. This feature, a highly requested addition, involves using the expose-aside-when attribute directive within the ion-side-menu tag, enabling developers to specify when a menu should be visible based on the viewport's width. The default use-case for this attribute uses "large" as a shorthand for a minimum width of 768px, but it also supports custom media queries for greater flexibility, allowing developers to tailor the visibility of side-menus to various device sizes, such as phones and tablets. This enhancement improves the responsiveness and user experience of Ionic apps across diverse devices, reflecting a significant step in accommodating the needs of developers dealing with varying screen dimensions.

Sworkit is a fitness app developed by Ryan Hanna with only five months of coding experience, designed to provide accessible bodyweight workouts for users of all fitness levels without requiring a gym membership or equipment. Initially built with jQuery Mobile, the app was redesigned using the Ionic Framework after Hanna learned about it through blog posts by Holly Schinsky and Christophe Coenraets. The switch to Ionic allowed for a rapid ten-week overhaul, resulting in improved user engagement and recognition, such as being featured by Apple in the Health and Fitness section of the App Store. The app's hybrid development approach enabled simultaneous releases on both iOS and Android platforms, leading to over 25 million downloads. Ionic's components and templates helped level the playing field for hybrid developers by offering elements comparable to those available to native developers, enhancing the app's visual appeal and performance.

The Ionic CLI has been enhanced with features that streamline app development, notably with the introduction of LiveReload functionality which allows developers to test changes on devices in real time without needing to rebuild the app for minor adjustments. This feature works via web sockets and supports console and server logs, aiding in debugging on actual devices or emulators. Additionally, the CLI now integrates with Codepen, simplifying the process of starting new Ionic projects based on Codepen demos by automatically parsing and organizing code into the correct project structure. These updates aim to make Ionic app development more efficient, with improvements in documentation and command-line help to guide users through the new capabilities.

Coride.co, founded by Adam Braus in Madison, WI, is an app designed to facilitate ride-sharing by allowing drivers to sell tickets for seats in their cars during road trips, targeting the 18-35 age group. The app, built using the Ionic Framework and AngularJS, benefits from Ionic's navigation and animation capabilities, providing a robust starting point for the development team. Braus emphasizes the advantages of using HTML5 for its speed and ease of talent acquisition, which helps maintain a flexible and flat development team structure. The app is available on both iOS and Android platforms, and the team is actively seeking developers skilled in AngularJS and Node.js to support its rapid growth.