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

Ionic Framework ionic-v3
21

Just my 2-cents. I agree completely with you criticism on the tab component. It is not very well designed, and the whole callback / eventing paradigm seems anti-pattern with most other ionic components (and not really angular 4 style).

My experience with angular (both js and 2+) is that if you follow the framework paradigm and design-patterns it works really well. If you do not like that you’re gonna have a bad time for sure.

I just created a pretty heavy app with very active websockets / audio playback and lot’s of data with ionic2. Although I had to get used to the use of some components (and absolutely share your critique), the performance on mobile is amazing (in a good way :slight_smile: )

So bottom line: if you really can’t find your way around angular, or just don’t like it: stay away from ionic, it will only frustrate you: go with cordova and write you own web components for example.

If you have performance issues on angular5 apps: plz post some relevant code, i am sure that it can be fixed!

1 Like
22

Performance issue was attached to the heavy items inside the virtual scroll, when you scroll up/down, anyway the performance issues are negligible. I have made setTimeout hack first inside the item to initiate a lazy loading, not to break the scrolling, but it’s a hack.

Angular has pros and cons, but ionic is a good example, how you can screw up something with angular, and make it terrible hard using angular “patterns” like eventEmiter.
Angular is good, but needs more efficient design to help the developers with some simple rules, instead of hundred ones.

Now i’m creating a MessageBridge between components, and i have a feature which can deactivate components to listen without destroying them, if they are not seen on the screen. (hidden) I have used RxJs, but at the end, i realized that i can do it within 30 lines of code with activation/deactivation. (what RxJs cannot do, just call a filter method, which is inefficient, if you have a virtual list with hundreds of component in it - you shouldn’t call the filter, as in a synch action it’s blowing up your whole app) RxJs source code also is robust, i think 10-15MB or something.

The audio playback thing is a little bit different. It’s like my project FMS, there is only a very restricted amount of interface trick, everything is in the background, which you need to code yourself. (like websocket / audio decoder etc.)

When i’m cleaning up my crap also, i will separate the components and it will be available under ‘facs’ (fssrepository), but not today. It seems to me it will be something very different than ionic, and partially replacing the angular EventEmitter logic also. At least the chaining part. It takes time, i think a month to fix my app, and 1-2 weeks to make the reusable package for sharing, what i have done.

As my screen are complex, it will be very well tested in different scenarios.

23

Are you using vmware/virtualbox to run a macOS VM on windows? Did you try on a physical mac?

Few people in our team have a similar setup and it used to work great till macOS 10.12, but does not work well for Safari in macOS 10.13 because macOS VMs do not support gpu hardware acceleration and latest versions of safari rely heavily on gpu hardware acceleration for fast rendering. iPhone simulator only uses software rendering, so it still looks perfect but runs much slower than a real iphone to test animations or scrolling etc…

We also faced similar issues as you like black boxes in a lot of html/css styles especially those using shadows, gradients or transparencies with ionic and many bootstrap themes. If you haven’t yet tested on a physical mac, please test and you might find that you don’t need to fix most of such issues.

24

Physical Mac is not available for me at the moment, but thanks for your advice. I saw in the iphone emulator there is no square. (there is no point to check performance in a VM, but the validity should be checked somehow)

There are some certain complexity, which i really don’t like, it was just a slight push to go to a different direction.

If you tell me that box-shadowing is not that big problem on safari, at least i can add some nice css animation on loading time. I had an assumption that it’s the case. What about older version of safari? (like for example on iphone 5, or prehistoric mac - unfortunately Mac is expensive, so many guys just buying a very old one)

I’m using the whole thing in ubuntu 16.4.3.

Maybe i can switch off the gpu rendering on safari somehow. So it slower, but at least show me the real result.

If it’s working in the emulator, is it a proof that it’s working on Safari?

I’m testing the performance only on my android phone, which is 3 years old matching with iphone 5-6, so my assumption is, that it should work on iphone with the same speed at least.

On my 3 years old android phone, i have seen lags, on PC not. Majority of the phone i think 2-3 years old, so it should work smoothly on that devices.

25

I never saw any such issues in our macOS 10.12.1 VMs. You can try creating a macOS 10.12.6 VM and update Safari in it to latest from App Store (I haven’t tried this yet). Also haven’t tried disabling hardware acceleration in Safari, don’t know if it is possible or if it will fix the problem.

Do reply here if you can find a way to make it work.

Usually if it works in iOS simulator, it should be a good enough proof that it will work on desktop Safari also. Its the same engine internally. But this can’t be a substitute for actual testing.

26

One more thing to add, that tab component for me was lagy when i switched between them. I have realized that using z-index instead of display is far more efficient.

As the browser does not break the container component, even if some component inside has got higher z-index than the other container, it won’t be shown.

It’s some sort of hack, and you need to take care about that you don’t hide popup, but angular does not make any dirty thing, or might be the browser is slow in display: none and back to visible i have no idea.

No forum tells the benefit of this.

27

Just a quick note, to let you see with your own eyes the nightmare what i was facing with. Using firebase node package, which is an official Google one, not an MIT, just to be able to send some notification through service worker, it ate up 500KB from my 1,58MB build. I thought the minifying is proportionate. 1MB also big as a js, but i have made major steps toward eliminating the ionic. The css of mine is around 500KB, which is just full with ionic stuff.
As the angular itself has lots of comment in the code and i have made a source-mapper report which only works on unminimified versions with mapping files, i have a guess that ionic eats up a very serious chunk of it, what i will recreate only within 50KB with less css (i definitely not recreating components, i’m making some very flexible one, for example the popup in my understanding is a tab which has a position). I will share some of the stuff at facs repository, when i’m finishing (it won’t be production ready - i haven’t time for documentation, but it will be properly tested, even if the orientation changed - even the ionic popup is not orientation change resistant), very likely within 2-3 weeks, as i have already created the menu, the tab has more features already, the virtual scroll.

I’m also at the middle of popup, and the range extension of toggle. Badge is the easiest one, probably 30 minutes work max. There is some fab button, but i already able to position some of my button, which are draggable. (working on mobile and on laptop also)

I also recommend you guys to look at the latest ionic blank project (which isempty and it cost 500KB - minified), as the angular team clearly said to me looking at my report, that the config messed up it shouldn’t contain compiler at all. generating with angular cli it definitely does not contain that kind of stuff. They said something about platform-dynamic which shouldn’t be used and AOT.

Because i don’t need to accommodate to ionic, i’m expecting that my project will be slashed by 2/3 after the 2-3 weeks period. Also i need to admit, that my real criticism in the angular world, that it made my work more complex, than it should have been. Now i feel i regained my control back.

I also eliminated the EventEmitter bubbling, i have created an UI channel system, where components just subscribing, so you can broadcast or directly send messages to them (messages are sync at the moment, but it’s very fast, not really blocking anything on very huge element, as i’m not iterating on arrays, just using the associative behaviours, and not using maps also, which is special only for ts). It’s already a very big breakthrough, as now i’m able to fix my code very easily, i have a feeling that it’s maintainable, instead of digging into it for hours.

I decided also, that in the next phase of my project, i probably create 2-3 native elements, instead of using cordova. I picked up the swift stuff 3-4 month ago, very likely i can use some official Google library even if i haven’t any deep knowledge on swift /objective c. (it was inspirational what a language can do when it’s really the basic, like swift, which is a cleaner version of ansi c++ - i liked the operator overriding stuff,which i remember i personally used 17 years before at university :slight_smile: - i have seen a project in javascript to do that but it wasn’t real, just a hack, and had got limitation)