March 2019 Summaries

Hybrid app development has evolved significantly, dispelling many early misconceptions and concerns about its ability to deliver great user experience (UX) and high performance. This development approach now benefits from advancements in web technologies and emerging platforms, enabling enterprises to create apps that appear native across devices while maintaining impressive performance. The current landscape allows for faster iteration, resource savings, and seamless cross-platform experiences, reducing the validity of previous criticisms. Additionally, companies can focus more on feature development, making hybrid app development an appealing choice for modern businesses. The full article explores these benefits and provides use cases for inspiration.

Rachel Brown discusses the challenges enterprise decision-makers face when choosing a mobile development approach, emphasizing the importance of asking the right questions beyond common comparisons like Native vs. Cross-platform or Full-Code vs. No-Code. The article highlights five crucial questions that might not be immediately obvious but are essential for making informed strategic decisions, drawing from experiences with IT executives and industry research. These questions cover evaluating in-house talent, deciding between open and closed ecosystems, and understanding the types of partners available. The guide aims to provide deeper insights into platform evaluation and is part of a series of resources designed to address significant industry topics.

Visual Studio Code (VS Code) is a versatile, open-source code editor that supports multiple platforms and numerous programming languages, blurring the lines between a basic editor and a full-fledged integrated development environment (IDE). It is particularly favored for Ionic and Angular development due to its speed, ease of installation, and extensive ecosystem of community-built extensions that enhance its functionality. Some essential extensions for teams include Prettier for code formatting consistency and TSLint for enforcing coding conventions, though TSLint is being phased out in favor of ESLint for TypeScript. GitLens provides easy access to git history, while other extensions like Peacock, Auto Rename Tag, Angular Language Service, and Angular2 Switcher streamline development tasks by improving project organization, code completion, and navigation. The Code Spell Checker is also highlighted for its utility in catching typos in code files. For those seeking a more integrated development experience specifically for Ionic apps, Ionic Studio offers additional features such as a drag-and-drop interface and on-device testing.

Rodrigo Fernández, a full-stack JavaScript developer and Ionic contributor, discusses the challenges and solutions related to Cross-Origin Resource Sharing (CORS) errors in Ionic apps, which are built using web standards like HTML, CSS, and JavaScript, and can be deployed as Progressive Web Apps or native apps using Cordova or Capacitor. He highlights that Ionic apps, running in a browser or webview, are protected from common security threats such as Cross-Site Request Forgery, and explains that CORS is a security measure that restricts HTTP requests to resources from different origins unless the server provides the necessary headers. Fernández notes that CORS errors occur when servers do not return the required headers, causing the browser's Same Origin Policy to block requests, and emphasizes the importance of understanding and configuring CORS correctly to ensure app functionality across various platforms. To address common CORS-related questions and issues, he has compiled a new section in the Ionic documentation to guide developers in troubleshooting CORS errors and implementing best practices for different scenarios.

Dark Mode is a user interface feature that inverts colors, shifting from a light to a dark palette, to reduce eye strain and improve usability, particularly in low-light environments. Traditionally, implementing Dark Mode for web applications required complex systems involving multiple CSS files for light and dark themes. However, with the introduction of System Wide Dark Mode and the prefers-color-scheme media query, developers can now more easily adapt their applications to user preferences by using CSS Variables to dynamically update styles at runtime. These advancements allow for a streamlined approach to theming, enabling applications to support Dark Mode across browsers that recognize these features while providing fallback options for those that do not. This development, though not yet universally supported, represents a significant step forward in enhancing the user experience by accommodating different viewing preferences.

Ionic Enterprise Edition (IEE) is a comprehensive solution for building native-powered apps with the Ionic framework, offering long-term support, priority fixes, and a core library of native features maintained by Ionic. It aims to address common challenges faced by enterprise development teams by enhancing app stability and security, speeding up development cycles, and providing expert support and training. IEE integrates with tools like Ionic Studio for app building and Ionic Appflow for mobile DevOps, facilitating continuous native builds and live code updates. The webinar discussed the coexistence of hybrid apps and progressive web apps (PWAs), the considerations for choosing hybrid over native apps, and the best frameworks for .NET shops using Ionic, highlighting Angular's compatibility. While Xamarin may appeal to C# developers for mobile apps, Ionic's broader platform compatibility offers greater flexibility for future expansions beyond mobile.

Ionic's latest release, Ionic 4.1, named Hydrogen, introduces several new features and improvements following the initial Ionic 4.0 release. Key updates include enhancements to the ion-skeleton-text component, allowing for animated skeleton screens that naturally integrate with media controls like ion-avatar and ion-thumbnail. The ion-checkbox component now supports an indeterminate state, providing a visual representation for partially selected groups. A notable addition to the ion-select component is the compareWith property, facilitating customized comparison logic for option selection. Furthermore, new CSS display utilities have been introduced to assist with hiding elements based on screen size breakpoints, enhancing responsive design capabilities. The update also addresses numerous bug fixes, contributing to a more stable and robust platform.

Developers often face challenges with app performance, particularly with slow loading times, and lazy loading in Ionic Angular offers a solution by optimizing load times through dynamically loading JavaScript bundles. This technique involves downloading only the necessary HTML, CSS, and JavaScript for the initial route and loading additional components as needed, which is especially beneficial for larger apps that would otherwise require extensive initial downloads. Lazy loading is enabled by default in new Ionic Angular 4.0 apps, and different pre-loading strategies can be implemented to further enhance performance, such as the PreloadAllModules strategy, which preloads all modules once the initial module is loaded, or custom strategies tailored to specific app needs. These strategies aim to maintain a balance between load speed and resource efficiency, ensuring that users have a responsive experience without unnecessary bandwidth usage. While lazy loading effectively speeds up initial page loads, careful consideration is required to manage the loading of subsequent pages, especially in larger applications, which can be achieved through custom selective pre-loading strategies using Angular's PreloadingStrategy class. This approach allows developers to strategically preload routes that are likely to be accessed next, enhancing the user experience by reducing delays in navigation.