Год назад знакомые попросили сделать меня сайт с динамическим контентом. Тогда о Web я знал чуть больше чем ничего, но попробовать было интересно.
Под катом впечатления заядлого С++ программиста от мира Web, собственные велосипеды, необычные решения, возмущения по поводу и без. Все эмоции вынесены в спойлеры, дабы не нагружать статью.
Надеюсь будет интересно Web разработчикам посмотреть на потуги С++ника, ну а С++ разработчикам узнать для себя что-то новое.
Выбор server-side инструментов
Находясь в твердой уверенности что не стоит забивать гвозди С++ом, основным языком разработки был выбран PHP. Остальные языки проиграли сравнения по поддерживаемости, количеству статей и мануалов, популярности.
Операционной системой для разработки была выбрана Ubuntu 14.04, базой данных PostgreSQL.
- MySQL плохо поддерживает SQL, а то что не поддерживает, в тихую игнорирует (например references в create table)
- MySQL был медленным до патчей от Oracle
- после патчей от Oracle MySQL вызывает у меня страх, как любой продукт Oracle. Продукты Oracle ломаются в моих руках в самый неподходящий момент. К примеру, однажды BerkeleyDB записала мусор в базу и в течении месяца не замечала этого, а после месяца работы база данных уже не подлежала восстановлению
- MySQL ощутимо выигрывает у PostgreSQL только в скорости создания нового соединения с базой. Не кэшировать соединения — это дурной тон => преимуществ практически нет
Веб сервером был выбран nginx. Возможности Apache были бы избыточны для достаточно простого проекта.
Первое разочарование
Поставив PHP-fpm и написав «Hello world!» я уж было обрадовался что всё хорошо движется, но тут на глаза попалась статья про тест на проникновение. Из статьи стало понятно, что конфигурация PHP по умолчанию опасна! После чего на настройку PHP ушел день… а через месяц ещё два дня. Твёрдой уверенности в том, что все хорошо, нет до сих пор!
Очень печалит огромное количество возможностей прострелить себе ногу в плане безопасности. А ведь PHP — это язык который изначально разрабатывался для работы с Web.
Client-side инструменты
После сомнительной борьбы с конфигурацией решено было отдохнуть и прикинуть как должна выглядеть страница. Осведомлённый о Bootstrap, я нашел пару шаблонов страниц на нём с не поломанным адаптивным дизайном, выбрал по симпатичнее и начал подгонять под проект.
CSS
Руки, загрубевшие от брутального С++, напрочь не подходили для работы с прекрасным. Выдавить из себя что-либо путное получалось с огромным трудом, на минимальное исправление дизайна уходили часы кропотливой работы.
В итоге выработался следующий механизм работы с дизайном:
- менять в основном только иконки и картинки
- по возможности обходиться имеющимися стилями
- добавлять красочности через javascript анимацию
- в крайнем случае минимально править CSS, сохраняя оригинал
Bootstrap
Bootstrap для CSS — это как Boost для C++. Сложно представить сколько усилий уходит если его не использовать. Моего ничтожного на тот момент знания CSS было более чем достаточно, чтобы начать им пользоваться, подгонять под себя и даже сделать красивую менюшку вверху страницы.
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 кода — отдельное удовольствие, о котором ниже. В добавок ответы от всех сервисов приходят в своём формате, никак не похожем на форматы других сервисов.
- возвращает ОК, но не авторизует
- не дает вернуться на предыдущую страницу из-за постоянных редиректов
- ломает всю логику работы сайта за счет того что авторизация как бы ОК, но на самом деле не ОК и надо редиректить… А с переадресованной страницы невозможно вернуться из-за постоянного не выключаемого редиректа
PHP
С PHP всё достаточно неплохо — язык как язык. Правда после C++ было непривычно работать с интерпретируемым языком: ошибки что в С++ находятся на этапе компиляции в PHP находятся только на рантайме. Осознал что С++ — развращает, позволяя меньше времени уделять проверке на опечатки.
В PHP напрягает отсутствие бесплатного отладчика, отсутствие бесплатной среды разработки.
Слайдшоу
Для слайдшоу из картинок использовался плагин Backstretch. А вот сделать текстовое слайдшоу пришлось самому по тому что хотелось чтобы хорошо смотрелось на малых экранах. Если делать через картинки пришлось бы делать картинки под различные разрешения экранов, а это долго.
Поэтому решено было возложить красивое расположение текста на Booststrap, и просто скрывать куски текста и показывать по таймеру.
Оптимизация
Черновая версия одной из страниц весила несколько мегабайт. Грузилось до одурения долго. На помощь пришёл Pagespeed со своими советами.
Но самую большую помощь оказал сайт TinyPNG, который используя чёрную магию и квантование ужимает картинки в несколько раз без потери качества.
Internet Explorer — няшка!
Я абсолютно серьезен. Internet Explorer — великолепен! Конечно не как браузер для пользователя, а как средство отладки сайта. Конечно не как дебаггер и не инспектор стилей.
Internet Explorer — отображает сайт практически без всяких CSS расширений, он очень требователен к разметке и невероятно долго грузит страницы. Это всё плюсы! На нём можно удостовериться что сайт быстро отображается, что в javascript случайно не закрались незакрытые теги. В конце концов можно увидеть как сайт выглядит в худшем случае, и что контент всё еще читаемый.
Итоги
Непередаваемые ощущения от прикосновения к новому для меня миру. Ощущения в основном положительные, а результат работы на мой непритязательный вкус выглядит достойно.
Автор: antoshkka
