Details

Category: Developer News

Technology continues to transform the way humans get work done. From highly technical careers to more manual ones, tech has revolutionized and extended human capabilities more than ever thought possible. While much of the conversation around augmenting the workforce centers around AI, there’s another angle that companies can take to equip their frontline employees with the information needed to do their jobs better than ever – superapps. 

Superapps provide an alternative path to achieve an augmented connected workforce. Rather than equipping employees with a multitude of traditional applications that lead to frustration, miscommunication, and wasted time, arming them with a single connected superapp specific to their exact needs leads to more productive, happier employees. 

What is an augmented connected workforce?

The entire concept of an augmented connected workforce is centered around empowering employees to improve productivity and enhance overall business performance through technology. 

This can be anything from surgeons using advanced laser technology to perform procedures to developers using AI to create the next great digital product. It can also be as simple as equipping employees with the technology they need, when they need it, and superapps do just that. 

What is a superapp?

A superapp is an all-in-one ecosystem that brings together various services into a single mobile application. In short, it’s a one-stop-shop for typically disparate digital experiences. 

Using a micro frontends architecture, superapps have a native shell that encompasses various mini apps. Each mini app can provide distinct functionality, from an HR portal to time tracking to product inventory to delivery routing and more. Meanwhile, the core application houses essential functionality, such as an internal messaging system and authentication/authorization, which is maintained throughout everyone’s experiences. 

How can a superapp empower the workforce?

It’s estimated that 69% of workers spend around an hour per day just navigating between various workplace apps. That means over a month of productivity is lost each year simply to wasted time. With poorly integrated experiences (literally) costing employers thousands, creating a streamlined superapp has the immediate benefit of time (and thus productivity) savings. 

Superapps can also be key in enabling superior remote collaboration. Our devices connect us like never before, and having a single place to connect with fellow employees, customers, and even managers can streamline everything from customer service to processing payroll. Imagine being able to field customer questions, check your company’s internal knowledge base, fact-check with a subject matter expert, and fix the customer’s issue all from one place. That’s the power of a connected workforce, and that’s the power of a superapp. 

Training, education, and onboarding can also become a much smoother, more efficient process through the use of a workplace superapp. A company’s HR department can provide employees with relevant training courses, collect necessary documents, and facilitate the onboarding process all in one place. 

One Ionic customer, a major retailer in the health and beauty space, was able to create a superapp that revolutionized their employee experience and point of sale operations. Their superapp enabled inventory checks, stock recording, and timekeeping on the back end, so that employees could spend more time with customers during the day. This meant an overall better customer experience, as employees were able to spend less time navigating various apps to get client questions answered, and more time actually helping them.

Learn more

If you’re considering creating a superapp, we recommend checking out our ebook on them. This ebook can help you decide if building a superapp makes sense for your project, team, and company. If it does, the ebook walks through various options and considerations for getting started. It also features real-world examples of how some of the most successful businesses are creating an augmented connected workforce using superapps. 

We also have dedicated specialists who are eager to help you harness the power of superapps – get in touch today!

The post Superapps for an Augmented Connected Workforce appeared first on Ionic Blog.

Read more https://ionic.io/blog/superapps-for-an-augmented-connected-workforce

Details

Category: Developer News

The mobile app development landscape is constantly evolving, with cross-platform frameworks like React Native and Flutter emerging as alternatives to native development. These frameworks promise to expedite mobile development. However, before diving headfirst into this seemingly convenient approach, it’s crucial to consider the potential pitfalls associated with React Native and Flutter, especially for commercial and enterprise-grade applications.

The Drawbacks of React Native and Flutter

Both React Native and Flutter have strong backing – Facebook for React Native and Google for Flutter. While this association may initially inspire confidence, it can have a hidden downside. Since these companies prioritize their internal development needs, features and bug fixes might be primarily geared to satisfy their own needs. This can leave your commercial application grappling with unresolved issues or lingering bugs that hinder its functionality and performance – dramatically impacting the overall user experience.

Additionally, React Native and Flutter lack dedicated customer support, leaving developers to navigate a sea of community forums and third-party resources for troubleshooting. This can be a time-consuming and frustrating experience, especially for critical issues impacting your business.

The Risks of Third-Party Plugins

React Native and Flutter heavily rely on third-party plugins to extend functionalities beyond their core offerings. While this approach offers flexibility, it also introduces risks. The quality and reliability of these plugins can vary greatly. You will likely encounter many plugins that aren’t maintained, have unaddressed bugs, security vulnerabilities, or compatibility issues that can destabilize your application and compromise user experience.

A brief look at the official repositories for both frameworks reveals a concerning number of open issues, signifying a backlog of unresolved problems that developers within the respective communities are grappling with. This backlog translates to potential roadblocks for your app’s development and extended wait times for solutions to critical issues.

Applications built with React Native and Flutter can face significant challenges due to limited support and issues with third-party plugins – exposing organizations to the potential risks associated with relying on frameworks that lack robust support options.

Ionic: A Reliable Partner with Enterprise-Grade Solutions

Fortunately, there’s a better alternative. Ionic offers a mature framework specifically designed for cross-platform mobile app development. Unlike React Native and Flutter, Ionic prioritizes the developer experience and provides options for customer support with various service level agreements to meet the needs of your organization. This ensures you have a reliable point of contact for troubleshooting and technical assistance, minimizing downtime and maximizing productivity.

Ionic also actively maintains a library of high-quality plugins that cater to the specific needs of commercial and enterprise applications. You won’t have to gamble with unreliable third-party solutions, ensuring your app functions smoothly and securely.

Additionally, Ionic’s Appflow simplifies the process of building, signing, and deploying binaries to each app store, streamlining the entire mobile app development lifecycle so you can focus on building the best app for your customers. With features like automated builds, in-app testing, and Live Updates, Appflow empowers you to deliver high-quality mobile apps fast and efficiently.

Choosing the Right Framework for Your Project

While React Native and Flutter are quite capable and offer compelling products, the lack of dedicated support and potential plugin issues can create significant risks for commercial projects. Ionic on the other hand, provides a more secure and reliable foundation for building robust, scalable mobile applications. With its focus on developer experience, dependable support, and enterprise plugins, Ionic empowers you to build highly performant applications.

Considering Developer Communities

While evaluating different technologies and frameworks may be the primary focus, it’s also important to consider the developer communities surrounding each option. Ionic users benefit from a well-established and active community. Additionally, Ionic provides extensive documentation that is clearly written, thorough, and provides detailed code examples, further reducing reliance on external resources. Best of all, if you run into a roadblock you just can’t work through, our dedicated team of developer experts are always there to help.

Ready to Take Control?

Don’t let hidden risks derail your mobile app development journey. Explore Ionic and discover the power of a framework that prioritizes the developer experience and your success.

Ready to learn why Ionic may be the best choice for your next project? Visit the Ionic Enterprise SDK website to learn more about available plugins, mobile CI/CD, and our comprehensive support and advisory services.

The post The Hidden Risks of Developing Mobile Apps with React Native or Flutter appeared first on Ionic Blog.

Read more https://ionic.io/blog/the-hidden-risks-of-developing-mobile-apps-with-react-native-or-flutter

Details

Category: Developer News

Hybrid apps use a blend of native and web development, where the core of the application is written using web technologies.

When thinking about creating a new mobile application experience for your internal or external customers, you are often faced with a range of options. Is building your application solely with native tools the right choice? Should your team only look at developing with web technologies? What about some of the hybrid solutions out there? 

It’s important to remember that picking the right solution for your next application (or first) depends on several factors: Your budget, the timeline, your team’s experience with the technology and, finally, your target audience.

So, with that, let’s explore the three primary methods of mobile application development and discuss some of the benefits and drawbacks of each of these paths. By the end of the article, you should have a better grasp of your choices and be able to determine the right solution to help you achieve your mobile application development goals. First, let’s define the methods.

Native mobile app development

When people speak of a native mobile application, they are usually referring to an application that has been written using the native development language and tools specific to that platform. For example: A native iOS application would be written in either Swift or Objective-C and compiled using Xcode, while a native Android application would have been developed using Kotlin or Java and compiled using Android Studio.

Benefits of developing a native app

Since these applications are developed using the platform’s default solutions, developers have full and direct access to all of the device’s capabilities. This can include the device’s sensors, the user’s address book, biometrics scanning, and whatever the latest and greatest new bit of technology the phone offers. Native applications tend to also be more performant since their code is ‘closer to the metal.’ In addition to being faster, you will also have access to all of the native user interface (UI) controls and layouts. While you will probably want to style them to fit your applications’ theme or design system, you will also want them to behave and interact like any other UI element on that platform.

The downside to building a native app

Any application written for iOS using Swift cannot run on Android, and vice versa. Meaning, you have to develop and maintain separate codebases specific to each platform, which can require more software engineers and double your budget, assuming that you’d want to release your application for both iOS and Android. In addition, your application is only available through each platform’s app stores, subjecting it to their respective rules and restrictions. This means for every release, whether it is a new feature or a bug fix, the same approval process must occur. This can take anywhere from a few days to a few weeks.

Web app development

For some, this uncertainty about having your application approved by faceless app store gatekeepers is too risky. There are also stories of top-tier applications found to be violating regulations and being removed from the app store, which can cause a loss of revenue. Because of this, some developers have turned to building a web-only application.

Web app development benefits

Building web apps gives development teams the freedom to build applications outside the app stores and offer their application to other mobile and desktop users. These are just traditional web applications written in HTML, CSS, and JavaScript for which you can leverage a wide range of frameworks and libraries, such as Angular, React, Vue, or even vanilla JavaScript.

Why web app development is limiting

When taking the web app development approach, your mobile application is restricted to the capabilities of the user’s mobile browser (and its quirks). This means it will not have full access to the user device for things like their address book and more. While this has improved over the years with access to features like GPS and the camera, depending on the features needed for your application this could become an issue.

One of the larger challenges for developing applications using web technologies is that many of the common application UI controls, e.g. tab navigator, do not natively exist and have to be recreated, which might lead to your application not working quite right. That said, many of the UI libraries have taken great care in replicating most of the common UI components necessary for your app, so this risk is reduced.

Expanding options with Progressive Web Apps (PWAs)

In 2017, Google introduced the concept of Progressive Web Applications (PWAs), which allow these types of applications to adopt more app-like features such as standard app icons, push notifications, offline capabilities, and more. Microsoft and Google have since made these types of applications available in their respective app stores, which vastly simplifies the process of putting apps in the hands of users. 

For some development teams, this solution is appealing given that they can easily create an application from a single codebase, which can then be used on a variety of platforms and quickly updated with a new feature or bug fix by simply deploying to your server.

Hybrid mobile app development

This solution is a blend, hence the name hybrid, of both native and web development. Where the core of the application is written using web technologies (HTML, CSS, and JavaScript), which are then encapsulated within a native application. Through the use of plugins, these applications can have full access to the mobile device’s features. To better understand this approach, let’s break down how it all fits together.

The heart of a hybrid mobile application is still just an application that is written with HTML, CSS, and JavaScript. However, instead of the app being shown within the user’s browser, it is run from within a native application and its own embedded browser, which is invisible to the user. 

This web code is then embedded into a native application wrapper using a solution like Ionic’s Capacitor. This creates a native shell application that is just the platform’s webview component in which it will load your web application. For example, an iOS application would use the WKWebView to display our application, while on Android it would use the WebView element to provide the same function. Now, with just a single web code base, you can deliver a mobile application for each of the platform’s app stores.

Ionic’s Enterprise SDK

Ionic offers a complete ecosystem of supported plugins and other enterprise-grade features as part of its Enterprise SDK. These plugins give access to the full suite of capabilities of a user’s mobile device. For instance, FaceID on an iOS device or access to on-device storage can be easily done by installing a plugin. Additionally, the SDK’s library of UI components look and feel like their native counterparts, giving you a complete set of building blocks for your hybrid mobile app.

Delivering changes to your hybrid app is easier than ever with Enterprise SDK’s Live Updates—giving developers the ability to publish feature updates and fix bugs in real time without disrupting functionality. Your team will also have access to Ionic’s support and advisory services, which ensure that your apps will continue to provide the best experience for your users.

The limitations of a web-only application are easily overcome with hybrid app development, allowing your application to have parity with native applications in their features. And because the application is not built with pure native code, your web teams can get to work quickly to build these native applications, saving organizations time and money.

Final Thoughts

So, what is the right choice for your application? Unless you are creating a highly performant game or other similar application, hybrid mobile app development might be the right choice. It offers an easier development approach, cost savings, and compatibility across a variety of platforms. Choosing an all encompassing hybrid app development toolkit, like Ionic’s Enterprise SDK, works to simplify each phase of the development lifecycle with out of the box solutions at each phase of the journey. 

To learn more about the essential elements of hybrid app development, check out Ionic’s Hybrid vs. Native ebook.

(This article was originally published here.)

The post What is Hybrid Mobile App Development? appeared first on Ionic Blog.

Read more https://ionic.io/blog/what-is-hybrid-mobile-app-development

Details

Category: Developer News

Masahiko Sakakibara is a member of the Ionic community, a recognized Ionic Developer Expert, and an organizer of the Ionic Japan User Group. Masahiko has also contributed substantially to the Ionic community through his work translating the documentation for Ionic Framework, Stencil, and Capacitor for the Japanese community.

In a modern development workflow, reducing bundle size to optimize performance is key to providing the best user experience. However, In the realm of Ionic Standalone Components, manually running addIcons to utilize IonIcons can be repetitive and cumbersome for developers.  

To simplify this process, I’ve devised a custom approach that trims bundle size and improves app speed. I’ve included a brief tutorial below:

@Component({
  ...,
  imports: [IonIcon,...]
})
export class ExamplePage {
  constructor(){
    addIcons({accessibilityOutline})
  }
}

The method shown above does trim down bundle size and speed up the app; however, the repetitive task of managing addIcons across multiple components adds extra overhead. To fix this, I’ve developed a solution: the ionic-angular-collect-icons package. This tool is designed to help minimize bundle size while improving the overall developer experience.

Begin by installing @rdlabo/ionic-angular-collect-icons and initializing it with the command below:

npm install @rdlabo/ionic-angular-collect-icons --sve-dev
npx @rdlabo/ionic-angular-collect-icons --initialize true

And set npm script:

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
+   "prebuild": "npx @rdlabo/ionic-angular-collect-icons"
  },

Next, update your npm scripts as follows to eliminate manually managing addIcons:

Behind the Scenes

1) The Role of addIcons:

addIcons is how you register icons—mapping icon names to SVG code—directly into Ionicons within the Window object. A quick example with addIcons({ accessibilityOutline }) looks something like this:

window.Ionicons.accessibilityOutline = "data:image/svg+xml;utf8,<svg xmlns='https://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><circle stroke-linejoin='round' cx='256' cy='56' r='40' class='ionicon-fill-none ionicon-stroke-width'/><path stroke-linejoin='round' d='M204.23 274.44c2.9-18.06 4.2-35.52-.5-47.59-4-10.38-12.7-16.19-23.2-20.15L88 176.76c-12-4-23.21-10.7-24-23.94-1-17 14-28 29-24 0 0 88 31.14 163 31.14s162-31 162-31c18-5 30 9 30 23.79 0 14.21-11 19.21-24 23.94l-88 31.91c-8 3-21 9-26 18.18-6 10.75-5 29.53-2.1 47.59l5.9 29.63 37.41 163.9c2.8 13.15-6.3 25.44-19.4 27.74S308 489 304.12 476.28l-37.56-115.93q-2.71-8.34-4.8-16.87L256 320l-5.3 21.65q-2.52 10.35-5.8 20.48L208 476.18c-4 12.85-14.5 21.75-27.6 19.46s-22.4-15.59-19.46-27.74l37.39-163.83z' class='ionicon-fill-none ionicon-stroke-width'/></svg>"

From this point forward, you can call Ionicons without the overhead of unnecessary SVGs cluttering your bundle, which translates to quicker load times.

2) Why Managing addIcons Matters:

The placement of addIcons—whether in ngOnInit, the constructor, or elsewhere—isn’t a big deal as long as it runs before the icon is needed. The trick lies in efficiently managing which icons are registered. Keeping your bundle lean means being diligent about removing unused icons and adding new ones only as needed.

Missed adding icons with addIcons but everything looks fine? That could be because they pre-loaded with the component, risking display issues on direct URL access.

Despite these nuances, judicious use of addIcons remains a solid strategy for keeping your app lean and mean.

3) The Lazy Way Out:

What’s the easiest, albeit least efficient, method? Simply use addIcons to load everything without a second thought:

import * as allIcons from 'ionicons/icons';
addIcons(allIcons)

Sure, all your icons are on display, but at what cost? (Answer: a big bloated bundle)

4) A Balanced Approach:

Loading every single Ionicon is overkill, both in terms of size and headache. My compromise? Load just the icons used in your templates at app launch, using the following steps:

1. Load all component templates
2. Create a unique list of IonIcons in use in the template
3. run addIcons with the list at app launch
4. Create a CLI that automatically executes it

 I’ve also put together a CLI to automate this, sparing you the manual toil.

For development, it’s okay to load all icons for convenience. But when it comes to production time, switch to this more selective method to keep things efficient.

The CLI Magic:

This tool scans your templates for ion-icon elements, collects the used icons, and generates a use-icons.ts file. You then load this file once, and voilà—icon management made easy.

import { environment } from '../environments/environment';
import { addIcons } from 'ionicons';
import * as allIcons from 'ionicons/icons';
import * as useIcons from '../use-icons';

addIcons(environment.production ? useIcons : allIcons);

Initialization Made Easy:

Running the CLI with --initialize true sets everything up for you:

npx @rdlabo/ionic-angular-collect-icons

This generates src/use-icons.ts. Import this file in your main setup, and you’re all set. Remember to clean up any other addIcons calls in your constructors.

The Takeaway:

In the race to develop quickly and maintain speedy app performance, finding the right balance is key. Reducing bundle size can be critical in maximizing app speed and loading efficiency, but manually reducing it is often cumbersome. Hopefully this plugin makes that balancing act a bit easier.

To follow Masahiko and the work he does for the Japanese Ionic community, be sure to check out his Twitter! 

The post Automating Ionicon Usage in Angular appeared first on Ionic Blog.

Read more https://ionic.io/blog/automating-ionicon-usage-in-angular