Do you use VS Code for Ionic and Angular development? Chances are good that you do. It’s a little app from the unlikeliest of companies that is becoming a big deal.

At its core, VS Code (Code from here on), is a code editor that is free, open source, runs on multiple platforms, and has wide support for most major programming languages and environments.

It goes beyond a simple editor, though, and starts to blur the line between a lightweight editor and a full-blown integrated development environment (IDE). Code is super fast, takes seconds to install, and provides key development features most commonly found in large, commercial IDEs.

One of my favorite features of Code is its vast extension ecosystem. There are thousands of extensions out there built by the community that enhances functionality.

In this post, I’m going to share some of my favorite extensions that can help increase productivity when building Ionic and Angular apps.

Extensions for Teams

First, let’s talk about a few that will help out development teams. It is important when coding on a team that you maintain consistent coding styles and patterns. These extensions will help teams stay consistent on the really important decisions like tabs vs spaces, and if semicolons should or shouldn’t be used.

Prettier

image

Prettier is a library that provides consistent formatting and style choices in code. The Prettier extension for Code will read a common configuration file (.prettierrc) and apply these rules to code whenever you use Code’s built-in formatting. The rules available in Prettier aren’t numerous, but they are beneficial. Below is a sample .prettierrc file:

{
"printWidth": 80,
"semi": true,
"singleQuote": true,
"tabWidth": 2
}

This fairly common ruleset will provide some practical code formatting that your entire team will adopt. Setup Code to format on save, then formatting will always be applied, with no need to run some task to do it later!

TSLint

Where Prettier is mainly concerned with the formatting of code, TSLint rules can help enforce certain coding conventions like making sure triple equals is always used for equality checking. This helps make sure code complies with best practices decided by the team (as configured in the tslint.json file). TSLint can also fix common problems automatically:

TSLint in action

Installing the TSLint extension shows lint errors in Code immediately, versus waiting for the build system to report them.

Note: It was recently announced by the TSLint team that they plan on deprecating TSLint and focus on making TypeScript work better for ESLint. TSLint is still a good choice, though, until the work on ESLint for TypeScript is complete.

GitLens

image

GitLens surfaces data from git history directly into the editing surface of Code. With it, you can easily see who last edited a particular line of code, view differences, and easily browse repos on a particular commit. There are so many features here and I only use a small subset of them (much like git itself), but it saves a ton of time when needing to view commit history.

Extensions for Development in Ionic & Angular

This next set of extensions will help in your day-to-day coding activities by streamlining development.

Peacock

image

If you ever work with multiple copies of Code open it can be confusing which project you are currently looking that. Peacock aims to fix that by letting you assign toolbar colors for a particular project. For instance, you can assign your Ionic project a red toolbar, and your backend Node project a blue toolbar, making it much easier to see what project you are working on in a particular window.

Auto Rename Tag

image

This extension is so simple it’s a wonder that it isn’t included in the default version of Code yet. With the below extension enabled, you can now rename a tag in HTML and have the closing tag rename with it:

image

It also works great on Ionic component tags as well.

Angular Language Service

image

The Angular Language Service extension is maintained by the Angular team and gives code completion and go-to definition support inside of HTML templates. No more wondering what you named that model object when trying to write our HTML!

image

Angular Snippets

image

This set of Angular snippets has long been maintained by the great John Papa from Microsoft. Updated with each version of Angular, you will find dozens of snippets (bits of code that can quickly generate by typing a simple command) for the most common Angular tasks.

image

Ionic 4 Snippets

Much like the Angular snippets, this gem will complete Ionic component tags in your HTML quickly as well as some special snippets for code and CSS files. This extension saves on having to go back and forth on the docs so much. If you are still on Ionic 3, search for Ionic 3 snippets.

Angular2 Switcher

image

Of all the Angular based extensions, this one is perhaps my favorite. It allows you to quickly switch back and forth between the HTML, code, and CSS files that make up your component with quick keystrokes.

While the switching between files is a nice time saver, another feature this extension has is the ability to either cmd/ctrl+click (or hit f12) on variables and functions in HTML to quickly take you to the definition for them in the code file.

Code Spell Checker

image

This one is self-explanatory but extremely helpful: It catches spelling mistakes in code files. Often I find this helps catch unintended bugs by making a typo in a variable name that TypeScript wouldn’t otherwise catch (like in templates).

Wrapping Up

Code is a great editor for any development project. With a vast ecosystem of extensions and plugins, you can greatly customize your development environment. Have any favorite extensions that I didn’t cover here? Post them in the comments down below!

If you are looking for a more full-featured app builder for working on Ionic apps, then you might be interested in Ionic Studio. It shares many similarities with Code but offers a deeper integration into Ionic with a drag and drop interface, a properties editor, and on-device testing for quickly building out Ionic apps.

Happy coding!

Read more

This is a guest post by Rodrigo Fernández @FdezRomero, Full-stack Javascript Developer, Ionic contributor, and co-organizer of the Ionic Madrid meetup group.

One of the most distinctive features of Ionic is its long-term use and support of web standards, even more so now with Ionic 4, which uses Web Components under the hood. This commitment to universal web standards helps web developers decrease the learning curve of building mobile and desktop apps with the same technologies we know and love: HTML, CSS (or SCSS) and Javascript (or TypeScript!).

We can easily deploy these apps as Progressive Web Apps (PWAs) to be used directly from the browser, publish them to the app stores by wrapping them in a native shell like Cordova or Capacitor, or do both. But, the common denominator in each of these situations is that Ionic apps always run in a browser or webview.

This is great, because no matter the platform, we can use the same web APIs to run our app in iOS, Android, desktop (macOS/Windows/Linux with Electron), and even inside browser extensions! It also means that our apps are protected from common attack vectors, like Cross-Site Request Forgery (CSRF).

One of these protection mechanisms is Cross-Origin Resource Sharing (CORS), used by browsers and webviews to restrict HTTP and HTTPS requests made from scripts to resources in a different origin for security reasons—mainly to protect your user’s data and prevent attacks that would compromise your app.

An origin is the combination of the protocol, domain, and port from which your Ionic app or the external resource is served. For example, apps running in Capacitor have capacitor://localhost (iOS) or https://localhost (Android) as their origin.

In order to know if an external origin supports CORS, the server has to send some special headers for the browser to allow the requests.

When the origin where your app is served (e.g. https://localhost:8100 with ionic serve) and the origin of the resource being requested (e.g. https://api.example.com) don’t match, the browser’s Same Origin Policy takes effect and CORS is required for the request to be made.

CORS errors are common in web apps when a cross-origin request is made but the server doesn’t return the required headers in the response (it’s not CORS-enabled):

XMLHttpRequest cannot load https://api.example.com. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://localhost:8100’ is therefore not allowed access.

Depending on the type of request the app tries to make, the browser will need to send a preflight request ahead of time in order to know if the external resource supports CORS and if the actual request can be sent safely. If a preflight isn’t needed—like in the case of some simple GET, POST or HEAD requests— the app’s request will be made right away.

It can be hard to remember all the different CORS headers, what they do, which go in the app versus which go in the server, and if a request is considered simple or if a preflight request is needed.

That’s why, I gathered all of the common questions and issues from GitHub, the forum, and Slack to contribute a new CORS Errors section to the Ionic documentation. It will not only help you to understand CORS better and troubleshoot problems, but it can also be a guide for recommended solutions and best practices depending on your specific scenario. Hope it’s helpful!

Check out the new CORS Errors page in the docs and let us know what you think!

Read more

In case you missed it, last week we offered a live walkthrough of Ionic Enterprise Edition, the premier and supported version of everything you need to build native-powered apps with Ionic.

During that discussion, Ionic’s IEE Product Manager, Matt Kremer, and I dug into the top challenges that enterprise development teams face when building mission-critical applications. We walked through each one and discussed how Ionic Enterprise Edition addresses them. If you’d like to learn more, check out the on-demand recording.

The purpose of this post is to go back and address some of the many great questions that we weren’t able to get to in the Q&A session. Some of them are specific to Ionic Enterprise Edition, and some are about Ionic application development in general.

1. How does Ionic Enterprise Edition relate to Ionic Appflow and Studio?

Ionic Enterprise Edition provides a premier version of the entire Ionic ecosystem. This includes an enterprise version of Ionic Framework with long-term support and priority fixes Core library of native features (or plugins), fully supported and maintained by Ionic Expert services, support, and training to help you meet your development goals, pre-built solutions to common use cases like authentication, offline data, and more.

It’s designed to speed up development and help professional development teams focus on innovation, instead of worrying about open source Cordova plugin support, or how to address basic but essential use cases like mobile payments or biometrics.

With Ionic Enterprise Edition as the tech stack you use to build, our other tools and services can help you further accelerate app creation and delivery. Ionic Studio is a powerful, locally-installed app builder that helps teams learn and develop with Ionic much faster.

Ionic Appflow is our mobile DevOps solution for teams building Ionic apps. Appflow amplifies your app delivery process by providing a variety of tools to automate your team’s app delivery workflows. This includes continuous native builds in the cloud, live code updates (perform A/B tests, update content, fix bugs, etc.), and more.

2. What would be the benefit of upgrading to Ionic Enterprise Edition from an existing Ionic implementation?

There are many reasons to convert an existing Ionic project to Ionic Enterprise Edition. Depending on your company’s needs, this could include:

  • Improving the stability and security of your app by migrating existing open source Cordova plugins to Ionic EE’s core native library, which includes active maintenance and security fixes
  • Reducing your team’s next release cycle substantially by adding Ionic’s pre-built solutions for secure user authentication, offline storage, and more
  • Getting assistance upgrading from Ionic 3 to Ionic 4
  • Improving your app’s performance and avoiding costly rewrites via an architecture review and tech debt analysis
  • Increasing your application’s start-up time by removing outdated/unnecessary plugins
  • Working with the core Ionic Framework team to address a critical bug in iOS 11.3

3. How much preparation on my end is required before Ionic will perform an architecture or plugin review?

Our team is flexible; they are prepared to work with as much or as little prep as you are able to provide. architecture diagrams are helpful, but even just access to your app’s code repository is enough.


During the webinar, a lot of people also asked questions related to Ionic and app development in general. Here are our answers to a few of them:

4. Where do you see hybrid apps in the future with regard to progressive web apps?

Consumers are used to downloading mobile apps from the app stores. That behavior won’t change anytime soon. For now, and in the near future, I see hybrid apps and PWAs living side by side, together. This is the best of both worlds—your apps are available on all platforms, and your users can simply pick the best option for them. We recently wrote a blog about Native or PWA if you want to dive into the merits of either or both solutions. If there’s a native feature you want to be implemented for your PWA, the Ionic Enterprise Edition team can help build it.

5. How do you respond to customers/clients that initially push back on the choice to build a hybrid app instead of a native app?

Going the native route has its advantages: The best performance using rich native libraries and SDKs. However, for many companies, the cons outweigh the pros. Native means managing multiple codebases, hiring specialized and costly native developers, as well as working with separate teams building in parallel. Of course, no cross-platform approach can beat native when it comes to performance, but will your users notice the difference? The native performance advantage is really only necessary when you’re building a 3-D game or anything that requires very intense graphics processing. For 99% of business use cases, hybrid cross-platform is more than enough. Overall, the speed to market, efficiency of leveraging your web development team’s skills, and using one codebase to build for multiple platforms makes it a solid choice.

6. As a development organization new to the frontend space (we’re entirely a .NET shop), what’s the best framework to use with Ionic, now that you support Angular, React, and Vue?

For .NET shops specifically, I’m a fan of Angular because of TypeScript (a typed JavaScript flavor created by Microsoft that is very C#-like) and an architectural style that will feel familiar to ASP.NET MVC. Another benefit is that Ionic’s Angular “flavor” is the most mature version of the framework today making it a wise choice for organizations requiring online resources to skill up quickly.

7. Should a team more comfortable with Microsoft’s .NET framework leverage Xamarin for mobile apps instead of Ionic?

On the surface, Xamarin makes sense. It’s built by Microsoft and allows .NET developers to bring their C# skills to mobile. However, I encourage teams to spend time researching the variety of mobile development approaches available because the decision is not that simple. For example, what happens when the business wants to deploy to other platforms besides mobile? Xamarin targets iOS and Android only, meaning you’ll have to rewrite the app entirely for the new platform target or wait until Microsoft supports it (if possible). Ionic apps run anywhere a web browser can, including desktop, mobile/desktop web, and as a PWA, so extending to future platforms is much easier.


If you would like to learn more about how Ionic Enterprise Edition can help your team tackle its development projects with stability and expertise, get in touch with one of our Solutions Engineers today.

Read more

Have you ever been on your laptop, late in the evening and just thought, “My eyes sure are tired”? Speaking for myself, this happens quite a bit and I find that the bright white background of most sites tends to be the main cause.

This isn’t just a musing or my own idea, there are studies that show bright whites/bright screens lead to faster eye fatigue. So, it’s no wonder when an app offers a dark theme or a night mode that I tend to enable this feature right away.

As a web developer myself, building and enabling features like this have often meant writing multiple styles and sending down multiple CSS files for both light and dark mode. However, all of this has changed with the introduction of System Wide Dark Mode and even more recently with the introduction of the prefers-color-scheme media query.

Hello Darkness My Old Friend…

First, it probably helps to know what exactly “Dark Mode” is when it comes to user interfaces before we dive into more information.

Dark Mode is a way of inverting colors so that UI that was light becomes dark and vise versa. Got black text on a white background? With dark mode, this switches to white text on a dark background. While this feature may sound simple, in reality, there are many pieces that must be taken into consideration to build it. Parts of an App (or OS even) will need to be adjusted to make sure they are still usable once dark mode is applied.

Mac System apps dark mode animation

Although the ability to apply dark mode has been around for a while, it typically has only been accessible to native developers or locked down as a system feature. Trying to add these features to the web has lead to some less than ideal approaches like:

  • Shipping two CSS files for light and dark
  • Dynamically downloading the different CSS for light and dark

Both of these approaches often involve complex build systems and different theming with SCSS Variables being used. Luckily, there are new alternatives that have emerged to make it easier to apply dark mode to the web.

Beacons of Light In Our Dark Times

While older approaches of extra CSS may have worked in the past, we now have a new way of handling dynamic CSS. CSS Variables allow us to declare custom values in our styles, which can be updated at runtime. For instance, say we have the following CSS:

div {
  --backgroundVar: #000000;
  background: var(--backgroundVar);
}

By using --backgroundVar as the value of background, we can set the background color to black. Now, any time we want to modify the background of our element, we only need to target the CSS variable of --backgroundVar.

div.light-background {
  --backgroundVar: #ffffff;
}

This is how theming is done in Ionic, meaning we can completely change the overall look of our app all at runtime. Nontheless, this requires different classes to be applied and for the users to make the switch. But, what if we want to use System Dark Mode?

To target the system setting, we have a new media query available, prefers-color-scheme. This media query allow developers to hook into a user theme preference and provide the correct styles.

html {
  background: #ffffff;
  color: #000000;
}

@media (prefers-color-scheme: dark) {
  html {
    background: #000000;
    color: #ffffff;
  }
}

We can then take this to its next logical step and combine both CSS Variables and the prefers-color-scheme media query to simplify our styles.

// Applied accorss the entire app
:root {
  --bgColor: #ffffff;
  --textColor: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bgColor: #000000;
    --textColor: #ffffff;
  }
}


html {
  background: var(--bgColor);
  color: var(--textColor);
}

While perhaps a bit contrived, it’s easy to imagine how this could scale across an entire app. In fact, we have this snippet for adding dark mode to an entire Ionic app (test it out!):

@media (prefers-color-scheme: dark) {
  :root {

    --ion-border-color: var(--ion-color-dark-shade);
    --ion-background-color: var(--ion-color-dark);
    --ion-background-color-rgb: var(--ion-color-dark-rgb);
    --ion-text-color: var(--ion-color-light);
    --ion-text-color-rgb: var(--ion-color-light-rgb);

    --ion-color-step-50: #232323;
    --ion-color-step-100: #2e2e2e;
    --ion-color-step-150: #3a3a3a;
    --ion-color-step-200: #454545;
    --ion-color-step-250: #515151;
    --ion-color-step-300: #5d5d5d;
    --ion-color-step-350: #8b8b8b;
    --ion-color-step-400: #747474;
    --ion-color-step-450: #7f7f7f;
    --ion-color-step-500: #8b8b8b;
    --ion-color-step-550: #979797;
    --ion-color-step-600: #a2a2a2;
    --ion-color-step-650: #aeaeae;
    --ion-color-step-700: #b9b9b9;
    --ion-color-step-750: #c5c5c5;
    --ion-color-step-800: #d1d1d1;
    --ion-color-step-850: #dcdcdc;
    --ion-color-step-900: #e8e8e8;
    --ion-color-step-950: #f3f3f3;
  }
}

To see it live, visit Star Track in Safari with System Dark Mode enabled.

Star Track animations

Dark Side of the Moon

While dark mode is super awesome, we do need to let the reality sink in a bit. Currently, dark mode is only available in Desktop Safari and Firefox. Meaning that while we may want to darken all the things, we still need to provide a fallback experience for the majority of users. This could be through setting a class on the body element and targeting that with our CSS or loading additional CSS as we’ve stated before.

Thankfully, with Ionic’s CSS variables, we get a nice “happy path” to take. We can use the media query for browsers that support it, and fall back to a class selector for those that don’t. Even if we use the class-selector approach, we still have far less CSS being sent down to the user thanks to CSS Variables.

While still a bit early, having official support for dark mode in a few browsers, some shortcuts, or a mechanism to at least hook into user settings is a huge step forward to making your app much easier on the eyes and improving usability for your audience.

Read more

We are excited to announce that our first feature release after Ionic 4.0 is out now! In keeping true to using code names from the periodic table of elements, Ionic 4.1 is named Hydrogen (after the initial release of Neutronium).

We have some exciting new features to share in this release, so let’s dive right in!

Skeleton Text Update

The ion-skeleton-text component got some love in the form of a few new features and docs updates. Now, you can use ion-skeleton-text inside of media controls like ion-avatar and ion-thumbnail, which makes showing skeleton screens for your list items look more natural.

image

You can now also animate the skeleton text by passing in the animated prop:

<ion-item>
  <ion-avatar slot="start">
    <ion-skeleton-text animated></ion-skeleton-text>
  </ion-avatar>
  <ion-label>
    <h2><ion-skeleton-text animated style="width: 100px;"></ion-skeleton-text></h2>
    <p><ion-skeleton-text animated style="width: 180px;"></ion-skeleton-text></p>
    <p><ion-skeleton-text animated style="width: 80px;"></ion-skeleton-text></p>
  </ion-label>
</ion-item>

Skeletons placed inside of avatars and thumbnails will automatically adjust their size to their containers, so no need to specify a style on those. Skeletons can also be styled to have a custom border-radius, width, height, or any other CSS styles for use outside of Ionic components.

Indeterminate Checkboxes

The ion-checkbox component now has a new prop called indeterminate, and when true, it will show the checkbox in a quasi half-on/half-off state. This is useful in scenarios where you are using a “check all” checkbox, but only some of the options in the group are selected:

image

A checkbox with both the checked and indeterminate property set will appear as indeterminate. The behavior matches that of a native checkbox, where indeterminate is only a visual state.

Thanks to simonhaenisch for the PR to add this!

Select Component with compareWith

Previously, when determining if a particular option in an ion-select was selected or not, a strict === comparison was done on the object. A new compareWith property was added to ion-select that would either let the developer specify a particular property on the object to compare or provide a custom function to do the compare.

This was a feature in Ionic 3 and is now added back into Ionic 4.

Special thanks to community member zakton5 for providing a PR for this!

CSS Display Utilities

A few CSS classes were added to help with hiding elements and responsive design.

  • Add the ion-hide class to any element you want to hide (setting the display to none)
  • Use the new .ion-hide-{breakpoint}-{dir} classes to hide based on breakpoints for certain screen sizes. Check out the docs for more info.

This can be added to an existing Angular project at the end of the global.scss file:

@import '~@ionic/angular/css/display.css';

It is also included in the bundle that is used by React and Vue.

Big shout out to seiyria for this update!

Bug fixes Abound!

With the above feature updates, we also closed out many bugs since the 4.0.2 release. Check out the changelog for a full list of fixes and updates.

Happy building! 💙

Read more

© 2019 Extly, CB - All rights reserved.