6 ms·

Ask HN: Getting started with web app development

8 points by tananaev 10y ago

I want to develop a single-page web application. Let's say it's something like Gmail. I have quite a bit of development experience in general (not web), I know JavaScript syntax and concepts. The problem is every time I want to start with web development, I get stuck on researching what tools I need for it. Where do I start? To give an idea of what kind of answer I am looking for, I will give an example in my field of expertise (Android native app development). De facto standards for Android development: - Java is the language of choice - Android Studio would be the IDE - Gradle build system - Maven repo for package management - Android SDK as a main framework - Google Play APIs and Android support libraries would be the standard dependencies required for most projects - Template for an app can be generated by Android Studio Is there something similar for web development? What's the standard or at least most popular choice for toolset for web app development? Does my question even make sense?

qaq 10y ago
Let the flame wars begin :) The 3 dominant frontend frameworks React+redux, Angular, Ember npm is the dominant package manager Build systems: Gulp is the most popular or if you use webpack you won't need it bundlers/loaders: webpack, browserify, systemjs IDE: well too many to list Webstorm is my personal favorite code generation: Ember cli, Angular cli, if you use react with redux there is redux cli The most integrated and easy to start with is Ember it comes bundled with everything you need so basically your only decision is which IDE to use.
- tananaev 10y ago
  What about UI components for Ember? I did some research and for react one of the most popular options seems to be material-ui, for angular there is angular-material. What's the most popular choice for Ember?
  - qaq 10y ago
    there is Ember paper and Ember bootstrap
herbst 10y ago
There is no such standard in the Web. Everybody is going to tell you something different. The other guy suggested a full JS stack, i would suggest Rails. The next may suggests the .NET stack. There is simply no standard, just use what you think fits your style. Things to look at: * Rails * Node * Django (maybe?) * Spring (if you like Java) There is a completely different tooling ecosystem behind each of those.
- tananaev 10y ago
  Thanks for suggestions. My guess was that for fully dynamic website (like Gmail), full JS stack would be a better fit. Please correct me if I'm wrong.
  - herbst 10y ago
    IMO there is no reason to think that is the case. If you feel comfortable doing all in JS it sure is a fitting choice. But for example also Rails comes with real time functionality these days. I still strongly believe there is no right or better in the web, just different approaches for the same solutions. If you are not yet fully focused on JS, but have no idea what else, just pick a community you think you would like to be part of. (This for example disables me to use PHP, JS & .NET)
- S4M 10y ago
  Honest question: why "maybe?" for Django? (I use python Flask myself).
cdnsteve 10y ago
Single page is JavaScript so try to focus on that and not backend frameworks. Easiest way to start an app is to fake the hard parts first. Use dummy JSON data in JavaScript directly. Or if you know how, you can spin up a very simple REST API using the framework you know and again, output static JSON (no database). Node/Express or Python/Flask can be very very quick and easy for this. Now that you have sample data in a JSON structure, emulating the backend, what do you plan to do with it? Enter front-end. Start with something like React for the UI parts. Start small. You'll learn JSX, ES6 and webpack likely. Eventually when you have a few components, learn about state and properties and you'll want to call your data from the backend API. I'm using VS Code editor and love it, supports tons of languages, fast.
- samblr 10y ago
  Vs code is good - I recently tried it. Vs studio has good drugging features - saw it in youtube but it's not available for Mac.
brudgers 10y ago
The standard set of tooling for the web is HTML, CSS, DOM JavaScript API and HTTP in that order. Everything else is an abstraction over the top. Drawing an analogy with Android, the web equivalent is the browser (which in my experience was a lot less obvious than it sounds, but it's even money I'm below average). "JavaScipt" has two very different connotations. There's a language with syntax and datatypes. That's what Node runs. And then there's the JavaScript API for all the various flavors of web browser and these are very very different things in practice that get lumped together in Google's search results. To me, it appears that the Googley black magic that makes Gmail possible is Kubernetes. Which is a round about way of saying that 'single page web app' is really an architectural decision related to the user interface and orthogonal to technology stack and to overall application architecture [by which I mean that a single page web app can be client server like Gmail or stand alone like a simple game]. What I'm saying, in my round about way of saying things, is that the backend should do what it needs to do and the technology stack of the back end should be chosen to do that thing. The good news is that HTTP isolates the technology of the front end from the technology of the backend. The bad news is that that means that the front end has to deal with low level concepts like a communication protocol in addition to the high level abstractions of its business logic. Circling back, HTML, CSS, DOM JavaScript API and HTTP in that order, is a good stack to start with on the front end. On the back end, nearly all commonly used languages will provide an HTTP server as a one liner. In terms of research, these are the easiest to find good information. Furthermore, knowledge of them is assumed for most web tools and any higher level language/library/tool starts bouncing off of them pretty quickly. That was way more than I meant to write. Good luck.
gregjor 10y ago
Your question makes sense, but web development is all over the place. Everyone has their favorite tools and techniques. http://typicalprogrammer.com/the-things-you-need-to-know-to-do-web-development/ http://typicalprogrammer.com/the-things-you-need-to-know-to-...
samblr 10y ago
I'm new to web app development as well. I've a background of system development and mobile app development. Choosing backend development was one of the things I spent some of time on. One of the first things I tried was to build simple rest api backend using Java on google app engine. Then used Django Python frame work. Then nodejs with express. Then coming to frontend - I had some idea of JavaScript and jQuery. After trying angular and react - I picked angular since its a ready mv* framework and its concept like two way binding, modules, dependency injection seemed intuitive to me. After trailing two sides - I decided to go with MEAN stack. Primary reason was its in one language. No context switching of language, IDE etc. I think it has been good decision since. Having said that : angular entices one in beginning but has a learning curve but then it's a ready mv* framework. for somebody new its not bad to start and understand how it is done by something which is ready. (Search angularjs architecture in Google images - a architecture picture worth a lot of documentation) Nodejs programming style is async. One needs to get used to it. Npm repo is great community and package called 'async' is really helpful to get good grip on nodejs. And the idea of async IO is way efficient is something I've experienced in writing network libs but rather painfully. So I was sold to pick nodejs which is async by design. Given another chance I would look at other front end framework since I kind of get primary ideas of frontend framework now. IDE - atom is good. webstorm has code navigation and automatic drop down of functions for nodepackages. Hence I am on it. Grunt for test, build automation. Mocha chai.. for tests.

8 points by tananaev 10y ago

qaq 10y ago

Let the flame wars begin :) The 3 dominant frontend frameworks React+redux, Angular, Ember npm is the dominant package manager Build systems: Gulp is the most popular or if you use webpack you won't need it bundlers/loaders: webpack, browserify, systemjs IDE: well too many to list Webstorm is my personal favorite code generation: Ember cli, Angular cli, if you use react with redux there is redux cli The most integrated and easy to start with is Ember it comes bundled with everything you need so basically your only decision is which IDE to use.

tananaev 10y ago
What about UI components for Ember? I did some research and for react one of the most popular options seems to be material-ui, for angular there is angular-material. What's the most popular choice for Ember?
- qaq 10y ago
  there is Ember paper and Ember bootstrap

herbst 10y ago

There is no such standard in the Web. Everybody is going to tell you something different. The other guy suggested a full JS stack, i would suggest Rails. The next may suggests the .NET stack. There is simply no standard, just use what you think fits your style. Things to look at: * Rails * Node * Django (maybe?) * Spring (if you like Java) There is a completely different tooling ecosystem behind each of those.

tananaev 10y ago
Thanks for suggestions. My guess was that for fully dynamic website (like Gmail), full JS stack would be a better fit. Please correct me if I'm wrong.
- herbst 10y ago
  IMO there is no reason to think that is the case. If you feel comfortable doing all in JS it sure is a fitting choice. But for example also Rails comes with real time functionality these days. I still strongly believe there is no right or better in the web, just different approaches for the same solutions. If you are not yet fully focused on JS, but have no idea what else, just pick a community you think you would like to be part of. (This for example disables me to use PHP, JS & .NET)
S4M 10y ago
Honest question: why "maybe?" for Django? (I use python Flask myself).

cdnsteve 10y ago

Single page is JavaScript so try to focus on that and not backend frameworks. Easiest way to start an app is to fake the hard parts first. Use dummy JSON data in JavaScript directly. Or if you know how, you can spin up a very simple REST API using the framework you know and again, output static JSON (no database). Node/Express or Python/Flask can be very very quick and easy for this. Now that you have sample data in a JSON structure, emulating the backend, what do you plan to do with it? Enter front-end. Start with something like React for the UI parts. Start small. You'll learn JSX, ES6 and webpack likely. Eventually when you have a few components, learn about state and properties and you'll want to call your data from the backend API. I'm using VS Code editor and love it, supports tons of languages, fast.

samblr 10y ago
Vs code is good - I recently tried it. Vs studio has good drugging features - saw it in youtube but it's not available for Mac.

brudgers 10y ago

The standard set of tooling for the web is HTML, CSS, DOM JavaScript API and HTTP in that order. Everything else is an abstraction over the top. Drawing an analogy with Android, the web equivalent is the browser (which in my experience was a lot less obvious than it sounds, but it's even money I'm below average). "JavaScipt" has two very different connotations. There's a language with syntax and datatypes. That's what Node runs. And then there's the JavaScript API for all the various flavors of web browser and these are very very different things in practice that get lumped together in Google's search results. To me, it appears that the Googley black magic that makes Gmail possible is Kubernetes. Which is a round about way of saying that 'single page web app' is really an architectural decision related to the user interface and orthogonal to technology stack and to overall application architecture [by which I mean that a single page web app can be client server like Gmail or stand alone like a simple game]. What I'm saying, in my round about way of saying things, is that the backend should do what it needs to do and the technology stack of the back end should be chosen to do that thing. The good news is that HTTP isolates the technology of the front end from the technology of the backend. The bad news is that that means that the front end has to deal with low level concepts like a communication protocol in addition to the high level abstractions of its business logic. Circling back, HTML, CSS, DOM JavaScript API and HTTP in that order, is a good stack to start with on the front end. On the back end, nearly all commonly used languages will provide an HTTP server as a one liner. In terms of research, these are the easiest to find good information. Furthermore, knowledge of them is assumed for most web tools and any higher level language/library/tool starts bouncing off of them pretty quickly. That was way more than I meant to write. Good luck.

gregjor 10y ago

Your question makes sense, but web development is all over the place. Everyone has their favorite tools and techniques. http://typicalprogrammer.com/the-things-you-need-to-know-to-do-web-development/ http://typicalprogrammer.com/the-things-you-need-to-know-to-...

samblr 10y ago

I'm new to web app development as well. I've a background of system development and mobile app development. Choosing backend development was one of the things I spent some of time on. One of the first things I tried was to build simple rest api backend using Java on google app engine. Then used Django Python frame work. Then nodejs with express. Then coming to frontend - I had some idea of JavaScript and jQuery. After trying angular and react - I picked angular since its a ready mv* framework and its concept like two way binding, modules, dependency injection seemed intuitive to me. After trailing two sides - I decided to go with MEAN stack. Primary reason was its in one language. No context switching of language, IDE etc. I think it has been good decision since. Having said that : angular entices one in beginning but has a learning curve but then it's a ready mv* framework. for somebody new its not bad to start and understand how it is done by something which is ready. (Search angularjs architecture in Google images - a architecture picture worth a lot of documentation) Nodejs programming style is async. One needs to get used to it. Npm repo is great community and package called 'async' is really helpful to get good grip on nodejs. And the idea of async IO is way efficient is something I've experienced in writing network libs but rather painfully. So I was sold to pick nodejs which is async by design. Given another chance I would look at other front end framework since I kind of get primary ideas of frontend framework now. IDE - atom is good. webstorm has code navigation and automatic drop down of functions for nodepackages. Hence I am on it. Grunt for test, build automation. Mocha chai.. for tests.