Web технологии глазами С++ программиста

Год назад знакомые попросили сделать меня сайт с динамическим контентом. Тогда о Web я знал чуть больше чем ничего, но попробовать было интересно.

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

Надеюсь будет интересно Web разработчикам посмотреть на потуги С++ника, ну а С++ разработчикам узнать для себя что-то новое.

Находясь в твердой уверенности что не стоит забивать гвозди С++ом, основным языком разработки был выбран PHP. Остальные языки проиграли сравнения по поддерживаемости, количеству статей и мануалов, популярности.

... а если по чесноку?

Один знакомый давным давно сказал что «PHP учится за день!». Именно эта лёгкость и стала основным фактором выбора.

Операционной системой для разработки была выбрана Ubuntu 14.04, базой данных PostgreSQL.

... а что не MySQL?

Моё знакомство с MySQL всегда довольно быстро заканчивалось полным сносом MySQL и установкой чего бы то ни было другого. Причин для этого более чем достаточно:

• MySQL плохо поддерживает SQL, а то что не поддерживает, в тихую игнорирует (например references в create table)


• MySQL был медленным до патчей от Oracle


• после патчей от Oracle MySQL вызывает у меня страх, как любой продукт Oracle. Продукты Oracle ломаются в моих руках в самый неподходящий момент. К примеру, однажды BerkeleyDB записала мусор в базу и в течении месяца не замечала этого, а после месяца работы база данных уже не подлежала восстановлению


• MySQL ощутимо выигрывает у PostgreSQL только в скорости создания нового соединения с базой. Не кэшировать соединения — это дурной тон => преимуществ практически нет

Веб сервером был выбран nginx. Возможности Apache были бы избыточны для достаточно простого проекта.

...а другие причины были?

Интересно было попробовать новый инструмент nginx, о котором полно положительных отзывов.

Поставив PHP-fpm и написав «Hello world!» я уж было обрадовался что всё хорошо движется, но тут на глаза попалась статья про тест на проникновение. Из статьи стало понятно, что конфигурация PHP по умолчанию опасна! После чего на настройку PHP ушел день… а через месяц ещё два дня. Твёрдой уверенности в том, что все хорошо, нет до сих пор!

Очень печалит огромное количество возможностей прострелить себе ногу в плане безопасности. А ведь PHP — это язык который изначально разрабатывался для работы с Web.

После сомнительной борьбы с конфигурацией решено было отдохнуть и прикинуть как должна выглядеть страница. Осведомлённый о Bootstrap, я нашел пару шаблонов страниц на нём с не поломанным адаптивным дизайном, выбрал по симпатичнее и начал подгонять под проект.

CSS

Руки, загрубевшие от брутального С++, напрочь не подходили для работы с прекрасным. Выдавить из себя что-либо путное получалось с огромным трудом, на минимальное исправление дизайна уходили часы кропотливой работы.

В итоге выработался следующий механизм работы с дизайном:

• менять в основном только иконки и картинки


• по возможности обходиться имеющимися стилями


• добавлять красочности через javascript анимацию


• в крайнем случае минимально править CSS, сохраняя оригинал

Bootstrap

Bootstrap для CSS — это как Boost для C++. Сложно представить сколько усилий уходит если его не использовать. Моего ничтожного на тот момент знания CSS было более чем достаточно, чтобы начать им пользоваться, подгонять под себя и даже сделать красивую менюшку вверху страницы.

...вот прям идеально подошло под нужды?

Не совсем. Хотелось по наведени на меню выпадающего подменю. В Bootstrap не оказалось нужного функционала, но как выяснилось добавить его крайне легко:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}
.navbar .dropdown-menu {
    margin-top: 0px;
}

Так же легко оказалось сделать шрифт побольше:

/* Making menue font bigger*/
.nav > li > a {
    font-size: 1.1em;
}

Так что я очень доволен Bootstrap!

jQuery

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

...прям всё подошло идеально?

Расстроило отсутствие часто используемых вещей:

• работа с cookies (setCookie, getCookie)


• более продвинутый класс строки был бы кстати (startsWith, isLetter)

Пришлось сделать вспомогательный файл с javascript и вынести в него свои расширения.

В процессе разработки начали проявляться разнообразные проблемы и недостатки выбранных инструментов и технологий, столкнулся с отсутствием адекватных реализаций базовых вещей.

OAuth

Самой большая проблемой оказалась авторизация пользователей. Решено было использовать сторонние сервисы для авторизации, как то Вконтакте, Твиттер, Фейсбук, Yandex, MailRu, Одноклассники.

Внезапно оказалось, что все известные сервисы видят OAuth по своему. Различия не то чтобы совсем значительные, но из-за мелких деталей разработка превратилась в настоящий АД!

• Яндекс единственный кто делает редиректы при OAuth


• Одноклассники подсчитывают контрольные суммы не как все


• MailRu подсчитывают контрольные суммы даже не так как Одноклассники


• Google придирается к мелочам (что честно говоря мне понравилось)

При этом у всех сервисов сообщения об ошибках абсолютно не информативные, а отладка PHP кода — отдельное удовольствие, о котором ниже. В добавок ответы от всех сервисов приходят в своём формате, никак не похожем на форматы других сервисов.

...а что с Твиттер не так?

С Twitter абсолютно всё не так! Какие-то неадекватные ограничения на сессии, из-за чего пользоваться им могут 1-2 пользователя в день и то, если кликают редко. По превышении лимитов Twitter начинает вести себя как шизофреничка весной:

• возвращает ОК, но не авторизует


• не дает вернуться на предыдущую страницу из-за постоянных редиректов


• ломает всю логику работы сайта за счет того что авторизация как бы ОК, но на самом деле не ОК и надо редиректить… А с переадресованной страницы невозможно вернуться из-за постоянного не выключаемого редиректа

PHP

С PHP всё достаточно неплохо — язык как язык. Правда после C++ было непривычно работать с интерпретируемым языком: ошибки что в С++ находятся на этапе компиляции в PHP находятся только на рантайме. Осознал что С++ — развращает, позволяя меньше времени уделять проверке на опечатки.

...что-то ты недоговариваешь!

Ошибок было бы много меньше, если бы новые переменные создавались с помощью ключевого слова (к примеру var как в javascript, или auto как в C++11). Иначе любая опечатка в имени переменной становится новой переменной.

В PHP напрягает отсутствие бесплатного отладчика, отсутствие бесплатной среды разработки.

...ведь купил и проблем не стало?

Неа! Я жадный! Вспомнил юность с написанием программ в блокноте и отладкой через printf.

Слайдшоу

Для слайдшоу из картинок использовался плагин Backstretch. А вот сделать текстовое слайдшоу пришлось самому по тому что хотелось чтобы хорошо смотрелось на малых экранах. Если делать через картинки пришлось бы делать картинки под различные разрешения экранов, а это долго.

Поэтому решено было возложить красивое расположение текста на Booststrap, и просто скрывать куски текста и показывать по таймеру.

Оптимизация

Черновая версия одной из страниц весила несколько мегабайт. Грузилось до одурения долго. На помощь пришёл Pagespeed со своими советами.

Но самую большую помощь оказал сайт TinyPNG, который используя чёрную магию и квантование ужимает картинки в несколько раз без потери качества.

...познал основы и считаешь себя крутым?

Сначала я считал что открыл банальные вещи. Однако после того как я прошелся по ряду очень известных и популярных ресурсов с этими инструментами, выяснилось что мало кто заботится о размере. Да что там говорить, сам Google не так хорош как мог бы быть.

Internet Explorer — няшка!

Я абсолютно серьезен. Internet Explorer — великолепен! Конечно не как браузер для пользователя, а как средство отладки сайта. Конечно не как дебаггер и не инспектор стилей.

Internet Explorer — отображает сайт практически без всяких CSS расширений, он очень требователен к разметке и невероятно долго грузит страницы. Это всё плюсы! На нём можно удостовериться что сайт быстро отображается, что в javascript случайно не закрались незакрытые теги. В конце концов можно увидеть как сайт выглядит в худшем случае, и что контент всё еще читаемый.

...серьёзно?

Да.

...серьёзно-серьёзно?

ДА.

Непередаваемые ощущения от прикосновения к новому для меня миру. Ощущения в основном положительные, а результат работы на мой непритязательный вкус выглядит достойно.

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.