Stencil: A Compiler for Web Components

Stencil is a compiler that generates Web Components (more specifically, Custom Elements). Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.

Stencil takes features such as

  • Virtual DOM
  • Async rendering (inspired by React Fiber)
  • Reactive data-binding
  • TypeScript
  • JSX

and then generates standards-based Web Components with these features baked in.

Stencil will be used in Ionic 4, making its component usable within Vue or React.

The magical, reusable web component generator →

Fastlane Screencast: Integrate fastlane into your Ionic Framework build process

fastlane are an awesome bunch of tools. Josh Holtz has recently started Fastlane Screencast, a website with videos/tutorials for explaining and implementing built-in fastlane tools, fastlane actions, third-party fastlane plugins, continuous integration, and anything else that fastlane can possibly do.

The first video covers integrating fastlane into your Ionic Framework build process:

A second tutorial – covering dotenv and environment variables – is already up too 🙂

Fastlane Screencast →
Fastlane Screencast: Integrate fastlane into your Ionic Framework build process →

Cordova WKWebView Plugin

wkwebview

Great work by the Ionic folks:

One of our awesome engineers has been working hard to bring WKWebView to Ionic apps and is working to bring the new plugin into Cordova! The new plugin will work with both Ionic V1 and Ionic V2 apps. In fact, it should work with any iOS Cordova build!

That is great news as WKWebView really is a big deal for Hybrid Development.

It’s not included in Ionic by default, but comes as a plugin. Install it with this command:

ionic plugin add https://github.com/driftyco/cordova-plugin-wkwebview-engine.git --save

And then add this small change to your config.xml:

<feature name="CDVWKWebViewEngine">
  <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>

<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

You can use feature detection in your JS to differentiate between UIWebView andWKWebView:

if (window.indexedDB) {
   console.log("I'm in WKWebView!");
} else {
   console.log("I'm in UIWebView");
}

Cordova iOS Performance Improvements: Drop-in Speed with WKWebView →

Deeplinking in Ionic Apps

deeplinks-header

Enter the Ionic Deeplinks Plugin:

Deeplinking as a concept has evolved heavily over the last few years, with mobile devices going from supporting custom URL schemes (like instagram://) to now opening native apps in response to navigation to URLs (like amazon.com).

To help Ionic developers deeplink more easily, we are excited to announce a new, official way to deeplink into both Ionic 1 and Ionic 2 apps (and non-ionic Cordova apps). Let’s take a look at how it works

In the past I have used EddyVerbruggen/Custom-URL-scheme (which served me well). Looks like this new Ionic Deeplinks Plugin is about to replace it.

Ionic Deeplinks Introductory Blogpost: Deeplinking in Ionic Apps →
Ionic Deeplinks Plugin (GitHub) →
Ionic Deeplinks Demo for Ionic 2 (GitHub) →
Ionic Deeplinks Demo for Ionic 1 (GitHub) →

Ionic Native

Ionic_Logo

The successor to the aforementioned ngCordova:

Ionic Native is a curated set of ES6/TypeScript wrappers for Cordova/PhoneGap plugins that make adding any native functionality you need to your Ionic, Cordova, or Web View mobile app easy.

import {Geolocation} from 'ionic-native';

Geolocation.getCurrentPosition().then(pos => { 
  console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
});

let watch = Geolocation.watchPosition();
watch.subscribe(pos => {
  console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
});

// to stop watching
watch.unsubscribe();

Ionic Native (GitHub) →
Ionic Native Documentation →

Hybrid Apps with Ionic Framework

At the most recent #fronteersbe meetup I gave a talk entitled “Hybrid Apps with Ionic Framework”. You can check out the slides embedded below.

Slides with presenter notes (yet without animated gifs) – which might be a better option if you didn’t attend the talk – are also available.

Ionic Package

package-api-diagram-1

The Ionic Package service allows you to create development and production builds of your app that can be submitted to the Apple App Store and Google Play Store, or be installed directly on your friends’, family members’, and colleagues’ devices.

That’s it. Once your build is finished, you just download the distribution file we provide and carry on. Ionic Package takes care of all the heavy lifting and lets you get back to focusing on what really matters: your app.

$ ionic package build ios --profile PROFILE_TAG

The people at Ionic really have gotten this thing directed in the right direction: build an open-source framework and augment it with usefull (soon-to-be commercial) parts such as “Ionic View” and now this “Ionic Package”. It’s tools like this that make it more easy to develop hybrid apps.

If you’re familiar with build servers like Circle-CI or Travis-CI stuff like this – the result of ionic package list – might look familiar:

ionic-package-list

Ionic Package →

ionic/cordova emulate vs. Xcode 7

After the App Store automatically updated Xcode to version 7 (without me actually wanting this for now, but hey …) running ionic emulate ios -c -l would not do much anymore:

  • The app would launch but get stuck at the loading screen
  • No console.log() calls would be logged

Fixing it manually

To fix this, update the platforms/ios/projectname/projectname-Info.plist file with the following settings:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Add the snippet above at the end of the file, right before the closing </dict></plist>

Do note that you’ll have to (re)do this every time you run ionic platform add ios (which can happen when working in a team with multiple people)

Fixing it automatically

Alternatively you can use a before_emulate hook to have this change applied automatically before starting the iPhone Simulator.

  1. Put the contents below in ./hooks/before_emulate/010_ios_allowarbitraryloads.sh
  2. Make the script executable (chmod 755 ./hooks/before_emulate/010_ios_allowarbitraryloads.sh)

Every time you (or one of your teammates) runs ionic emulate ios it will check if the change in platforms/ios/projectname/projectname-Info.plist has already been made or not. If not, the settings are added.

#!/bin/bash

# Allow iPhone Simulator to make Arbitrary Loads
# @ref https://www.bram.us/2015/09/29/ionic-emulate-vs-xcode-7/

XCODEVERSION=`xcodebuild -version | grep Xcode | sed 's/Xcode //g'`
XCODEMAINVERSION=`echo $XCODEVERSION | cut -d "." -f 1`
PROJECTNAME=`xmllint --format --xpath "//*[local-name()='widget']/*[local-name()='name'][1]/text()" config.xml`

if [[ "$CORDOVA_PLATFORMS" == "ios" ]]
then

	if [[ "$XCODEMAINVERSION" > 6 ]]
	then

		echo "iPhone Simulator (XCode $XCODEVERSION) is being used. We might need to adjust $PROJECTNAME-Info.plist to allow Arbitrary Loads!"

		PLISTBUDDY="/usr/libexec/PlistBuddy"
		TARGET="platforms/ios/$PROJECTNAME/$PROJECTNAME-Info.plist"
		HASSETTING=`$PLISTBUDDY -c "print :NSAppTransportSecurity:NSAllowsArbitraryLoads" "$TARGET" 2>&1`

		if [[ "$HASSETTING" == "true" ]]
		then

			echo " - NSAllowsArbitraryLoads already enabled. Not adjusting $PROJECTNAME-Info.plist"

		else

			echo " - NSAllowsArbitraryLoads not enabled. Adjusting $PROJECTNAME-Info.plist"

			$PLISTBUDDY -c "Add :NSAppTransportSecurity dict" "$TARGET"
			$PLISTBUDDY -c "Add :NSAppTransportSecurity:NSAllowsArbitraryLoads bool YES" "$TARGET"

		fi

	fi

fi
Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

ion-drawer-vertical – A vertical slide out panel (toggle panel) for Ionic

For a current Ionic project I’m working on I needed a vertical slide out panel (toggle panel) to store in some content that may be hidden by the user. As I couldn’t immediately find such a component in Ionic itself I decided to create one myself: ion-drawer-vertical (source available on GitHub). The result is a set of directives one can use. The directives also ships with a necessary controller and a delegate to allow one to manipulate the drawer from any scope. Both top and bottom drawers are supported.

Continue reading “ion-drawer-vertical – A vertical slide out panel (toggle panel) for Ionic”