How did we get here? The history of Ionic Framework

Whether you’re trying to create mobile, web or desktop applications, you can rely on Ionic Framework’s ability provide reusable components that just work. Ionic is built using the Stencil Web Component compiler, moving away from the old Angular.js only days Ionic 1-3.x.

To understand how we got here, we need to discuss the history of Ionic Framework. Ionic 1.0 (codenamed uranium unicorn) was released on May 12, 2015: Ionic 1.0 release and was only able to be used with Angular.js.

From here on out, Angular 1.x will be referred to as Angular.js, and newer versions will be referred to as Angular (version number) or just Angular.

Depending on when you learned JavaScript, you may be asking yourself the difference between Angular.js and the modern version. Here’s a snippet pulled straight from the Angular.js website:

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

Simples!

Back then, there were less complex build systems and including Angular.js was as simple as placing the script tag inside of your web page. TypeScript wasn’t a big thing then either, so we’d simply transpile our code with Babel and would perform little to no type checking.

TypeScript would start getting popular around the time Angular 2.x was released. Was Ionic and Angular part of that reason? I personally think so.

Deprecation

With the modern web changing how applications were built, Ionic found itself with a problem! Angular.js was being deprecated in favour of the newer, Angular 2. Uh oh…

This was a problem for the many companies, community members, and hobbyists that used Ionic on a regular basis. It would start to spell the end of Ionic 1.x. The Ionic team now set their sights for Angular 2. The thing is, lots had changed for everyone.

TypeScript came as standard with the newer version of Angular and didn’t feel optional. This was my (and many others) introduction to TypeScript and I found myself conflicted.

I was still relatively new to programming at the time. I had to learn about concepts which I was blissfully ignorant of before, and the migration process was just as difficult.

Ionic created the migration guide and the future looked bright; improved performance, more components, native support, PWAs and a variety of other benefits were outlined.

This paragraph taken from the guide sums this up nicely:

Moving from Ionic 1 to Ionic 2 is more than just moving to a new version of Ionic, it also brings an opportunity to evolve code written for the last generation of JavaScript into the new, modern JavaScript standard, while benefitting from advanced build tools and the powerful type system in TypeScript.

Ionic 2 and onward

Like everyone else at this time, I learned TypeScript to keep up with the changes with Ionic and Angular. We’re now moving in to the start of new-age Ionic.

Ionic 2.0.0 Final was released on January 25th 2017 and this brought Ionic to Angular 2! It also started a discussion around what if this happens again?

For many teams, the migration process required too many resources and they’d still be using Ionic 1.x at this stage. This conversation would continue and in the blog post release for Ionic 3.0.0 on April 7th 2017, you’d see statements like this:

We are so excited to announce the release of Ionic 3.0! This version jump may worry some of you, but don’t let it! The required changes to go from 2.x.x to 3.0.x are minimal. We got you! 🙂

Ionic 4 and Stencil

At this stage, Ionic starts to look at other frameworks and libraries and conversations happen regarding the use of Ionic with frameworks and libraries like Vue and React.

Work had gone on behind closed doors for some time until August 2017 with the announcement of Stencil. I’d recommend you watch the announcement video below as this sheds better light on the history of Ionic than I ever could!

Web Components sound pretty cool. Maybe they could solve our Angular-only issue!

Stencil is a Web Component compiler that takes code written in TypeScript with an API very similar to React and churns out fully standards based Custom Elements (aka, Web Components!). What’s the implication of this?

Well, it means that we can write Stencil components once and compile that into a Web Component. This can then be added to any application, regardless of the framework.

Perfect!

Ionic 4 is built exactly like this. A singular component can be created and then used by the end-user however they want. The same component is then used for Angular, React, Vue or any other framework, library you can think of.

Don’t forget that this means Ionic components can be used in vanilla JavaScript applications too!

This brings us to the present day. We’re now able to build awesome cross platform applications without having to worry about platform lock in.

Go build something awesome!

Start out with the guide on Ionic 4: Angular, Vue.js and React.