Это расшифровка одной из тем пилотного выпуска Python Junior Podcast от команд сообщества MoscowPython и курсов LearnPython. Вы можете прослушать аудиоверсию статьи:
Григорий Петров, MoscowPython, VoxImplant: Фронтенд — это не только JavaScript, но с JavaScript хорошо его начать. Это специфический язык. У него есть сильные и слабые стороны. К слабым сторонам традиционно относят приведение типов.
Поэтому, если мы пишем на JavaScript’e, не надо приводить типы. Всё закрываем в скобки и сравниваем тремя равно. Тогда JavaScript мирный. Как только мы попытаемся сравнить пустой список с false, строкой и так далее, открывается портал, всё «взрывается» и становится печально.
JavaScript очень специфично относится к наследованию. Даже в последних версиях ES2018.
Поэтому если вы пишете не библиотеку — вряд ли начинающий программист будет писать библиотеку — то не надо «наследоваться». Делайте композицию, делайте объекты дочерними друг к другу. Можно использовать функции — JavaScript замечательно поддерживает функциональное программирование.
Наконец, у JavaScript очень специфическое отношение к this. Поэтому с this нужно быть предельно аккуратным и использовать стрелочные функции.
Следить, куда указывает this, использовать три равно, не «наследоваться», и всё будет хорошо. Но только если предварительно прочесть книжку.
Есть такая специальная книжка, она называется «Выразительный JavaScript» и бесплатно лежит в интернете.
Английское название — Eloquent JavaScript. Это лучшая книга по программированию, и так получилось, что она про JavaScript. Если вы прочтете её «от и до» (в ней примерно 750 страниц), то в целом сможете писать на джаваскрипте и без озвученных мной «костылей».
Это то, с чего надо начинать. Плюс, HTML, естественно, CSS — это будет несложно.
Далее, мы понимаем одну простую штуку: в современном фронтенде нет модулей. Если в Python и других языках программирования есть import, то в JavaScript, каким бы странным это ни казалось нам в 2018 году, импорта нет.
ES6 modules есть, но на практике нода без флагов его пока не поддерживает. Если же мы хотим работать в браузере, всё неожиданно компилируется в CommonJS, а дальше я вас избавлю от подробностей.
Надо помнить, что в джаваскрипте нет модулей, а кусочки кода не могут «импортить» друг друга.
Поэтому большое количество инструментов — grand, Gulp, Webpack, Parser и проч. — решают одну задачу: как разложить код на кусочки в экосистеме, которая не умеет этого делать.
Илья Лебедев, LearnPython, Devman: У меня есть вопрос, который меня очень давно беспокоит. Раньше я думал, что «хорошие» языки программирования придумали «хорошие» люди, а «плохие» языки программирования придумали «плохие» люди. Но со временем я узнал, что это не так. И что даже языки программирования, которые «не очень хорошие», придумали умные люди (точно умнее меня во много раз).
Как так получилось, что в 2018 году у одного из самых популярных языков в мире нет такой конструкции [модуля]? Почему они не добавили её в спецификацию десять лет назад? Только не говори про обратную совместимость.
Григорий: Эволюция. Ты не поверишь, это добавили в спецификацию. Не десять лет назад, но довольно давно. Вот в ES6 и добавили. До этого были всякие разные подходы: CommonJS и другие.
Проблема заключается в том, что JavaScript уже очень много лет в браузерах.
И у браузеров большие проблемы с тем, чтобы код делить на части. Когда Python запускает код, весь этот код лежит на жестком диске, и одному файлу очень легко потребовать другой. Хотя даже Python-программы и сам интерпретатор часто медленно стартуют. Интерпретатору приходится осматривать много путей, «импортить» много файлов. Но это не относится к нашему разговору.
В джаваскрипте работает браузер. Он загрузил один файл, и для загрузки второго ему надо сто миллисекунд, чтобы «добраться» до сервера. Столько же занимает обратный путь. Если наша небольшая программа состоит из тысячи файлов, это будет грузиться вечность.
Поэтому там была сложная история со «склеиванием» всего, что есть, в один JavaScript-файл с асинхронной загрузкой. Очень сложная и очень печальная история. Это вторая вещь, которую нам надо знать.
В JavaScript исторически не было возможности делить код на части. Поэтому огромная часть фронтенда посвящена тому, как это делать. Это просто надо помнить, об этом надо читать, и очень внимательно следить, что «склеивать». Это одна из главных «болевых точек» фронтенда. Что делают все эти инструменты? Они пытаются «склеить» файлы, чтобы браузер их хоть как-то в разумное время смог показать.
Наконец, подходим к «сладкому». Какой из фреймворков выбрать для изучения: Angular, React или Vue? Мы в Voximplant используем Vue, и он клёвый. Поэтому я думаю, что начинающим фронтендерам надо начинать с Vue.
Илья: Многие хвалят React (для бэкендеров), потому что он похож на бэкендерские фреймворки. Что скажешь об этом?
Григорий: Я скажу, что React решает специфическую Facebook-задачу: как сделать чат. Этот фреймворк создан, чтобы «починить» их чат. Однако чат он им не «починил». Но сделал совершенно замечательную реактивную систему, которая решает проблемы, которых у начинающих разработчиков нет. Она нужна для создания больших и тяжелых систем с состоянием, которые пытаются «взорваться» от сложности этого состояния.
Илья: Окей, черт с ним, с React. Чем плох Angular?
Григорий: Angular совсем неплох. Он просто устарел и тянет за собой слишком много старых концепций. Даже после того, как его полностью обновили.
Кроме того, Angular заточен на решение той же специфической задачи — создания очень больших приложений с состоянием.
Поэтому многие механизмы, которые есть в Angular, — избыточны для начинающих разработчиков. А вот Vue — легковесный.
Он не пытается решить задачу создания сверхсложных приложений, а помогает сделать приложению «мордочку». Всю сложность разработчик уже добавляет сам. Но у начинающих разработчиков не будет этой сложности, поэтому у них будет только легковесная «мордочка», и всё будет просто и понятно.
Илья: Но React тоже очень неплох для создания «мордочек»: наделать фигурных скобок, и всё работает.
Григорий: Эти фигурные скобки «разорвут» начинающим разработчикам всё.
Илья: Нет, начинающие не в смысле, что им год, а в смысле, что они уже год программируют.
Григорий: Мой девиз — не усложняй. Из трех озвученных фреймворков Vue — наиболее простой для освоения. Он легковесный, не решает сложных задач, которые начинающим разработчикам не нужны, и мы его используем в Voximplant.
Илья: Окей, добро. Резюмируем: выбирайте Vue, а лучше — ничего не выбирайте.
Григорий: Только сперва нужно прочесть книжку «Выразительный JavaScript». Это очень важно.
Илья: Всего 750 страниц и вы сможете…
Григорий: ...использовать тройное равно вместо двойного. Это тоже очень важно.