Цель этой статьи — рассказать о моем опыте работы с JavaScript и обсудить использование некоторых фреймворков, которые я использовал в проектах. Я подробно опишу каждую архитектуру в интерфейсных, серверных и мобильных проектах.
Введение:
Когда я впервые начал использовать JavaScript, у меня уже был опыт работы с другими языками программирования, такими как C, C++ и Python. В 2012 году я использовал JavaScript для создания сценариев на веб-сайте, выполняя простые задачи, такие как захват событий щелчка мыши, выполнение основных вычислений и использование базовых циклов, таких как if, else, в том числе для создания простой логики для веб-сайтов. Постепенно я узнал больше о JavaScript и лучше понял стандарт сценариев ECMA, в конечном итоге добравшись до движка JavaScript V8 и функций браузера Google Chrome. Поскольку мой опыт всегда был связан с бэкенд-разработкой, я начал изучать Node.js, чтобы использовать JavaScript на бэкэнде, а затем перешел к использованию React.js во внешнем интерфейсе, пока не добрался до React Native для мобильной разработки. В этой статье я поделюсь своим опытом работы с JavaScript и расскажу, как я использовал фреймворки в различных фронтенд, бэкэнд и мобильных проектах.
Серверные проекты с Node.js:
1. Бразильский финтех-проект — розничный банк:📦🔗
Я начал использовать Nest.js в качестве фреймворка для веб-сервисов в проекте для бразильского финтеха. Я создал REST API с MongoDB в качестве базы данных для службы регистрации клиентов, включая весь процесс регистрации с такими функциями, как проверка документов, уровни разрешений и доступ, а также привязка объектов для корпоративных учетных записей. Я интегрировал его с другими службами по борьбе с мошенничеством, используя обмен сообщениями RabbitMQ. В этом проекте я использовал TypeScript, который упростил проверку типов и реализацию шаблонов проектирования. Я использовал Jest для автоматического тестирования, JWT для аутентификации, Eslint для форматирования кода, Docker для контейнеризации приложения и SonarQube для проверки качества кода. Архитектура разделила уровни на контроллеры, DTO, службы и провайдеры с использованием интерфейсов для сущностей и переменных среды для обработки конфиденциальных данных во время конвейерного процесса.
Архитектура проекта:
2. Проект управления подарочными картами: 💳🎁
В другом проекте API для выпуска, распространения и погашения подарочных карт я также использовал Node.js и Nest.js с бессерверной архитектурой на Google Cloud Platform (GCP). Я написал еще одну статью с подробным описанием этого проекта под названием Создание эффективных архитектур для систем подарочных карт и API, разделенную на Часть 1 и Часть 2.
3. Финтех-проект с акцентом на финансовый контент: 🏦💰
В другом проекте для другой финтех-компании, занимающейся контентом и продажей финансовых продуктов, в частности кредитных карт и кэшбэка, я перенес существующую структуру WordPress на серверную часть, построенную с помощью Node.js и Nest.js. Я использовал Postgres в качестве реляционной базы данных и DynamoDB для базы данных NoSQL. Я реализовал архитектуру на AWS, используя сценарии CDK для построения инфраструктуры, включая такие ресурсы, как AWS API Gateway и функции Lambda. В этом проекте я разработал функции для регистрации финансовых продуктов для продажи, регистрации пользователей на платформе, интеграции с системой Open Banking, реализованной в то время в Бразилии, которая подключалась к различным банкам. Структура данных DynamoDB была соответствующим образом обновлена, и через API были отображены тарифы карт всех крупных банков Бразилии, что позволило пользователям сравнить комиссии и преимущества. Проект был разделен на слои: использовались Контроллеры, Сервисы, DTO, Модули, Сущности и интерфейсы. Мы также использовали миграции для создания реляционной базы данных и автоматического тестирования с помощью Jest.
Архитектура этого проекта:
4- Проект рынка сельскохозяйственной техники: 🚜💻
В этом проекте я использовал Node.js с NestJS и базу данных Postgres. К этому моменту у меня уже был шаблон для создания API с использованием Node.js с NestJS и TypeScript. Я всегда структурировал архитектуру проекта, разделяя слои на контроллеры, модели, интерфейсы, DTO (объект передачи данных) и сущности. Я контейнеризировал все с помощью Docker, создал конвейерные сценарии с автоматизированными заданиями тестирования с помощью Jest и выполнил сборку и развертывание в AWS. Я всегда использовал ресурсы AWS, такие как шлюз API, балансировщики нагрузки и ECS или EKS (Kubernetes). Я также создал миграции для управления версиями базы данных и использовал RDS с Postgres в качестве базы данных SQL. Для будущих вариантов использования, подобных этому, я не буду вдаваться в подробности об архитектуре проекта, но буду предоставлять упрощенную схему всякий раз, когда есть исключения.
В этом проекте в мои обязанности входило создание функций для регистрации пользователей и сельскохозяйственной техники/техники. Я внедрил настраиваемую анкету, чтобы владельцы оборудования могли предоставить конкретную техническую информацию вместе с состоянием оборудования.
5- Проект образовательной платформы — Edtech (LMS): 😃📚
Этот проект представлял собой систему управления обучением (LMS), которая включала такие функции, как регистрация учащихся и учителей, создание викторин и экзаменов, возможность для учителей загружать учебные материалы в форматах видео и PDF, систему отслеживания прогресса обучения для учащихся, создание классов, и функции блокировки контента. Я участвовал в создании всех этих функций и следовал тем же шаблонам разработки и архитектуры, которые упоминались выше.
6- Другие проекты:
В дополнение к ранее упомянутым проектам, я сгруппирую здесь некоторые проекты, просто указав их категории. Например, был проект по управлению персоналом, один по контролю миграции телекоммуникационных провайдеров, проект по управлению контентом для виртуальных лабораторий в университетах (реализованный с помощью AdonisJS вместо NestJS), проект по управлению эффективностью и жизнеспособностью при внедрении солнечных панелей. , и другие, которые не могут быть рассмотрены в этой статье, чтобы не делать ее слишком длинной.
Front-end проекты с ReactJS и Vue.js:
Постепенно я начал работать над фронтенд-проектами, используя ReactJS и Vue.js. В большинстве упомянутых проектов я также выступал в качестве full-stack фронтенд-разработчика. Например, в проектах 1 (бразильский финтех — розничный банк) и 5 (образовательная платформа — Edtech LMS) я использовал ReactJS со стилизованными компонентами, Material-UI в качестве CSS-фреймворка, Docker для контейнеризации, GitLab. для конвейерных сценариев, Redux и Redux Toolkit для управления состоянием. В проекте 3 (финтех-проект, ориентированный на финансовый контент) я использовал NextJS, который помог и упростил разработку внешнего интерфейса.
Помимо ReactJS, я использовал Vue.js исключительно для фронтенд-разработки в другом финтех-проекте, ориентированном на обмен валюты для международных платежей. Я также работал над проектами, которые включали исключительно разработку внешнего интерфейса с использованием Vue.js и Vuetify. Например, проект управления пациентами, ориентированный на здоровье сна, проект управления и обработки медицинских документов с использованием PACS (система архивирования и передачи изображений), система LMS для онлайн-классов в базовых школах с интеграцией с использованием платформы Agora для потоковой передачи изображений, система управления локальными облачными игровыми автоматами, система управления спутниковыми изображениями и геообработки, а также система управления и распространения мультимедиа, описанная в моей статье «Построение системы управления и распространения мультимедиа с бессерверной архитектурой».
Архитектура серверной части некоторых из упомянутых проектов подробно описана в других статьях, которые я написал. Хотя я обычно работаю разработчиком полного стека, мой опыт в основном заключается в разработке серверных приложений, построении архитектур, которые обычно включают облачные среды, такие как AWS или GCP. Однако для интерфейсных проектов я также использовал облачные ресурсы и прямую интеграцию, как мы увидим в следующем разделе, где я реализовывал мобильные проекты.
Мобильные проекты с React Native: 📱
Я, наконец, вошел в мир мобильной разработки, используя React Native, что стало проще благодаря моему предыдущему знанию ReactJS. В проекте 4 (Проект рынка сельскохозяйственной техники) я разработал приложение с использованием React Native, ориентируясь на магазины Android и iOS. При создании приложения с помощью React Native я обычно следую той же схеме: использую TypeScript для лучшего управления потоком и типизации данных между компонентами, использую фреймворки CSS, такие как Paper, React Native Elements и Material UI Kit, управляю состояниями с помощью Redux (аналогично веб-приложениям). фронтенд-разработка с ReactJS), использование Cypress для автоматизированного сквозного тестирования и компонентизация экранов. Я создаю сборки Android в формате файла .aab и использую свои учетные данные разработчика Google, а для iOS я использую свой MacBook с публикацией Xcode для App Store, поскольку у меня есть учетная запись корпоративного разработчика. Я также использую TestFlight для тестирования на iPhone и создаю файлы .IPA для публикации.
Следуя той же схеме, что и в упомянутом выше проекте, я также разработал приложение для социальной сети, позволяющее геймерам находить матчи и игроков. Подробности этой архитектуры были опубликованы в другой статье, которую я написал под названием Создание мобильного приложения для геймеров: объединение игроков для максимального игрового опыта.
Другие мобильные проекты, использующие React Native, включали приложение для управления контентом для медитации, в котором я разработал функции для регистрации пользователей и создателей контента, проигрыватель для воспроизведения видео в приложении и управления платным контентом. Я также работал над приложением для управления компанией, ориентированным на выставление счетов в области бухгалтерского учета, интеграцию с бразильскими государственными учреждениями для создания DAS (Simples Nacional Collection Document) и внедрение системы финансового контроля и движения денежных средств для микропредпринимателей. Кроме того, я участвовал в проекте по управлению энергоэффективностью и жизнеспособностью внедрения солнечных батарей.
В дополнение к проектам React Native я также разработал несколько других мобильных проектов с использованием Flutter. Я написал статью, в которой сравниваю свой опыт работы с React Native и Flutter, под названием Мой опыт работы с мобильными проектами: React Native vs. Flutter.
Впечатления от JavaScript, фреймворков и архитектур: 🚀
Я считаю, что использование TypeScript необходимо для создания надежной и последовательной серверной архитектуры, которая придерживается принципов и шаблонов проектирования, таких как SOLID, Чистый код, Чистая архитектура, Объектно-ориентированное программирование и других шаблонов, которые выигрывают от типизации и лучшего контроля над области действия атрибутов в сущностях проекта. В качестве серверной части я рекомендую использовать ORM (Object Relational Mapper) для управления миграцией и контроля в процессе создания базы данных, включая таблицы и отношения, чтобы обеспечить согласованность между уровнем данных и представлением объекта.
Контейнеризация с помощью Docker упрощает управление инфраструктурой вашего проекта и позволяет использовать инструменты управления контейнерами, такие как AWS ECS и EKS. Также полезно реализовать конвейерную систему с автоматическим тестированием в соответствии с принципами разработки через тестирование (TDD) и использовать файлы переменных среды (.env) для настройки развертываний для различных сред. Что касается самой архитектуры проекта, я рекомендую прочитать книгу Эрика Эванса «Domain-Driven Design», которая значительно расширила мое понимание архитектуры программного обеспечения. Я также настоятельно рекомендую реализовывать интерфейсы на уровне модели. Swagger — это полезный инструмент для документирования маршрутов API, облегчающий взаимодействие между внешними и внутренними командами.
Для front-end разработки, с точки зрения инфраструктуры, я рекомендую следовать той же практике, что и для back-end. Для управления состоянием я настоятельно рекомендую использовать Redux и Redux Toolkit. Что касается систем аутентификации, у меня был различный опыт, например создание API с использованием JWT для управления токенами и его реализация во внешнем интерфейсе, использование Firebase Authenticator (по моему опыту, чаще используется для мобильных проектов), AWS Cognito или фреймворка Okta. . Каждый из этих вариантов имеет свои особенности, которые следует обсуждать и оценивать в каждом отдельном случае.
Для мобильных проектов наиболее важным аспектом является опыт разработчика в публикации приложения в магазинах Android и iOS, поскольку это значительно повышает ценность его карьеры. Остальной процесс разработки для тех, кто уже знаком с ReactJS, очень похож, с добавлением использования собственных ресурсов, таких как акселерометр, гироскоп, камера и GPS, которые часто требуют интеграции с API, такими как Google Maps, для нанесения точек на карту. карту с помощью маркеров.
Наконец, тем, кто стремится стать full-stack разработчиком с навыками back-end, front-end и мобильной разработки, я рекомендую прочитать мою статью под названием Дорожная карта успеха в разработке программного обеспечения и инфраструктуры. Я также доступен. для обсуждения любых идей и архитектур, упомянутых здесь. Не стесняйтесь оставлять свои комментарии, и я буду рад ответить.
