I’m reviewing some of the ionic 3 component. I think they are not designed well

Ionic Framework ionic-v3
1

I’m reviewing some of the ionic 3 component. I think they are not designed well, and too complex to fix many times. I’m trying to eliminate ionic as much as possible at the moment, as it’s totally counterproductive.

I’m working on tab component now, which will be a container only, no buttons inside just outside. (it’s just bad idea to force me to use only the standard icons, or making hacks around it) My css file is just full of workaround of the present ionic style. (some of them just to make it work on safari)

I have hacked also a cordova plugin, but i realized it’s easier to recreate. Something needs to be done with this, because i’m going to replace everything at the end. (I have faced with so many bugs in the last one year, that i was simply fed up with it) Should have been done before. I just recreated a toggle (toggle didn’t work on Safari) and a virtual list.

To create so many simple components, i think makes more burden, as it removes the flexibility of the real HTML5.

1 Like
2

If you don’t like the Ionic Components, why are you using Ionic? You could just use Cordova.

3

It might be your initial approach is incorrect so you end up doing things in your own way.

1 Like
4

Did you have a question you would like to pose regarding your concerns?

1 Like
5

You can then use Apache Cordova or PhoneGap.

cordova.apache.org

Ionic is a UI framework based on Cordova.

Cordova builds android, iOS, blackberry, Amazon app based on HTML5, CSS3, JavaScript.
You can build your own CSS3 UI on Cordova.

However, what I find to be uncomfortable on Cordova is its working environment which is apparently outdated & not real-time. Ionic provides the most up to date working environment for HTML5, CSS3, typescript app. Cordova, although much lighter weight, is kinda buggy and will remind you of old times…

Alternatively, you can try to use Angular Material on Ionic.
material.angular.io

Install angular material on your ionic. Angular Material is mobile friendly… but not all of its components are working well. I’m trying to figure out how to use them all.

1 Like
6

Give us some code @raxim

7

If you want help with a specific problem then you need to be more specific.

For example, post the output from ionic info? And post some code that demonstrates the problem you are experiencing.

-> My css file is just full of workaround of the present ionic style. (some of them just to make it work on safari)

Ionic uses Sass so you should be theming your App by making changes to your project’s .scss files.

See:

8

Ok, on Toggle and all the popup has black square artifacts on latest Safari.

Virtual scroll - just scroll down and scroll up, you experience a white screen. Virtual scroll cannot handle properly the orientatio change. (items in it just slip together on unecessary dimension calculation) It’s the case in 90‰ that you would use in infine list. (if there’s element loading it should be loaded when you are at the middle of scrolling, no to break the smoothness) At orientation change you need to scroll wherever you were. (as the height of the element changed)

On tab to use my icons i had to make a 600-700 hundred lines stylesheet, and it was tough how to hack it to ionic.

Appscript is not letting me to grab angular 5, i need to wait.

Angular nativeElement does not store offsetHeight correctly if you wrap it in a flex.

Grid table just a div with flex. It just removing the flexibility from the html 5.

Looking at the cordova it’s just a javascript native call to and from the webkit.

QR code plugin in cordova was so buggy, i have wasted a week, because i hadn’t any knowledge on Android side, but when i realized that to develop native app even in swift it’s easier than i thought, i’m moving towards not relying on things, what i cannot control. on github there is an fssrepository (‘facs’ repository), it was entailing the specific details. From my point of view angular is transformimg the html 5 to a GWT, and many times it’s a burden. There is pros and cons, but i simply got a promise from ionic, that components working on every browser smoothly at least the basics. When i got the knowledge and the very steep learning curve, i realized that ionic is not flexible enough, when there is a problem, i was hardly able to fix. (i have tested the Toggle for example 10 hours, and at the end i recreated within 2 hours.)

Some components use contains which is not supported on Safari.

Ionic header on orientation change does not calculate the margin correctly, so i had to introduce media screen to avoid the gap.

I have written and learnt a year in 14-15 hours a day to make my application ready, now partially i need to start it over. I was not satisfied with ionic from the first time, but to recreate all of this things it delays my project with one two months.

I will do it step by step, at the moment i need to fix my virtual scroll, but it has got more features on less line at the moment and scrolling up does not cause blank page, scrolling down does not stop even components are not available at scrolling time. (the touch and feel is far more better)

Every item inside should handle when the row variable is null. (you need to check anyway) but it shows a default one, which does not require heavy load)

Carousel feature on slider is buggy.

Ionic was inspirational, when i was new at the mobile development, but now i’m able to fix problems, which made my last year so terrible, feeling that my app is a crap, even if i had days when i worked 50 hours.

At the moment i feel also there is so many bloatware in my apk, that i can reduce the size by 95% to help the loading time. (1,5 MB packed and realeased js might be enough if you store on your device, but downloding every time as a webpage. I don’t believe it guys it’s feasible and i don’t use just one pica plugin everything else coming from ionic and angular webpack and cordova.

If all the cordova plugin, what i tried just were buggy, what is the use of the whole cordova if you recreate anyway with 5 lines of code?

There is definitely other stuff to make some script which is packing your stuff up, but i’m packing up twice now, because i’m testing the platform folder under android studio and

The list is going far away i just added some of few.

I have spotted also a problem how ionic is wrapping up hammerjs. (i had to add some line of code directly to enable vertical swiping, it did throw me undefined arror, because you are storing features in a map, but you haven’t implemented all of the hammer ones)

9

The gradle script does not contain the js build, just the ionic Appscript can handle it at the moment, so i need to build with ionic and after that to be able to run i need to build the android part again in android studio. You aggree with me it’s far more comfortable to use android studio to profile and debug than the cordova incommand line, or even embed to Visual Code somehow, which also some time to figure out.

There were so many javascript framework and my feeling is ionic didn’t learn from them. It’s not a good idea to replace every html tags to angular one, as web is rapidly changing. (this typescript is good but it must allow me to accomodate to latest browser changes. (especially WebRTC, i had to modify the definition)

10

The miserable thing is that i’m the guy who was able to increase the speed of jquery plugins by 95% at that time, and i was just hardly able to make a 10-12 pages app ready within a year with ionic infrastructure. i was just fighting with the components, and i should have done far more better.

Every framework in js side seems to me some empty advertisement as in the reality web is so powefull nowadays that you can do anything with some lines of code. Angular components needs to focus only on some extension instead of replacing css and html standard, which kept changing and you are screwed next week. (i had a backup, which is 3 month old and i’m not able to build it)

There is a need for angular, but not the way, how it’s used nowadays.

11

@raxim

Thank you for taking the time to elaborate.

It is above my coding experience in large (ionic) apps to confirm nor counter your experience, but sorry to hear the road was too bumpy.

Even though some code would help understanding if I would chosen the same patterns as you did.

i havent had that many difficulties yet but through you message made abit more aware of the risk being on a dead end street.

Thx

Tom

12

If i don’t give up my whole development you should be able to see some production ready components until february on my github fssrepository under facs repository. You can google it. (first in the google search) My gut feeling it will be a new framework also, which might not be a framework, just some extension, what we need. Everything else will be pure html tags. (my feeling also that angular components does not make html readable, if they are replacing a div, what card does. same line of code with less flexibility) I think we need to introduce some Turing rule here. Components which replace less than three html tags at the same time and can be recreated with some lines of code should not be done. (just the scss theeme which can be included in the div element) Components which are more complex, like virtual scroll has a purpose to ease the pain, but virtual scroll itself should have included the infinite scroll itself, what you can switch off, as 95%, we are using it as an infinite list. (even item which does contain heavy stuff like border shadow or buttons next to the picture can be slower after 400-500 items, and just after 1000 items the scrolling are laggy, my mobile was able to deal with 5000 heavy elements before crash, with virtual scroll it was laggy after 50-100 items.) Did you know that Facebook hasn’t even virtual scroll built in on the news page? The simplest part was the lazy loading, which is a dirty hack now, but at least working. ng-lazy-image was heavy. The ionic one was not working. That kind of stuff should be built into the virtual scroll without more parameters, that you have right now. That’s the basic expectation, not to create only a scrollable div, and a fancy angular template reuse to reach half of the performance what browser does natively. I personally accept some performance gap, if there are more features, what i don’t need to code separately, or hack around.)

All the ionic components can be made only with 6 components, so you have time to make it bug free. Instead of making some noname components which are just going to replace div tag simply with extra styling.

13

Looking at virtual code does not use any of the design pattern what i know of, it’s just a spagetti code. Mine also a little bit but i made within a week, but i’m cleaning up when i’m integrating to my app. (i’m using 70% just virtual scroll in different scanarios)

I hope i was a little bit constructive on this, and didn’t offend anybody. It was not the purpose but i was simply crying that i have wasted a year. I didn’t know many technologies in angular, node js but i haven’t expected that kind of suck after 13 years of experience.

Other point is that you might not realize that a big ionic app does need not just one developer, so the hidden cost, that somebody is loosing one day on a very simple issue does not make your day terrible. If you have just 1-2-3 developers, ionic is very resourcefull, and you shouldn’t use it. That’s the gap what also the angular ionic node and cloud integration world should fill. I have worked in web projects with 100 people in a company, as the work was so uneffective with javascript at that days, but nowadays even facebook can be written with a small team, even if you choose pure javascript, thus js framework should focus on small teams project. Just 5-10% of the mobile app are robust that you need more than 10 developers. How many app you can create in the app store within a week? I have to say 90%, but not with ionic angular. That’s the dead end, what i see right now as the biggest threat on this technology.

Peter

14

@raxim I don’t want to argue, I just allow my self to pop up here because I think it’s a pitty if you give up on your hard work after a all year of effort :frowning:

Therefore, may I ask, do you think you’ve got like a hundred or more problems to solve to finish your app or do you think you may have like 2-3 killer problems to solve in order to finish it?

If you could maybe figure out that there are only a few real “no go” problems right now, maybe with the help of the community you will be able to beat these and will able to finish your product.

Just try to cheer you up, keep the faith (like the wise phylosopher jon bon jovi once said :wink: )

15

Thanks for cheering me up. I’m not sure that i want to share my private project, but i have shared many common things under https://github.com/fssrepository what i’m unable to finish alone at least not now, you can visualize what i might be doing right now.

The main problem is when i looked at Safari (didn’t saw my stuff on it before), i wanted to eliminate all the ionic from the project. I was able to configure a full macOS environment with iphone 8 emulator on PC, so i was able to look at my stuff. On Iphone 8 most of the stuff was working, on Firefox also, but on Safari i had a nightmare to see the crap. As i had previous experiences with cordova plugins and ionic components also (they were already workaround on bugs, which hasn’t been fixed within a year, look at issues and you can see the complaints, and the real workaround coming after a 6 month for a specific issue), i just didn’t want to hack around and customize more the ionic components.

I have to say it is bad, i need to refactor many stuff, but i might be able to do it, as i need to replace the tab / virtual scroll and menu at first phase. Just now i have created a functionality which replaces the RxJs bloatware. (i hacked around some component in the tab before, because i was not able to deactive the channels from outside, if the tab is inactive by RxJs) I have made a popover search bar which is exactly the same on all tabs, just there is only one flag difference, when it’s reaching the backend. (which is perfect looking, but hard to achieve)

I had to make also some sort of draggable buttons on the header / footer, which is destroying the tab beneath (like facebook chat - when you close it).
ionic-tab is not able to dynamically remove and add tabs. (practically the code with 14 parameters on the “Tab” is just not reusable for me) I have extended with a remove function because a dirty state remained, when i destroyed the tab, which is an another hack in the component what i would like to avoid.

So i think i have designed only 3 killers from the one hundred what i was facing using ionic.

There is some certain functionality, which hasn’t seen before in any app, but it’s crucial in my case. (as i need to effectively show many data on the screen, which is nice looking at the same time)

I’m on the way, but i think my Christmas has been screwed up.

16

Thx for the feedback. To be honest I’m not sure I understand everything because it looks like the complexitiy of your app is way above my know-how, but still, I think there is hope.

If you could identifiate these 3 killers, you could concentrate the effort and them and also think about the time it would need to implement them. Like, for example, removing tabs, a month. replacing virtual scroll, two weeks. pimping the menu, a week. Then add a +25% ratio for “too optimitic” and you could somehow see a goal. Of course if the goal is like one more year, maybe it doesn’t make sense, but if the goal is then one or two more months, it would still sound possible.

For the support of the community, even if your project is private, maybe you could open separate issues/posts and try to document the code you could display. Don’t hesitate to link them with this post, so people could follow.

Again I just try cheer you up and be sure that I understand the frustation. When I created my app, I had also to “fight” sometimes and I took only a couple of days off during a all year, it wasn’t always funny, but at the end, it worked!

17

Hi @raxim,

Just went through your github projects and all code contained therein. Basically there seems to be two repositories with some coding in there. The FMS seems an almost empty ionic project (almost no UI) with a truckload of js libraries in assets, which are loaded in the app, but don’t seem to be called in the ts files (but I may see that wrongly). In this case, if you have serious issues with Ionic, I’d say: go cordova if you need a mobile container, or just skip any framework at all.

The other seems to have some java code, but no serious (UI) work related to ionic/angular

So, I am not really able to link this repository to any of your observations,not can make an educated guess what you are facing with your private code and agree with @reedrichards that you a) should not give up and keep smiling b) if you need help, do post some actual (parts of the) code you find troublesome.

Beyond the point that I have a hard time understanding what these libraries try to achieve, but I guess there is an audience out there for this specific topic.

Cheers

1 Like
18

I have shared an idea, and a well detailed doc. Without reading that there is no point to look at anything there, and it’s not a real ionic project, and not related to my observations.

I’d say, i skip the whole framework thing.

The ionic attitude also needs to be changed how to fix bugs, as you shouldn’t close issues, where 6 people is saying the same. You are expecting codes on totally evident issues, which can be reproduced easily.

There are bugs which hasn’t been fixed within a year. I was active on your repo, and posted many bugs, nothing has been addressed because you are waiting to share all my code for free.

On hundreds of bugs is simply inevitable to share all the code. I just decided instead of waiting for bug fixes, i just simply fix it myself, removing the non-supported parts from the code. There is a risk, that a bug never will be fixed on ionic side, thus i cannot depend on it.

The “facs” repository will address your issues, other ones are totally different. FMS is a playground at the moment, as there are browser limits, which needs to be avoided by a complete memory and transaction manager written in javascript.

You know what Chrome team said when i posted an issue, where the Chrome instance is crashing.
Sorry we are not willing to fix it, because it’s too hard. :slight_smile:

https://bugs.chromium.org/p/chromium/issues/detail?id=793177#c7
https://bugs.chromium.org/p/chromium/issues/detail?id=793174#c5

Cheers,
Peter

19

Great

And so you know: if all else fails, go to assembly. Killer in performance and control

:smile: :wink:

1 Like
20

If you read through what issue i have raised against Chrome, it was the same bug fixing attitude here.

If i would send it to the lead of Google, he would kick out that developer from the team.

You need to choose that you fix bugs or not, if you not, it’s not a problem, just you need to tell that you don’t mantain your project anymore.

Angular also hasn’t any feature how to avoid event emitter chaining. There is a good task for you, what i have already solved with 30 lines of code.

You have a tab. there is a virtual scroll inside and items has buttons, which needs to trigger a footer bar display. (the footer bar is getting data from that button.) At the moment the only way is to send out data, is through the onTabChange event and filter out later on, whether it’s a special action or a tab change event.

That’s a fight with a component. Without critisizing me it shouldn’t be a big job for you. My estimation was some hours, at the end it was two weeks, now i’m just dopping the whole tab, there is a way to make it far better.

You need to send an event outside your tab as to create footer bar for every item is not a good solution. What i have seen in one of the virtual keyboard jquery plugin.

If i need to do the basics and at the same time i need to fight with components it’s not a good trade off.

Angular 5 is even more complex, who will have a year to learn all this nightmare. I’m not sure about React, but Angular it’s just overcomplicated in many ways and does not address basic needs properly. I cannot avoid right now, as i cannot go back to assembly to make a button, but it’s a shame, what a feel that i have choosen angular over other frameworks. I never profiled any js before. There wasn’t any need for it. Now i’m just attached to the profiler for every action to figure out the performance issues on mobile. It’s not the way, how a development should work.

1 Like