I am a web developer and for 10 days I can not write the simplest application

I bring to your attention the translation of the article " I'm a web developer and I've been stuck with the app for the last 10 days ".

From the translator: the author’s opinion is partially or completely incomplete with mine, but the question is raised, it seems to me, to be correct. I recommend reading the comments in the author's blog.

I mainly do full-stack web development. Periodically I write backends in Python or Ruby, sometimes I work with C #. I also write console utilities in C ++ and Node.js. I like Closure, I met the web many years ago when I wrote in Perl and PHP, and I devoted my first years of professional development to programming in Java.
')
When I first met Javascript, it was mainly used to add to the "Current Time" page. It was the nineties, when everyone wanted to spice up their pages so that users could appreciate how cool it is: the current day of the week is displayed dynamically . And after some time it turned out that Javascript can do much more, and we get completely dynamic HTML - DHTML!

Recently, I have developed quite large SPAs using different frameworks, and when I was in a hurry, I also had jQuery noodles sticking with a bunch of dirty code from which.

Ten days ago I decided to make a small SPA for myself - a small utility, a potential pet-project. Work day for two or three. And the last six months I have been working on a desktop project in C #. It was quite a boring program for workflow management: a webservice backend and winforms on the front.

As soon as I had the idea to write a small web application, I immediately decided to try out on it some fashionable chips I had heard about, update my toolkit, and just have a little fun. It seems nothing complicated.

As it turned out, I could not write code for this simple application, because I fell into a "research stupor"

---

I started and threw five times already. The problem was the choice and the depressing abundance of tools from which one had to choose.

Who wants to write

MyNotReallyClass.prototype.getCarrots = function () {} 

when ES6 is almost here, with its almost classes that are about to be supported?
Who wants to put in ten

 <script src=”library-12.js”></script> 

on top of the page when there are many utilities for packaging code in bundles?
And who wants to write

 $('.carrots').innerHTML(myJson.some.property[3]) 

when there are so many frameworks around that help structure code? Who wants to ignore the fact that client code is now compiled using utilities written in Node.js?

So I decided to immerse myself in all these new things, to remember those that I forgot, and so on. And you know what - I have not moved further than a couple of HTML forms.

Let me remind you, it was a simple project "for myself", I actually basically was going to have fun, so I tuned in to the "zero-tolerance mode" (comment of the translator: the hand did not stand to translate such a wonderful phrase). As soon as something began to annoy, I threw it and looked for something else, so long as nothing hindered.

---

Here are a couple of examples of what I had to face while I tried all these new things from modern Javascript.

For starters, I wanted to try typescript. Since I’ve mainly worked with C # lately, I remembered how cool it is when a language is statically typed: it gives you more confidence in your code, refactoring becomes easier, and IDE with a good autocomplete code for you half of the code, and it’s not important You are the one who wakes up with the classes.

I needed two libraries, for the main functionality. They were not written in Typescript, so I spent half a day learning the .d.ts files and writing the wrappers to those libraries. Not the most productive occupation, but okay.

For starters, I wanted to write some tests with Mocha . Welcome to Hell. I looked for a way to get some .tsconfig.json files in a project, but WebStorm did not support this, so the compiler continued to mix tests with code. I started reading mana, code samples, stackoverflow . Use this Gulp config. You need to compile the code before testing, but wait, you're writing tests for Typescript? Then use this Gulp plugin, though it doesn't work well with watchify . The next day I had a mess of compiled and glued files, the src , dest and test folders that triggered the incomprehensible task. I have ceased to understand what is happening in the background. What where was compiled, where are the dependencies, do I have to write require or import or reference to use that file? Yes, it all went .

---

I had a short but pleasant acquaintance with React on one very small project, and now I decided to try it. Even scraped some Gulp configs for a quick start. But then the problem was with React itself. I always try to make clean models, and React likes to mix models with state and properties , so I had to rethink my approaches. My application is quite simple, but uses many forms, and now guess what I read in the official documentation:

If you are learning a framework for the first time, please note that ReactLink not needed in most applications, and should be used carefully.
In React, a unidirectional data stream is implemented: from the parent to the child. This follows from the von Neumann model. You can imagine this as "unidirectional data binding"

Great, but forms, especially complex ones, actually need two-way binding . And React without plugins and mixins does not work very well when you try to use it to enter a lot of data. You need to write decorators for all your inputs so that everything works fine. It soon becomes annoying. Speaking of mixins, I use classes from ES6, but React does not support them. Yes, it all went .

So, I need two-way binding , right? Knockout fits perfectly for this, and I had an affair with him before. And again, I'm trying to use the ES6 classes, but the binding of contexts confuses the code. And without classes, code gets tangled even faster. Javascript interferes with HTML and it all looks terrible after React. Here you have the layout in Javascript, but at least it makes sense, as long as it helps to structure the code and keep the logic elements in isolation from each other.

(A bit about pain. It seems that regardless of what you choose, you will have to keep in the background some kind of watch task for compilation, linking, testing. I wrote something in the editor, Cmd+S saved, Cmd+Tab passed In the browser, Cmd+R updated the page, and I do not see any changes. Guess what happened? I did all these manipulations faster than the compiler worked, or the watch task did not notice my changes, or threw out some error.)

---

So, even before writing the first line of code, you have to choose what you need to do with all this (package manager, build, testing, etc.), and each option opens the door to the realm of alternative solutions, more or less standardized, more or less complementary or replacing each other.

Javascript with what taste do you want? Want a transpiler? And from what language? Grunt? Gulp? Bower? Yeoman? Browserify? Webpack? Babel? Common.js? Amd? Angular? Ember? Linting? What am I talking about now? Did I mess up something? Yes, it all went? Yes, it went all.

If you're still here, it seems like making a web application today is like playing a very complex interactive quest (original. Interactive Fiction) (a la Zork). Let's go back to the recent past and write a program:

     .      .    C    > get C language ,     

And now, back in 2016:

     web- > make web app   ?  "Unity"  "GameMaker",      web > make web app         web-?  "NW.js" , , "Electron" > make web app   .   "Javascript", "Coffescript", "Typescript", "Clojurescript", "Dart", "asm.js".   127 ? > get javascript   : "ES5"  "ES6" > get ES6     .   "Babel", "Traceur"    ,     ,    .    ?      " aka " > get Babel      .   "Grunt"  , "Gulp"  . "Babelify"  , "Webpack" .       "Browserify"     "Require.js".     "  " >   "Yeoman"    ,      "npm",  "project.json" ,     "Gruntfile", ".jshintrc", ".babelrc"  "tsconfig.json".    "Broccoli"  "Jasmine" . >        " ",        "npm install node-jsx"       "  " > . 

update

This post has aroused interest in Hacker News . Some comments seem a little ironic to me:

I always try to make clean models, and React likes to mix models with state and properties , so I had to rethink my approaches ...

Redux

Gulp config ...

Webpack

In general, the conversation with the community about my "research stupor" caused by the number of available tools turned into tips to try and spend time on a couple more technologies that I missed at the beginning of my searches. Good job Javascript!