Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > Пишем фреймворк для JS

Автор: Sardar 20.7.2006, 15:16

С этого топа открывается проект, цели которого: обучить участников приёмам эффективного программирования на JS разобраться в принятых решениях в популярных библиотеках, перенять опыт научиться понимать и разбираться в сторонних библиотеках путём реализации своей привыкнуть работать в современных браузерах, не оглядываясь в прошлое понять, что JS - это скриптовый язык, ему некуда торопиться, научиться писать гибкие, а не иллюзорно быстрые (в плане скорости исполнения) решения. Другими словами, мы реализуем собственную библиотеку решений наподобие http://prototype.conio.net/. Проект нисколько не нацелен заменить эти библиотеки, т.к. мы не будем реализовывать весь их функционал. Наоборот, мы будем разбираться, зачем конкретный код был написан и как его эффективно использовать. Тем самым я в первую очередь надеюсь поднять своё мастерство (  ) и обеспечить опытом участников. Сейчас подходящее время для работы - лето. В проект приглашаються все заинтересованные, главным образом, делиться замечаниями и требованиями. Конечно, не все они будут реализованны, если область применения решения очень мала. За основу был взят именно prototype.js, т.к. возносит JS на ступеньку выше. Здесь нет виджетов и готовых компонентов типа календарей и подобного, за ними обращаться к http://dojotoolkit.org/. Вообще, я привык делать "графические примочки" под задачу, а не реализовывать огромный и гибкий компонент под все мыслимые условия. Задача нашей библиотеки: организовать удобные коллекции и работу с ними организовать удобную работу с DOM деревом, внести популярные расширения от ИЕ типа selectNodes (XPATH API, как это видит w3c, жутко громоздко) организовать работу с событиями, здесь же разного рода координаты, платформы и прочее реализовать правильную работу с XmlHttpRequest, не просто ненужную оболочку, а удобное расширение для отправки асинхронных запросов научиться работать с XML/XSLT, а не подгружать вёрстку или форматировать скриптами разного рода динамический контент, утилиты и решения для удобства реализовать процессор форм реализовать оболочку для canvas Всё это скрыто от глаз пользователя, это инструментарий для разработчика. Библиотека должна быть модульной, чтобы не приходилось подгружать все возможные скрипты. Не все разработки, ведущиеся сейчас, будут рассмотрены, в частности: JSON - подзагрузка скриптов как замена XMLHttpRequest - причина в неудобной работе на сервере, и вообще, это чуждо браузеру  графика посредством слоёв на абсолютных позициях, вообще элементы на абсолютных позициях - это просто никогда не используется. Мы будем работать с canvas. Подержка всеми браузерами будет в будущем, мы ведь учимся наперёд, а не делаем готовые решения. анимационные примочки для старых и очень старых браузеров - устарело, не актуально слои абстракции для не W3C-совместимых браузеров - глупо, устарело, не актуально Почему на форуме? Почему нет готового кода? Многое реализованно мной, ещё больше сторонними разработчиками, кода на самом деле много. Этим проектом мы хотим рассмотреть их устройство, но не заменить их,  хотя в итоге библиотека будет самостоятельным продуктом. Главное отличие - мы малое сообщество, мы не сможем поддерживать библиотеку в таком состоянии, что бы она могла быть использоваться в серьёзных проектах. Но! результаты этой библиотеки будут гораздо выше чем у её старших собратьев, т.к. мы будем учиться, а специалист, ИМХО, лучше либы  Сейчас открываю один топ, в будущем будет раздел форума в проектах. Вы можете писать в этой теме что угодно, кроме "О, это круто!" и подобных, не привносящих ничего, постов. В будущем для этого будут отдельные топы, сейчас флуд не нужен  Заинтересованные могут начать проектировать части библиотеки, состовлять требования, рассматривать интересные моменты. Одна просьба: выкладывайте тексты "аттачем" к посту, длинный пост плохо читается. Лицензия: весь код, написанный мной, будет под GPL- или LGPL-лизензией. Код, написанный другими участниками, должен быть под любой http://www.opensource.org/ лицензией. Код может быть использован любым проектом с совместимой лицензией. Почти все лицензии, в том числе и LGPL, позволяют использовать код в коммерческих целях. По моему, только GPL "заразная" (потребует от проекта GPL-совместимой лицензии). Have fun!   (Исправил грам.ошибки и пунктуации. -12345с)

Автор: Се ля ви 20.7.2006, 16:43

Sardar, идея хорошая, но где - спецификация? Subversion-репозиторий? Баг-фиксинг - система? Или ты действительно хочешь написать фреймворк, просто общаясь с людьми в закреплённой теме форума?

Автор: Sardar 20.7.2006, 17:06

Се ля ви, идея появилась 2 дня назад, реализовываться начала 3 часа назад. Всё будет. Главным образом подфорум в проектах и категория в вики. После интегрируемся в SVN форума. Баг-репортинговой системы не будет пока её нет у форума, быть дочерним проектом Винграда и использовать отдельный инструментарий не разумно  Этой темой хочу увидеть отзывы "да! я уже пользовал ... и хотелось бы ...". Другими словами найти заинтересованных лиц и просто тех кто хочеть учиться. К концу недели всё необходимое налажу, начну выкладывать идеи и код.

Автор: Се ля ви 20.7.2006, 18:56

У меня накопилось немало идей, правда не столько для обучающихся новичков, сколько для автоматизации разработки сайтов коллективами дизайн-студий. Я про себя называю этот проект "XSite", время от времяни добавляю к нему новые идеи и жду, пока будет возможность им заняться. Некоторые идеи можно было бы вместить в этот фреймворк.  Тогда можно так: на выхах распарсю свои записи и попытаюсь выудить, что, возможно, было бы вам здесь интересно в контексте этого фреймворка - можно будет обсудить и что-то включить, хотя непосредственного участия и не обещаю - мне бы со своим проектом справиться... Но всё-таки хотелось бы по-раньше увидеть документ с надписью "Спецификация", что бы не было ситуации "кто в лес, кто по дрова", а без него и обсуждать-то по сути нечего, кроме просто выявления желающих чем-нибудь таким заняться.

Автор: smartov 20.7.2006, 19:57

Sardar, уже не раз видел разные фреймворки. Не взял ни один. И у меня подозрение что если не подойти к вопросу интересно, то и этот окажется маловостребованным. Почему не взял ни один:  1) Размер. Мне нужна ерундовина: тултип какой-нибудь, но не простой, а немного навороченный. Я знаю что там кода на пару килобайт, и таскать за собой библиотеки (которые пользователь будет грузить себе) на 50 и более килобайт желания нет абсолютно никакого. Но бывает что библиотека сама по себе реализовывает какой-то сложный функционал. Вывод - надо состряпать js-compressor. Только не глючный  2) Сваленность в кучу. Даже если я все-таки из-за природной лени возьму какую-то библиотеку, то наверняка она не подойдет мне полностью. Вывод - поправить. Удобство копания в коде на >50 Kb ясно сразу. Вывод из первых двух пунктов - код надо разделять. Всенепременно. Модульность - наше главное оружие.  3) IE - стандартизация. Нет, я конечно понимаю, что даже Опера уже вроде принимает document.elementName... или там document.form1.field1 но ведь есть же общепринятые стандарты. getElementById() итд итп. А это уже Code Standards. 4) Ну этот вопрос ты совершенно верно обговорил - делать код работоспособным в IE 5, Opera 7, Firefox 0.99, Nesccape и Safari черт знамо каких версий это неправильнео, утяжеляет работу со скриптом, размер скрипта, а уж копание во всех этих ветках кода - вообще песня. На счет прототайпа - глянул. Идеи неплохи, но реализация..... А кое где и идеи...... Например эта "Dollar function" - это наверное чтобы усложнить жизнь тем, кто будет твой код читать. В общем подсмотреть - могет быть. Равняться - ИМХО нет. А так в общем тоже не прочь был бы поучавствовать. Есть пара вопросиков: Цитата(Sardar @  20.7.2006,  14:16 ) реализовать оболочку для canvas Какой canvas? Цитата(Sardar @  20.7.2006,  14:16 ) организовать удобные коллекции и работу с ними Что за коллекции ты имеешь в виду? (пример)

Автор: Sardar 20.7.2006, 20:01

Цитата(Се ля ви @  20.7.2006,  17:56 ) можно будет обсудить и что-то включить, хотя непосредственного участия и не обещаю - мне бы со своим проектом справиться... Предпологаю что 60%-80% работы будет выполняться мной и я же буду играть роль диктатора  Спецификации будут порождаться из обсуждений в 2-3 working draft'а. На днях напишу первую о коллекциях. Главное что бы спека была краткой. Обсуждение почему так и как пользоваться будут растянутыми конечно. Кстати проект уже получил имя: ViJio   Цитата(Се ля ви @  20.7.2006,  17:56 ) Некоторые идеи можно было бы вместить в этот фреймворк. Пока проект всецело на клиенте. Я даже от JSON отказался лишь бы не было необходимого кода на сервере. Клиентская либа будет работать с любым софтом на сервере, только лишь протокол должен быть описан. К примеру реализуем авторизацию: Процесс: запрос, ответ-сигнатура и приглашение, запрос-логин-сигнатура, ответ-доступ. Идея в том что пароль не отсылаеться текстом , а используеться для кодирования некой рандомной сигнатуры на сервере (она генериться на 5 минут). Таким образом отсылаем логин и закодированную сигнатуру, а сервер проверит логин и раскодирует сигнатуру - совпадение - зашёл. Если не пользоваться аяксом (для логина это лишнее), то имеетм скрипты только на первой странице: 1) процессор формы валидирует форму. Проект гибкой валидации я уже описывал, получилось громоздко, нужно упростить 2) реализация алгоритма кодирования, blowfish например, пройдёмся по шагам, хотя главное здесь сама идея кодировать сигантуру В итоге разработчик дефинирует схему валидации для процессора формы (нечто краткое и проще чем писать свой скрипт под задачу) и пользуеться подлючаемой реализацией blowfish что бы закодировать сигнатуру. Пользователь ни о чём не догадываеться, просто знает что его пароль никогда не отсылаеться в открытом виде и перехватить его практически не возможно. Участники проекта ознакамливаються с базовыми принципами "защиты", выбраным алгоритмом кодирования, обратбокой форм и главное сопутствующими ассоциациями, что помогут при реализации подобного проекта. Се ля ви, выкладывай идеи в этот форум: http://forum.vingrad.ru/index.php?showforum=254 Только не забудь добавить префикс к названию:  "Идея", "Мысли", "FR"  или подобное, пока форум ограничен во вложенности подфорумов, глубже не сделать. Добавлено @ 20:12  Цитата(smartov @  20.7.2006,  18:57 ) И у меня подозрение что если не подойти к вопросу интересно Задача фрейворка заставить пользователей не бояться и главное разбираться в сторонних либах  Цитата(smartov @  20.7.2006,  18:57 ) Размер. Мне нужна ерундовина: тултип какой-нибудь, но не простой, а немного навороченный. Либа всегда будет немного раздутой, но она будет модульной сама по себе, т.е. можно отключить лишнее, а также модульной в сознании участника - ты просто сам сможешь copy-paste точно то, что тебе необходимо. В итоге в будущем у тебя не будет вопросов: "как сделать так что бы ... делал то то?", ты просто откроешь код сторонней либы и подправишь его немного под себя. Отсюда нужно будет научиться не конфликтовать версиями, при обновлениях уметь востановить свои наработки. 3) специфичные для отдельного браузера фишки расматриваться не будут, только W3C стандарты + необходимые пока для ИЕ патчи. Конечно уникальные и удобные вещи как transformNode или selectNodes под ИЕ будут перенесены на другие браузеры, только потому что это удобно, как и XmlHttpRequest был внедрён во все браузеры. JS1.6 рассматриваться пока не будет. Цитата(smartov @  20.7.2006,  18:57 ) Какой canvas? Набери в поиске в основном разделе  Это SVG графика, поддерживаемая лисой(Gecko) и Safari(KTHML). ИЕ в будущем тоже будет (куда денеться, зараза). Задача изучить и писать кратко, а не рисовать графики на сервере. Динамические графики на флеше есть зло, под линухом не у каждого есть флеш. Цитата(smartov @  20.7.2006,  18:57 ) Что за коллекции ты имеешь в виду? (пример)  В точности как в Ruby или prototype.js. Придёться ломать сознание что бы внедрить идею   но именно для этого проект и создан - учить писать эффективно.  Поймёшь чуть позже, я пишу мануал - дизайн докуемнт - спецификацию для коллекций.

Автор: diam 20.7.2006, 21:05

Я так и не понял, по какому принципу будет разрабатываться фреймворк. Так же не понял, чем он должен стать по окончанию написания. Понял только, зачем: не для практических применений, а для понимания процесса . Собственно, вопросы. 1. Будет ли subversion или нечто подобное? 2. Каким ты видишь фреймворк по окончанию разработки? (Нужно иметь представление о конечном результате)

Автор: S.A.P. 20.7.2006, 23:17

Цитата(smartov @  20.7.2006,  19:57 ) Например эта "Dollar function" - это наверное чтобы усложнить жизнь тем, кто будет твой код читать. Я обожаю эту функцию для меня теперь всякие document.getElementById('div1').insertBefore(document.getElementById('child1'), document.getElementById('outer_child')) стали всего - лишь кошмарным сном. К тому - же это делает универсальным вызовы функций в которые могут передаваться как id элементов, так и сами элементы. Слово W3C у меня никогда не ассоциировалось с удачным програмным интерфейсом. Sardar, сейчас уже можно сказать на какие браузеры будет ориентирован этот фреймворк и в каком объёме? в частности интересует IE6 (  ) . Я полагаю от этого и зависит степень геморройности всей затеи. Попутно хочу предложить включить в список фич - кроссбраузерную работу с Selections. Эта тема у меня долго мусолилась, но универсального решения я пока не придумал.

Автор: Zeroglif 21.7.2006, 00:10

Цитата Другими словами найти заинтересованных лиц и просто тех кто хочеть учиться. Я - ЗА! Учиться хочу всегда. Позиция по этому делу приблизительно совпадает с позицией smartov.

Автор: smartov 21.7.2006, 00:28

Цитата(S.A.P. @  20.7.2006,  22:17 ) Я обожаю эту функцию Зато не знакомый с этим человек просто крышей тронется. В общем дело вкуса

Автор: Sardar 21.7.2006, 01:18

Цитата(diam @  20.7.2006,  20:05 ) 1. Будет ли subversion или нечто подобное? Да, создам ветку, SVN форумский (там же все разработки). Цитата(diam @  20.7.2006,  20:05 ) 2. Каким ты видишь фреймворк по окончанию разработки? (Нужно иметь представление о конечном результате)  Набор не сильно связанных между собой функций и модулей длай решения конкретных задачь. Сильная сторона: малый размер, можно собрать под себя. Слабая сторона: это для тех кто разбираеться, набор инструментов, а не готовое на все мыслимые условия решение. Аналогии  Debian linux - есть всё необходимое (20% системы) и редко (никогда) используемое (70% системы) - это большой софт который не просто настроить под конкретную задачу, за то как танк может решить в любых условиях что угодно. Gentoo linux - нет ничего (как в винде) после установки, собираеться всё необходимое под себя, требуеться точно представлять чего ты хочешь, но результат - очень быстрый, заточенный под твои нужды, без лишнего хлама софт. Цитата(S.A.P. @  20.7.2006,  22:17 ) Я обожаю эту функцию для меня теперь всякие... Я тоже, немного громоздкий синтаксис DOM'а мешает. Поверх него хочеться очень легковесную оболочку типа выборки по className (или по условию вообще, т.е. обычный filter для коллекций), выборка непосредственных потомков ноды по тегу (getElementsByTagName пробегает по всем нодам, что требуеться гораздо реже) и т.д. Цитата(S.A.P. @  20.7.2006,  22:17 ) ейчас уже можно сказать на какие браузеры будет ориентирован этот фреймворк и в каком объёме? Нет, мы не пишем (хотя это и не запрещаеться, читай Я не пишу  ) совместимо с древними браузерами. Сейчас веб в быстром темпе развиваеться, ценность разработчика знакомого с новыми возможностями (XHTML strict, SVG, XUL/XAML, XML/XSLT, CSS2/3 etc) гораздо выше чем того кто умеет верстать под HTML3.0  Цитата(S.A.P. @  20.7.2006,  22:17 ) Попутно хочу предложить включить в список фич  Просто создай тему в разделе ViJio в "Наши проекты", название "Идея: работа с Selections" и подробно что хочешь видеть + то как ты представляешь это порешать  Так, тема вижу разрастаеться, постите идеи в раздел http://forum.vingrad.ru/index.php?showforum=254, а я разберусь что склеить/разделить

Автор: Ciber SLasH 23.7.2006, 08:44

Я тоже поучаствавать хотел бы...

Автор: PyS 27.9.2006, 13:30

Цитата(Ciber SLasH @  23.7.2006,  11:44 ) Я тоже поучаствавать хотел бы... smile    я тоже за, но офигенным JS-ком никогда не был  Хотя и я могу пригодиться

Автор: GZep 19.12.2006, 17:15

Sardar, а такие уже готовые проекты, как, например, http://forum.vingrad.ru/topic-53318.html будут автоматически включаться в репозиторий?

Автор: dXdYdZ 2.8.2007, 15:21

На счёт заинтересованных лиц.  Я достаточно долго (примерно 1.5 года) работал с библиотекой Dojo toolkit. Начинал ещё с версии 0.3.1. В процессе работы с данной библиотекой разобрался с большим количеством её возможностей и могу сказать Вам, что всё, что Вы хотите написать, в ней уже есть. Плюс ещё куча возможностей "на все случаи жизни". Кроме этого она обладает чёткой структурой, идеологией и позволяет абстрагироваться (на высоком уровне) от особенностей тех или иных браузеров. Писал интерфейсы. В том числе и разрабатывал свои компоненты (widget-ы) для Dojo. Однако библиотека Dojo вплоть до версии 0.4.х обладает рядом очень существенных для Internet недостатков, а именно: 1) Огромный размер. В Dojo есть встроенные средства сборки проекта в один javaScript - файл и последующего сжатия этого файла, однако даже размер собранного и сжатого файла в срупных проектах составляет от 200 кБ, что очень замедляет первую загрузку интерфейсов при медленном канале. 2) Длительное создание компонент. Сразу после загрузки начинается парсинг DOM, создание компонент, а затем их инициализация (вызов функций satisfyPropertySets, mixInProperties, postMixInProperties, buildRendering, initialize, postInitialize и наконец postCreate компонента). Это время очень заметно, особенно если использовать стандартную идеологию многократной перезагрузки страниц (хотя в основном я использовал Ajax). 3) Потери памяти. После создания и последующего удаления компонент вся память освобождается далеко не всегда. Это можно было бы объяснить моими кривыми руками, однако это происходит и в ихних демках и примерах (в среднем на 1 перезагрузку страницы у меня терялось 1.5 МБ памяти, что, согласитесь, не так уж и мало). Из-за потерь памяти может происходить постепенное замедление работы. Стоит отметить, что в версии 0.9 размер js-файлов значительно уменьшен, однако всё ещё очень значителен по сравнению с размером самой web-страницы. Ещё одним недостатком можно считать отсутствие полноценной поддержки на руском языке. Одно время я писал (в основном переводил) документацию по dojo на русский язык. Перевёл описание нескольких базовых библиотек (порядка 40 страниц текста), однако это описание лишь примерно 5% возможностей данной библиотеки. Я даже делал сайт, посвящённый dojo toolkit, однако это не вызвало никакого интереса со стороны общественности, поэтому в настоящий момент сайт находится в полурабочем (скорее даже в нерабочем) состоянии и сейчас мной не поддерживается. Перечисленные выше недостатки, как правильно заметил smartov, присущи не только библиотеке Dojo toolkit, но и большинству других JavaScript-библиотек. В связи с этим я начал создание своей JavaScript-библиотеки, главными принципами при разработке которой являлись: 1) Простота. Я реализовал только самые необходимые возможности и компоненты. Это позволило сократить размер компонент до минимума. Есть надежда, что это также позволит максимально упростить использование и создание компонент. 2) Минимальный размер. Базовая библиотека сейчас весит 8 кБ, средний размер одного компонента составляет 1-3 кБ. И это в максимально читаемом виде и, следовательно, без сжатия. 3) Максимальное быстродействие. Пользователь не ждёт в течении нескольких секунд инициализации компонент. 4) Поддержка большинства современных браузеров. Сейчас библиотека тестируется в IE 6.0.2900, Mozilla 1.7.12, Opera 9.01 и FireFox 2.0. Планируется тестирование в других современных браузерах. 5) Отсутствие потерь памяти и постепенного замедления работы. Сейчас созданы: Базовые функции, такие как функции парсинга страницы, подключения событий, создания таймеров. установки прозрачности, определение положения курсора и т. д. Имеются в виду функции, которые позволяют абстрагироваться от особенностей различных современных браузеров. Эффекты, такие как плавное изменение размеров, прозрачности, положения и т. д. Причём можно задавать закон изменения в виде любой функции.  Компоненты: Вкладки(tabContainer) mouse Дерево(tree) Меню(gmenu,vmenu) Окно(jwindow) "Гармошка"accordionContainer Область с изменяемым размером Слайдшоу Слайдер(вертикальный и горизонтальный, с одним и несколькими ползунками) Меню с плавно выезжающими картинками(resizeMenu) loadPane Сортируемая таблица Всплывающая подсказка Картинка, которая при наведении мыши меняет свою прозрачность(oImage) Редактор (Размером 5 кБ). В настоящее время создаётся сайт, посвящённый данной библиотеке, производится тестирование и исправление ошибок и недоработок.  В скором времени планируется размещение данного сайта в сети Internet.

Автор: smartov 2.8.2007, 16:50

dXdYdZ, с удовольствием посмотрим блиблиотеку, если все действительно так здорово и если библиотека будет распространятся под GPL  или хотя бы freeware

Автор: vasac 3.8.2007, 12:20

dXdYdZ, к чему вы все это да еще и в чужой теме? Сделаете — кладите ссылки, а "скоро на первом канале" не надо.

Автор: dXdYdZ 4.8.2007, 22:07

Ок. Просто хотелось узнать Ваше мнение на этот счёт.

Автор: Zeroglif 4.8.2007, 23:27

Цитата(dXdYdZ @  2.8.2007,  16:21 ) производится тестирование и исправление ошибок и недоработок Цитата(dXdYdZ @  4.8.2007,  23:07 ) Просто хотелось узнать Ваше мнение на этот счёт. Можно было бы какие-то модули-кусочки тестировать/обсуждать прямо тут, критика не задержится   , а это на пользу...

Автор: dXdYdZ 7.8.2007, 01:33

Как только допишу хоть до какого - нибудь логического завершения, тогда выложу в интернет и можно будет обсуждать.

Автор: dXdYdZ 18.8.2007, 01:15

Дописал демо-версию. Смотрите http://forum.vingrad.ru/forum/topic-168598/kw-javascript-dom-widget-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82-%D1%8D%D1%84%D1%84%D0%B5%D0%BA%D1%82%D1%8B.html.

Автор: cruelangel 12.9.2007, 19:49

"библиотека для обучения"... а учить писать кроссбраузерный код, значит, не надо?

Автор: dXdYdZ 12.9.2007, 23:22

Протестировано в Mozilla 1.7.12, FireFox 2.0, Opera 9.01, IE6.

Автор: cruelangel 23.9.2007, 22:52

эт я не тебе писал

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)