The life without Ionic

Ionic Framework ionic-v3
1

I have decided to move my project away from ionic, and i successfully finished it. :slight_smile:

The main reason was the size, the too many bugs, which is not maintained for years and i was not able to introduce angular 5 on time. Later on i realized that i would like to move away from angular also, and going to react like direction.

Size: It started from 2.5MB + 460KB css (css now is around 5KB), and when i removed all ionic part from my code it did go 754KB with ionic included (485KB with angular cli). The last 40KB reduction was only an AlertController and Gesture stuff, which i already modified as it’s not used some functionality of Hammer.

I’m using some test data which is included in the bundle under data folder, so the real replacement of the ionic is 150KB at the moment, after cleanup it will go around 100KB very likely. It replaces angular event system also, and using generated forms also, which saves a lot on ngFactory classes size (as there is no template for them - i slashed hundred KB-s on that part). (can come from server as json, or just configured locally in json) The first idea was to share it, just the concept, but after all my whole app is 95% reusable, so it would be quite risky. To make a working project, you only need to define the data folder in json. (without any codings)

My next step to process cordova, i saw also an interesting, but finished project called Microsoft Ace.
When cordova was started, very likely android and ios were a little bit odd framework. At least what i saw that you can replace cordova with 5-10 lines of code.

I jumped also to some native browser component, instead of using ionic, because the majority of the browser already implemented that stuff. I was not focusing on toast and cards, footer / header, which are really just pain on the ass. (you can do it with divs, or css grid)

I have made a special container, which split up the tab component. The tab buttons in my case is independent line of buttons totally separated from the container.

With Ionic:

image
image.png1855Ă—982 199 KB

Without Ionic: (after 4 month ui development)

image
image.png1857Ă—979 133 KB

1 Like
2

Cordova conversion has been finished and i’m using cordova 7.
My app does not even need a splash screen at the moment.

From 5MB the apk reduced to 1MB, and it’s already containing some test images.
However the vital part was to reduce the size for browser usage.

The main benefit is that i can use the latest webpack / cordova / angular right away without any hack around.

Instead of using ionic appscript (which has got several problems), i’m using cordova hooks and a tiny 10 lines script to build my project to www folder.

The css size 35KB from 460KB. and the js is 482KB from 2,8MB. (when i removed all the ionic usage it did go to 800KB as the uploaded image shows.)

At last Ionic is a nice advertisement, but i wasted several times to hack around to make it work. It would be very nice framework, but the execution is tragic.

1 Like
3

Why do I get the feeling that you work for one of Ionic’s direct competitors?

1 Like
4

Congrats for this achievement, from a technical perspective it sounds that it was super challenging and that the results are great :thumbsup: no splash screen, super small bundle, fast boot time, sounds all cool

When it comes to me, to be honest, my apk is around 6.9mb (> 30 pages and > 50 components). I did a lot of improvements, not so hardcore as yours, still use all Ionic/Angular/Cordova, and I reached a boot time around 3s. I’m fine with that and I’m just waiting for Ionic 4 to improve it now :slight_smile:

I just have one question, if you don’t mind. Like I said, it’s really an impressive technical job that you did there, but doing so, didn’t you loose all the GUI power of Ionic? Isn’t your result a blank app respectively how does your app looks like, does it still give the user a tailored iOS and Android experience?

5

@raxim I have always read your posts with great interest but wondered why you are obsessed with file size rather than loading and running times.

I can’t help but feel your approach will come back and bite you later on - Ionic is not perfect but basically you are saying you can do a better job at project development than Ionic despite their combined years of experience. Personally I leave the hassle of project development to the experts and instead concentrate on the design of my apps.

One of the hardest parts of management is delegation - you have to learn to let go and let others do things which may be different to the way you would do it.

2 Likes
6

I am considering the change too.
Let me ask you about react community. StackOverflow Ionic tags is full of 0 answer posts. Not to mention Ionic forum. Even the simplest questions may remain unanswered forever or answers are complaints about your lack of knowledge not real contributing ideas.
The only answers that catch-up moderators or staff members attention are those where people complains about the tool, but I didn’t find any real implication to solve the issues.
Even paid services are full of hidden corners if you need to go deeper into the development environment and questions are unanswered for months.
Even so, we are confident with Angular and somehow forced to use Ionic.
Until our patience gets empty…

1 Like
7

30,998 questions tagged with ionic-framework
15,205 questions with no upvoted or accepted answers tagged with ionic-framework

=> 15’793 with upvoted or accepted answers tagged with ionic-framework

8

I’m not working for any competitors i just had so dynamic components, that i realized ionic does not do that much. The main bottleneck was the angular event emitter system (rxjs was very slow), and i just lost the control. I have hacked around the ionic css classes to remove gaps etc. It’s a long story, some month back reedrichard also responded me, because i have complained and shared my idea to rewrite it completely.

9

Can you bring react numbers too?

10

The main problem was not the apk size, the main problem was the browser usage. In my country 800MB data is 10$, 3-4MB webpage is obviously harming that. If the js file in local storage than is fine, but if you would like to download it, it’s a problem, even if you are using service worker to cache it.

I have 40-50 pages, but i have only 5 major and 3-4 minor component. For example my virtual scroll does not cause empty pages scroll down and scroll back again quickly. I also controls that heavy elements disappears on scrolling. When you switch tabs, heavy elements disappears, and coming back again. I’m just partially loading elements in the buffer, so i can display far more tabs. (i have a menu where i can potentially remove individually or history like all the tabs) My virtual scroll works as a slider also, and can scroll components with variable height, and instead of using pull component, it can scroll back even browser does not allow negative values in translateX. I’m using input date instead of date picker, which has been implemented by ionic. (now only desktop safari does not have built in date picker, but the mobile version has)

So there are lots of things. Simply i have got the control, and i’m able to individually send messages to elements, i can broadcast. (i have got better performance than RxJs on this matter)

The tab component has been improved, as i’m not using display=none like ionic, on heavy elements my tab changes was freezing for some hundred millisec. And the list just goes on.

I personally think, ionic was badly designed because of angular, as in angular to write a good quality of code is very hard. You are just trying to hack around many times.

Why i might choose react over angular, as for me many times i used renderer class, and sometimes ngZone, when i had no choice, which is a real hack in the angular world. With virtual dom, even to set the styles by a renderer like class does not mean that you are manipulating the dom right away.

11

Dude it’s not black magic, just do a query in stackoverflow and they show you the numbers…any how

27,601 questions tagged react-native
13,418 questions with no upvoted or accepted answers tagged with react-native

=> 14’183 questions with upvoted or accepted answers tagged with react-native

you could consider just react but then you have to consider angular for ionic too, so same same

anyway that’s not the point of this post I guess, just wanted to shows that saying “there is zero answers” is not what the numbers are

12

I have made better job, also i have decades of experience in javascript from different frameworks. The way was harsh, but i was complaining enough, to be honest to regain back the control is the main benefit, that you can use angular 6-7 day one, and you don’t need to wait for an unstable release of ionic in rush hours. I have already replied to reedrichards, that i have made serious changes how the main components are working on angular and ionic level. The code is much more simpler than the ionic one, which reflects the size. At the moment the code quality is not the best, but i’m keep improving. Pls. read my other comments on this above and you can figure out on which parts i have put effort to change. Unfortunatelly there where other parts, what i had to reimplement even if i didn’t want to, but i think 80% i regained some benefit to do all of this. I almost gave up my project. When i introduced my messaging system replacing event emitter learning from rxjs also(which was quite slow - slower than the javascript callback) it was a boost, but ionic is built on events, so i decided to remove ionic.

13

thx for the explanation @raxim, super interesting

about

totally understand that, you mark a good point. Did you try any other “hybrid” technology like react-native or whatever, are they bundles really significant smaller?

Kind of feel sometimes that is (was) almost like this since ages now but fortunately last year a lot of projects realized that the bundle size should be a concern again and of lot of improvements were done and will still be done. I could for example mention Ionic 4, Angular lazy loading, Rxjs, Font awesome 5, Ionic native etc.

On that one, if you allow me, I would be a bit less critical. I really like typescript and to be honest I’ve seen worst quality of code during my all career with other languages.

Furthermore, before trying Ionic, I tried at first to code a native Android app (I’ve got a Java background) and I’ve to say the “trying to hack around” emerged way sooner as with Ionic

But let me say it clear again, I’ impressed by your solution and your will to achieve your small bundles goal and I really want to congrats you for this achievement, kudos :tada:

14

I especialy looked for react like systems, looked at inferno, as i just wanted the template system anything else i have done myself. To be honest when i built it i have found out that the size of the templates somehow bigger than in the angular case. I have no time to transform the whole project to react like system at the finish line.

To be honest why i made my own system, as i looked at forum, and i haven’t seen real alternatives. React is a little bit more configuration and digging. I used also cordova plugins, but many times the code quality was tragic, and i have faced with many bugs like in the case of QR scanner.

At the moment i’m building my own map, which is an extension of the google to avoid the javascript daily limit using open street map data. (but wouldn’t be any server behind - defined a new indexed format) fssrepository on github.

15

I think there’s something to this, and Stencil is driftyco’s attempt to build the “real Ionic” they envisioned at the very beginning.

Still, I think a lot of this is because you’re a one-man show. A lot of the advantages of Angular aren’t visible until you’re working in a team. Modules and dependency injection allow different teams to work on completely different pieces. Vue and even React are more focused on individual developers.

16

To be honest i don’t like react anyway i would have refactored to react instead of creating my own system.

I’m java developer with more than 15 years of experience, i know what you mentioned is important, although i realized that in javascript dependency injection and many of the things are too tedious. In my system to test a class you are just sending messages to them, so it’s more flexible (you can move wherever you like it works the same). In Ionic every time you potentially need to inject more than 7 object. Typescript is good on funcional class level, but json is better on model level, as it does not increase the loadable bundle size. Does not matter where you get it from the server or from locally.

1 Like
17

NgZones and Renderer2 class is some sort of hack around in Angular world. You can use typescript independently if you wish too. I have seen also that there is a slight delay when angular loads something at first time, which never used before by the client (mobile only). Angular cli i was able to use aot. Ionic hasn’t implemented some hammerjs feature in the Gesture class. So the list goes on. Ionic appscript was not that stable, i had to fix something, which was fine with later version of webpack.

18

React is not an option, i don’t think the bundle is significantly smaller. Templates are bigger i think. you can use typescript independently, and the decorator feature just improved a lot, so it’s even better if you weren’t pulled back to upgrade the version numbers. I think that’s the main benefit not to use ionic. Everything is improved so rapidly that to upgrade right away is better. Anyway from jan 23 webview also supports css grid at last which is a totally new concept and basically changes everything in HTML world. I would like to use it day one, so it’s better to avoid the usage of too many customized angular tag. Typescript also falls behind on browser changes, as browser has been drastically evolved in just the past one year. It’s better to use native html elements, and just use angular tags only when you need to. Like virtual scroll, where the development takes 1-2 month. css grid is better than ion-grid for example.

19

Interesting, thx for this last explanation

20

Even isn’t about the quantity, a 49.05% of unanswered Ionic questions is a lot for me.
React has similar numbers (48,61%) of unanswered questions that are very close and still a lot for me.

Ionic Framework on Github has 10,967 closed issues, 1,128 still opened (80 waiting for “triage”, the older in this state is from 25 days ago), 6,466 commits resulting on 117 releases, and got 33,517 starts as first beta was on 03/28/2014. 265 contributors help in this project.

React numbers on Github are 5,327 closed issues, 340 still opened (older interaction from team 1 day), 9,864 commits resulting on 83 releases, got 90.244 stars and 0.9 stable version was on 03/05/2014. 1,167 contributors help in this project.