Getting started with learning a Front End Framework – IONIC 3 for dummies

I’m pretty much starting my 2018 (the new year spirit!)  a little late, well, atleast for my blogging. Many aspiring web developers would have already gone through this awesome link, a developers roadmapwhich clearly shows what developers need to learn to sharpen their skills in this year (or for many). Also a good place to get started for newbies. For the next few weeks, I’ve chosen myself to sharpen my skills in at least in one Front End Framework and the one is IONIC 3. So, I’ll be writing this IONIC 3 for dummies tutorials which will slowly catch up from basic to advanced. We will also cover the things required for knowing IONIC 3.

But before learning a IONIC 3 framework, devs who hasn’t got experience from any UI Framework or devs who uses Framework without knowing its pros and cons (like myself), we are going through a short introduction for learning a UI Framework first.

Importance of Learning a Front End Framework!

Last couple of years are ruled with tons of frameworks, especially JavaScript Frameworks. I started out my job career in PHP, but then I shifted to JavaScript works couple of years ago since the popularity of JS is ruling upwards compared to PHP.

Of course its not right to compare PHP with JS, as JS is a front end application. But the point is, long back ago, before Angular 1, there wasn’t much hype about UI Frameworks, most UI tasks can just be accomplished using jQuery, views can be easily created using PHP Frameworks like CakePHP, Codeigniter, etc., itself. You can put whole logic in view using PHP itself (much simpler I say.) Life was fine!

But as time goes by, the idea of breaking the MVC chain to MVVM type came and along with the idea of making the application more of a service kind, a RESTful service. Because of tying a knot on view with application logic, it  not only slowed the down work, but, it’s not right itself! Why should a view should be generated by backend logic as HTML belongs to the Frontend?  Every request made to server will be regenerated into a HTML from PHP (like framework templates). This seemed wrong!

Another reason is, the birth of mobile application and support of websites in mobile devices became a huge deal due to smartphones like Android and iPhone. Of course, we can do those stuffs in PHP Frameworks, but, It will only make our code messy! So, Yea, another great idea of taking the view out of backends codes.

And Finally, creating a view resuable for multiple service is not possible using single service, since view is tied closely to the controller/service in MVC. If we could break down the view from the MVC logic, we can easily resuse it.

Pros of Front End Frameworks:

  • Easy plugin and play
  • Core codes are well tested and can get help from frameworks community!
  • Hides the complex parts and makes develop much fast
  • Overall, time will greatly reducing when developing something

Of Course, there are n numbers of reason of getting to know a Front End Frameworks, but, above are few of my points which made learn one or two frameworks in Front End.

Difficulties in Learning a Framework

As I was saying, there are tons of Front End framework and trying to learn every one of them is not even possible, also know that, before completing one Framework, it will be updated to new framework (yep!) which is totally different from what you have learnt (Ex. Angular 1 and 2).

I worked on a Angular 1 project long back ago, at the time Angular is so popular, but at the time of completion of my project using Angular 1, Angular 2 was released. The difficult part is migrating from Angular 1 to Angular 2. It was seriously so difficult and I have abandoned the idea of migrating and stuck with Angular 1. (Another reason is, I took lot of time working on Angular 1)

Cons of Front End Frameworks:

  • You have to spent lot of time learning a new framework (even though you know vanilla JS)
  • Have to learn any additional dependencies comes along!
  • Chances are, you won’t need lot of codes you get from the Framework for what you want to accomplish
  • You don’t control the core framework codes.

How to Decide On Choosing a Awesome Framework

Considering this Pros and Cons of using a Framework, its upto you to decide whether to use one or not, which depends on number of reasons.

  • Know what you want to accomplish – There are full MVC Frameworks like CakePHP and MVVC – AngularJS, Micro Frameworks like Slim Framework etc.
    • Once you understand what you need, you easily pick from the best out there.
    • For Ex: If use both AngularJS and CakePHP, view part from CakePHP will be completely unnecessary since it will be handled my Angular. Its best to choose a microframework.
  • Analysis the pros & cons of each frameworks. As we already know, we have megatons of frameworks out there,you have value each framework before picking one.
  • Know the future support of that Framework, you don’t want to end of using a abandon Framework!

IONIC 3 Framework – Starting an Awesome Framework!

Which framework is best is 2018, well there is Vue.js, React and Angular JS 5 ofcourse. But, there is also IONIC Framework.

Why IONIC Framework?

IONIC Framework provides an easy way to build hybrid mobile apps using Web technologies like CSS, HTML5. Its build on using AngularJS and underneath it uses Apache Cordova (Previously PhoneGap) in order to run as a native app. The sweet thing about IONIC which i love is the mix of different wonderful things it puts together

AngularJS is the most popular framework in Front End for long while and if you search for job opportunities in Front End Framework, It will be AngularJS in the top!


Next one is Apache Cordova, provides a easy way to build mobile applications. It turns your native HTML, CSS and JavaScript to Mobile supported format by providing a wrapper which acrosses all platform.

apache cordova

Third one is, Typescript – the whole IONIC 3 code needs to written in typescript. Typescript provides When your code base is huge, and more than one person works on the project, a type system can help you avoid a lot of common errors,  cool ES6 syntax and converts them just like Babel does and more. Though it might feel pain the beginning who doesn’t want to use anything except pure JavaScript. Besides, It will only be hard for a month or so, but the benefit using Type Script is a lot! (To know more about


And finally, NodeJS, IONIC 3 provides easy build system, livereload

Problem in Learning IONIC 3 Framework

So far the problems I’ve faced is the documentation.

Run a CLI, You gotta all the pages and download this and tada, you gotta cool like mobile form!

Well, It does good for people who just want to develop something without knowing what. But, sooner or later, you will need to now how it actually it works without too much automation which hides the step by step approach. It couldn’t find resource anywhere to have clear understanding of who things goes. Also, since IONIC depends on Angular and Type Script, lot of syntax explanation seems to skipped assuming people knows them. Well, actually I don’t.

Next Blog… Getting Started with IONIC 3 Framework

Most of this session seems very theory rather than code, I promise to be less theory as most of them don’t like it!:D

From next sessions onward, its going to be equal explanations and code. We will be learning some few

  1. ES6 functions like import, export, classes etc.
  2. Basic Type Script along the way.
  3. Then AngularJS @component commands. (We are not going to cover entire AngularJS, since tons of tutorials exists for that already) and
  4. Then a basic installation of IONIC 3. A Re-Introduction to IONIC 3 for beginners.