I bring to your attention the translation of the article How To Pick a Frontend Web Framework from the site top.fse.guru.

Hello buddy!

Below you will find a large list of tools and frameworks. Do not worry! You can choose one in which you are exactly sure, or ignore everything and come up with your own version.
')
This article is intended to help you learn and organize the list of tools that are used in the field of frontend-development. And also, this is a good list from which you can choose what you will like.

Do I use it myself?

Yes, I use it as a reminder with different customization options that may come in handy for me.

In addition, it is here that I send people who ask me: "What should I use to develop?". Because, as you know, there is no ideal option, but there is an opportunity to simplify your choice.

And also, I often rewrite this article because I learn something new and change my opinion about the old. (And because, while you were reading this article, 37 new libraries were collected and released).

Where to start?

If you have a large and long-term project in perspective, you will need it:

1. The modular structure of the project. Personally, I prefer a modular architecture. And many frameworks give it to me. But in extreme cases, you can use BOT , Elm Architecture , re-frame and CycleJS .

2. Module Loader / Bundler ( RequireJS , Browserify , Webpack , ComponentJS , SystemJS ). These things will help keep your code easy to read and easy to maintain.

3. Package manager ( npm , jspm , bower ). Personally, I prefer npm to the others, because, de facto, this is the standard in the world of JS and node developers.

And also, I think that bower is a fake curve. I suppose that in time he will die, and that is good. It is not as powerful in managing components and dependencies as npm. Your opinion may differ.

4. Automation of assembly and compilation ( grunt / gulp / broccoli ). For life is already short, to do it again, and again, and again.

5. CSS preprocessors ( jss / stylus / sass / css-modules ) and postprocessors ( csso / autoprefixer / postcss ). These tools will make your CSS a bit better and eliminate some cross-browser problems.

Yes I know. 2016. But in any case, it is still like a pain in the ass.

6. Markup / UI frameworks ( Bootstrap , Zurb Foundation , Elemental UI , Material Lite ). These things carry tons of knowledge and 1000 years of suffering for web developers. They will help you deal with basic layouts and styles.

However, if you think you're a marking hero and a front-end expert, or your company needs its own style, you can develop your own solution .

In this case, I suggest you choose a methodology ( BEM , OOCSS ), which will save your time.

Personally, I prefer the BEM naming scheme and my own specific (custom) workflow. You can find a couple of thoughts about this in the styling guide for Brainly.com , which I helped to collect.

If you do not know where to start developing your own methods, you should look at HTML5 Boilerplate .

7. Running tests ( jasmine , karma , mocha , tape , intern ). Everything requires verification. With no exceptions.

8. Tools to ensure the quality of the code ( eslint , husky , editorconfig ). You do not want to turn your code into a dump?

9. Communities where you can get help ( chats , IRC, meetups, twitter).
You don't live in a bunker (right?). People may know. And in general, they love to help others.

Ok, what's next?

And here is a set of important questions that must be answered before embarking on the development and solution of the problems posed.

You are ready?

1. Do I need to work on a project in a team? Who are they and what do they want? This answer will help you choose the language and approach (workflow) that is useful for you and your company.

2. What is the best focus: quality, speed, ease of support? You will understand whether you can experiment and whether you can make mistakes to improve the choice of tools ...

3. Will it be necessary to transfer the project to the "Third Hand"? Understanding this can limit the available technologies, and you will have to choose from what your “target audience” likes.

4. Should I take on the main product, or limit to subsidiary projects? If you take on the main project, you should use proven technologies and frameworks that save your time and nerves.

5. Is the project an interactive application, or is it a collection of static documents? It may turn out that all you need is HTML, CSS and some magic. As well as site generator or CMS.

6. Is this a single project or a group of related projects? You may want to use the component approach and the style guide, even if your project is a set of static documents to reduce the chore and streamline your code. And also think about SEO and server side rendering in this case.

List of languages ​​and add-ons

Having answered these important questions, it is time to talk with your comrades and choose a language. Because there are a lot of things worthy of your attention, besides this insane javascript!

1. Do you have a team of JS-developers? Consider using ES6 (with Babel ). It will make your life a little easier.

2. Do you prefer typed languages? With types you on "you"? Look at the typescript .

3. Do you calmly swim in functional programming? You can start small with ES6 and libraries like lo-dash or ramda . There are some good books and lessons that will help you get comfortable on this path.

4. Have you tried yourself in functional JS, and you want even more good buns? Try elm . It's just awesome!

5. Are you full stack developers? Try clojurescript . It is no less elegant!

6. Do you like Scala? We try scalaJs .

7. Do you know and love Haskell? Try purescript . No idea how cool it is.

8. Not enough madness? Here is a list of javascript compiled language . Choose any and enjoy.

List of frameworks

1. All you need is a simple, working application? No time for "fundamental development"? Your choice is angular . Start seeking help immediately. .

2. Need simplicity and speed? Is there also time to support in the future? Choose angular . But be fully prepared .

3. Are you back-men trying to engage in the front-end, as there is no other way out? Yes, angular . Start looking for a front-end developer into the team.

4. It is necessary to quickly start and quickly develop. with possible assumptions? We try ampersand / backbone + libraries suitable for your requests.

5. Requests the same, projects more? Add marionette / chaplin to the backbone and think about switching to ReactJs .

6. Is there time to experiment with the expectation of performance gains in the future? We try mithril / knockout / aurelia with the necessary libraries.

7. Do you generally have a good understanding of interfaces and know the basis of functional programming? Try ReactJs + redux + ImmutableJS + libraries.

8. More functional programming skills? Madly interactive application? Add reactive programming ( bacon , rxJS ) or try Cycle.js (at your own peril and risk).

Note 0: It may be a good idea to take on reactive streams anyway, and go on training to teach others.

Note 1: Please do not confuse reactive streams with FRP

9. Your application will grow, the team develop, and you have time to learn? Spend it on emberjs . Believe me, this is not a bad investment.

10. The application should be similar to the desktop? Will there be tables, chats and other things for analytics? Corporate application? Try ExtJS .

11. Are you a studio? Then, you should already have a set of favorite tools. In any case, focus on what you know and use more often.

12. Freelancer? Adapt to the conditions. Try Angular. Do not suffer. Let others suffer if they want.

Note: But you are unlikely to do something if the client does not want to pay for it.

13. Trying to create an attractive non-standard product for other people? Adapt to your specific needs and select from the list above.

14. Do you know exactly what you want to get at the output (for example, a mobile application with ten screens)? Experiment a couple of weeks with ionic , famous , Sencha Touch .

How to start programming?

1. Examine the documentation for the frameworks and tools you have chosen.

2. Ask more experienced people what starter for the project is better to use.

3. Configure the tools.

4. Fig code! But I would still recommend using the engineering approach .

five.…

6. PROFIT! 1

I have no idea how to start using the frameworks that you recommend?

Look at the TodoMVC Examples and find an example with the framework you chose.

But remember that these are only examples and in most cases they will not scale as the project grows.

I can not make a decision. What do i do?

Okay, take it easy.

If you can't decide, take EmberJS , or if you feel the strength of ReactJs + Redux + ES6 + webpack + npm + jss + autoprefixer + eslint + Elemental UI + karma. And read this !

Like this. Do not ask why, but just take it and start developing it.

Too many references to ReactJs. Why?

Behind him is the future of web development. Here is a nice article explaining this.

And as it uses a huge number of people. You certainly should try it in any of your projects. It will be fun, I guarantee!

Have a nice swim!

If you are interested, and you want to go into the front-end development in more detail, take a look here .

PS: The purpose of the translation was not to convict the author of lies, deception and ignorance. Do not dilute your thoughts and comments. The purpose of the translation was translation.