Как я разработал и построил полный стек JavaScript Trello Clone

Сначала я записываю описание функции и добавляю к ней несколько сценариев. Вот пример для целей статьи:

Feature: In the home view, I should see my name in the header and a list of my boards.

Scenario: I can see my name in the header

Given I am on the home
Then I should see my user name in the header

Имея в виду этот базовый сценарий, давайте посмотрим, как я буду работать на домашней панели.

Сторона клиента

Использование методологии компонентно-ориентированной разработки (CDD) в сочетании с BDD помогает разделить представления на небольшие компоненты, обеспечивая их разделение и возможность повторного использования.

Прежде всего, я создаю статическую страницу с макетированными данными, написанными в виде простого текста, и оформляю страницу с помощью CSS.

Во-вторых, я проверяю это:

• Компонент отображается правильно
• Логика реквизита обрабатывается правильно
• Слушатели событий (если есть) запускаются и вызывают соответствующие методы
• Компонент получает состояние из хранилища

Наконец, я создаю компонент Header User и контейнер и реорганизую данные, которые я высмеивал ранее в исходном состоянии модуля Redux.

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

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

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

Серверный

Модель магазина Redux, которую я придумаю, имеет решающее значение, потому что я использую ее для проектирования своей базы данных, а затем кодирую свою бизнес-логику. Из-за работы, проделанной над представлением, я знаю, что домашней странице нужно выбрать имя пользователя и доски объявлений. Я заметил, что у меня есть персональные советы и организационные советы, что означает, что я могу разделить эти две сущности и иметь две разные схемы. Основная цель — работать с нормализованными данными и выполнять всю тяжелую работу, выполняемую сервером, чтобы мне не приходилось об этом думать.

CRUD (создание, чтение, обновление, удаление) — это базовый набор операций, которые нужны любому приложению, но я не добавляю их вслепую ко всем моим маршрутам. Сейчас мне нужно получить данные, поэтому я просто использую read. Затем я могу написать запрос Mongo, который добавит пользователя в мою базу данных позже.

Вывод

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

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

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

Эйнштейн сказал, что «как только вы перестанете учиться, вы начнете умирать», и я верю, что как только вы перестанете делать ошибки, вы перестанете учиться. Сбой, учиться и продолжать жить.

Какие у меня планы на будущее?

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

• Переместить мой монолитный проект в репо с сервером, основанным на микросервисах. Я принял решение, работая над клоном HipChat. Я заметил, что я дублировал много кода для одной и той же логики аутентификации: микроуслуги были очевидным выбором. Ctrl-C, Ctrl-V не ваш друг в программировании.
• Развернуть микро сервисы в Куберне.
• Переместите клон HipChat в моно репо и создайте приложение с помощью Vue.js.
• Начните изучать Electron и React Native.
• Добавьте непрерывную интеграцию (CI) и развертывание с Travis.
• Изучите TypeScript.

Как мне удается идти в ногу?

У меня очень строгая рутина:

• С понедельника по четверг: попрактикуйтесь в алгоритмах на HackerRank и GeeksforGeeks , напишите документацию для работы в выходные дни, выучите новые языки, прочитайте технические книги и прослушайте подкасты.
• С пятницы по воскресенье: работайте над новыми функциями и / или исправляйте ошибки в моих приложениях

Я не трачу все свое свободное время на работу над этим. В будние дни достаточно 1-2 часа в день. Выходные, хотя я не ограничиваю себя. Пока у меня есть время, я буду работать над проектом: я мог бы писать код, экспериментировать с инструментом или просто читать документацию.

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

Читать далее : Анатомия современного JavaScript-приложения