Хорошо, название звучит очень самонадеянно, я должен признать, ха-ха.

Я пишу эту статью из-за другой статьи на dev.to, с которой я не согласен.

В статье вкратце говорится, что использование современных функций JavaScript (ES6 +) и написание TypeScript вместо JS позволит вам лучше писать JavaScript.

Я полностью не согласен. Вы можете писать на TypeScript и быть отвратительным разработчиком.
Вы можете использовать современные инструменты и при этом оставаться новичком, если не понимаете их.

TS не исправит за вас архитектурные проблемы и не превратит плохой дизайн в хороший. (Я не говорю, что TS плохой, я просто говорю, что это не РЕШЕНИЕ).

Перво-наперво, чтобы написать лучший JavaScript и лучший код в целом, у меня есть только 3 правила. Я перечислю их, а затем перейду к деталям.

  1. Изучение таких понятий, как шаблоны проектирования, более важно, чем изучение фреймворков. Большинство концепций остаются, большинство фреймворков или библиотек умирают.
  2. Используйте правильный инструмент для правильной задачи, понимая контекст.
  3. Думайте больше, кодируйте меньше.

Да, это обычно единственное, что нужно большинству людей для написания лучшего кода IMO.

Теперь давайте углубимся, чтобы понять, почему, с практическими примерами.

Изучите концепции

Когда вы начинаете учиться, это нормально - не полностью понимать составляющие того, что вы делаете, но чем больше у вас опыта, тем больше вам нужно начать понимать эти части.

Почему он это делает?

Почему он так себя ведет?

Это те вопросы, которые вам нужно раскопать, когда вы наберетесь опыта.

Когда я начал изучать JS еще в 2010 году, я, как и многие люди, начал с jQuery. Я мог многое с ним сделать, но никогда не понимал, как он работает в полной мере. Однажды мне пришлось создать свой собственный плагин jQuery, и я спросил себя:
Как работает $.fn.myPlugin = function() { }; ?

Так я узнал больше об объектах, прототипах и наследовании в JavaScript. После этого я мог сам воссоздать базовую версию jQuery, потому что я понимал, как создавать цепочки объектов, итерации, и у меня было лучшее понимание DOM, и все это благодаря: изучению концепций и шаблонов проектирования.

Можно с уверенностью сказать, что jQuery мертв, мои знания о нем теперь бесполезны для меня, но мои знания шаблонов проектирования и базовые знания JS по-прежнему полезны.

Паттерны проектирования JavaScript для изучения

Пример, который помог мне лучше понять jQuery:

  • Цепочка методов
    $('a').css('color', 'red').text('this').text('no that');

Вам просто нужно вернуть ключевое слово «this» в конце методов и внутренне манипулировать экземпляром DOM.

  • IIFE & Closures для изоляции поведения и созданных частных свойств

Больше шаблонов дизайна здесь: https://addyosmani.com/resources/essentialjsdesignpatterns/book/

Используйте правильные инструменты

Многие люди используют babeljs, фреймворки или даже SSR, не понимая, как это на самом деле работает и имеет ли это отношение к их контексту.

Например, я видел, как люди использовали стрелочные функции только потому, что они короче, но это не то, для чего они изначально создавались. Он был создан для решения проблемы контекста с функциями. Когда вы этого не знаете и просто используйте современный JS для наворотов, потому что он короче, у вас возникают такие проблемы, как: https://stackoverflow.com/questions/42971081/use-arrow-function-in -vue-computed-does-not-work

Другой пример - ажиотаж async / await, конечно, они оба хороши, но не для каждой ситуации. Я повсюду вижу людей, говорящих просто используйте async / await, но эти люди никогда не ловят исключения. Если бы они это сделали, они бы знали, что иногда async / await создает адские попытки / ловушки.
https : //stackoverflow.com/questions/48475999/async-await-proper-error-handling

Иногда можно использовать Promise, иногда лучше Async / Await.

Разберитесь в контексте, знайте, что использовать и когда, задав эти простые вопросы:

  • У моих целевых пользователей старые браузеры?
  • Достаточно ли сложен мой проект, чтобы использовать фреймворк и не идти ваниль?
  • Потребуется ли поддерживать мой проект?
  • Будет ли мой проект использоваться другими разработчиками?
  • Чего именно мне нужно достичь?

Это те вопросы, которые заставят вас выбрать правильный инструмент. Проект, который не нуждается в обслуживании, как одностраничное мероприятие, не будет нуждаться в таких же накладных расходах на архитектуру, как приложение, которое прослужит не менее 2 или 3 лет.

Возможно, вам не понадобится React (или какой-либо фреймворк) постоянно:
https://css-tricks.com/project-need-react/
https://hackernoon.com/you -might-not-need-react-e5fd54611111
https://medium.com/@swlkr/you-dont-need-react-9adae486a52f

Когда вы начинаете установку webpack и некоторого CLI фреймворка, просто чтобы выполнить модальный вызов или вызов AJAX, задайте себе несколько вопросов.

Иногда вам просто нужен файл .html и старый добрый тег скрипта.

ЗНАЙТЕ КОНТЕКСТ!

Быстрый отзыв ES6 +:

  • let создает область в скобках (блоки), var создает область в функциях.
  • на const можно воздействовать только один раз. Если это объект, его можно видоизменить.
  • стрелочные функции принимают контекст ближайшей обычной функции.
  • Ключевое слово arguments не работает в стрелочных функциях.
  • ключевое слово class - это просто синтаксический сахар для класса-прототипа, поэтому все, что работало тогда, работает и сейчас. Например, класс может расширять экземпляр.
  • не забывайте перехватывать вызовы async / await, иначе у вас могут быть сюрпризы.
  • .map, .forEach, .filter и .reduce не содержат ключевого слова break, поэтому при необходимости используйте обычный цикл for… while.
  • import и require действуют только один раз, если вы импортируете что-то в 10 раз, после первого раза всегда возвращается одно и то же.

По сути, я все еще говорю здесь: поймите концепции.

Думай больше, код меньше

На встрече Github, в которой я участвовал, спикер сказал что-то вроде:

Когда я хожу в офис, я счастлив, когда вижу, как разработчики смотрят на свои экраны, а не пишут: это означает, что они думают, прежде чем действовать.

Думайте больше, не стесняйтесь писать UML или что-нибудь еще, что поможет вам разрабатывать больше, прежде чем вы начнете кодировать.

Не делайте вещей, потому что они модные или модные.

TS хорош, но не делает ничего такого, чего не решают современные инструменты или редакторы, поэтому используйте его только в том случае, если он вам нужен, а не потому, что все говорят: используйте TS.

Используйте ES6 + и babeljs, если ваш проект имеет к нему отношение, а не из-за лени.
Хорошая альтернатива - https://polyfill.io.

Используйте фреймворки или библиотеки, если ваш проект имеет к нему отношение, а не по лени.

Вывод: узнавайте больше о концепциях, чем о технологиях.