Help needed on my first meteor project

chidimo · February 6, 2019, 12:38pm

TL;DR

I have refactored this post into 3 smaller posts.

Original post starts here, if you’re interested.

Thanks first of all for all the assistance you guys render to fellow meteorphiles. It’s inspiring and amazing.

I just got my first gig to develop a hybrid Android and iOS app for a client through a referral. Cheers to me !!!.
The project appears simple enough, though it would require music and video file uploads to a cloud server, and the ability to play them. For that part I’ll explore ostrio meteor files in combination with AWS or Heroku.

But I have some questions about how to complete the project. My question is not related to program logic. I think that part is straightforward enough. Or is it? I have questions about UI framework choice, routing, testing, and collaboration.

Project template is React.

UI framework

I have been experimenting with onsen UI’s <Navigator/> and <Splitter/>. It has a great look and feel but I have run into major issues.

I have been unable to get icons to display. Copying onsen UI’s css files manually into the lib/ folder of my project didn’t help. I resorted to installing react-fontawesome. Now I have beautiful icons. I’d like to know if there’s a fix to onsen UI so I can use material and ionic icons.
In my experimental app, the meteor android build works fine on my phone. In my client’s app, build is successful, but upon installation in my phone the pages won’t mount when I click on the navigation links. Also for my client’s app, a deployment to heroku works fine in Chrome, Firefox, Edge, and Brave browser, but not in Vivaldi.
I keep getting the message Resource interpreted as Stylesheet but transferred with MIME type text/html for
http://localhost:3000/ionicons/css/ionicons.min.css and
http://localhost:3000/material-design-iconic-font/css/material-design-iconic-font.min.css

I’m working with a designer who’ll supposedly handle the job of making everything look beautiful. But I don’t know if plain old bootstrap can produce something that feels native to both platforms and how to go about accomplishing that.
Any suggestions as to UI framework with native look and feel as well as nice page transitions and how to get started would be very much appreciated. Its still early in the project. I don’t want to have to start a painstaking process of refactoring later on.

Testing

I can’t test my react components with enzyme because I’m using onsen UI. I’ve read several posts on SO and in the onsen community forum that make it clear that this is an expected behaviour. Even the docs recommend testing with Karma and Headless chrome. So I’ll have to settle for those two once I decide to stick with onsen UI (I don’t know what they mean yet but I’ll research them).
Suggestions are greatly welcome.
I once made a post on testing meteor apps. I got some suggestions there which I’m trying my hands on. I hope to post my story back there as soon as I make reasonable headway with this project.

Routing

In my experimental app, I had to ditch react-router once I switched to onsen UI. I couldn’t get them to work together and I’m not sure if its possible. I managed to use the navigator to mount hyperlinked pages. But the back button is broken, which means my app exits from any page once back android back button is pressed. See discussion here.
Is there a way to get around this? I don’t know if kadira and flow routers would work given that the template is in React. I looked at the meteor docs already. I guess I might have to forgo routing and find a way to ask users to confirm if they want to close the app. Or maybe onsen UI has something I need. I’ll take a look later.
Suggestions are highly anticipated.

Collaboration

I’m developing in collaboration with a designer who is thousands of miles away. I don’t know how the work flow is supposed to go. I write program logic. I am thinking that I should add css classes to every element and then have him work on the stylesheet alone. Am I right in assuming this? I’m a newcomer and this will be my very first collab work. Everything else I’ve done has been solo.

Here is a mockup of the sign in page below. I have implement sign in using Meteor.loginWithPassword(email, password). My problem is how will my designer achieve this nice look and feel and what do I have to provide him?
As always, suggestions are highly anticipated.

I really need to get this project done the right way. Its a major test for me.

Thanks in advance for your help and support.

illustreets · February 6, 2019, 4:05pm

Continuing the discussion from Help needed on my first meteor project:

Your enthusiasm is refreshing. Good luck with the project!

Now, how do I put it… phew, it was a long read. I am not familiar with any of the peculiarities of developing for mobile in Meteor, so I can’t help you in that respect, but I know what you could do to increase the chance of getting the help you need.

Too many questions - I doubt many people would have the patience to read through all of it, let alone answer. Break all the block above into smaller, self contained issues. Ask one at a time.
Provide code samples with each question. You might need to learn the basics of debugging on Android, so you could catch errors and post them here - screenshots like the one above are not very helpful.
Separate design from coding questions. Also separate them from project management questions. To sort of answer your last question, yes, many times it works like that. People collaborate in teams from everywhere in the world. How to best do it? - there’s a whole body of knowledge for this. I can’t recommend a book in this respect, so you might want to look at Amazon reviews.

Good luck! You’ll get there. You might not know it yet, but you’re at least half way through by simply picking up Meteor for your project.

chidimo · February 6, 2019, 4:37pm

Thanks for the feedback @illustreets . I’ll implement your suggestions at once.

alawi · February 6, 2019, 5:12pm

Congrats on your gig @chidimo.

I’ve to agree with @illustreets that the questions are long and there is a lot to unpack here, a better approach going forward to is post a specific problem with the errors/code sample to the right community.

With that said I’ll try to share what I know.

If you’re using React, you might want to give react icons a try, otherwise you can add the css and the fonts to the public folder and link the css to your main page.

This seems like onsen UI issue, I’ve not used it. I did evaluate it once but then I chose Framework7 with Cordova for simplicity and it worked great. Ionic 4 also recently embraced web components and react, however it’s a bit early I think to go production with it. Your other options are either to go native or react-native, but again that depends on your dev skills/time, budget and expertise. I can only say that Framework7 worked great from my use case, it was simple to use and I got a good enough performance.

Do you real need to support Vivald? if so did you try plain Onesen deployment on it to see if it actually works? Again that seems like Onesen UI issue.

This probably because the file is missing (not in the public folder) and you’re getting not found html response. You can check you chrome dev network tab to see if the file is actually being loaded.

Bootstrap does work but I’d not recommend it if you want to get close to native. Ionic, Framework7 or Onesen are all better choice in my opinion, and react-native is even better.

First settle on a UI framework and then start looking on how to automate the test and what level of testing you’re after.

Each of those hybrid mobile libraries provide their own routing system (I know Framework7 does) use those, I don’t recommend diverging from what they offer, it might produce more unknowns unknowns.

With regards to collaboration, I think with time you’ll find good synergies, it’s hard to discuss it since it varies with the people involved but it’s doable. What I’d touch on briefly is that developing any production software is a challenging endeavour, there are many unknowns/unknowns, it usually takes longer than expected, it require a lot of iterations and patience. You need to approach it with a fighting mindset and open mind toward learning, excitement and passion will get you started but won’t sustain the long fight, good habits, a clear vision and perseverance will.

I hope that helps, please next time ask more specific questions to make easier for us to help you

chidimo · February 6, 2019, 6:08pm

Thanks for the detailed post. You’re the best.

I’ve refactored my question and split it into 3 posts. I’ll include the links atop this one under TL;DR.

Concerning Vivaldi, I don’t really need to support it. It just appears to be a weird enough behavior which is why I mentioned it.

I’ll take a look at Framework 7. I found a useful post about getting started here in the forums. Here it is just in case you want to pass it along to someone http://killerchip.net/2018/12/29/2018-12-29-Meteor-react-f7-integration/

alawi · February 7, 2019, 8:01am

Yes, it’s better that you split them.

But again, some questions are better directed to the Onesen UI community, some require you to do more experimentation from your end (the CSS imports, and the mounting issue on mount) and others are too general to answer.

The Meteor forum is great, it has so much wisdom accumulated in it over the years from folks like robfallows among others, one can argue that it’s as valuable as the tech. But your chances of getting a useful response increases proportionally relative to how accurate, concise and detailed (some code/error logs) your question is.