3 ms·

I use React + React Native for https://www.jqbx.fm https://www.jqbx.fm. As a 1 man project it seemed like the only sensible way to build mobile (android/iOS) an

I use React + React Native for https://www.jqbx.fm https://www.jqbx.fm. As a 1 man project it seemed like the only sensible way to build mobile (android/iOS) and browser versions. I can share almost all of the code (where applicable) so one can move a lot faster and have a lot less mental overhead. That being said React Native has stability and performance issues that are tricky and can hold up your app for a non-trivial amount of time. Also staying on top of updates requires diligence and can be a pain. But if you're looking for the quickest path to market I would say look no further.

bytematic 8y ago
Do you share components too? How are you doing styling? I'm using a mix of js variables for different platforms and scss files but I'm finding it kinda complicated. I would like to use styled-components somehow.
- jqbx_jason 8y ago
  For JQBX the styling is done differently between mobile and web. I stared off using scss for web (old habits die hard) and then had to use JS styling for react-native. Not the biggest deal though since the UI is where the two apps diverge the most. Very few things use the exact same UI patterns between web and native. But if I were to do it again (and had a design laid out in advance) I would probably opt for JS-styled components across both versions- though the "CSS" syntax is a little different so you would need some way to port that. I think it still makes a bit of sense to keep styling separate between web and mobile though since you're dealing w/ a different interface... but like everything it depends on what you're building.
ratsimihah 8y ago
Cool app! I got a little confused as to how to add songs once you're a DJ, but the whole things looks cool, and you seem to have a nice community already!
- jqbx_jason 8y ago
  Thanks! Please join in :) Also, thanks for the feedback I actually keep getting similar comments that it's a lot to learn all. I'm currently trying to simplify things. To add a track you just add it to your "queue" by searching and clicking the plus icon, then when it's your turn (your UN is all the way to the left) your track will play for everyone. Assuming you figured it out but just FYI
  - ratsimihah 8y ago
    I went as far as having the track in my queue "on the deck" but couldn't see it in the global playlist or when it would be playing. It's super fun because I tried to make a music app to make collaborative playlists on steroids but my UX is so lacking. You can check it out at http://www.niche.fm http://www.niche.fm
gubsz 8y ago
Wow that app is exactly what me & my friends have been looking for. They even started hacking together an Android version of this. Looks really well done! One question: Do you plan on writing a native desktop solution? I'm not a fan of having to keep my browser open just to run a single app.
- jqbx_jason 8y ago
  There's a desktop app available for Mac (it's an electron port of the webapp- if anyone's curious). A windows version is coming soon (ETA ~1-2 months).
- kovacs 8y ago
  Hehe.. turntable.fm v2.0 :-) https://en.wikipedia.org/wiki/Turntable.fm https://en.wikipedia.org/wiki/Turntable.fm Just checked it out. This is really well executed! Definitely doesn't look like a one man operation. Congrats!
  - jqbx_jason 8y ago
    Thanks! And yeah heavily inspired by tt.fm (RIP). Hopefully the community keeps growing and can bring some of that 2011 internet magic back.
    - kovacs 8y ago
      Yeah and this is smart because this time around the licensing falls on Spotify where as back then TT had to negotiate licensing if I'm not mistaken. I'm not a lawyer but if that's true this seems much more viable using Spotify's APIs with the caveat that your entire business relies on them if that's your aspiration. Regardless, wish I'd thought of this :-P Seems like it would be such a fun app to work on :-) Best of luck to you! (BTW it just pinned a Google chrome helper on my machine so I had to kill it. Not sure if you know anything about perf. with your app yet. Just FYI)
      - jqbx_jason 8y ago
Zaheer 8y ago
Looks nice! What are you using for the backend?
- jqbx_jason 8y ago
  Thanks! BE is Node + Express. I tried to keep a lot of the logic in the clients to it's pretty slim. I'm a FE developer professionally so keeping it all within the JS ecosystem was most comfortable for me.
ChicagoBoy11 8y ago
That looks incredibly well put together -- congratulations. I'm about to launch my first commercial React Native app (pretty simple app aimed at general aviation pilots), so let me know if you end up sharing some of the code for your project -- I'm sure there's lots to learn from it!
SeanLockItUp 8y ago
I'm building my first app in React Native right now - I have a native Android background though. Can you shed some light on what some of the performance and stability issues you faced are? What can I expect and how did you deal with them or work around them? Nice app btw!
- jqbx_jason 8y ago
  Sure- a couple of (oddly specific) details: 1. Long lists (>100 items) don't perform well if you have to reorder them. Initial render is a bit slow but not that noticeable but if you have to reorder or add/remove from them on the fly it can be resource intensive. 2. Animation behavior varies between Android and iOS depending on what you're animating. 3. Re-rendering is expensive so you need to be careful when you update your state if you're using redux. 4. Easily fixable but console logging is expensive so be sure to remove all JS logs from production.

bytematic 8y ago

Do you share components too? How are you doing styling? I'm using a mix of js variables for different platforms and scss files but I'm finding it kinda complicated. I would like to use styled-components somehow.

jqbx_jason 8y ago
For JQBX the styling is done differently between mobile and web. I stared off using scss for web (old habits die hard) and then had to use JS styling for react-native. Not the biggest deal though since the UI is where the two apps diverge the most. Very few things use the exact same UI patterns between web and native. But if I were to do it again (and had a design laid out in advance) I would probably opt for JS-styled components across both versions- though the "CSS" syntax is a little different so you would need some way to port that. I think it still makes a bit of sense to keep styling separate between web and mobile though since you're dealing w/ a different interface... but like everything it depends on what you're building.

ratsimihah 8y ago

Cool app! I got a little confused as to how to add songs once you're a DJ, but the whole things looks cool, and you seem to have a nice community already!

jqbx_jason 8y ago
Thanks! Please join in :) Also, thanks for the feedback I actually keep getting similar comments that it's a lot to learn all. I'm currently trying to simplify things. To add a track you just add it to your "queue" by searching and clicking the plus icon, then when it's your turn (your UN is all the way to the left) your track will play for everyone. Assuming you figured it out but just FYI
- ratsimihah 8y ago
  I went as far as having the track in my queue "on the deck" but couldn't see it in the global playlist or when it would be playing. It's super fun because I tried to make a music app to make collaborative playlists on steroids but my UX is so lacking. You can check it out at http://www.niche.fm http://www.niche.fm

gubsz 8y ago

Wow that app is exactly what me & my friends have been looking for. They even started hacking together an Android version of this. Looks really well done! One question: Do you plan on writing a native desktop solution? I'm not a fan of having to keep my browser open just to run a single app.

jqbx_jason 8y ago
There's a desktop app available for Mac (it's an electron port of the webapp- if anyone's curious). A windows version is coming soon (ETA ~1-2 months).
kovacs 8y ago
Hehe.. turntable.fm v2.0 :-) https://en.wikipedia.org/wiki/Turntable.fm https://en.wikipedia.org/wiki/Turntable.fm Just checked it out. This is really well executed! Definitely doesn't look like a one man operation. Congrats!
- jqbx_jason 8y ago
  Thanks! And yeah heavily inspired by tt.fm (RIP). Hopefully the community keeps growing and can bring some of that 2011 internet magic back.
  - kovacs 8y ago
    Yeah and this is smart because this time around the licensing falls on Spotify where as back then TT had to negotiate licensing if I'm not mistaken. I'm not a lawyer but if that's true this seems much more viable using Spotify's APIs with the caveat that your entire business relies on them if that's your aspiration. Regardless, wish I'd thought of this :-P Seems like it would be such a fun app to work on :-) Best of luck to you! (BTW it just pinned a Google chrome helper on my machine so I had to kill it. Not sure if you know anything about perf. with your app yet. Just FYI)
    - jqbx_jason 8y ago

Zaheer 8y ago

Looks nice! What are you using for the backend?

jqbx_jason 8y ago
Thanks! BE is Node + Express. I tried to keep a lot of the logic in the clients to it's pretty slim. I'm a FE developer professionally so keeping it all within the JS ecosystem was most comfortable for me.

ChicagoBoy11 8y ago

That looks incredibly well put together -- congratulations. I'm about to launch my first commercial React Native app (pretty simple app aimed at general aviation pilots), so let me know if you end up sharing some of the code for your project -- I'm sure there's lots to learn from it!

SeanLockItUp 8y ago

I'm building my first app in React Native right now - I have a native Android background though. Can you shed some light on what some of the performance and stability issues you faced are? What can I expect and how did you deal with them or work around them? Nice app btw!

jqbx_jason 8y ago
Sure- a couple of (oddly specific) details: 1. Long lists (>100 items) don't perform well if you have to reorder them. Initial render is a bit slow but not that noticeable but if you have to reorder or add/remove from them on the fly it can be resource intensive. 2. Animation behavior varies between Android and iOS depending on what you're animating. 3. Re-rendering is expensive so you need to be careful when you update your state if you're using redux. 4. Easily fixable but console logging is expensive so be sure to remove all JS logs from production.