Как я изучил новый фреймворк за 1 неделю
Изучение чего-то нового может быть сложной задачей, и для проекта Lambda Next на этой неделе перед нами стояла задача изучить новый язык, фреймворк или инструмент. Новый язык казался пугающим, но я решил попробовать и посмотреть, как далеко я продвинусь. Сначала я выбрал ReasonML, так как он постепенно набирал популярность. Одна вещь, о которой говорят документы ReasonML, заключается в том, что это не новый язык, а новый «синтаксис», ориентированный на разработчиков Javascript и поддерживающий пряжу и npm. Я начал один учебник о том, как создать список задач, но мне было немного сложно добавить больше к базовым функциям. Синтаксис был слишком чужд для меня, чтобы понять его за неделю. Поскольку ReasonML довольно новый, я также не нашел много ресурсов для него в Интернете. Это было слишком сложной задачей для новичка вроде меня, и мне пришлось пересмотреть свое решение.
Затем я решил изучить Vue. Мне было любопытно узнать о других фреймворках Javascript с тех пор, как я изучил React, особенно после того, как мне понравилось, как быстро я настроил интерфейс с ним. Я следовал другому руководству о том, как создать список задач (https://scotch.io/tutorials/build-a-to-do-app-with-vue-js-2). Я еще не решил, каким будет мой проект, но в конце концов остановился на создании приложения с рецептами, которое я метко назвал RecipeApp, так как я мог расширить список дел. Пользователи могли создавать рецепты и вводить информацию о названии, ингредиентах и инструкциях, а также иметь список созданных ими рецептов.
Просматривая учебник, я заметил поразительное сходство с React. Во-первых, как и React, Vue также основан на компонентах. Я организовывал свой код так же, как в React, создавая родительские и дочерние компоненты. Структура также выглядела похожей, с разделами для рендеринга html-элементов, объявления состояния, а также разделом для методов, а также сходствами в передаче реквизитов дочерним компонентам. Я обнаружил, что быстро настроил интерфейс из-за моего знакомства с React. Я изменил список задач на список рецептов. Вместо одного ввода в формах редактирования и создания теперь было три для названия рецепта, ингредиентов и инструкций. Я также переместил форму редактирования в отдельный раздел справа от списка рецептов. При нажатии кнопки создания рецепта форма создания расширяется, и теперь список рецептов и разделы редактирования скрыты, поэтому экран не так загроможден. После того, как базовая функциональность внешнего интерфейса была создана, я начал работать с серверной частью. Я использовал Node, Express и MongoDB, как если бы я использовал React. Подключение внешнего интерфейса к серверному было простым, поскольку Axios также поддерживается. Я использовал «смонтированную» функцию жизненного цикла, которая действует аналогично функции ComponentDidMount в React для отображения списка рецептов. Что касается стилей, в учебнике использовалась библиотека CSS под названием Semantic UI. Потребовалось некоторое понимание того, как его использовать, поскольку речь шла не о замене HTML-тегов библиотечными тегами, такими как бутстрапы, а об изменении имен классов в тегах. Обычно я бы просто сделал CSS сам, но я подумал, что это будет хорошая возможность научиться. Затем я развернул приложение на героку, выполнив некоторые настройки конфигурации, используя их документацию и посмотрев полезный учебник на Youtube.
Создание RecipeApp с помощью Vue было положительным опытом. Мало того, что мне было легко начать работу с ним, документация также была очень подробной. В Интернете было множество ресурсов, которые, когда я застрял, могли легко найти примеры, которые помогут мне решить мои проблемы. Я определенно рассмотрю возможность использования Vue в будущем после этого положительного опыта.
Развертывание:
https://aqueous-springs-89038.herokuapp.com/
