Building a PWA with Stencil: An Introduction to Stencil

Building a PWA with Stencil: An Introduction to Stencil

The end result of this article series is going to be Progressive Web Application built with the Stencil web component compiler. However, I think we need to talk about a few things before we get there. Given a lot of the recent developments, I want to tread carefully in explaining everything, because it will be very easy to become lost in A Sea of Frameworks and Acronyms (surely, George R. R. Martin’s next bestseller). This tutorial series is targeted at people who are… continue reading.

Replicating a Cloudant Database to CouchDB

Replicating a Cloudant Database to CouchDB

Last week, I wrote a tutorial that walked through how to set up a CouchDB database on a self-hosted Ubuntu server . I talked about some of the benefits of going for a self-hosted approach over using a service like Cloudant . One of the big benefits of the CouchDB protocol is how portable it is. With a lot of backend solutions, it can be extremely hard to move data from one place to another. With CouchDB, we can easily and almost instantly replicate the data in the database… continue reading.

Adding CAPTCHA to Ionic with NodeJS Middleware

Adding CAPTCHA to Ionic with NodeJS Middleware

When I built the Elite Ionic course, I built it as a PWA using Ionic . Anybody who signs up for the course can log in to the application and browse through the various modules. When people create accounts, they need passwords, and when passwords are involved they will inevitably be forgotten at some point. For convenience, I added a public-facing “Forgot Password” feature to the course application that would send a password reset email to the registered user’s email… continue reading.

Creating a CouchDB Database on an Ubuntu Server (Digital Ocean)

Creating a CouchDB Database on an Ubuntu Server (Digital Ocean)

One of the cool things about CouchDB is how portable it is. It can run just about anywhere and interact with other CouchDB style databases anywhere. Any database that speaks the CouchDB Replication Protocol will be able to interact with any other database that does the same. This is why we can use libraries like PouchDB with our mobile applications to store data locally, that can then sync to a CouchDB database hosted on a server somewhere, or even to a DBaaS (Database… continue reading.

Learning Vue for Ionic/Angular Developers – Part 5

Learning Vue for Ionic/Angular Developers – Part 5

Over the last four tutorials, we have covered most of the basics you need to know in order to build Ionic applications on top of the VueJS framework. One big step we have remaining is to get the Ionic/Vue applications that we build running on iOS and Android devices. This is easy to do in the Ionic/Angular environment because the Ionic CLI handles integrating with Cordova for us. However, when using Ionic/Vue we will need to do some extra configuration ourselves. In this… continue reading.

Adding ES6/TypeScript Support to a NodeJS Server

Adding ES6/TypeScript Support to a NodeJS Server

In past tutorials, we have covered setting up a basic Node/Express server and even integrating a Node server with Ionic . Up until this point, we have just been using the standard ES5 JavaScript syntax when building the server. If you are used to using Ionic, and many readers of this blog would be, then you may find using ES5 syntax a bit awkward. When we build Ionic applications we are able to use the ES6/TypeScript syntax, which provides a range of useful new JavaScript… continue reading.

Building a Time Locked Advent Calendar in Ionic

Building a Time Locked Advent Calendar in Ionic

As a kid, advent calendars were one of my favourite Christmas traditions. There was something special about ripping open that perforated cardboard each day and eating chocolate first thing in the morning. As an adult, I would prefer one of those whiskey advent calendars, but 24 little bottles of bourbon work out to be quite expensive for Australians. Although my wish for whiskey may not be fulfilled until another Christmas, I wanted to try something a little festive for a… continue reading.

Learning Vue for Ionic/Angular Developers – Part 4

Learning Vue for Ionic/Angular Developers – Part 4

Most applications will at some point require saving some kind of data that needs to be persisted across application reloads. Often, we want to make use of the local storage on the user’s device to do this. When using Ionic/Angular we can use Ionic’s built-in Storage API to easily interact with storage without needing to know what is happening behind the scenes – Ionic will automatically use the best storage mechanism available. Once again, with Vue, we don’t have these… continue reading.

Hosting an Ionic PWA with Firebase Hosting

Hosting an Ionic PWA with Firebase Hosting

In the past couple of tutorials, we have been working on building a cryptocurrency price tracking application as a progressive web application in Ionic. In this tutorial, we are going to walk through how to host an Ionic PWA using Firebase Hosting. Although this is the final post in a series of tutorials on building a PWA in Ionic, there is no need to read the previous tutorials if all you are interested in is hosting your own PWA. These steps are generic, and just assume… continue reading.

Preparing a Progressive Web Application for Production

Preparing a Progressive Web Application for Production

In the previous tutorial , we walked through building a simple cryptocurrency tracker application using Ionic. The purpose of this tutorial series is to build and host a progressive web application built with Ionic, but so far all we have done is build a standard Ionic application. This is what it looks like so far: In this tutorial, we will be taking the necessary steps to turn the Ionic application we have built into one that would be considered a progressive web… continue reading.

Building a Cryptocurrency Price Tracker PWA in Ionic

Building a Cryptocurrency Price Tracker PWA in Ionic

For a lot of people, buying cryptocurrency – like Bitcoin, Litecoin, and Ethereum – is a long-term game. Day trading anything that volatile is a dangerous game, so the day to day price isn’t all that important. Most people will probably buy, hold, and wait to see if it pays off years down the road. That doesn’t mean it isn’t fun to follow the markets day-to-day and see what’s happening, especially when price movements can be plus or minus 30% or more in a single day… continue reading.

Communicating Between an Ionic Application and a NodeJS Backend

Communicating Between an Ionic Application and a NodeJS Backend

In a previous tutorial, we covered how to integrate a basic NodeJS server with Ionic . This covered the very basics of setting up the NodeJS server, and how to interact with it using an HTTP request in Ionic. In this tutorial, we are going to take a deeper look at how an Ionic application and a NodeJS server can communicate back and forth. Request and Response The keys to communication between an Ionic application and a NodeJS server are requests and responses. Let’s take a… continue reading.

Learning Vue for Ionic/Angular Developers – Part 3

Learning Vue for Ionic/Angular Developers – Part 3

When learning a new framework, especially if you have primarily worked with a single framework previously, it is natural to attempt to project your understanding of the principles of one framework onto the other. As I have mentioned in the previous articles, Angular is an opinionated framework that provides everything out of the box and, more or less, has a “right” way to do things. Vue is much less opinionated, not everything is provided out of the box and you are given more… continue reading.

Integrating an Ionic Application with a NodeJS Backend

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 authentication, pull in data from an external source, store data externally, share data with other users – generally anything that requires that the application break… continue reading.

Using Observables in Ionic 3.9.x and Angular 5

Using Observables in Ionic 3.9.x and Angular 5

Since Ionic has been using semantic versioning for their updates , as long as the number at the beginning of the version number (i.e. 3.x.x) stays the same, then it means you likely won’t be dealing with any breaking changes that you need to update things in your application for. It also means that when you see the framework transition from 3 to 4, or 4 to 5, it doesn’t mean that the rug is being pulled out from beneath your feet – there will just be a few things that… continue reading.

Live Reload Across Multiple Devices with Ionic DevApp

Live Reload Across Multiple Devices with Ionic DevApp

I’ve amassed quite a few devices over the years, as I usually hold onto any old ones for the sake of testing mobile applications (in the end, nothing beats testing on a real device). I had a plan to build a sort of “mobile wall” to store my old devices, but aside from the potential cool factor, it wouldn’t have been all that useful. In the past few days, the Ionic team has turned my little project idea into a potential epic development tool. After a little teasing on Twitter… continue reading.

Learning Vue for Ionic/Angular Developers – Part 2

Learning Vue for Ionic/Angular Developers – Part 2

In this tutorial, we are going to start by covering the absolute basics of routing/navigation in Vue, and then we are going to look at how to navigate through an Ionic application using Vue. It’s simple enough to include Ionic’s web components in a Vue application (or anything else) just by dumping them into the template as you would with Angular, but things get a little more complicated when we want to navigate between pages. In Angular, we would just use the that the… continue reading.

Learning Vue for Ionic/Angular Developers – Part 1

Learning Vue for Ionic/Angular Developers – Part 1

The introduction of Stencil and the switch to web components means that you will soon be able to use Ionic with any framework you like . Previously, we have been limited to building Ionic applications with the Angular framework. I don’t use the term “limited” in any kind of negative sense, Angular is a great framework for building mobile applications, and I suspect it will remain the defacto framework for building with Ionic in the future. But … we have options now! One… continue reading.

Using Ionic with Any Framework (or None at All)

Using Ionic with Any Framework (or None at All)

Last week, I released an article that discussed Stencil and the impact that it will have on the Ionic framework. The key point is that Stencil is being used to rebuild all of Ionic’s components as web components, which will remove Ionic’s dependence on Angular. This does not mean that Ionic is moving away from Angular, in fact, when these changes are implemented it will likely go unnoticed by a lot of people. There will be some performance improvements, but any changes that… continue reading.

What Is Stencil and How Will It Impact Ionic?

What Is Stencil and How Will It Impact Ionic?

The Ionic team recently announced a new project called Stencil . The best way to think of Stencil is as “a tool for building modern Web Components”. Stencil has a specific style of syntax you need to use to build components: but there is a couple of important points to keep in mind. Although it looks similar to the syntax you would currently use to build components in Ionic/Angular, the introduction of Stencil in no way impacts your ability to keep building components in… continue reading.