We are excited to announce the immediate availability of BEEP, a mobile credential security tool on App Store and Google Play. BEEP will let you know if your username, email, or password have been compromised in a data breach by integrating with a 3d-party REST API service.

BEEP is the first production application that combines beautifully themed Ionic 4 web components in a Vue.js application. Modus Create made this Lab experiment publicly available for free on GitHub.

Ionic in Vue

Ionic is a gorgeous UI component library frequently used in Angular applications. The new version 4 has been completely rewritten as framework-agnostic Web Components, which opens up a plethora of opportunities for applications written in other frameworks and libraries.

Ionic 4 immediately became a top-notch option for Vue.JS applications. One of the core values at Modus Labs is giving back to the open source community, and we immediately recognized a wonderful opportunity to help connect two vibrant communities. In an effort to identify where this combo shines and how Modus Create can use it in mission-critical apps, we developed a hybrid PWA application called BEEP.

It took just minutes to start using Ionic components in a Vue application bootstrapped with Vue CLI. Obviously, this was a proof of concept, but we fell in love with it and continued utilizing both Ionic and Vue to deliver even better user experiences.

Integrating Ionic APIs and delegating navigation to Vue Router was instrumental in getting advanced components such as Modals, Menus, Popovers, and hardware back-button to work. To maintain a modular codebase, we decoupled the integration bridge into a separate library. Ionic-Vue library allows developers to get up and running with Ionic in a Vue application in under a minute.

Getting started with Ionic in a Vue application took just two lines of code.

Since the library was developed alongside the BEEP application, we were able to not only achieve feature parity and one-to-one API translation when compared to Angular, but also focus on usability and ease of integration.

Ionic-Vue extends the existing official Vue Router meaning that the developers can leverage prior experience and knowledge without having to learn a new API. The Ionic-Vue Router supports all original functionalities as well as advanced ones like named routes and lazy loading. Custom direction logic enables the app to display platform-specific Ionic transition animations. HTML5 history is fully supported to provide Ionic with custom logic for the display of the back-button within the toolbar component.

By going one step further and utilizing Webpack’s advanced features, developers can pass lazy-loaded components to the Ionic APIs which are handled behind the scenes by the Ionic-Vue library, requiring little to no extra effort while cutting download times significantly.

The current version of BEEP is a full-featured mobile application that showcases a complete solution using Ionic in Vue. We firmly believe that every complete solution or a product requires beautiful custom styling, so we made sure BEEP delivers that too.

Ionic 4 Theming Powered by CSS Variables

If you even scratched the surface with the shiny new Ionic 4, you’ll immediately notice that one of the driving architectural ideas was to eliminate build steps. This also means that Ionic makes use of some of the most powerful features of modern browsers. CSS custom properties (aka CSS variables) is undoubtedly one of the most exciting new features that Ionic banks on heavily.

Developers can theme Ionic components easier than ever. There are no preprocessors like Sass to work with — it’s all in plain CSS which speeds up build times and lowers the number of dependencies. In fact, you can change things up on the fly with your browser’s DevTools.

Ionic automatically detects device environment and flags the HTML document with OS type such as Android (md) or iOS (ios). This simplifies device-specific theming for web deployments and native builds. Speaking of native builds, BEEP works remarkably well in native environments with the help of Capacitor.

Native Mobile Builds with Capacitor

Capacitor is a Cordova-compatible native wrapper for web applications. We fell in love with the simplicity and the level of control it provides over native shells for BEEP.

Capacitor provides our web app access to native SDKs, which we used for cool features such as dynamic styling of the native status bar on Android and iOS. BEEP also ties into native events for a finer control of Android hardware buttons.

Backward compatibility with Cordova was an important factor, given that the Cordova community is so rich with useful plugins. BEEP uses that feature to prompt satisfied users for an app store review.

The Capacitor-generated native code was easy to integrate with Fastlane for simplified manual or CI automated deployments to application stores and testing services such as HockeyApp.

Native users expect rich user interfaces supported with beautiful transitions and animations. Ionic UI components already come with gorgeous transitions which we counted on, but also extended from.

Transitions and Animations Ionic 4 + Lottie

Ionic 4 bundles beautiful platform-specific transitions. However, most views depend on routing and so do transitions.

Ionic-Vue wraps Vue Router with Ionic Router Outlet, which gives Ionic components direct access to routing information. In return, Ionic provided with the eye-pleasing transitions.

Transition capabilities go beyond the built-in features, supporting third-party or custom transitions. BEEP puts that flexibility to the test in the final result view where we alternate transitions for navigating back.

One of our users reported that no other hybrid app looks and feels so native.

As if that wasn’t enough for a fantastic User Experience, our designers came up with a beautiful BEEP animation that we presented with some help from Lottie. You can see that in action with the Bee mascot moving on confirmation screens.

Experimenting with transitions helped capture edge cases in using Ionic with Vue.js, but it also helped us contribute to the global community.

Giving Back to the Open Source

As a reference application, BEEP shows how Ionic 4 apps can be used in Vue, combined with routing capabilities, theming, transitions, third-party API calls, and native integration. This application serves an even greater cause, which is helping the open source community use better software, easier.

As a product of BEEP, Modus Labs created the Ionic-Vue library that helps the community use Ionic in their Vue apps immediately. We were also able to push a number of fixes to several of the technologies mentioned above, which makes us very proud.

If we succeeded in inspiring you to give Ionic and Vue a shot, feel free to try out BEEP and take a peek into the source code. Don’t forget to let us know how it went.

Originally published at moduscreate.com on October 5, 2018.

Using Ionic 4 in Vue applications with BEEP was originally published in Modus Create: Front End Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

Part1: Ionic Creator
Part2: Ionic DevApp
Part3: Ionic Monitor
Part4: Ionic Deploy

In our previous post, we set up Ionic Monitor to catch runtime errors and fix them before they become a disaster for end users. In Part 4 of our Ionic Pro series, we will go through the Ionic Deploy service.

Ionic Deploy allows us to publish changes and hot updates to our Ionic 3 applications without needing to recompile the app and resubmit to app stores. This is very useful for publishing bug fixes, minor business logic changes and UI/UX updates to apps. As discussed earlier in the series, this makes a really good combo with the Ionic Monitor service so that errors/bugs are resolved, and fixes are shipped to users quickly. One interesting and powerful use of Ionic Deploy is A/B testing. If required, we can create different channels for testing with several variations to the app/code.

It is important to know that when using Ionic Deploy, the only changes that can be pushed immediately are changes to the view (HTML), business logic (Javascript), assets (such as images in the www folder) and styling (CSS). It excludes any changes to the native binary, such as the native plugins (Cordova Plugins), config.xml or native images (icons, splash screens, etc). For these changes, the app has to be recompiled and must go through the app stores to be updated for the end users.

How it works

Ionic Deploy works with Git Flow to push updates in production, or for testing applications via different channels created in Ionic Dashboard. Channels are useful when you have to push different versions of the app to different groups.

By default, Ionic creates two Channels for every app linked to Ionic Pro:

1. Master channel is used to test pre-production builds.
2. Production channel is used for the production builds to update the app for the end users.

Set up Deploy

To set up Ionic Deploy, go to the Ionic Dashboard, select notes-app and go to the Code section:

Then go to the Channels tab and select Set Up Deploy for the Production channel:

Notice that in the channel mentions there is no active commit on the channel yet.

The image above shows that we can select one of the three options provided:

1. Download updates in background, install next time app loads. If we use this option, when we push an update, the next time the user opens the app, it will identify that there is an update available. The plugin will download the update in the background and will apply the update the next time the user opens the app again.
2. Download updates in splashscreen and install immediately. Using this option, when we push an update, the app will start downloading the update as soon as the user opens the app (while displaying the splashscreen). The update is immediately applied and the user will see the updated version.
3. I’ll manually perform updates in JavaScript. This option is well suited for more control over the updates on special business cases. The developers can write their own logic on how and when to apply the update.

The next step is to open terminal, navigate into the app’s root folder, and copy the command as shown below:

Now execute the copied command:

cordova plugin add cordova-plugin-ionic --save \
--variable APP_ID="bafeb0a1" \
--variable CHANNEL_NAME="Production" \
--variable UPDATE_METHOD="auto"

When working on your own application, substitute your APP_ID and CHANNEL_NAME above and execute the command using terminal. Notice that we have some changes in the repository now, including package.json and config.xml as below:

The important thing to notice is that we have the APP_ID, CHANNEL_NAME and UPDATE_METHOD added with the cordova-plugin-ionic entry in config.xml. The Ionic plugin communicates with the Ionic Deploy service using the values from this entry in config.xml. If we choose the manual method in the update (i.e. if the value of UPDATE_METHOD is set to none), we would have to deal with the update mechanism in our code (we won’t be covering the manual method in this post).

The next step is to configure Ionic Pro for automated deployments. To do that, go back to the channels page, click on Productionchannel, click Settings, enter production as the branch, and hit Save Channel:

The next step is to push these changes to Ionic Pro. First, commit and push the changes in the master branch. Then, create a branch named production. This branch will deploy the changes when we run git push ionic production.

Commit and push the changes in master, then create the production branch:

git checkout -b production

Now, push the code to the production branch:

git push ionic production

After pushing the code to Ionic, the terminal will display the information below which explains that the new build has been triggered:

In the Ionic Dashboard, we can now see the new deployment:

Testing Deployments

To test that the deployments work in real time, we are going to change the Add Note button on the home page to an ion-fabbutton. Quick recap: here’s what the current home page looks like:

Below is the code that we have for the Add Notes button in the current app:

<button id="home-button1" ion-button clear color="positive" block>
  Add Note
</button>

We will replace the button with an ion-fab button:

<ion-fab top right edge>
 <button ion-fab mini><ion-icon name="add"></ion-icon></button>
</ion-fab>

After making the changes, commit and push to master. Then, checkout production:

git checkout production

Now, merge the changes from master into production:

git merge master

We are now ready to push the changes to Ionic Pro. Execute the command:

git push ionic production

Our app is currently running on an Android device as shown above. First push the changes to Ionic and then restart the app to see the changes automatically without recompiling the app for the device. The device should automatically get the updated changes:

We can also see in the Ionic Dashboard that our Production channel now has the build with the changes pushed:

There are some cases when a build is accidentally pushed with vulnerabilities or errors, and we really want to jump back to the previous stable build so we can fix the issues. Luckily, Ionic provides a way to easily roll back the changes. Click on a channel and roll back to one of the previous builds, if necessary:

Conclusion

Ionic Deploy is a really powerful tool and highly recommended for hot updates and managing channels for deployments. For a product owner or developer who is responsible for deployments, Ionic Deploy makes it really easy to manage the deployments, create auto-deployment mechanisms, provide hot updates or hot fixes, and roll back to a previous stable build if required.

This is the last part of our Ionic Pro series. You can access the app built during the series here.

Sharing is caring! Please hit that 👏 and share this article with anyone who might benefit from it. For more like this, follow Modus Create: Front End Development and Ionic, or find me on Twitter.

Building Better Ionic Apps with Ionic Pro, Part 4 was originally published in Modus Create: Front End Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

• Using Chrome Timeline to Profile Components
• The new unstable Profiler component.

Using Chrome Timeline to Profile your Components

This is the more direct way and less “invasive” method to measure your app performance.

You can use Chrome Developer Tools to visualize the components in the Chrome Timeline. Using this you can see the components that are mounted, updated and unmounted and the time used in each task.

To use this tool just load your app adding a new query string to the url ?react_perf once the app is loaded:

• Open the Timeline tab and press Record
• Use your app while Chrome is recording
• Stop the recording

Now you can analyze the results that were recorded, this data can help you figure out when some piece of the UI get’s updated when it shouldn’t, how much updates happens, etc.

Profile component

The core React team recently merge a new PR including a new component type: Profiler

This component can be used to get the following timing metrics:

• User Timing API: Measure the start and stop time for each component lifecycle
• Render time: The actual time spent rendering the Profile and it descendants
• Base render time: The time spent in the most recent `render` for each component under the Profiler tree.

How to use Profiler :

First: This component is a new experimental API so it’s currently exported as React.unstable_Profiler and its available in the master branch of react. https://github.com/facebook/react/blob/master/packages/react/src/React.js#L57

Using this component is dead simple:

This component acts just as a “container” so the Profiler can be declared anywhere in your tree and can be nested.

The onRender callback is called on each `render` of the root with the following arguments:

• id: An identificator for the Profiler
• phase: Identify in what step the component is: mount or update
• actualTime: The time spent rendering the Profiler and the descendant tree.
• baseTime: The time spent rendering the descendant components of the Profiler

Metrics

The metrics that can be gathered with this component are (as mentioned above)

• User Timing API: Measure the start and stop time for the components lifecycle. This is measured in a realtime graph gathering the times for each component lifecyle in the tree. The realtime graph is recorded after each lifecyle call.
• Actual Render time: The actual time spent rendering the Profile and it descendants. This is measured but starting a timer during the begin phase and finishing it at the complete phase. The time is recorded each time Profiler is re-rendered. Can be useful to understand how the subtree make use of `shouldComponentUpdate` and to check how the momoization process behave. Less time means better memoization.
• Base render time: The time spent in the most recent `render` for each component under the Profiler tree. This is measured for each fiber under the Profiler component. The times are not updated is the components skips the render. This can tell how expensive is the `render` function in the worst scenario.

Measuring your React app performance was originally published in Modus Create: Front End Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

One of the first things that people comment when talking about work with Graphql is about the colocation of the queries and the view component but sometimes this is more a problem than an advantage, for example, you need to reuse some query in multiple files, components or even packages, you are missing some editor highlighting or tooling support that can look the static file (static analysis). You cand read more about some of the benefits of static GraphQL queries in this blog post from the apollo folks

Well, graphql-tag give us some options to improve this situation, one is using the babel-plugin-graphql-tag that will help compiling the graphql tagged templates at build time. So you basically can write your queries inside a JS file and export as strings (tagged with the `gql` function) and then babel will take care of compile at build time and remove the `graphql-tag` dependency.

Other option is use the webpack loader provided with the package.

The webpack loader allows you to import queries/mutations from a single `. graphql` file (including import/export fragment definitions). This makes easy to store your GraphQL documents in a different “repository” than your view components, share fragments across the documents and fully support static analysis tools and editor features.

Using graphql webpack loader

To enable this features you just need to update your webpack configuration to add the corresponding loader like

Currently most of the apps written with Apollo Client are using the `gql` function to place the document inside JS template literals

module.exports = {
    module: {
        rules: [
           {
              test: /\.(graphql|gql)$/,
              loader: 'graphql-tag/loader',
              exclude: /node_modules/,
           }
        ]
    }
}

Then you just need to start moving your queries/mutation to a graphql document like:

query LoadAllComents($postId: String!) {
    id
    author
    content
    data
}

and then just import the query as any other js file

import LoadAllComments from './graphql/CommentsQueries.graphql'

Here, webpack will take care of load the `.graphql` file, parse it with the GraphQL parser and create the corresponding document.

You can also add multiple operations inside one `.graphql` file and imported them as named modules

import { LoadAllComments, OtherQuery } from './graphql/CommentsQueries.graphql'

And finally, you can also use fragments to split and reuse your code inside the queries. You just need to use the `#import` preprocessor provided by the loader.

First write the file that will contain the fragments

fragment CommentsFragment on Comment {
    id
    author
    createAt
    content
}

And then just import that into the graphql document.

#import "./fragments/CommentsFragments.graphql"

query Comments($postId: String!) {
    ...CommentsFragment
}

Other options

There is an option for those projects than don’t use webpack but still want to be able to import grapqhl documents, they can use babel-plugin-inline-import-graphql-ast

There is also a package that can be used to for those that can’t use the babel plugin: graphql-import

One step further

You can go further with this split and create a isolated package that store the shared graphql documents. This can be quickly done using yarn workspaces or lerna to create a monorepo. (You can read more here: awesome-monorepo, Why Babel is a monorepo, Go MonoRepo, Why Google use a monorepo? )

Just create a new package into your monorepo to store all the .graphql files, call it something like `@org/graphql`

Set the main entry of this package to src/index.js and inside this javascript file, just import/export the queries like:

export { AllComentsQuery, NewCommentMutation, UpdateCommentMutation } from './comments.graphql'

Now in your other packages, just add the new graphql package to the dependencies and then in the core just run

import { AllComentsQuery } from '@org/graphql'

All set!

Load your graphql documents with webpack (Apollo) was originally published in Modus Create: Front End Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

Is clear that you have two options:

1. Open each file and change the content of it with the corresponding string or
2. Search and replace: Search all the files that have that string pattern, and update that string with the correct one in a few steps.

Obviously, we don’t want to spend our time editing file by file, so the option 2 is the one that everyone would choose.
Now, most of the fancy code editors have some option in the menu that allow you to do this, and vim is not less.

How to fuzzy find and replace in vim?

In my case I have fzf installed but you can also do it with just Ag or without any plugin with just `vimgrep`

The whole idea here is run a search for the pattern, this will open the quickfix list, select the items you want and then run a command on the quickfix list to do the replace, like:

First find the files

Then , alt-a to select the items (if you are using iTerm2 in macOS you need to update the Esc+ config), and enter to populate the quickfix list with the items selected.

Now, run the command like

:cfdo %s/food/bar/g | :w

cfdo is a new command available from Vim 7.4+ that allows to run commands over items in the quickfix list natively. (More info about cfdo )

And voila!. The pattern was updated to the one you need in all the files.

VIM TIPS #3: FuzzyFind and replace was originally published in Modus Create: Front End Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

Ionic is one of the coolest frameworks out there for developing hybrid mobile apps and Progressive Web Applications (PWAs). As an Ionic partner, we have been following Ionic’s development closely and are very excited about the upcoming major release of the framework, Ionic 4. One of the main reasons is Ionic v4 is based on Stencil, which generates standard Web Components already supported in most major browsers today. For non-supported browsers, there’s a really small and robust polyfill that makes the usage of Web Components seamless. If you want to know more about Stencil, read our previous post.
Ionic v4 is a ground-up rewrite with a focus on being independent of any particular framework. Ionic v4 apps can be bootstrapped with Angular and support for other frameworks like React is planned.
Thankfully, migration from Ionic v3 to v4 is fairly straightforward and nothing like the painful upgrade from v1 to v2. In this article, we’ll show you how we can migrate an Ionic v3 app to v4. The code is already up on https://github.com/ModusCreateOrg/ion-meetups.

Setting up Ionic 4 project and moving our code

First off, install the latest version of Ionic and Cordova:

npm install -g ionic@rc cordova
// OR
yarn add --global ionic@rc cordova

Next, initialize a new Ionic 4 project

ionic start ion-meetups tabs --type=angular

Initialising a new project is the recommended way of migrating projects from v3 to v4. That way, we get all the supporting files, directory structure and a package.json compatible with v4 out-of-box. Notice the --type=angular? It specifies that our Ionic project will be based on Angular. Going forward, this flag will allow bootstrapping projects using other frameworks like React, Vue or vanilla Javascript with Ionic. However, at the time of writing this blog post, only Angular is supported with the --type flag.
Looking at the directory structure of projects, we note our first change from v3. All the pages, providers, etc. have moved to /src/app. This is in sync with how ng-cli bootstraps new projects. Keeping with convention, we move our code as follows:

/src/pages -> /src/app/pages
/src/models -> /src/app/models
/src/providers -> /src/app/providers

This pattern applies for any other custom directories or files we may have directly under /src in v3. All of them become citizens of /src/app in v4. In the following image, the directory structures are for v3 on the left and v4 on the right.

Including third party modules

If your v3 application depends upon third-party modules like moment etc., make sure to install them in the v4 project too.

Updating our imports

We need to replace ionic-angular with @ionic/angular across the project.
@IonicPage isn’t valid in v4. We can remove it from our project – both from the imports and the decorator from our pages.
We also replace any imports in NgModule like IonicPageModule.forRoot(...) or similar with a simple IonicModule. With v4, Ionic has moved to using a platform specific router instead of the NavController. Since we’re building an Angular project, we’re going to use the Angular Router. Updates to routing are possibly the biggest change in v4, so let’s talk about that next.

Changes to routing

Ionic v4 is the biggest update to the framework yet. It makes Ionic framework agnostic — we can use it with any framework out there, or with vanilla Javascript, if we so wish.
Beginning with Ionic v4, it is recommended to use the router provided by the underlying framework; and in our case, Angular.
Migrating our applications from Ionic router to Angular router is a large change in v4, and we’ve compiled a list of things that have changed with routing to make the switch easier.
In Ionic v3, we set up routes using IonicPageModule. In v4, we follow the familiar “angular way” of setting routes. Here’s a sample routing module for the tabs page, with a single child route being lazy loaded.

import { NgModule } from '@angular/core';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'about',
        outlet: 'about',
        loadChildren: '../about/about.module#AboutModule'
      }
    ]
  },
  { path: '', redirectTo: '/tabs/(about:about)', pathMatch: 'full' }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsRoutingModule { }

Further, here’s the about.module.ts, which is being lazily loaded into this tab route.

import { NgModule } from '@angular/core';
import { NgModule } from '@angular/core';
import { RouterModule, Route } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { AboutPage } from './about.page';
const routes: Array = [
  {
    path: '',
    component: AboutPage,
    outlet: 'about'
  }
];
@NgModule({
  declarations: [AboutPage],
  entryComponents: [AboutPage],
  imports: [IonicModule, RouterModule.forChild(routes)]
})
export class AboutModule { }

If you’ve not seen the outlet route property before, it enables secondary routing. It’s useful when you have more than one routing outlet on a page, and want to control which components/pages go into which outlet. To find out more about secondary routes, visit official Angular docs.
With the routes setup, we need to update the code around navigation and params in our components. We use Router instead of NavController for routing, and ActivatedRoute instead of NavParams to fetch navigation params (data passed during navigation in v4). Both are imported from @angular/router.
Following is how we navigated in v3:

this.navCtrl.push('user-detail-page', {userEmail: user.email});

This gets updated in v4 as:

this.router.navigateByUrl(`tabs/(users:user-detail/${user.email}`);

There’s more than one way to navigate in v4, all thanks to the Angular router. We can find out more about routing in Angular’s official routing docs.
To access params, we use Angular’s ActivatedRoute provider as follows:

constructor(
  private route: ActivatedRoute
) {
  this.route.params.pipe(first()).subscribe(params => {
    // access individual parameters as params.id or params.email
  });
}

Lastly, let’s look at how we set up router outlets in our templates, where we want our routes to load. Here’s what a tab component looks like in v3:

<ion-tabs>
  <ion-tab [root]="tab3Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
</ion-tabs>

Here’s what an equivalent v4 tab component template will look like:

<ion-tabs>
  <ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

Notice how ion-tab is just a wrapper around the actual ion-router-outlet. Unlike in v3, ion-tab itself isn’t responsible for any routing here.
With that, we’ve covered the 3 aspects of routing in v4 – setting routes up in module and navigating using component logic and template. Obviously, the entire Angular router API is available to us for use in Ionic now.
Note: If you have an Ionic v3 web app, you may want to preserve compatibility with the old URLs; i.e. for existing shared links and existing users having bookmarks etc. We wrote a RoutesFallbackService to handle the old URLs compatibility. Feel free to use the code snippet.

Changes to styles encapsulation

In v3, all of the page styles were encapsulated in the styles files under the page element tag. For instance, for AboutPage, we had something like this in the about.scss file:

page-about {
  .about-page {
    &__contributors {
      .details {
        margin-left: 10px;
      }
    }
  }
}

Ionic v3 did magic behind the scenes for keeping the styles encapsulated. However, this does not work in v4 because of Angular’s own view encapsulation methods. So you cannot style the about-page element within the about.scss file.
If you did not have any styles for the Host Element in v3, you could remove the about-pageselector for v4. But if you did have some styles earlier, you can use the :host selector as below in v4 styles:

:host {
  .about-page {
    &__contributors {
      .details {
        margin-left: 10px;
      }
    }
  }
}

You can read more about Angular component styles in the Angular docs.

Changes to providers / services

In v3, when we created a provider, it would go in the providers folder and the provider was added to the app.module.ts file. In v4, when you create a service for Angular, you do it using the ng g service command. In v3, the services were provided into app.module.ts. In v4, the services contain some metadata information in the @Injectable decorator introduced in Angular v6, as below:

@Injectable({
  providedIn: 'root'
})
export class MyService {
}

What else changed?

There are also a few relatively minor changes to various Ionic entities — attributes for components, methods etc. It is recommended to consult the official Ionic docs whenever you run into problems with the API. Let’s review all the updates we did for our v4 upgrade of the ion-meetups app.
[tabIcon] and [tabTitle] attributes for element are now [icon] and [label], respectively. Instead of providing a [root] input with a component or locator string, we now set [href] to the URL of the tab’s root component directly. Example:

<ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
</ion-tab>

Navbar isn’t a thing in v4. We can use the more general toolbar to do everything done with a navbar. For most apps, this change is as small as updating the HTML tags from to . Here’s a more full-fledged example from our app:

<ion-toolbar color="primary">
  <ion-buttons slot="start">
  <ion-back-button text="Events" defaultHref="/tabs/(events:event-list)">
  </ion-back-button>
  </ion-buttons>
  <ion-title>{{($eventItem | async)?.name}}</ion-title>
</ion-toolbar>

Across the board, positioning directives such as item-start, start, item-end and end are now replaced with more consistent slot="start" or slot="end". Example:

<ion-avatar slot="start">
  <img [src]="user.picture.thumbnail">
</ion-avatar>

Positioning directives such as right, bottom etc. have been brought together into a more general API. Example:

<ion-fab vertical="bottom" horizontal="end">
  <ion-fab-button (click)="createEvent()">
    <ion-icon name="create"></ion-icon>
  </ion-fab-button>
</ion-fab>

These updates focus on making the API consistent no matter which framework you’re using ionic with.

Conclusion

We think most Ionic 3.x applications can be updated to Ionic 4 with minimal effort. Even for more complex applications, it should be a reasonably straightforward migration path.
We’ll be happy to help with any problems you face with migrations to Ionic 4. Use the comments below to tell us your experience upgrading your apps and how you’re liking Ionic 4 so far.

Modus is an official partner of Ionic. To read more about our partnership and the benefits of working with Modus + Ionic, go here.

P.S. Thanks for reading this far! If you found value in this, I’d really appreciate it if you recommend this post (by clicking the 👏 button) so other people can see it!

Upgrading an Ionic 3 application to Ionic 4 was originally published in Modus Create: Front End Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

Part1: Ionic Creator
Part2: Ionic DevApp
Part3: Ionic Monitor
Part4: Ionic Deploy

In our previous post, we demonstrated how to easily run an Ionic app on devices without installing the native SDKs using Ionic DevApp. For Part 3 in our series, we will use Ionic Monitor to find and fix errors before they are caught by users.

Ionic Monitor

Ionic Monitor is a great tool as it enables monitoring runtime errors automatically. It is perhaps the only solution that provides error tracking to the typescript source files. Compared to other error tracking mechanisms, the most appealing thing about Ionic Monitor is the way it tracks the error from the web layer to the typescript source maps.

Combining Ionic Monitor with Ionic Deploy allows for rolling out hot updates with fixes quickly. In essence, with Ionic Monitor you can:

• Find out the root cause of runtime errors with tracing to the typescript layer.
• Get real time notifications and alerts so you are notified as soon as something goes bad in the app.
• Fix the errors quickly, even in apps already live in app stores.

Getting started with Ionic Monitor

If you do not have the latest version of the Ionic CLI installed, run the command:

npm install -g ionic

In terminal, from the project’s root folder, install the Ionic Pro client from NPM:

npm install -S @ionic/pro

Make sure that you’re running @ionic/app-scripts version 3.1.0 or later, and @ionic/proversion 1.0.12 or later. You can verify the versions in the package.json file.

To setup and integrate Ionic Monitor in our notes-app , we will create an Ionic Provider named AppErrorHandlerProvider . In terminal, from the project’s root folder, run the command below to create the provider:

ionic g provider AppErrorHandler

Open the file providers/app-error-handler/app-error-handler.ts and replace the contents with the code below:

Replace the APP_ID and APP_VERSION with your application’s values for each of them. Go to Ionic Dashboard and copy your Ionic Pro App ID as shown in the image below. This APP_ID makes sure that Ionic Monitor is targeting the appropriate app for error tracking.

You will also need the value for the APP_VERSION . This is useful when shipping newer versions of the app and identifying which version the errors on Ionic Monitor are referring to. The value of APP_VERSION should be similar to the version of your package.json or config.xml (highly recommended).

Once that is taken care of, add AppErrorHandlerProvider to the providers in the app.module.tsfile as shown below:

Ionic Monitor is now set up. As an example, I created a page in the application named Monitorcontaining several buttons, each triggering a different implementation of the monitoring service. See the page in action and the results below:

Notice that the Exception Detail contains references to main.js, and on the right the information shows Source Mapped value as NO . This means that the source maps have not been configured/synced with the Ionic Pro services. To do that, run the command below (using Ionic CLI 3.9.0 or greater) in your terminal:

ionic monitoring syncmaps

Using SourceMaps

When using source maps, make sure to do the following:

• Sync the source maps before pushing a release to Ionic Pro.
• Do not sync more than once per release as mentioned in Ionic Monitor docs:

Before doing a release, ensure you’ve synced source maps and make sure to not send new source maps for that version in the future.

• The version number of the running app should match the version of the source maps.
• Utilizing semver for versioning helps in detecting regressions by comparing the version of the app in which the error occurred versus future releases of the app.

You can also upload the source maps manually. To do that, go to Ionic Dashboard. Click the Monitoring tab, then click the source maps button on the top right. You need to do a dev or prodbuild to generate source maps in YOUR_APP/.sourcemaps/. Upload main.js.map along with other .map files related to your code.
After following the steps above, you should see your synced source maps in the Ionic Dashboard as follows:

When you open the app again, tap the Call wrapped function button to trigger the same error as in the prior images. You will now see the .ts stack trace as well.

Besides having manual triggers, our app also catches any errors automatically since we’re using AppErrorHandlerProvider as the ErrorHandler. Below is an example of an error that occurred when the app property is set to null:

Summary

Ionic Monitor is a great tool that helps you find errors before they become painful for end users. With email alerts, you are notified as soon as something goes bad in your application. Since Monitor can pinpoint the errors to their exact .ts sources, there is less chance of panic attacks for you in the process of fixing the issues.

Part 4

In Part 4, we will go through Ionic Deploy, a service that makes it super easy to deploy app updates in real time.

Building Better Ionic Apps with Ionic Pro, Part 3 was originally published in Modus Create: Front End Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

Part1: Ionic Creator
Part2: Ionic DevApp
Part3: Ionic Monitor
Part4: Ionic Deploy

In Part 1 of this series, we created a rapid prototype using Ionic Creator. In Part 2 we’ll talk about the Ionic DevApp to see how it helps in developing apps faster.

According to a survey by Ionic, 94.3% of developers are targeting Android while 83.2% of them targeted iOS. Tablets and Progressive Web Apps (PWA) come next in being the most targeted platforms. In general, hybrid apps with Ionic have always been fast. But it usually took hours to set up the environment and tools to run/debug on devices.

Luckily, Ionic announced the Ionic DevApp on 31st Oct 2017.

What is Ionic DevApp?

Ionic DevApp is an app that runs on your iOS/Android device. It comes with tons of pre-installed native plugins (view plugin support here). This makes it easier to test native plugins and any applications you are developing. When you run ionic serve, it installs the application onto all the devices running the Ionic DevApp. What’s awesome is that it is free and available for iOS and Android.

Why you should try Ionic DevApp

The following features make Ionic DevApp great for developing Ionic apps:

• It has pre-installed native plugins. You may have an app that depends on some of the native plugins. They’re super easy to debug as you change your code because all it takes is running ionic serve.
• No need to install the native SDKs. This removes the need to set up Android SDK. And you don’t need to install Android Studio or Xcode to view your apps on devices.
• Find your apps running on local network. Ionic DevApp connects to your Wifi. As soon as you run ionic serve, DevApp identifies and loads your apps, so you can preview them in the app.
• LiveReload FTW. You can see all code changes immediately on any device running DevApp. This makes development faster.

Let’s use it

If you do not have the latest version of the Ionic CLI installed, run the command below:

npm install -g ionic

Download the Ionic DevApp (iOS/Android) on your device(s).

Make sure your device and your computer are on the same WiFi network.

• Open DevApp on your device(s).
• Run ionic serve from your computer. This should bring up the app inside the DevApp running on your device.
• Click on the app’s name. Now you have your app running on a physical device with native plugin support and live reload.

See the notes-app in action below. On the left we have the terminal and on the right, we have our actual device’s screen casting through Vysor.

See LiveReload in action below:

If you have already used the Ionic View app, you might be thinking that Ionic DevApp is quite similar to that. In essence, the Ionic team decided to split the Ionic View app into two apps: the new Ionic View app and Ionic DevApp. While Ionic DevApp is focused on rapid development and local testing on devices, Ionic View is focused on helping developers share test distributions with product managers and other team members. You can read more about Ionic View here.

While this demo only has one device showing, you can have more devices running Ionic DevApp. You can see how fast it shows the updated result on the real device.

Part 3

In Part 3 of this series, we will set up monitoring for our application using Ionic Monitor. We will go through what the service offers and how we can use it to make better, more reliable hybrid apps with Ionic.

Building Better Ionic Apps with Ionic Pro, Part 2 was originally published in Modus Create: Front End Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

Part1: Ionic Creator
Part2: Ionic DevApp
Part3: Ionic Monitor
Part4: Ionic Deploy

With the technology shift in the modern era of computation, over 44 percent of the world’s population was predicted to use smartphones by 2017. According to Statista, the number of smartphone users around the globe is around 2.32 billion. For almost every new business coming into existence, the medium of connecting to the customers/audience is via cell phones. In other terms, mobile apps.

While performance, user interface, and user experience are important aspects of an application for an end user, there are other factors that are important for the developers and the development environment too. This includes the language, the framework (if any), as well as the tooling and the ecosystem that surrounds the language (and/or the framework). And IONIC is by far one of the best frameworks out there that lets you create quick hybrid mobile applications with a strong ecosystem and tooling.

Ionic Pro

While Ionic is awesome for creating hybrid mobile apps, Team Ionic also introduced Ionic Pro. It is a cloud platform that integrates your Ionic app with a number of cool tools that let you:

• Privately share test versions with a simple email invitation
• View all tester feedback in a central dashboard
• Deliver different versions and releases to specific segments of users
• Track and analyze errors in your code to improve app quality
• *Ship updates in realtime, without going through the app stores

*While Apple allows hot code pushes, it only allows code pushes that execute inside the webview or the JavaScript core itself. Any updates that affect the Native SDKs have to go through the App Store’s distribution process. See section 2.4.5.7 of the App Store Review Guidelines.

You can read more about what Ionic Pro offers here. We will go through Ionic Pro’s tools and services to create a sample Ionic application that leverages the power of the platform. To follow along, you have to create an account on the ionic platform first.

Ionic Creator

We’ll start with using Ionic Creator to initiate our app and with its easy-to-use interface, we’ll develop the app quickly. For creating rapid prototypes, it is highly recommended to use Ionic Creator. First, you need to log in to the Ionic Creator app. The application I’ve created using Ionic Creator looks like this:

Once you’re done prototyping, you can export your app using the Export button as shown below:

Once you’ve downloaded the zip, extract its contents to a folder. You can then create a new project for your app. For this, it is required that you have the latest version of Ionic CLI installed. You can then open a terminal/command prompt and type:

ionic start notes-app

Select the blank starter project. After doing some processing, the Ionic CLI may ask you the following:

Install the free Ionic Pro SDK and connect your app? (Y/n)

Press Y and then enter to continue. It may then ask for your email:

Log into your Ionic account
If you don't have one yet, create yours by running: ionic signup
? Email:

You can enter your email to log in. Once you’re logged in, the Ionic CLI will ask for your preferred way of connecting to Ionic Pro:

You may choose based on your preference. Once that is taken care of and the process is finished, it will ask you which app you want to link to this project:

Select Create new app for now and name it notes-app (or a name you like). Once that’s taken care of, you’ll see a beautiful message from the CLI explaining the next steps:

Next Steps:

* Go to your newly created project: cd ./notes-app

* Get Ionic DevApp for easy device testing: https://bit.ly/ionic-dev-app

* Finish setting up Ionic Pro Error Monitoring: 
https://ionicframework.com/docs/pro/monitoring/#getting-started

* Finally, push your code to Ionic Pro to perform real-time updates, and more: git push ionic master

I personally love that the CLI is guiding the developers to the amazing stuff itself. Now, we’ll copy the contents from the zip in our project. Below is a comparison of the contents in our source folder and in our target folder:

Copy the unzipped files and folders to the src folder of the project. Replace/Overwrite any duplicate files if prompted. Once you have done that, execute the command below to see the app up and running:

ionic serve

You might see some differences in the element styles rendered via ionic serve. The reason is that Ionic Creator focuses more on the element’s structure and shows the basic styles of each component. This is a great way to start building your app visually. You can then export and start working on the features.

Part 2

In part two, we will see how to use the Ionic Dev App which makes for really fast viewing and debugging your applications on your devices (Android & iOS) without having to go through the hectic process of installing the Native SDK(s).

Building Better Ionic Apps with Ionic Pro, Part 1 was originally published in Modus Create: Front End Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

If you’re reading this, you already know Angular. So whether you’ve worked on AngularJS (1.x) or Angular (Angular2+), this article is about one of the exciting things going on in the Angular world.

Angular has been one of the most popular frameworks for the past few years. It started as a library that enhanced the HTML. And now it has a huge ecosystem that contains CLI, Server side rendering, Animations e.t.c. and it is still growing with things like Angular service worker. While these are making Angular awesome, there are some experimental projects in the ecosystem which are exciting.

Team Angular announced a new idea called Angular Labs during their recent conference at Angular Mix. The idea of Angular Labs is to keep the community in sync about new experiments before releasing them to the public (that’s an Angular thing for sure). There are four initiatives that fall under the hood of Angular Labs to date:

1. Schematics
2. Angular Elements
3. CDK ( Component Dev Kit )
4. ABC ( Angular + Bazel + Closure )

While all of these are exciting, I’ll go with Angular Elements for this article.

What are Angular Elements?

Angular Elements are Custom Elements. You can embed them into any web application. This enables us to write re-usable Angular components & widgets which we can use inside React, Vue, Preact or even with vanilla JS apps. The Angular Elements will blend in every framework. Below are some features of Angular Elements:

• They are Self Bootstrapping
• They actually host the Angular Component inside a Custom Element
• They’re a bridge between the DOM APIs and Angular Components
• Anyone can use it without having the knowledge of how Angular works.

How to create an Angular Element

You can follow these steps to create your Angular Elements

• Fork (or clone) angular-elements repo
• Create your widget/app folder inside src/demos folder (e.g. test-app )
• Create your app’s module (e.g. TestAppModule -> test-app.module.ts)
• Create your component (e.g. TestComponent -> test.component.ts)
• Once your app is completed, run the webpack build to generate ngfactory files for your app by running the below command:

npm run build

• Use the custom_element_adapter to generate your Angular Element in your demo folder (e.g. src/demos/test-app with your ng-element named test-app.ngelement.ts )

import nge from '../../custom_element_adapter';

import { TestAppNgFactory } from '../../ngfactory/src/demos/test-app/test-app.ngfactory';

nge.define( TestAppNgFactory );

• After that, add your demo as an entry inside webpack.config.js as follows:

entry: {
  'todo-app': './lib/demos/todo-app/todo-app.ngelement.js',
  ..
  'test-app': './lib/demos/test-app/test-app.ngelement.js'
}

• You can then create an html file in the public folder (e.g. test-app.html ) having content as follows:

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Ng Elements Playground - Test App</title>
        <script src="es5-shim.js"></script>
        <script src="angular.js"></script>
        <script src="test-app.js" async></script>
    </head>
    <body>
        <test-app></test-app>
    </body>
</html>

I also added a demo app (Stop Watch App) and created a PR against the angular-elements repository.

Conclusion

I liked the flexibility and possibilities Angular Elements are bringing to the table, even though they are not ready to use right away. I hope we’ll see Angular Elements being stable in a few months.

Sharing is caring! Please hit that 👏 and share this article with anyone who might enjoy it. You may star the repos (Angular Elements, Angular Elements Demos) or contribute to them too. For more like this, follow Modus Create: Front End Development or find me on Twitter.

Angular Elements — Your ngComponents everywhere was originally published in Modus Create: Front End Development on Medium, where people are continuing the conversation by highlighting and responding to this story.