Давайте смотреть правде в глаза. Независимо от того, насколько красивой мы считаем веб-страницу на ноутбуке или настольном компьютере, большая часть мира видит мобильную версию. Итак, что мы можем сделать с этой «мобильной» сетью? Что ж, я хотел бы предложить новый способ разработки Интернета: мобильная разработка (MDD).
Подобно идее разработки через тестирование (TDD), MDD пытается изменить предубеждения о том, как мы разрабатываем веб-сайты и веб-приложения. Сколько раз вы сталкивались с мобильной версией веб-сайта, на котором реклама повсюду, текст находится наполовину за пределами экрана, а боковая прокрутка сводит вас с ума? Это потому, что мы, разработчики, создаем веб-сайт на наших больших мониторах, даже не глядя на него на меньшем экране. Весь красивый CSS, который мы использовали для этого «удивительного» веб-сайта, выглядит полным дерьмом, когда мы просматриваем его на наших телефонах.
Вместо того, чтобы просматривать наш веб-сайт, работающий локально, в окне браузера на наших ноутбуках, MDD предлагает сначала разрабатывать функции, просматривая мобильную версию. Это заставляет разработчика сначала убедиться, что мобильная версия выглядит так же хорошо, как и версия с большим окном браузера, если не лучше. С помощью этой методологии мы можем разрабатывать потрясающие, более быстрые и во всех отношениях лучшие веб-сайты для наших пользователей.
Как мы можем сделать MDD?
Есть несколько способов приступить к работе с MDD. После того, как вы запустите свой веб-сайт или веб-приложение локально, вы можете начать с перетаскивания окна, чтобы сделать его как можно меньше. Увидеть ниже:
Хотя приведенного выше метода должно быть достаточно, если вы хотите просмотреть проект на своем телефоне, реагировать делает это довольно просто:
Пример реакции Шаг 1
Чтобы создать новое приложение для реагирования, перейдите в терминал и запустите:
npx create-react-app mobile-driven-developmentРеагировать Пример Шаг 2
Теперь запустите это (перейдя в каталог, который вы только что создали):
cd mobile-driven-developmentРеагировать на пример, шаг 3
И, наконец, запустите один из них (запустив ваше приложение для реагирования!):
yarn startor
npm startЗатем вы должны увидеть что-то вроде этого:
Теперь введите URL-адрес справа от «В вашей сети:» в браузере вашего телефона, и вы сможете увидеть свое реагирующее приложение!
Вот и все. Теперь вы можете редактировать свое приложение, и оно будет отображаться на вашем мобильном устройстве.
Когда вы разрабатываете и довольны мобильной версией каждой функции, проверяйте ее на большом экране, просто чтобы убедиться, что все выглядит хорошо, и при необходимости внесите изменения. Я считаю, что гораздо проще вносить изменения в окно рабочего стола после разработки для мобильного Интернета, чем вносить изменения в мобильную версию после разработки для настольной версии.
Интернет стал более мобильным, чем когда-либо. Давайте воспользуемся MDD, чтобы сделать его более удобным для пользователя по одному веб-приложению за раз.
