How do I get started on a app/website that will be used in real world?

1

I’ve completed various FCC projects, and I’m starting to wonder how the development process works in real life.

So let’s assume we’re working independently (not as part of a team or company). We’re building a website for our own personal business, or an app that other people can download and use in real-life.

First of all, would we continue to use codepen or glitch etc to write and test our code in real-time? Do we use our own text-editor and run the script locally on our own machine, using Git for version control, before deploying to the real world? What is the best way to write our code and test it out along the way?

For a website
How to pick a server to host the website? If you need a database, can the server that serves the website also permanently store data?

The following questions may fall outside the purview of web-dev
For a phone app
If you’re publishing an app that runs on HTML/CSS/Javascript that doesn’t require a connection to a server (e.g. our javascript calculator), how would that work? Would I be able to simply upload my code for my javascript calculator to some app-store? Then people could ‘download’ the app into their phone and start using it? How would the phone know that it’s javascript? Would it automatically run the code with a web-browser? How would it know to do that? Does every app download need to include the software that translates the programming language?

If there are dependencies, like Babel, D3 or React, wouldn’t the phone need access to the internet to run the javascript calculator? What happens if the phone loses access to the internet? Would the code simply not work? Or maybe during the ‘download’, all the dependencies are downloaded with the app? How do we account for dependencies in our code for apps that are not meant to require internet connection?

Accessing phone memory and functions
Finally, let’s say my phone-app needs to access the phone’s camera to take pictures and store them in memory. Is this something that can be done with javascript? How does this even work?

I have a suspicion these questions are leading to the conclusion that some other programming language is needed for such apps

2

Hi @LiChoi, those are a lot questions :slight_smile: I’ll try to give my opinions on some.

In my case, when I develop the websites I use some IDE with some hot reloading plugins (now I’m using Viscose, previously I used brackets and Atom). I also use plugins that watch for modification of some file (e.g. SCSS files) and generate the corresponding output files (e.g. CSS files).
When I’m satisfied with the result, I do a git commit (and I also push it to a private git repository in GitLab), I generate the final files and upload them on the web hosting platform using an FTP program (like FileZilla).

For phone apps, unless you want to learn Java or Kotlin for Android and Swift for iOS, I suggest you to take a look at React Native. From what I’ve read, you write your React code, which will get translated in the phone native language (so it’s cross platform).

I’d also suggest you to take a look at Progressive Web Applications in general which allow the user to “install” them from the browser and they can also use some of the device functions.

1 Like
3

First of all, would we continue to use codepen

No. Codepen is great for learning. I even use it sometimes when I want to try something quick. But you don’t do professional work on it.

…or glitch

Doubtful. I don’t know glitch well, but my perception of what it is is that I wouldn’t want to use it for anything but a quick POC. But I may be wrong.

Do we use our own text-editor and run the script locally on our own machine, using Git for version control, before deploying to the real world?

Probably. That is a good description.

What is the best way to write our code and test it out along the way?

The previous sentence is a very common dev process, simplified.

How to pick a server to host the website?

That really depends on your needs. There are several articles on the pros and cons of different providers.

If you need a database, can the server that serves the website also permanently store data?

That depends on the provider. Some will, some won’t. There are also separate DB servers too, if you want to host it separate from your site.

The following questions may fall outside the purview of web-dev …For a phone app*

This can intersect web dev, depending… One way to write a phone app is to write it in the language specific to the OS, like Java or Swift. That is outside of “web dev”.

Another way is to just write a web app and open it in the phone’s browser - not the best user experience.

There are also some things in the middle. For example, something like Ionic will do hybrid apps. I chose React Native - I learned React on FCC and React Native is 97% the same - the hardest part was setting up the dev environment. I now have a job writing mobile apps in React (a web dev library), through React Native. I’m loving it.

Does every app download need to include the software that translates the programming language?

No, I don’t think so. It would either run in the browser (which will translate it), or run native code (like a Java, Swift or React Native app), or run in some kind of container that translates it. That’s my understanding.

If there are dependencies, like Babel, D3 or React, wouldn’t the phone need access to the internet to run the javascript calculator?

Babel would be a dev dependency so the running app doesn’t need it. What is needed in D3 and React would be bundled in the app by Webpack, or whatever you are using. This is a little different for React Native, but the principle is the same.

Finally, let’s say my phone-app needs to access the phone’s camera to take pictures and store them in memory. Is this something that can be done with javascript? How does this even work?

For complete access, you need to be as low level as possible, Java or Swift. React Native has pretty good access (on my work app, we use the camera to scan documents, using and add-on library) but it is not complete. But people keep building new libraries. Unless you are doing something incredibly complex, you are usually good. With something like a web app running in the phone browser, you have very little access, if any.

1 Like
4

@simonebogni @kevinSmith

Thank you for your answers. I’m nearing the end of the FFC curriculum, and it feels like a big plunge going from a learning environment like codepen to making something for real. Very soon now, the training wheels will have to come off.

In a lot of tutorials, I see people downloading dependencies (like express, babel) into their computer using the command line interface. While I am familiar with the CLI, I have git-bash for my windows OS, and I’ve used git to push a test file onto github, I’m far from comfortable using these tools. There must surely be a GUI way to do things like downloading dependencies or using Git.

And setting up a server on my own computer for dev-purposes… I dunno. Does this make your computer more open to somebody trying to access it from outside?

5

Yeah, going from FCC to building a real site is to tough transition. But it just has some hurdles and once you get past those, you’ll get it and then all your training will start to make sense.

I would look for a youtube video on building a web site by hand, from scratch. Digital Ocean is a popular provider - I’m sure you can find a tutorial based on that. Just do it.

And setting up a server on my own computer for dev-purposes… I dunno. Does this make your computer more open to somebody trying to access it from outside?

It depends on what you’re doing. Just having something that serves data locally - you can do that just firing up webpack and mongodb and just have it all locally accessible. Accessible over the internet is a different kettle of fish. You probably want to develop locally and host remotely. And that way your computer doesn’t need to be on 24 hours a day and exposed to the internet.

1 Like
6

I can guarantee you that there are gui programs for git :slight_smile:
Take a look here.
Although, I think I prefer to run the commands directly in the console of Visual Studio Code IDE

Edit: and this is for the npm dependencies: npm-gui.
Btw, thank you for the question. Now I know that npm-gui exists :smile:

1 Like