YourQuote - похожая на Instagram платформа для писателей, мобильное приложение, которое позволяет пользователям со всего мира публиковать свои оригинальные произведения в виде красивых изображений, а не простого текста. Недавно его основатели переехали в долину Соланг в Гималаях, чтобы управлять своим предприятием прямо в горах. Они хотели, чтобы кто-то помог им с их веб-сайтом, чтобы сделать его доступным для поиска в Интернете.

Я инженер-программист и страстно увлекаюсь разработкой интуитивно понятных приложений, которые просты в использовании и могут принести пользу тем, кто находится на дне пирамиды. Я проработал в PayPal интерфейсным инженером два года и в настоящее время изучаю проблемы, связанные с охраной здоровья матери и ребенка в Индии. Я ищу нечестивые проблемы, решение которых можно было бы придумать, используя цифровые инновации. Как и все мои коллеги-инженеры, я мечтал писать код из гор, поэтому эта возможность была для меня особенно захватывающей. С недавними проектами, такими как Messenger Lite и YouTube Go, совершенно очевидно, что два крупных интернет-гиганта проявляют интерес к разработке приложений для охвата более широкой аудитории с ограниченными возможностями подключения к Интернету и недорогими устройствами. Поэтому важно понимать истинную природу проблемы. Это было еще одним мотивирующим фактором для того, чтобы отправиться в горы писать код.

С этого момента я резюмирую свои знания кодирования в Гималаях.

Интернет важен

Да, мы живем в эпоху мобильных устройств. Да, Приложения классные. Да, всем нужен миллион скачиваний. Но Интернет все еще жив, и никто не хочет / не имеет места для миллиона приложений. Еще более серьезная проблема стоит у основания пирамиды. Интернет был и будет оставаться основным каналом для обнаружения контента.

Отсутствие Интернета похоже на отсутствие важного шлюза для ваших клиентов.

Google - ваш популярный крутой друг. Даже 60-летний Бабу Джи, живущий в глухих горах, знает о Google. Даже человек, который продает Мэгги в горах, пользуется картами Google.

Хорошая идея - позволить вашим пользователям / клиентам изучить ваш контент / продукты и решить, стоит ли то, что вы предлагаете, иметь 5 МБ места на их устройстве или нет.

Сеть - новое узкое место

Интернет не всегда молниеносно. Для JS / CSS - Minify, uglify, gzip. (Мы используем задачу gulp для того же.) Для изображений - сожмите их до чертиков. Tinypng, фотошоп (за исключением Интернета) - ваши друзья. Не перегружайте своего клиента. Если возможно, создавайте и кешируйте изображения разного размера на сервере и выполняйте рендеринг в соответствии с размером устройства.

Прогрессивное улучшение

Один из моих наставников однажды сказал мне: «Все может и не получится».

JavaScript не является исключением из этого правила. Убедитесь, что если не все, то хотя бы основные функции веб-приложения доступны без JS. Когда дело доходит до прогрессивного улучшения, я выбираю золотую середину. С такими проектами, как «Android one» и т. Д. Проникновение смартфона хорошее. Опять же, ваш главный враг - сеть и пропускная способность. На мой взгляд, рендеринг основного контента на стороне сервера - необходимость. Этого достаточно? Это зависит от вашей аудитории, временных рамок и масштаба вашего проекта.

Когда я посещаю веб-сайт, я делаю это (в большинстве случаев), потому что мне нужна некоторая информация. Не думайте, что мне понадобится JS или даже CSS (да, вы можете протестировать свою разметку в Lynx), чтобы получить эту информацию. Это моя позиция по прогрессивному совершенствованию. Я не считаю себя пуристом / прогрессивным нацистом. В то же время я не верю, что «это нормально делать сайты, которые не работают без JS».

Сервисные работники
Кэшируйте как можно больше везде и всегда. Используйте существующие рецепты с открытым исходным кодом в соответствии с объемом вашего проекта. Вы тратите часы на создание страницы 404. Почему бы не потратить еще немного и добавить страницу нет сети. Закройте свой Wi-Fi и попробуйте Web WhatsApp за вдохновением.

Google AMP

Ускоренные мобильные страницы (AMP) - отличный способ максимально быстро сделать контент на вашем веб-сайте доступным. Две недели у меня было медленное соединение, и я получал доступ к различным статьям AMP, хранимым через кеш Google. Мне понравилась эта идея как пользователю с плохим подключением к сети. Скорее всего, вашим пользователям это тоже нужно. Это стоит дополнительных усилий. Чтобы гарантировать, что ваша реализация AMP работает должным образом, Search Console теперь имеет улучшенный инструмент тестирования AMP.

Фреймворки и библиотеки

Я верю в подход снизу вверх. Вместо того, чтобы начинать с массивного шаблона, мы решили использовать минимум. Я большой поклонник ReactJS в основном из-за его модульности на уровне компонентов. Однако, поскольку у этого MVP были минимальные требования, мы решили не реагировать. Наша идея состоит в том, что мы в конечном итоге представим реакцию, как только у нас появится какой-то сложный компонент / функция. Например. В нашем случае виджет генератора котировок онлайн. Я понимаю, что не начинать с React, имея планы добавить его позже, спорно. Но в нашем случае технология была не единственным блокиратором.

Мое мнение о фреймворках и библиотеках - Сведите их к минимуму. Пока весь наш код написан на ванильном JS - ES6 перенесен с помощью babel через задачу gulp. Для CSS мы начали с skeleton.css, чтобы он был минимальным. Мы используем sass для модульности. Мы используем API выборки ES6 для вызовов служб. Однако, поскольку выборка не предлагает (чистого) способа прервать HTTP-запросы, для поиска в реальном времени (где нам нужно было отклонять старые запросы, когда пользователь вводит новый запрос), мы используем собственный запрос XHR, заключенный внутри обещание ES6. Пока мы не используем никакой фреймворк. Единственная библиотека, которую мы используем, - это отображение баннера для загрузки приложения iOS / Android в соответствии с пользовательским агентом. Это тоже есть в ванильном JS. Лучше использовать существующие проекты с открытым исходным кодом вместо того, чтобы изобретать колесо. Весь наш JS написан с использованием модулей ES6, компилируется и объединяется в один минифицированный файл JS с помощью задачи gulp. На данный момент библиотека баннеров включена отдельно, но мы планируем изменить это в ближайшее время.

Последние мысли

Так должны ли все веб-разработчики уйти в горы в поисках божественной мудрости? Конечно нет.

Один из моих друзей (Кешав) справедливо заметил мне, что для кодирования все, что вам нужно, - это правильное отношение, а не высота.

Однако разработка веб-сайта в Гималаях научила меня более чутко относиться к своим пользователям. Как справедливо отметила Каролина Щур, сеть неоднородна. Я полностью согласен с идеей Нолана Лоусона относиться к сети как к усовершенствованию. Чтобы достичь следующего миллиарда, нам нужно сосредоточиться на создании веб-приложений, которые могут работать в любых сетевых условиях.

PS: Работа над сайтом YourQuote.in продолжается. Еще не все, что здесь описано, переведено в производство. YourQuote.in ищет стажеров. Если вы заинтересованы в участии, просто напишите им письмо на привет [at] yourquote [dot] in.