
Ask HN: Getting started with web app development - tananaev
I want to develop a single-page web application. Let&#x27;s say it&#x27;s something like Gmail.<p>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?<p>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:<p>- Java is the language of choice<p>- Android Studio would be the IDE<p>- Gradle build system<p>- Maven repo for package management<p>- Android SDK as a main framework<p>- Google Play APIs and Android support libraries would be the standard dependencies required for most projects<p>- Template for an app can be generated by Android Studio<p>Is there something similar for web development? What&#x27;s the standard or at least most popular choice for toolset for web app development? Does my question even make sense?
======
cdnsteve
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
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.

------
qaq
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
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
there is Ember paper and Ember bootstrap

------
samblr
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.

------
brudgers
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
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-...](http://typicalprogrammer.com/the-things-you-need-to-know-to-do-web-
development/)

------
herbst
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
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
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)

