Tagged: beginner

Node and Ionic

Integrating an Ionic Application with a NodeJS Backend

Developing on the client side with Ionic is a pleasure. It’s based on the web tech we know and love, and it runs straight in the browser so we can dive straight into the development in minutes. You can only get so far developing purely on the front-end/client-side, though. If your application needs to provide […]

Creating a Facebook Style Reaction Button in Ionic

Near the start of 2016, Facebook released “Reactions” which gave users a way to express themselves more deeply than just with a single “Like”. Rather than adding it a bunch of new buttons for the reactions, Facebook stayed with a single “Like” button that would then display more options when the button was held down: […]

PWA

Launching a Progressive Web App (PWA) with Ionic

About a week ago I launched the early access for Elite Ionic. This is my latest course for Ionic, and it is focused on teaching advanced Ionic concepts. Typically, when I release any paid content it is in the form of an eBook, but this time I wanted to do something a little different. Elite […]

Ionic Backends

Integrating a Backend with Ionic

I often see questions like “How do I use PHP/MySQL in Ionic?” or “Does Ionic work with X backend?” – these are reasonable questions, but it indicates a big misconception as to how integrating a backend with Ionic works. The technology that is used on the backend is completely irrelevant, as the backend and the […]

PWA

Uploading a Production PWA with Ionic

In a recent tutorial, I covered how to create a Progressive Web application with Ionic using the “bare minimum” steps. PWAs are an in-depth topic, but that tutorial covers the minimum steps required to create something that would be considered a PWA. In this video tutorial, I wanted to cover the steps you need to […]

PWA

The Bare Necessities: Progressive Web Apps in Ionic

You’ve probably heard of Progressive Web Applications by now, but if you haven’t then you may want to give this a read. In short, they are all about giving applications made available through the web a more native-like experience. This means at a minimum that they should work offline, and can be installed onto a […]

Lazy Loading

What Does Lazy Loading Do in Ionic?

Lazy loading has been around for a while now, and it’s likely that you’ve had at least some experience with it if you have been building Ionic applications recently (the Ionic CLI page generator uses lazy loading by default). If you aren’t familiar with lazy loading, then you might be interested in checking out this […]

Video Background in Ionic

Designing a Landing Page with a Video Background in Ionic

The initial impression of your application on a user comes from the application’s icon, the splash screen, and then the initial page of the application. Much like judging a book by its cover, by the time the user reaches the landing page for your application they will likely have already formed some strong opinions about […]

Pinterest grid

Creating a Pinterest Layout in Ionic

Ionic provides a useful Grid component that allows you to organise a layout using rows and columns. By default, if the columns contained within a row go beyond the width of the screen, they will flow automatically onto a new row. This makes it really easy to create a grid layout, like an image gallery, […]

Google AdMob

Integrating Google AdMob Advertisements in Ionic

Advertisements, although not always the best way to monetise a venture, are one of the easiest ways to potentially earn some money from an application or website. Google’s advertisement platform allows you to easily implement advertisements without having to secure deals with advertisers yourself – you display Google’s ads and you get a percentage of […]

Splash Screens in Ionic

Using the Splash Screen Plugin with Ionic

The splash screen is the image that displays for a few seconds when your application first starts up on iOS and Android. Usually, we would be happy with the default behaviour (the splash screen will display until your application has finished loading, and then automatically disappear) but that’s not always the case. In this video […]

Now vs Later

Asynchronous vs Synchronous: Understanding the Difference

Understanding the difference between asynchronous and synchronous code, as well as its implications, is an important topic and I have covered it a couple of times previously. Recently, I wrote an article that discussed a common asynchronous situation in Ionic that can lead to confusion. Click here to watch the video on YouTube I thought […]

Now vs Later

Dealing with Asynchronous Code in Ionic

One of the most common things that I see people get tripped up on when learning Ionic is the difference between synchronous and asynchronous tasks and how to appropriately handle results from an asynchronous task. People may often be led to believe that something in their code or the Ionic framework is broken because they […]

Deep Linking in Ionic

Link to Pages via URLs with Deep Linking in Ionic

Primarily, Ionic is a framework for building mobile applications with web tech that look, feel, and behave like “traditional” native applications. Naturally, it makes sense for the architecture of the framework to reflect that of the mobile application world – one that doesn’t rely on the use of URLs for navigation. Unlike the Angular framework […]

Ionic 3

What’s New in Ionic 3?

You’ve probably heard by now, but the 3.0.0 release of Ionic is now officially available. If you’re not sure what exactly that means in relation to Ionic 2, I’d recommend watching my last video on the topic. In short, Ionic 3 is just a major update to Ionic 2, it’s not a totally new framework. […]

Export and Import

An Introduction to ES6 Modules for Ionic Developers

Ionic applications rely heavily on the concept of modules, which is functionality that was introduced in the ES6 specification for Javascript. Technically, Ionic applications use TypeScript syntax not just plain ES6, but TypeScript is just an extension of ES6 so the concept is the same. To put everything into context, the Javascript that developers have […]

Swipeable Tabs

Adding Swipeable Tabs to an Ionic Application

The Ionic team have stated that their goal with Ionic was to provide a core set of components out of the box and to allow developers and the community to build out additional components. Things like buttons, toolbars, and lists are all pretty essential. Things like Tinder cards and maps are popular but are not […]

Ionic 3

What Does Ionic 3 Mean for Ionic 2?

If you started out on Ionic 1, maybe you’re at the point now where you feel settled and comfortable after taking on the challenge of switching over to Ionic 2. If you don’t follow the particulars of versioning trends for frameworks, you might just about fall out of your seat when learning that Ionic 3 […]

Security in Ionic

[VIDEO] Basic Security for Ionic & Cordova Applications

I recently wrote an article with some basic security advice for Ionic and Cordova applications, but I thought it would be worthwhile discussing those concepts in a little more depth. In this video tutorial, I talk through the concepts that I brought up in the security article. Here’s the video:Follow @joshuamorony Video Notes You don’t […]

Sending Post Request in Ionic 2

How to Send Data with POST Requests in Ionic 2

In the past, we have covered how to make a simple GET request to load data from a server, and for the most part, making a POST request is pretty much the same. There are a few key differences, though, including the fact that a POST request also includes a body, and there’s also a […]

RxJS Observables

An Introduction to Observables for Ionic 2

Observables are one of those new tricky things you will almost certainly run into at some point when building an application with Ionic 2. They can seem a little weird and overwhelming at first, and you might wonder “why can’t we just stick to promises?“, but they are quite beautifully implemented. At a basic level, […]

List Reorder in Ionic 2

Reordering a List in Ionic 2

It’s super easy to create lists in Ionic 2, and it’s also super easy to allow a user to reorder them. With the addition of a simple attribute, you can turn your normal <ion-list> into a reorderable one. In this video tutorial, I walk through exactly how to create a reorderable list in Ionic 2. […]