The essential news about content management systems and mobile technology.
Powered by Joocial & JoomGap.

It lurks in the shadows…creating hidden trees…playing by a set of its own rules…it’s…

SHADOW DOM!

But, what exactly is Shadow DOM? Put simply, Shadow DOM is an API that is part of the Web Component model. It helps to isolate component internals, protecting users from breaking changes and global CSS.

I’d like to think we here at Ionic know a thing or two about Shadow DOM, as we recently made the move to using it in Ionic 4, and with that, received a lot of questions from the community on just what the heck it is. There’s a lot of information (and misinformation) floating around about Shadow DOM, so let’s go through the API and see what it actually does.

What is Shadow DOM?

Shadow DOM sounds like it could be a complicated API, but it’s actually built on two simple ideas, isolation and location. Need to create a bit of DOM that is isolated from the global scope? Shadow DOM is here to help. Need to specify the exact location of a piece of DOM? Shadow DOMs scope API is what you need!

It can be helpful to think of components that use Shadow DOM as modules for HTML. Markup and styles are isolated to their own DOM tree, and removed from the global context. This enables us to unlock some pretty incredible benefits:

  • Isolated DOM
  • Isolated CSS
  • Simplified CSS Rules

Typically, Shadow DOM is associated with Custom Elements, but you can still use Shadow DOM with regular HTML elements. In fact, most browsers use Shadow DOM without you even noticing. For example, every time you use video tag, you’re actually using an element that has Shadow DOM. Think about it, devs just need to write the <video> element, supply a video source, and set a few attributes on the HTML.

<video src="https://some-video.mp4" controls></video>

But parts of the video element, like video controls, are automatically created. Developers don’t actually have to provide their own play button, progress bar, volume control, they’re automatically provided. This is Shadow DOM in action!

Now let’s use this bit of Ionic markup:

<ion-content>  <ion-item>    Hello World  </ion-item>  <ion-button>    I'm a button  </ion-button></ion-content>

This markup is pretty simple, all we’re doing is rendering an item and a button. Nothing too special right? Well, let’s look at the dev tools

Woah, where did all this come from? This is Shadow DOM working in Ionic’s components. All the internals of ion-item and ion-button can be abstracted away from the user, meaning all they need to know is the tag name, and is automatically handled by the browser. In short…it’s magic!

For Slots, we can provide all the entry points up front. For example, ion-item has three slots, Start, End, and the default. By using Shadow DOM, we can keep their location right where we want them to be, vs having users write their markup in a specific order. So there could be an item written as:

  <ion-item>    <ion-icon name="home" slot="end"></ion-icon>    Hello World  </ion-item>

And Shadow DOM and slots would know how to correctly render this.

Ok, so what’s the big deal? Ionic v3 already did something similar using Angular’s Content Projection. While Angular’s Content Projection is available, V4’s approach uses standardized APIs that all browser vendors have agreed on. Meaning, there’s no extra code needed at run time. By using the Shadow DOM, we get all the benefits of content projection, but built into the browser.

From a component author’s perspective, we can now author Ionic’s components in a way to prevents most breaking changes. Since we can control where and how a component’s content can be rendered, we’re able to prevent many mistakes and harden user’s code.

With the component’s internal markup isolated, updates and improvements can be made to any component, without the end user needing to update their code.

This is the real reason why Shadow DOM is being used in Ionic.

Parting Words

While Shadow DOM has been around for a few years now, it’s reached the point where we can finally take advantage of it in modern browsers. For the older browsers that are still around, we got them covered too, with on-the-fly polyfills being loaded. If a browser doesn’t support native Shadow DOM, we can polyfill it on-demand. However, if a browser already has native support, Ionic never downloads and parses any unnecessary polyfill JavaScript, but rather just uses the built in API.

It’s one of the many new exciting features under the hood in Ionic 4, and makes maintaining the Framework much easier. And as a result, we’ve been able to drastically reduce the amount of CSS code required for users’ apps because of its simplicity. Less code === Faster apps.

On top of that, devs building with Ionic don’t need to worry about potential breaking changes. Smaller CSS that is easier to maintain, and markup that has fewer breaking changes… what’s not to love about Shadow DOM?!

In a future post, we’ll look at how theming is done in V4 now that all of Ionic’s styles are isolated…

Spoiler, it’s CSS Variables 😏

Read more

Two weeks ago, I decided to make a companion app for the popular game, Pokemon GO. While my days were spent working on new products at Ionic (like Identity Vault), my early mornings, nights, and weekends were spent hacking on GO Ranger.

Here’s what happened:

  • Day 1: I was live on Firebase Hosting as a web app with a few rudimentary features.
  • Day 3: The amazing co-founder of Ionic and designer, Ben, made me a logo and I ordered some custom T-Shirts.
  • Day 9: I launched several new features throughout the next week of development, testing them with some early users and making tweaks.
  • Day 13: I was live on the iOS App Store and Google Play Store.
  • Day 14: I posted my app to the most popular Pokemon GO subreddit as well as my local communities.
  • Day 16: GO Ranger had been downloaded over 40,000 times in over 110 countries.
  • Day 17: The app started trending at #6 on Google Play, is rated 4.9/5 Stars with 50 reviews on iOS, and 4.3/5 Stars with 200+ reviews on Android.

So how did I pull it off? What are some tips to make sure your app launch is successful?

Use a Framework

If you want to launch quickly and iterate your way to success, you should NOT be spending time reinventing the wheel. You should ALWAYS find a framework that helps you get to where you want to be faster, and hopefully one that utilizes technology you already have experience with.

Since I have the most experience with Ionic and web technologies (I do work here after all), I chose Ionic. Not only did I not have to care about how navigation or mobile design paradigms work, but the UI & UX from Ionic provided everything I needed for GO Ranger out of the box.

And hey, GO Ranger got a good amount of comments about it’s buttery-smooth performance!

Focus on Pain

One of the most important aspects of an apps success is to make sure it’s solving pain for your users. In GO Rangers case, some of this pain is quite literal!

Pokemon GO throws events called “Community Days” which are 3 hours long and happen once per month. During the last event, one of my friends told me that the event started at 12pm, which didn’t give me enough time to go home and grab my walking shoes. It turns out the event started at 1pm, but because I showed up early I wound up walking FOURTEEN MILES in…sandals. Ouch. Talk about real pain.

Some might say the opposite would have been worse. If I would have showed up an hour late to the event, I would have missed out on 1/3rd of it!

Clearly there was something here. So the first feature I made was an Event list that shows you both actively ongoing events and upcoming events automatically converted to your timezone with countdown timers.

Just this one feature has resonated greatly with the Pokemon GO community, a lot of Trainers feel this pain!

On top of that, a very popular thing the Pokemon GO community does is make infographics that show current information. For instance, you might have 10 different infographics with different information about how to defeat Mewtwo in a raid.

GO Ranger aims to bring all of the information most commonly found in infographics into an actual dynamic interface that you can click and explore, that is always kept up to date. Now you don’t have to worry about finding the latest infographics and saving them to the photos on your phone!

Launch to a Community

One of the most important factors to whether or not an app is successful is your ability to find an active user base. In my case, Pokemon GO Trainers! If you can go to where your users already are, you’re going to have a much easier time launching.

Here’s how I handled finding other Pokemon GO Trainers that would like to use GO Ranger:

1. Find an active community

Where do your potential users hang out? If you’re a target user, where do YOU hang out? Thankfully for Pokemon GO this is fairly easy, there are several popular Reddit communities that people (including myself) frequent in order to get the latest information about the game and hang out with each other.

In my case r/PokemonGO is the biggest community, with almost 1 Million members, of which over 5000 are normally active at any given point in time.

Just to give you some more ideas, other popular “launch” communities are ProductHunt or Hacker News in the tech community. Also, communities aren’t always websites, sometimes your potential users are at coffee shops or conferences, etc. Go where they are!

2. Be a part of that community

It’s a bad idea to immediately join a community and start peddling your wares. You should be interacting with the community (even if it’s behind the scenes). You’ll be much more successful if you can RELATE to the community as well, if YOU can feel their pain.

Walk fourteen miles in their shoes. Or sandals.

The easiest way to do this is to be building apps that solve your own problems. When you’re part of the target demographic, you can relate to the pain much easier. That’s not to say that you always have to be in your target demographic, it just means you’ll have to do more work in that case.

You also need to make sure that you’re following the communities rules. While r/PokemonGO is open to people posting apps like GO Ranger, the other popular one r/TheSilphRoad, is not.

3. Iterate with the community

You might think you have a great app idea, but you need to make sure that it resonates with your target demographic as fast as possible. Before I even had anything to show for my work, I posted a topic in the community asking people “What do you look up frequently?

I was trying to get a handle on the information that people wanted easily accessible at their fingertips that would work great for GO Ranger to include.

Once I launched the web version on Firebase, I shared it with a few members of the community before the official launch to make sure that I hit-the-mark on solving their pains.

4. Launch!

The big day is here! You’ve iterated with users and you’re ready to hit the big red launch button. Make sure you’re authentic in your launch post, that you’re following all the rules, and that you’re hitting your biggest pain points first.

Here’s my launch post.

5. Don’t stop iterating!

Hopefully you’re going to receive A LOT of responses. It took me multiple days to go through all of the feedback, and I tried to respond directly to as many people as possible. I even organized the feedback into a spreadsheet so I could better account for what was receiving the most upvotes.

Most of the feedback was about things that were inaccurate in my app or bugs. Squash the most important bugs first (GO Ranger had issues on 20% of Android devices, which we fixed within 24 hours), then move on to the most requested features.

One of the bad parts of making a mobile app though is that it’s often VERY hard to change things and ship quickly. In order to make this easier not only for myself, but to deliver better updates faster to my users, I used Ionic Deploy to automatically update my app whenever I push new versions. Deploy V5 includes some very nice new features like differential updates that make sure your updates are downloaded quickly to your users.

The work doesn’t stop here

Yes, launches are quite often one of the most exciting experiences you’ll encounter. I love watching Google Analytics to see how many people are live looking at my app right now (at one point there were 390 simultaneous users).

However, the real work comes from continuing to solve pain, from continuing to put in the work. Yes, GO Ranger got over 40,000 uniques in just a few days, but it’s settled down to about 9000 Daily-Active-Users.

And those ones that stick around? Those are the ones that I want to continue to help.

It’s a two way street. Together we’ll be making Pokemon GO Trainers from all around the world have a better experience with the game.

Long story short: Keep solving more pain, better!

Read more

Facebook Auto-posting For Pages & Groups

While our team is currently working round the clock in PayPlans 4.0 development. I would like to share briefly about auto-posting to Facebook groups and pages mainly on EasyBlog, as this topic was raised rather frequently on our forums.

Read more

AWS Amplify is a JavaScript library that brings their backend services to web and mobile apps. At first glance, it appears to be a simple wrapper for their cloud services. In reality, it’s so much more: a curated set of backend features that make getting started with AWS much easier than ever before.

With a few simple CLI commands, you can easily supercharge your app with:

  • Messaging
  • Analytics
  • User sign-in, sign-out, forgot password
  • Databases
  • Static website hosting (PWAs, anyone?!)
  • File storage

Getting Started

The Amplify team recently published a guide on how to build an Ionic 4 app with AWS Amplify. By following along, you’ll build a complete ToDo app. It’s not just any ordinary ToDo app though: the user must sign into the app before creating todos. Also, the todos are saved in the cloud using services such as Amazon Cognito, DynamoDB, Lambda.

I won’t rehash the guide here; instead, let’s take a look at what I liked and disliked about my initial experience, as well as the impact that adding AWS Amplify to your Ionic 4 app can have.

The first part of the guide involves the creation of an Ionic 4 app that uses Ionic’s tabs starter project. Three pages are provided: “Home”, “About”, and “Contact.” The ToDo model and UI TypeScript classes are created next, with full Angular code samples provided for reference. The ability to add and remove items in the list are added as well. The interesting twist here is the inclusion of an authentication-based route guard service, which essentially blocks the user from viewing the ToDo list until after they have signed into the app via AWS. The purpose for doing so becomes clearer as you go through the guide – you’ll eventually add a user sign-in experience. The resulting ToDo list page looks very nice:

to do app

To add the sign-in experience and store ToDo items in the cloud, there’s more work to be done. This is where the magic of AWS starts to shine!

Working with the AWS Mobile CLI

Similar to Ionic, AWS Amplify puts heavy emphasis on their command line interface tool (CLI), used to create and manage all AWS backend resources. Available commands are mostly intuitive, such as “init”, which walks you through creating a backend project. I was a bit confused at first about some of the prompts regarding what to provide for source and distribution directories, but fortunately the guide provides suggested answers:

AWS init command

Another concern arose quickly at the start of using the CLI. In order to provision AWS resources, you must configure an Identity Access Management (IAM) user. IAM is still a source of confusion for me. Given the dozens of policies available, I’m always worried that I won’t select the correct permissions. Fortunately, the steps are quite clear and connecting the user to the CLI is a one-time step.

With the CLI installed and after running a couple of npm install commands, it’s easy to add Amplify to an Ionic 4 app. We simply import Amplify into the project in src/main.ts:

import { enableProdMode } from '@angular/core';import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';import { environment } from './environments/environment';// Add AWS Amplifyimport Amplify, { Analytics } from 'aws-amplify';import aws_exports from './aws-exports';Amplify.configure(aws_exports);if (environment.production) {  enableProdMode();}platformBrowserDynamic().bootstrapModule(AppModule)  .catch(err => console.log(err));

Adding Authorization/User Sign-in

With the boilerplate configuration in place, it’s time for the best part: adding Amplify-specific features to our ToDo app such as a user sign-in experience. The first feature, authorization, uses Amazon Cognito behind-the-scenes. To enable it is quite straightforward:

awsmobile user-signin enable awsmobile push

There’s a lot to unpack in those two lines that isn’t necessarily obvious. For one, there’s no mention of the underlying services. Rather, a friendly name is used instead: “user-signin.” This is a common pattern among all Amplify services: the AWS technology that powers the feature is abstracted away from the developer. This is certainly great for the beginner, but more advanced users may be put off as they try to figure out how to perform advanced configurations.

The second command, referencing “push”, seems a bit strange. What are we pushing? As it turns out, when you run “awsmobile feature enable”, changes are only made to your local project – the aws-exports.js file. It’s only after you “push” that this file is synced to the AWS cloud, in effect enabling the feature on the backend. This makes sense once you understand how it works, but I initially assumed that enabling features from the CLI immediately enabled them on the backend.

This confusion led me to log into the AWS Mobile Hub, a section of the AWS console that allows you to view and configure the enabled backend features. I love the simplicity and clarity it provides:

mobilehub + backend

Once your backend feature is enabled, you can also use the AWS console for the related service to customize your backend, e.g., using Amazon Cognito for the User Sign-in feature.

After adding a couple more bits of Angular code to our app, authentication is available on the Home tab:

Todo Login

Now this is wicked cool! AWS Amplify provides several Angular UI components, including the full sign-in experience above. Adding a simple one-liner to this page, optionally styled with Ionic UI components, results in a ton of development time saved!

<amplify-authenticator framework="ionic"></amplify-authenticator>

The default UI looks pretty good out-of-the-box and is fully responsive. As briefly mentioned in the guide, you can change the look and feel of the UI rather easily.

Storing ToDo Items via Amazon DynamoDB

At this point in the guide, we’ve got a ToDo list that users must sign-in to access, but the items aren’t saved anywhere – they’ll disappear after the app is closed. As it turns out, storing them in a cloud database is easy enough. With just a handful of awsmobile CLI commands, a DynamoDB NoSQL database is created and available immediately.

We have a cloud database now, but we need to somehow add the ability to add, update, and remove todos from within our app. The next step in the guide is perhaps the most impressive:

AWS CRUD API

Automatic creation of a CRUD (create/read/update/delete) API for the ToDoItems database is a huge time saver. Behind the scenes, AWS hosts the backend API in AWS Lambda, their “serverless” service that runs code on-demand, without a provisioned server. Over in the Ionic 4 app, boilerplate JavaScript code is added to the project that exposes simple API endpoints. Here’s the Save method, for example:

save(list){    // Use AWS Amplify to save the list...    this.amplifyService.api().post('ToDoItemsCRUD', '/ToDoItems', {body: list})      .then((i) => {        // and to get the list after you save it.        this.getItems();      })      .catch((err) => {        console.log(`Error saving list: ${err}`);      });  }

With that final touch, the ToDo app is complete. Todo items are now saved in the cloud under each unique users’ account. Check out the full app experience:

Final Thoughts

AWS Amplify is a killer service that allows you to quickly add backend cloud features to your mobile app. Overall, I think it is a solid solution for Ionic developers looking to incorporate a cloud backend into their app. There are some improvements that could be made, mostly around providing better visibility into the costs of enabling each Amplify service.

If my experience piqued your interest, check out Amazon’s complete guide to building Ionic 4 apps with AWS Amplify. When you pair the Amplify backend with an Ionic starter app, you’ll have a working full stack solution in no time.

We 💙 great cloud backends at Ionic. We’re continuing to work with the AWS team to provide feedback on making the Ionic + AWS experience better.

What cloud features and integrations would you like to hear more about?

Read more

image

It’s 2018 and making money online has become an easy task. With so many money-minting tools out there on the Internet and with the rightful application of them, people are able to kick in an extra few hundred dollars.

Read more