Tag Archives: reactjs

Strategy for migrating from Hybrid apps to Native

So I’ve decided on a strategy to migrate from programming for hybrid, web-based apps using AngularJS 1 and Ionic Framework 1, to eventually, native Swift 3.

The route will be:

AngularJS 2 -> Ionic Framework 2 -> Swift 3

After getting my hands dirty for a few days in AngularJS 2 and Ionic Framework 2, I realised that the new way of doing things in both frameworks are shifting very closely to the paradigm of Native Apps.

Everything is not kept very modular, in components. In fact, i think that after we’ve mastered AngularJS 2, it will probably be a piece of cake to learn ReactJS too, because there are many similarities.

I can already see once we’ve migrated our AngularJS1 app to 2, that the code will be immensely more maintainable, more re-usable.

How so you ask?

First of all, AngularJS 2 adopts a Single Responsibility Principle, throughout the app. This means that every function, service, component (controller) should have one use. These individual components can then be combined in a view to form a page/screen/UI.

This has always been a rising and recommended principle for all programming languages, and is now becoming the requirement.

More interestingly in AngularJS2, is not only are the programming logic Single Responsibility, even the assets are.

We now work with a folder structure like so:

/Listing/
listing.ts
listing.html
listing.scss

The controller, view and scss are all contained in the same component folder! An even cooler thing is that when you declare the style/stylesheet for use in the controller, that style/stylesheet ONLY applies to that component! This is done through encapsulation, whereby the component will render a dynamic class every time, and apply the styles only to that class. This is a huge paradigm change!

Doing things this way also makes testing much more efficient and straight forward.

If you need a team member to work on the listing page, you simply point them to the listing page. Chances of them fucking up the rest of the site accidentally is minimal, since the component they are working with has a single responsibility.

Native apps, ReactJS also follow the same principles, which make AngularJS 2 definitely the way to go for the future.