Project Intro:
As I’ve been heavily involved in catching up in my Angular studies, I decided to read a book on the latest changes and introducing myself to TypeScript.
I found the book: https://www.amazon.com/Building-Web-Components-TypeScript-Angular/dp/0997303727 was written clearly with great examples and simplicity.
I wanted something to practice my new found knowledge in Angular 4/5 and I’ve heard quite a lot about the simplicity in Ionic’s hybrid apps. Although I’ve debated for a while the practicality of hybrid apps vs native apps and which framework is the best, you end up with nothing if you don’t event start. In the case of speed, code re-usability and lack of macOS hardware, the latest version Ionic 3 was the most suitable to get started quick and create.
Being a big football fan and having the World Cup starting in a week from now, I figured I would test out APIs and views in Ionic based on what I would need to create a sports data tracking app similar to theScore (one of my faves).
The things I used to create the app:
API: https://www.football-data.org/ was great for practicing with but would not allow me to take the product to market. (Although I was already late to bring this to market)
Testing tools: Ionic Dev App/ Chrome Developer Tools/ My iPhone 6s/Nexus 5
Boilerplate: Ionic sidemenu starter-page with custom SASS
Repository: https://github.com/jamajuice/footyWorldCup – Github
Conclusive Analysis:
Ionic 3 was very easy to install and quickly set up a basic app with a boilerplate such as a sidemenu or tabs menu which was both compatible with iOS and Android. From there, using ionic’s generate commands “ionic g”, you can quickly setup pages (views), pipes and providers which will feed and display your data. Angular’s core HttpClient was simple to import and use. The app was written quite quickly and it was easy to implement pipes to do things like search and sort and make use of a search button in the navbar. The longest part was learning which ionic tags to style in the SASS files and while using the Chrome Developer tools, this would be achieved eventually.
Ionic’s docs are written very clearly and there is enough community support to get things done. On the other hand, since we’re at the 3rd version of Ionic the solutions range from v1 and AngularJS to variants across both platforms so not all the solutions apply. In many cases, things were made simpler in the latest version when finding the right resources.
In terms of functionality, I was disappointed with only one aspect which could be quite important in future apps which was the image rendering in lists. As you can see on my fixtures (home) page, there is the use of a soccer field for the background-image and the team logos made for some lag when scrolling. More specifically, when scrolling at a decent speed, on iOS only, there would be some lag with the items and have a quick blank area in the screen and the item would appear. Having followed instructions on VirtualScrolling (https://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/) and implementing this fix (http://masteringionic.com/blog/2018-02-13-lazy-loading-images-and-managing-lists-with-ionic-virtualscroll/), I was able to achieve a background-image which would be loaded with the scrolling working on iOS but my <ion-imgs> for team logos were still not fully loaded when viewable. Although this video is not completely accurate (https://www.youtube.com/watch?v=7oH4tPW2bCU) , it made me think that this could be a case where a native framework would render things better. However, all this and somehow on my teams pages where there are large images of the teams flags, and everything renders, scrolls and searches fine. It seems this is an issue they are still working to fix in Ionic v3 and should arrive in v4.
All in all, very quick to get a working/deployable app and would use in the future for more of an information/data rendering app but I would be hesitant if it involved many images. Otherwise, there is still much more to try in terms of functionalities such as GoogleMaps API use, facebook login, camera use, notification use and I will be looking to test these out if they come up in my next idea. At the moment, I would like to work more on having better app ideas to put more effort too and still evaluating which framework would be best to use.
And now some pictures:
