Архив рубрики: Javascript

Для каждого языка программирования свои задачи, или выводы «9 лет спустя»

Окидывая взглядом последние 9 лет практики программирования, я пришел к ряду интересных и, думаю, полезных выводов. Свою историю изучения языков программирования (далее «ЯП») проиллюстрировал ниже. Где-то отметил фреймворки на этих ЯП. Отмеченные фреймворки, как правило, давали новую мотивацию и открывали новые горизонты в изучении и использовании этих ЯП.

Языки программирования по жизни

Языки программирования по жизни

Вывод 1: для разных классов задач – разные языки программирования

В действительности, достаточно хорошо изучив какой-либо язык, кажется, что на нём надо писать не только профильные приложения. Но будьте осторожны! На этом пути вы можете впасть в состояние «вбивания гвоздей микроскопом». Так рождаются демоны (постоянно висящие процессы, типа серверов) на PHP, веб-сервера на JavaScript, веб-приложения на C++ и прочее. В качестве эксперимента – это прекрасно, но всё становится гораздо ужасней, когда что-то в силу своей популярности в другой области становится частым решением в других.

Хорошим примером иллюстрирующим первый вывод является node.js и Erlang. На node.js с радостью накинулось большое число веб-разработчиков, ведь все знают JavaScript! Попробовав домашние проекты на этой платформе, многие начали использовать node.js в реальных проектах и в итоге столкнулись с большими проблемами, решение которых затрачивало всё больше сил. Например, отказоустойчивость таких приложений. Стоит вылезть ошибке в одном из потоков выполнения, и весь сервер падает, если только вы не оградились везде, где только можно try-catch блоками. Или горизонтальное масштабирование. Тут вообще беда. И рождаются костыли-костыли-костыли.

Другое дело Erlang, который изначально «by-design» создавался для больших телекоммуникационных систем. Писать на нём серверное приложение — сплошное удовольствие. Хотите постоянно работающий сервер, которым можно управлять по telnet? Да легко! Держите встроенный пакет gen_tcp. Горизонтальное масштабирование существующего приложения? Вам скорей всего придется поменять пару строчек, где описывается передача сообщений другим функциям, — добавить в них отправку сообщений на другие ноды. Тоже и с отказоустойчивостью (привет супервизорам), обработкой бинарных данных и пр. пр.

Вывод 2 – не упускайте возможности изучать новые ЯП и/или их популярные фреймворки

Этот вывод вытекает из первого. Для каждой задачи есть свой подходящий ЯП или фреймворк, только вы о них можете пока  не знать. Поэтому необходимо как можно больше изучать новые ЯП и фреймворки.

Существует две основные когорты ЯП:

  1. Си-подобные: С++, С#, Java, PHP, JavaScript, ActionScript и др.
  2. LISP-подобные: Erlang, Python, Ruby, Perl и др.

Если вы знаете хотя бы один язык из каждого класса, то считайте, что вы знаете и все остальные ЯП.) Исключениями можно считать Assembler и языки-приколы, типа Brainfuck. Кстати, часто различить эти классы ЯП можно по наличию/отсутствию кортежей и обрамлению условных операций и циклов в фигурные скобки.

Я не стал разбивать на группы ООП, функциональные и процедурные парадигмы программирования, т.к. по большому счету почти любой подход можно использовать почти в любом языке (например, функциональный подход в Java). Другое дело, что язык изначально для этого не создавался (см. вывод 1;-) и такие извороты выглядят крайне противоестественно. Исключение Python. Он изначально разрабатывался мульти-парадигмальным.

Мой топ-рейтинг открытий типа: «А-а-а! Так вот с помощью чего это надо было делать!»:

1.  Zend Framework (на PHP)

Ну нафига я писал свою глючную библиотеку для работы с БД? О боги, а зачем я каждый раз придумывал новую архитектуру для каждого нового веб-приложения? MVC, Zend_Db, Zend_Action даруют возможность писать веб-приложения быстрее, а код делать надежным!

2.  Erlang

Боже! Ну почему я потратил кучу времени на написание этого простого демона на Java, если в Эрланге это можно было сделать парой десятков строчек, да и работало бы безотказно, да и масштабировать было бы проще!

3.  Octave

Так, надо бы быстрое преобразование Фурье… О, Matlab! Ну что, пошли на страшное преступление в ближайший торрент-трекер. Хотя ладно, вот есть бесплатная библиотечка для любимого PHP. Эхх…что-то как-то всё грустно и медленно. Octave? Octave… Octave! Мега-удобный синтаксис работы с матрицами, встроенные функции для кучи математических задач, да тут еще и графики с пол пинка строятся! Да оно еще совместимо с MatLab! А еще open-source!

4.  KnockoutJS (на JavaScript).

Как же мне надоели эти простыни с кодом, запутанная логика работы с объектами на странице, эти бесконечные onSomeEvent функции. Как бы хотелось MVC, но вот только на клиенте. Чтобы вот есть у тебя модель данных и при её изменении автоматически всё само менялось на странице. Добавил к ней объект «Задача», а на странице возьми и появись соответствующий блок для новой задачи.

KnockoutJS, как ты вовремя!

5.  Django (на Python)

Да-да, Zend Framework, ты не плох, но ты… рутинный. Каждый раз надо писать свою админку, прикручивать авторизацию, свои однотипные операции добавления, редактирования и удаления сущностей, расписывать формы ввода данных, писать однотипные виды для типичных задач, типа показа по 10 новостей на одной странице и разбивках остальных новостей по страницам. Copy-paste, copy-paste…

Ммм… что-то зачастили на хабре со своими дифирамбами во славу Django и Python.  Да давно уже поют, который год. Что ж они всё никак не угомонятся?) Ну попробуем и мы.

Так-так… значит я раскомментирую вот тут и вот тут, еще одна команда в консоли и… у меня готова полноценная админка?! Вы издеваетесь?) Так просто! А вот еще бы хотелось, чтобы в админке было удобно приписывать к разным авторам разные статьи, чтобы было красивая связь многим-ко-многим. Добавить одну строку в модель?! Ну-у, у вас совсем нет совести! Зачем же я столько времени тратил на эту рутину в зенде?»

Для этой записи хватит выводов, а то, ведь, до конца не дочитаете!) Оставим еще парочку на будущее.)

CouchDB: группировка данных по родительскому элементу

При разработке своего одного приложения (скоро анонсирую!) я использовал в качестве БД Apache CouchDB, точнее использовал его чуть более продвинутую версию от коммерческой организации – CouchBase. В этом посте я привожу решение нередкой, но нетривиально решаемой задачи (нетривиально для людей, не знакомых до этого с NoSQL).

Задача

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

В БД обычно данные хранятся в примерно таком формате:

{
   "_id": "256b9dd4492210351c9db34ee500d817",
   "_rev": "1-94366c1d2b7a075f33ebbd7a96565f4b",
   "url": "http://surdoserver.ru",
   "status": 200,
   "timestamp": 1969072012,
   "ping": 332
}
{
   "_id": "256b9dd4492210351c9db34ee500f288",
   "_rev": "1-1770b12a395ca76887c792e5c1d99f8f",
   "url": "http://surdoserver.ru",
   "status": 200,
   "timestamp": 1969073012,
   "ping": 220
}
и т.д.

Нам же необходимо получить статистику по каждому сайту без дублирования информации, то есть что-то типа такого:

{
   "url": "http://surdoserver.ru",
   "data":
   [
      "status": 200,
      "timestamp": 1969072012,
      "ping": 332
   ],
   [
     "status": 200,
     "timestamp": 1969073352,
     "ping": 220
   ]
}

Читать далее

HTML5 & Math: Треугольник Серпинского на canvas

Проходя (даже можно сказать, пробиваясь с потерями через) книгу Д. Кнута «Искусство программирования» встретил треугольник Паскаля, а тут еще давно надо было разобраться с html5 canvas, поэтому возникло непреодолимое желание проиллюстрировать треугольник Паскаля на canvas.

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

Код реализации ниже.

	<canvas id="pascalCanvas" width="1500" height="1500"></canvas>

	<script>

		function drawPixel(x, y, context) {
			context.fillRect(x, y, 1, 1);
		}

		canvas = document.getElementById("pascalCanvas");
		c = canvas.getContext("2d");

		//some gradient style
		var gradient = c.createLinearGradient(0, 0, 0, canvas.height);
		gradient.addColorStop(0, "#abc");
		gradient.addColorStop(1, "#000");
		c.fillStyle = gradient;
		//c.fillStyle = "#000";

		//Pascal's triangle
		var tr = new Array(canvas.height);
		for (i = 0; i < canvas.height; i++) {
			tr[i] = new Array(canvas.width);
			for (k = 0; k < canvas.width; k++) {
				if (k == 0)
					tr[i][k] = 1;
				else
					tr[i][k] = 0;
			}
		}

		for (i = 1; i < canvas.height; i++) {
			for (k = 1; k < canvas.width; k++) {
				tr[i][k] = (tr[i-1][k-1] + tr[i-1][k]) % 2;
			}
		}

		//draw
		for (i = 0; i < canvas.height; i++) {
			for (k = 0; k < canvas.width; k++) {
				if (tr[i][k] != 0)
				drawPixel(k, i , c);
			}
		}
	</script>

Получается такое:

треугольник Серпинского на html canvas

Треугольник Серпинского на html canvas

Посмотреть «в живую»

PS: Ну и раз недавно был день св. Валентина =):

Валентинка Серпинского с http://xkcd.ru/543/


Мой диплом о разработке и вводе в эксплуатацию веб-приложения

Буквально месяц назад в славном Московском Техническом Университете Связи и Информатики я защищал диплом «Разработка и ввод в эксплуатацию веб-приложения „Сурдосервер“».

Веб-приложение я начинал разрабатывать еще с августа 2009 года в рамках своей работы в лаборатории вместе со своими коллегами, за мной была инженерная часть и проектирование взаимодействия. Самые интересные моменты в плане разработки я апериодически выкладывал в этом блоге. Настала пора опубликовать и сам диплом. Самим приложением можно воспользоваться на сайте http://surdoserver.ru/.

Самые нетерпеливые могут сразу перейти к разделу со ссылками для скачивания всего этого добра.

О дипломе

Что внутри: в дипломе описан весь цикл разработки современного веб-приложения. Что он включает в себя:

  1. Исследование вопроса;
  2. Определение целей, достигать которые поможет веб-приложение;
  3. Экономический расчет;
  4. Проектирование пользовательского взаимодействия (проектирование интерфейса);
  5. Проектирование БД;
  6. Проектирование программной архитектуры;
  7. Разработка;
  8. Тестирование (в том числе нагрузочное тестирование);
  9. Ввод в эксплуатацию.

В этом дипломе в силу правил составления, расчет экономического эффекта (или т.н. технико-экономического обоснования) находится практически в самом конце, и, откровенно говоря, советую особо не вчитываться в полученные цифры, т.к. сделаны довольно… оптимистичные прогнозы =). Также отсутствует описание процесса тестирования кода, однако есть нагрузочное тестирование.

Что использовалось при разработке и какие результаты:

  • Создано полноценное приложение, которое содержит в себе свыше 400 страниц программного кода;
  • Использовались технологий: PHP, Zend Framework, JavaScript, HTML, Adobe Flex, ActionScript 3;
  • Приобретен и настроен «с нуля» удаленный сервер на основе «облачных» вычислений для обеспечения бесперебойной работы приложения в сети Интернет;
  • Приложение размещено на сервере, получены первые положительные отзывы пользователей на форуме глухих, в социальной группе глухих в сети «вКонтакте», а также посредством встроенной системы обратной связи;
  • В период с 1 февраля по 1 июня 2010 года сайт посетило более 4 100 уникальных пользователей, которые совершили более 88 000 переходов по сайту.

Содержание дипломной работы

  • ВВЕДЕНИЕ
  • Глава 1 Проектирование приложения
    • 1.1 Исследование предметной области
      • 1.1.1  Язык жестов
      • 1.1.2  Современные методы обучения языку жестов
      • 1.1.3  Актуальность проблемы интерактивного веб-приложения для изучения русского языка жестов
    • 1.2   Назначение и основные возможности проектируемого приложения
    • 1.3   Общая архитектура приложения
    • 1.4  Проектирование серверной части
    • 1.5    Проектирование базы данных
      • 1.5.1  Системный анализ предметной области
      • 1.5.2  Инфологическое проектирование
      • 1.5.3  Даталогическое проектирование
      • 1.5.4  Физическое проектирование
    • 1.6  Проектирование клиентской части
  • Глава 2 Технологическая платформа приложения
    • 2.1  Требования к серверной части приложения
      • 2.1.1  Операционная система
        • 2.1.1.1  Обзор современных сетевых ОС
        • 2.1.1.2  Выбор ОС в соответствии с предъявленными требованиями
      • 2.1.2  Система управления базами данных
        • 2.1.2.1 Обзор современных СУБД
        • 2.1.2.2 Выбор СУБД в соответствии с предъявленными   требованиями
      • 2.1.3  Языки программирования
      • 2.1.4  Веб-сервер
        • 2.1.4.1  Обзор современных веб-серверов
        • 2.1.4.2 Выбор веб-сервера в соответствии с предъявленными  требованиями
    • 2.2  Требования к клиентской части приложения
  • Глава 3 Техническая платформа
    • 3.1 Серверное аппаратное оснащение
    • 3.2 Клиентское аппаратное оснащение
  • Глава 4 Описание разработанных компонентов
    • 4.1  Архитектура приложения
      • 4.1.1  Теория
      • 4.1.2  Используемая архитектура
      • 4.1.3  Файловая структура
    • 4.2  Разработанные модули
      • 4.2.1  Сурдо
      • 4.2.2  Дактильная азбука
      • 4.2.3  Страницы
      • 4.2.4  Обратная связь
      • 4.2.5  Поиск
      • 4.2.6  Административная панель
  • Глава 5 Введение приложения в эксплуатацию
    • 5.1  Размещение в сети Интернет
      • 5.1.1 Обзор и выбор способов размещения приложения в сети Интернет
      • 5.1.2  Настройка серверов, подключение доменов
      • 5.2.2  Размещение приложения
      • 5.1.4  Настройка резервного копирования
    • 5.2  Нагрузочное тестирование
      • 5.2.1  Методология тестирования
      • 5.2.2  Результаты тестирования
        • 5.2.1.1  Loadimpact.com
        • 5.2.2.2  Apache JMeter
  • Глава 6 Разработка вопросов по экологии и безопасности жизнедеятельности
    • 6.1  Характеристика условий труда программиста
    • 6.2 Анализ опасных вредных факторов и возможных чрезвычайных ситуаций, возникающих во время работы программиста
      • 6.2.1  Уровень шума на рабочем месте
      • 6.2.2  Электромагнитное и ионизирующее излучения
      • 6.2.3  Статические нагрузки и монотонность труда
      • 6.2.4  Недостаточная освещенность
    • 6.3  Разработка мер безопасности
      • 6.3.1  Снижение уровня шума
        • 6.3.1.1  Теория
        • 6.3.1.1  Расчетная часть
      • 6.3.2  Приобретение оборудования, отвечающего стандартам  безопасности
      • 6.3.3  Устранение статических нагрузок и монотонности труда
      • 6.3.4  Расчет освещенности рабочего места программиста
    • 6.4  Выводы
  • Глава 7 Технико-экономического обоснование проекта
    • 7.1  Постановка задачи
    • 7.2  Стоимость разработки приложения
      • 7.2.1  Определение реальных сроков и количества участников разработки и внедрения приложения
      • 7.2.2  Расчет заработной платы персонала
      • 7.2.3  Расчет затрат на приобретение необходимых аппаратных и программных средств для разработки приложения
      • 7.2.4  Расчет затрат на размещение сайта в сети Интернет
      • 7.2.5 Расчет всех затрат
    • 7.3  Оценка эффективности от внедрения приложения
      • 7.3.1  Косвенная экономия средств
      • 7.3.2  Доход от работы сервиса
  • ЗАКЛЮЧЕНИЕ
  • СПИСОК ЛИТЕРАТУРЫ
  • Приложение А Программные листинги
  • Приложение Б Графические интерфейсы

Плакаты:

Сам диплом в pdf-формате.

При желании в качестве благодарности вы можете купить дипломную работу здесь.

Zend Framework: пример помощников вида для интеграции ElRTE и ElFinder

Задача: унифицировать и упростить задачу инициализации текстового редактора ElRTE и файлового менеджера ElFinder.

Решение: использование специально для этого придуманных помощников вида (view helpers) в ZF.

Я использую ElRTE и ElFinder в административной панели сайта. Это наиболее удобные инструменты для визуального редактирования html-контента, а также для работы с файлами на серверами. Посему пример будет для модуля admin. Впрочем, сменив название модуля на Application, пример прекрасно подойдет для модуля по умолчанию (тот который в основной папке «/application/»).

Так что же надо сделать, чтобы получить возможность максимально легко включать эти инструменты на сайте, и при этом также легко обновлять их с помощью простой замены файлов на сервере или смены в одном единственном месте пути до редакторов? Поехали:

  1. Создаем модульное приложение на ZF с модулем «admin». Подробнее об этом можете прочитать в одной из предыдущих моих записях.
  2. Скачиваем и сохраняем в «/public/js/» ElRTE и ElFinder
  3. Настраиваем коннектор для ElFinder
  4. Создаем файл «/application/modules/admin/view/helpers/EnableElRTE.php» со следующим содержимым:
    <?php
    /**
     * Class inserts neccery code for initialize rich text editor ElRTE
     */
    class Admin_View_Helper_EnableElRTE extends Zend_View_Helper_Abstract{
    
    	public function enableElRTE() {
    		$elrte_base_uri = "/js/back-end/elrte-1.0rc4/";
    
    		$this->view->headLink()->appendStylesheet("{$elrte_base_uri}css/elrte.full.css");
    		$this->view->headScript()->appendFile("{$elrte_base_uri}js/elrte.min.js");
    		$this->view->headScript()->appendFile("{$elrte_base_uri}js/i18n/elrte.ru.js");
       	}
    }
    
  5. Создаем файл «/application/modules/admin/view/helpers/EnableElFinder.php»:
    <?php
    /**
     * Class inserts neccery code for initialize file manager ElFinder
     *
     * @author Dimitry Dushkin
     *
     */
    class Admin_View_Helper_EnableElFinder extends Zend_View_Helper_Abstract{
    
    	public function enableElFinder() {
    		$elfinder_base_uri = "/js/back-end/elfinder-1.1/";
    
    		$this->view->headLink()->appendStylesheet("{$elfinder_base_uri}css/elfinder.css");
    		$this->view->headScript()->appendFile("{$elfinder_base_uri}js/elfinder.min.js");
    
    		$this->view->headScript()->captureStart() ?>
    			var opts = {
    				lang : 'ru',
    				styleWithCss : false,
    				width	: 800,
    				height  : 200,
    				toolbar : 'normal',
    				fmAllow  : true,
    				fmOpen   : function(callback) {
    					$('<div id="myelfinder" />').elfinder({
    					   	url : '<? echo $elfinder_base_uri?>connectors/php/connector.php',
    						lang : 'ru',
    						dialog : { width : 900, modal : true, title : 'Файлы' }, // открываем в диалоговом окне
    						closeOnEditorCallback : true, // закрываем после выбора файла
    						editorCallback : callback
    		            })
    	       		}
    	        };
           	<?php $this->view->headScript()->captureEnd();
       	}
    }
    
  6. В представлении IndexAction IndexController’a модуля admin (по умолчанию такие штуки располагаются в «/application/modules/admin/view/scripts/index/index.phtml») пишем следующее:
    
    <? echo $this->enableElRTE();?>
    <? echo $this->enableElFinder();?>
    
    <script type="text/javascript">
         $().ready(function() {
              // создаем редактор
              $('.rte_textarea').elrte(opts);
         });
    </script>
    <form method="get">
         <textarea name="content" id="content" class="rte_textarea" rows="5" cols="45"></textarea>
    </form>
    
  7. В основном шаблоне («/application/layouts/scripts/index.phtml») при этом должно быть что-то типа такого (стандартный код для шаблонов ZF):
    <?php echo $this->doctype() ?>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<?php echo $this->headTitle() ?>
    	<?php echo $this->headMeta() ?>
    	<?php echo $this->headLink() ?>
    	<?php echo $this->headScript() ?>
    </head>
    <body>
             <?php echo $this->layout()->content ?>
    </body>
    </html>
    
  8. Удостоверяемся, что все работает как надо, пройдя по ссылке типа http://localhost/admin/index/index

Получим что-то типа такого

семейное фото ElRTE и ElFinder

семейное фото ElRTE и ElFinder

Как это работает

Помощники вида необходимы для динамического добавления необходимых элементов в выходной html-код. Как видно, каждый наш помощник является потомком класса Zend_View_Helper_Abstract, который реализует интерфейс, позволяющий получить доступ к глобальному объекту Zend_View, который как раз и отвечает за выходной html-код.

В каждом помощнике мы обращаемся к стандартным помощникам вида (HeadScript Helper для добавления js-файлов и js-кода и HeadStyle Helper для добавления файлов стиля) через глобальный объект Zend_View.

Ссылки в записи

 

UPDATE: по твиттеру товарищ Вредный рассказал о своём усовершенствованном решении этого вопроса. Там предлагается подключать elRte и elFinder в описании формы.

Дизайн: jQuery плагин "Удобная кнопка удаления"

Собрался с силами и таки написал реализацию концепта более юзабельной кнопки удаления.)

Как это выглядит

Как это работает можно посмотреть на отдельной странице плагина. Там же можно скачать исходные коды и минифицированную версию плагина.

Как это устроено

Для начала примем, что кнопка удаления — это ссылка-кнопка с GET-параметрами для удаления какого-либо объекта из базы данных. Ссылка будет что-то типа такой: «http://example.ru/?action=delete&item_id=9000«.

При инициализации старая кнопка удаляется и на её месте с помощью абсолютного позиционирования размещается новая кнопка-ссылка со ссылкой для удаления, указанной в параметрах. Также добавляется скрытый элемент — панель с диалогом подтверждения удаления.

При нажатии на кнопку удаления из-под неё выдвигается панель с диалогом подтверждения удаления. Размещение элементов друг над другом возможно благодаря использованию связки CSS-аттрибутов: у кнопки удаления

position: absolute; z-index: 10

и у панели

position: absolute; z-index: 1