April 18, 2019

Ready to build out mobile/web front end - would love advice!

I've been hard at work building the back end (Java Spring Boot / mySql) for my side hustle dream and it is just about complete. I'm not an experienced front end dev, but I've been trying to research as much as possible to make the right decisions the first time as I begin designing and building my front end. I anticipate mostly mobile use, but want to have a strong web presence, as well. I've landed on React, but have a few burning questions I'm hoping to get help with.

  1. It seems that 'react-native-web' just makes sense as a single code base for all front end work, but is the project ready or is it a great idea that will REALLY be ready in a few years? Do I have to bite the bullet and have two code bases to maintain for the front end - one 'react-native' and one 'react-web' ?

  2. Is 'react-native-web' just a simple extension of 'react-native'? So, if I decide abandon the the 'web' part and build web separately, I will still have the full 'react-native' experience and tools from the 'react-native-web' project I create?

  3. Am I completely bonkers? Other suggestions to put me on the right path? I want to do this right the first time. I don't have the time to waste on bad ideas I have to abandon.

Thanks a ton!

#tech-questions

  1. 2

    Hi,

    I have more than 5 years of experience building complex front-end apps. Full disclosure, I haven't got around to try react-native yet and I gave up to trace all the latest technologies in the front-end world (it is a wild west there), so take my advice with a grain of salt.

    Mobile and Web are two different platforms and while there are frameworks allowing you to build the same code for both, the experience will be at best mediocre. Check react-native-web examples page to see that those are just stretched mobile apps inside a browser. That being said, here are my thoughts on your questions:

    – React-native should be a safe choice for you to get started and build mobile apps. It will be long before you'll hit tech limits for most of the applications.

    – You should be able to re-use your models, requests, and logic parts between mobile and web so I would keep everything in one code base. React makes a great job of separating "View" part of MVC, so MC will be separated in react codebase naturally.

    – You can add react-native-web for "free" to start with and later replace it with web implementation.

    – Another option for you is to go with a design framework like ant.design and then use something like PhoneGap to deliver mobile applications. I would still suggest you use React to render your views. Going this approach can help you design responsively and have a decent experience on both platforms, but it is hard to achieve "native look and feel" on mobile. Responsive is only easy when you have very few "stackable blocks"/forms and quickly turns into a nightmare when you have half of your blocks custom between web and mobile.

    Hope this helps,

    Sergey

    1. 1

      Excellent. Thanks for all your input, @sergey_shvets. Thanks for pointing out that I can start with a straight up react-native project and always add the react-native-web later, if that is what I choose to pursue. At this point, I think I'm going with react-native and react-web. I need to get really comfortable working with those on their own before I try to implement some of the newer tools, like react-native-web. I think just having a mobile code base and a web code base is the best option with the current tech.

      1. 1

        I think that is the way to go :) Once you get your hands on it, your head will be full of ideas on how to optimize the code!

  2. 2

    I came from the backend world and was a complete frontend noob a year ago. I have come a long way since then, and here are my two cents on learning front-end in general:

    1. Assuming you are building something reasonably complex, don't spend too much time deciding on the perfect framework. You cannot go wrong with the top 3, all of which support pretty much everything you will ever need to do with a web app. Whatever you pick, just stick with it because it will be frustrating at times. Switching to a different framework when the going gets tough is not the answer. I picked React.

    2. I also did not know CSS fundamentals. I had always been hacking my way to the desired result before. If you know you are going to be indie hacking for at least the next few years, then I highly recommend taking a Udemy course on CSS. I took this one and it was awesome: https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/. After this, I used Bootstrap as my foundation and customized on top of it.

    3. Lastly, if you know that this is not going to be your last indie project, then strongly consider making your front-end code reusable. React makes this easy with components. You can also do this with CSS / SASS by creating stylesheets and design templates which you can quickly reuse in new projects.

    If this is just a one-off project, then you can (and probably should) ignore suggestions 2 and 3.

    1. 1

      Thanks, @dhruvg. It sounds like you are using react-web only. Is that the case, or did you end up going with two code bases, one for web and one for native?

      1. 2

        Correct. Having an iOS / Android app is not crucial for my business for at least another year, so I have a single code base for web.

  3. 2

    The frontend world moves so fast noone knows what will be used a few years from now.

    Pick the framework that suits your needs, that you know well and worry about tomorrow's problems tomorrow. In terms of libraries, what you build today will be outdated a few years from now anyways.

    1. 1

      Thanks, @lookalike. I agree with your statement that there's no point trying to guess where the front end world is going, but I'm hoping to at least make the wisest decision I can make right now. Although react-native-web seems to make the most sense, I'm worried that the project is not fully ready.

  4. 2

    I think it’s preference. I like them both. Like many others, Vue was a lot easier to learn. But it all depends I guess. Try them both and see what you like better.

  5. 2

    I have built and building using vuejs, it’s awesome! Great for SPA

  6. 2

    I don't use any JS framework but I know Vue.js is gaining in popularity, has great support from the authors, and from what I understand its more clear to use for newcomers and documentation is great.

    1. 1

      I've read a bit about Vue.js . It looks promising for sure. Thanks for the input!

      1. 2

        +1 for Vue.js -- For me, it made much more sense faster than it did with React.

        1. 1

          Good to know. Thanks, Scott.

  7. 1

    I Also come from a backend BG, and when I Saw Vue I knew I was set. I tried angular and react but always felt that it was too weird and ended up quitting after a short time, so I highly recommend u to try Vue. You can Also make mobile apps with Vue using frameworks like quasar, nativescript, etc.