Ionic 2 is ready, but is it really?

ionic2

Before we start, you should know…

Ionic, as we know, changed. Completely. So did Angular. It has been rewritten. From the ground up. It means new old bugs, new old issues, new old struggles. It also means new techniques, new options to rule the world and create a new world order. Without any further ado, l would like to welcome you to the new world of ES6, Typescript, Angular 2 and Ionic 2!

New things in 2016

Year by year, “script developers” galore upon all of the 2387 new framework that arise, new coding tips, EcmaScript updates and what not. But this year, seriously, this year, a big step in the proper “programming language” direction has been made with two things: Angular 2 and Typescript. You know how the “real” programming languages look like? With includes/imports, classes, local variables and last but not least… types? Could you believe next code is JS (Typescript) code?

coding_fun

Ladies and gentlemen, meet your new coding style. Each component, service, pipe, page is now its own class.

If you would like to understand a code or even, what is new in ES6, I really suggest you to read about them on http://es6-features.org/. There really isn’t any resource which would explain new things in such an easy way.

Finding out, what I was able to use in JavaScript just got me like…

image01

Depression after early adoption of Ionic 2

You know how you start to write particular part of code, start to swallow all of the new knowledge, you’re super excited, the world is beautiful, double rainbow all the way… then you get to the point where there is no documentation or documentation is outdated or the code you would like to use was refactored few times in the past week and you’re just sitting there and thinking how you finally came to the point you’re ahead of technology, the same as James Cameron was while trying to direct Avatar. He was just ahead of technology.

You get depressed. How can this even happen? How can such a popular framework gets to the stand you can’t use it? How can it be that everyone is talking about ES2016, TypeScript, Ionic 2 and Angular 2 but most of the things aren’t even there for you.

Welcome to the world of early adopters.

In most of the time, this just means few things:

  • No or very little docs,
  • Outdated docs,
  • Stressed developers,
  • No answers on stackoverflow.

Which leads you to one thing… looking through source code and hoping there are any Karma tests where you could find out more.

Thank god, there are ways to communicate

Ionic 1 and Ionic 2 are completely open sourced projects. Which means the GitHub page is your best source of every problem you’re having. I’d like to point out that, if you’re working on/with open source project, give something in return. Project authors deserve that.

That’s not the only option you have if you want to reach for help. Ionic has crazy active Slack™ teams and their own forums.

I prefer being in touch with the developers themselves… In real-time, that’s why I’ve taken the Slack path and just started nagging. Mike Hartington and Brandy Carney from Ionic Team were always there, which was first sight that there are good things after you to reach the next milestone…

Complex things. Daring. And that third thing…. Enterprise.

Hey… anyone thought about the Enterprise solutions?

I soon hit another milestone. Impossibility to develop something because… no one else did it… or no one else documented it… or open sourced it.

You want to show what you did, what new framework is capable of, how good the code looks, what options do we have until you’re hit on the exact same moment almost giving a birth of knowledge…

  • Where’s the smoothness of Ionic 1?
  • Is our team ready for a switch?
  • Can you assure me everything is up and ready, we won’t have to build the hacks to make some things work?

Well… errrr…. No.

So where is the problem?

Awesome Hybrid apps Tutorials around the web

Around january 2016, when Ionic 2 was still in early alpha, some of the IT blogs exploded with writing their “first Ionic 2 tutorial!!!!!111111ONEONE”.

This was an amazing time. Except that I didn’t found much tutorials that would show me something else than “Hello World!”. Yes, there were few exceptions, one of them being Auth0 tutorials (this one for example) which taught me more complex things as calling a function on (click) event.

Going back to those other tutorials, it was awesome to see how everyone was totally hyped over Ionic 2 but was showing nothing. Hell, the best tutorial or where to start is, even at time of writing this article, Ionic’s Conference App on github.

Where can I read more about the XYZ feature?

This will probably be a big surprise to you but, here’s my procedure:

  • Search engine > “xyz Ionic 2” (where xyz is the feature I need help with).

This will bring you on Ionic 2 docs page anyways. Which brings me to the question, why don’t you have the Ionic 2 docs already opened? It should be #1 to look on, when looking for answers.

  • Search engine > “xyz angular 2”
  • Search engine > “xyz javascript”

There you have it. Magic.

Without staring into the Sun for 8 hours, coming home from work, depressed, not talking to your partner, signaling the world around you something bad has happened.

Um,… I think I’ve found a bug!

This is the most important part of giving something back to Ionic team!

I’ll try to present what should you do in case you find a bug:

bug found

Help Ionic Team. Help other developers. Give feedback! #maketheworldabetterplace.

#maketheworldabetterplace

Man, it’s a good feeling to help.

Yay, refactor all the things… twice! …seven times!!!

Your things will soon start making sense. After a month or two you will almost complete your extended hello-world project. Then it will hit you. Directly in your face. With a chair.

New framework alpha version. With it, upgraded dependencies (cough angular2 cough) and with it… all the changes you never asked for. You know how you thought you’re on the top of learning curve at this time? Nope. Not even close. More likely being on top of the pile of a not working code.

refactorallthethings

Yes, the routing changed. Just kidding, pull to refresh changed. Aww stahp, it’s just the template syntax, and where to load the modal window.

This is something you have to be prepared of. Why? It’s just that you wanted to be first, isn’t it? You just had to do it. You and all of that “early adopters” mumbo jumbo.

There were some of the huge changes to the framework. Here, I would like to give a big thumbs up to Ionic team again to always explain in their CHANGELOG how to update your apps to new stand.

Ahhh…. The new version arrived!

Finally, after submitting a bug, Ionic team rushed in and fixed it. Dripping to testing everything out, they’ve also announced few breaking changes that don’t seem to be so important for you. But, what is this…

  • Why does it take 10 seconds to build a bundle?
  • Why are there no sourcemaps?
  • Why has the VS Code debugging stopped working?
  • Wait,… why do I always have to create new Project, then copy the files into the new folder structure?
  • And… if I may ask… why are the new features not working if I use them in my “non-hello world” app?

Is Ionic 2 really really done and enterprise ready?

Ionic 2 is currently in its release candidate stage. If you are currently making a decision whether to start Ionic 2 development, here is something you should read, understand and follow completely (the last part was a bit harsh, but at least I tried :P):

Describe yourself a prototype app you are going to create. Try to keep it short. Did it take longer than 1 minute? Seriously consider staying with Angular 1 and Ionic 1.

Now, switch to advanced mode and start writing all possible features (page by page). Did you wrote more than 3 features? Seriously consider staying with Angular 1 and Ionic 1.

Now ask yourself the most important question… how much time do I have before my app has to be featured complete? If it is more than 1 month, seriously consider staying with Angular 1 and Ionic 1.

The future is almost here!

Almost. And it will probably stay that way. What I’m trying to say is, no matter how long you will have to wait, no matter when the release of our beloved framework will be, you will always find an exception that shouldn’t happen. There is just too many things to be reviewed/refactored/fixed/newly implemented. You will always find a way to break a part of the code with a component, that was never meant to do the things you’ve imagined.

And this, people of Internets, is the time and case, where you decide what you are going to do and how Ionic 2 is going to evolve. Your help is what counts at most in open source projects. Don’t go stealth mode! Go viral, find developers, write issues, code examples and poetry.

Ionic Team did an awesome job so far and their rapid development and willing to let the community into the whole process made the Framework the best Framework out there. Sure, bugs are present but, their mission statement summarizes it perfectly: “Our goal is and will always be to reduce the amount of knowledge developers need to have about modern JS build tools to build Ionic apps.

So it is not just about the code you write, but the knowledge you absorb and, like a coding, you should also realize to keep it simple.

-Gregor


Also published on Medium.

Written by on in Code, Show All and tagged , , .

About Gregor Papez

Gregor Papez is a Senior Developer in the Mobile Business Services division at M-Way Solutions. He has been developing software in a wide range of languages since he was a teenager: "I just love coding. I love to break things (and with things, I mean code) and find the solution for them."

4 thoughts on “Ionic 2 is ready, but is it really?

  1. John

    wow! an article on ionic 2 finishing with the words “keep it simple”. The irony is breathtaking or were you going for sarcastic ; I’ll be honest I didn’t read it all – I’m too busy trying to find out how to do simple things (like figure out when dom elements are available – which is how I got here ; “when is ionic ready”) in ionic because YES as you said there’s not much documentation. I used to like JS but I’m liking it less and less every day. I suspect I will invest a lot of time in ionic only to be able to explain why you shouldn’t…..but by then it’ll be ionic 4, Angular 3, ES99.5 and every single job listing will want a different set of 8 recent frameworks.

    Reply
    1. Gregor Papez Post author

      Hi John and thank you for leaving a comment. The general direction I was going to with the article is, as you’ve found out, the irony. And, as you also found out, there are, for starters, quite a few things that don’t work out of the box as user would want them to.

      The whole Angular2 / Ionic2 / ES2015 is quite jump into the proper development direction which could also see a decline of usage / developers.

      But, if you love building hybrid apps, stick with it. It will take a while, check few Youtube videos and just start with looking through cloned Ionic conference app (https://github.com/driftyco/ionic-conference-app). You won’t regret it.

      But, since you’re seeing the exact same problem as I did, JS world is a mess at the moment. 214235 different Frameworks, 43498579 bundlers, where first is super fast, second one has larger user-base, third doesn’t exist yet,… everything you want to do if undocumented, not developed or just in alpha stage.

      You then ask yourself… is it our fault? Are we over-engineering apps? That’s why at the end also… keep it simple 🙂

      Thanks again for the comment!

      Reply
  2. AlGantori

    So VSCode is broken to debug, how do you debug under the browser? When I expand the EXCEPTION I get error_handler.js, ……, polyfills.js, what am I supposed to do with them 🙂 How can I get it to point to the source file, line where the EXCEPTION occurred. Thanks

    Reply
    1. Gregor Papez Post author

      Hi AlGantori,

      – vscode debugging should work with latest Ionic2 version. chrisjpalmer did a good job explaining each step on ionicframework forums: https://forum.ionicframework.com/t/how-to-debug-typescript-in-ionic-2-apps-using-vs-code-and-app-scripts-0-0-46/70023

      – the same goes for browser. In developer tool just use CTRL+P (cmd+p on Mac) to find your Typescript file, set a breakpoint in it and refresh the page. It should stop in exact line where breakpoint was set.

      Your stacktrace in console should also show lead you to your file where issue was implemented. However, it can be that there’s a general issue with the Project self (unfinished upgrade from version X to version Y of Ionic 2, wrong dependency versions etc.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *