5 причин плюс идеи для фронтенда и бэкенда.
Вам, как разработчику, придется многое сделать. По крайней мере, некоторые люди хотят, чтобы вы это сделали. Создавайте проекты, чтобы получить работу, улучшить свои навыки или создать классное портфолио. Вы знаете эти предложения — приложения для чата, списки дел или приложение с погодой.
Я строю их много. Теперь я нахожу это скучным. Скука с классическими идеями проектов привела меня к другой мысли: может быть, не создавать типовые проекты, а библиотеки, которые мы все знаем и любим, — отличная идея.
Библиотеки? Какие библиотеки? Ну, мы не были бы разработчиками, если бы не использовали сторонний код снова и снова. Особенно в мире веб-разработки это значение по умолчанию. Поэтому да, я говорю о таких библиотеках, как React, Axios, React-Router и пакетах JavaScript в целом.
Но не слишком ли сложно создать собственную библиотеку? Создать точную копию с нуля часто бывает слишком сложно, да. Но создание минимального, не очень оптимизированного клона намного проще и является отличным упражнением для программистов.
Многие программисты почти всегда используют сторонний код. Но они понятия не имеют, как это работает под капотом.
Я призываю вас сделать лучше: реализовать пару клонов известных библиотек, независимо от того, бэкэнд или интерфейс, самостоятельно. Вот почему.
Вы углубляете свое понимание — и можете быть удивлены
Есть одна проблема при самостоятельном внедрении популярного стороннего кода: вы совершенно не представляете, с чего начать.
Не волнуйтесь, это нормально — это то, что вы выбрали. Создание таких проектов, как погодное приложение, не так уж абстрактно. Это просто и часто требует, чтобы вы применяли знания, которые у вас есть, 1: 1. Вот почему такие проекты, как приложение погоды или список дел, используются для обучения. Да, они прекрасны для обучения.
Но если вы хотите пойти намного глубже, они не принесут вам такой пользы. Самостоятельное внедрение известной библиотеки — это то, что мы называем переносом обучения в школе.
Чувство «я понятия не имею, с чего начать» — это первый шаг в обучении. В конце концов, вы придумаете что-то, что частично работает. Затем вы придумываете что-то, что работает полностью, но не так элегантно. Попробуйте оптимизировать ее, а затем проверьте реальную реализацию библиотеки, которую вы пытаетесь скопировать — вы можете быть шокированы.
Я построил базовый клон со стилизованными компонентами и тоже был в шоке.
Сравнивая свой код с исходным, я заметил одну вещь: разработчики styled-components использовали совершенно другой подход.
Хотя я использовал прокси в своем коде, выражение new Proxy не встречается ни разу в исходном коде. Кроме того, в то время как моя реализация создавала только встроенные стили, стилизованные компоненты используют алгоритм хеширования для создания классов CSS.
Увидев это, мой кругозор расширился.
Вы научитесь формулировать больше концепций
Код следует за мыслью. Когда вы работаете в команде, код, который ваши коллеги пишут, сначала следует за речью — речью, которую вы используете, чтобы сформулировать свою идею реализации чего-либо.
Как видите, язык является центральным элементом при разработке кода. Проблема в том, что даже если мы что-то понимаем, это не значит, что мы можем это правильно сформулировать. Например, нам не хватает правильных терминов для этого. Для разработчика это проблема.
Внедрение известных библиотек или стороннего кода, как правило, намного более абстрактно, чем типичные проекты реального мира. Вы навязываете себя основаниям, которые гораздо труднее описать и о которых говорить. Создание небольшого движка шаблонов на JavaScript заняло у меня много времени. Я потратил огромное количество времени на поиск в Google — я понятия не имел, как спросить то, что мне нужно. Теперь я лучше разбираюсь в понятиях и связанных с ними терминах.
Вы должны делать больше вещей самостоятельно
Есть еще одна проблема с типичными проектами кода, такими как список дел: их создают все. Нет, моя проблема не в том, что такой проект недостаточно уникален. Это что-то другое. Сознательно или бессознательно, вы найдете помощь в своем проекте.
Я знаю, что как разработчик это совершенно нормально — я больше печатаю в Google, чем в VS Code. Тем не менее, тип помощи, которую вы можете найти, может быть слишком специфичным. Я заметил это, когда самостоятельно создавал приложение для чата и список дел. Поскольку каждый разработчик делает это хотя бы раз, возникает много вопросов и ответов.
Для создания приложения для чата вы можете погуглить «как транслировать сообщения WebSocket» — и, возможно, вы найдете ответ кого-то, также создающего приложение для чата.
Я не нахожу это слишком уж плохим — тем не менее, создавая с нуля что-то более абстрактное, вы не найдете слишком конкретной помощи. Вместо этого я понял, что гораздо чаще мне приходилось сначала переписывать найденный код для своих целей — узнавая много нового об отдельных фрагментах в процессе.
Может быть, вы придумали что-то новое и крутое
Я не хочу давать тебе слишком много надежды. Наверняка ваша реализация библиотеки будет не так хороша, как исходная. Причина проста: за лучшими пакетами в NPM часто стоят команды, работающие над ними годами.
Тем не менее, есть небольшой шанс, что вы разработаете что-то классное и полезное — по крайней мере, для некоторых вариантов использования. Меня часто удивляет, что небольшим командам или отдельным людям удается писать код лучше, чем в предыдущих альтернативах. И право написать «автор @X» в своей биографии в Твиттере абсолютно стоит того.
Это выглядит потрясающе в портфолио
Разве не было бы здорово иметь портфолио, полное уникальных проектов, а не приложение для списков дел? Создание небольшого клона библиотеки с нуля почти гарантирует вам это. Поскольку идеи этих проектов не так распространены среди программистов, у вас есть уникальное преимущество. Кроме того, вы можете специализироваться на том, что хотите построить. Как и при создании приложения React todo в качестве разработчика React, вы можете создать собственную библиотеку хуков или клон стилизованных компонентов в React в качестве разработчика React.
Не волнуйтесь — это не должно быть оптимальным
Из программирования я научился одной вещи: найти любое решение легко; сложно найти эффективное, понятное и масштабируемое решение. То же самое относится и к созданию известного пакета с нуля. Вы не можете ожидать создания достойного клона библиотеки, такой как styled-components или React. Профессиональные команды работают над этим уже много лет.
Тем не менее, реализация небольшого клона возможна. Часто самая интенсивная часть работы связана с внедрением дополнительных функций и оптимизацией — это не то, к чему мы стремимся.
Несколько идей для начала
Я старался не пренебрегать большим JS-сообществом. Поскольку мы пишем JS где угодно, я придумал несколько идей как для серверной, так и для внешней части.
Передовые идеи
Вот несколько идей для тех, кто любит JS больше всего в сочетании с DOM.
Маршрутизатор на стороне клиента
Маршрутизация на стороне клиента произвела настоящую революцию в Интернете. Маршрутизация на стороне клиента без использования рендеринга на стороне сервера вполне подходит для создания сложного веб-приложения. Но как на самом деле работает маршрутизация на стороне клиента? Когда я впервые изучал React и Vue, мне было трудно понять этот тип маршрутизации. Самостоятельная реализация небольшого роутера мне очень помогла — к тому же я многое узнал об объекте window в JavaScript и самом браузере.
Библиотека предварительной загрузки страниц
Я также реализовал библиотеку предварительной выборки ранее. Основная идея состоит в том, чтобы избежать жестких загрузок, когда пользователь переключает страницу в вашем приложении. За счет предварительной загрузки содержимого по ссылке и его рендеринга при необходимости переходы становятся более плавными.
Библиотека CSS в JS
CSS в JS значительно упростил несколько вещей. Особенно когда речь идет о таких библиотеках, как React или Vue, CSS в JS дает нам более динамичный CSS. Вы наверняка знаете такие библиотеки, как styled-components. Помимо стилизованных компонентов, существуют также компоненты, не зависящие от фреймворка/vanilla.js, такие как Aphrodite или JSS.
Однажды я реализовал клон стилизованных компонентов в React, что было не так уж сложно — ну, если только создать базовую функцию.
Бэкэнд идеи
Сервер разработки
Серверы разработки помогают нам сэкономить много времени. Есть много разных, но я нашел классным проект реализации базового: сервер разработки, который обслуживает HTML-страницу, и всякий раз, когда происходит изменение в кодовой базе, сервер разработки перезагружает страницу в браузере.
Шаблонный движок
Вы помните такие вещи, как EJS, Handlebars или Pug до того, как библиотеки, такие как React, заняли серверную часть? Да, я те самые так называемые шаблонизаторы. По сути, они преобразуют псевдо-HTML с интересными функциями в работающий HTML и отправляют его в браузер.
CLI
Мы ежедневно используем массу CLI при написании кода. Знаменитое приложение create-react-app — лишь один из примеров. Как это работает? Это JS-код, выполняемый через Node на вашем компьютере. На самом деле понять и написать CLI в Node довольно просто. Тем не менее, возможности огромны. Вы можете создать массу полезных вещей, изучая создание CLI — я уже делал учебник по этому вопросу.
Спасибо за чтение!
Если вы хотите быть в курсе, не стесняйтесь проверить мой Twitter
Дополнительные материалы на plainenglish.io
